qiskit_sphinx_theme
qiskit_sphinx_theme copied to clipboard
Add dark mode to ecosystem theme!
We can do this now that we're removing the qiskit
theme.
- 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
- 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
-
Find Carbon icons for the theme toggle by following the instructions in
_icons.scss
. There are dark, light, and "auto" icons in use -
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 toonly-light
andonly-dark
like in https://pradyunsg.me/furo/reference/images/#different-images-for-dark-light-mode -
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.