qiskit_sphinx_theme icon indicating copy to clipboard operation
qiskit_sphinx_theme copied to clipboard

Add dark mode to ecosystem theme!

Open Eric-Arellano opened this issue 9 months ago • 0 comments

We can do this now that we're removing the qiskit theme.

  1. Replace this https://github.com/Qiskit/qiskit_sphinx_theme/blob/4606dfde7fcb0d7f65b7cc83f6c56f05aebda9fb/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/base.html#L98-L100

with https://github.com/pradyunsg/furo/blob/035b27651632e20fec2277e7398cdd00dc63a73f/src/furo/theme/furo/base.html#L85

  1. Display the theme toggle container

https://github.com/Qiskit/qiskit_sphinx_theme/blob/4606dfde7fcb0d7f65b7cc83f6c56f05aebda9fb/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss#L31-L35

  1. Find Carbon icons for the theme toggle by following the instructions in _icons.scss. There are dark, light, and "auto" icons in use

  2. Add a dark mode variant for the Qiskit Ecosystem logo, which gets set up in sidebar_brand.html. You'll need to conditionally load the image based on the theme, probably by setting the CSS class to only-light and only-dark like in https://pradyunsg.me/furo/reference/images/#different-images-for-dark-light-mode

  3. Audit the example docs site to see if there is anything that looks bad in dark mode. Use tox -e docs and see contributing.md.

Eric-Arellano avatar Nov 10 '23 14:11 Eric-Arellano