Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark mode to ecosystem theme! #575

Open
Eric-Arellano opened this issue Nov 10, 2023 · 0 comments
Open

Add dark mode to ecosystem theme! #575

Eric-Arellano opened this issue Nov 10, 2023 · 0 comments
Assignees

Comments

@Eric-Arellano
Copy link
Collaborator

Eric-Arellano commented Nov 10, 2023

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

  1. Replace this
    {#- QISKIT CHANGE: start. Force light mode. -#}
    document.body.dataset.theme = "light";
    {#- QISKIT CHANGE: end. -#}

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

  1. Display the theme toggle container

// Disable dark mode for now, but probably re-enable in
// https://github.com/Qiskit/qiskit_sphinx_theme/issues/575.
.theme-toggle-container {
display: none;
}

  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.

@kevinsung kevinsung self-assigned this May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants