search

Qiskit / qiskit_sphinx_theme

A Sphinx theme and documentation guidelines for Qiskit and Qiskit Ecosystem projects
https://qisk.it/docs-guide
Apache License 2.0
14 stars 29 forks source link

Add dark mode to ecosystem theme! #575

Closed Eric-Arellano closed 2 weeks ago

Eric-Arellano commented 8 months ago

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.