Add dark theme and theme switcher #540
Conversation
|
I have corrected the issue with the documentation, I'll wait for commentsbefore modifying the tests (I've changed the navbar structure, making the test failing) |
There was a problem hiding this comment.
Sorry for the slow turnaround here - I am pretty new to SCSS light/dark theming as well, so needed some time to understand what's going on.
I think that this PR is a nice step in the right direction. There are a few things that we could clean up and simplify, so I left comments throughout with some suggestions and questions. Happy to keep iterating on this.
In my opinion, we should assume that the theme coloring will take a while to get right, and we should treat this as an experimental feature for the foreseeable future, with no promises to downstream users of stability. That will give us a bit more flexibility to merge and iterate.
src/pydata_sphinx_theme/theme/pydata_sphinx_theme/_templates/navbar-nav.html
Outdated
Show resolved
Hide resolved
src/pydata_sphinx_theme/theme/pydata_sphinx_theme/_templates/navbar-nav.html
Outdated
Show resolved
Hide resolved
Co-authored-by: Chris Holdgraf <choldgraf@gmail.com>
Co-authored-by: Chris Holdgraf <choldgraf@gmail.com>
done, and now all the tests are passing ! |
|
@12rambau I did a quick Lighthouse accessibility audit and found a few things that needed tweaking. Make a PR for your fork here: https://github.com/sepal-contrib/pydata-sphinx-theme/pull/2 In my opinion, once we get the last remaining accessibility things cleared up, we should merge in this PR, and iterate on the colors as-needed in the future. One thing I'm feeling as I just went through the codebase (and echoing @pradyunsg's thoughts): we have way too many custom-defined color variables. In a subsequent PR, I think we should just define a handful of colors (e.g. "base", "primary", "secondary", etc, and just re-use those throughout). But I think that's for another PR, not this one :-) |
Cleaning up the colors for accessibility
|
I just want to say thanks for the amazing work on this folks! |
|
@martinRenou if you have other thoughts on how we can improve the dark mode variables / structures / etc please do chime in on follow up PRs or issues! I know you have recently played around with dark modes yourself ;-) |
Co-authored-by: Damian Avila <damianavila82@yahoo.com.ar>
There was a problem hiding this comment.
This is awesome work from @12rambau, thanks for your patience with us!
Approving and merging right away!
|
wohoo! many thanks @12rambau |
Ok so as mentioned in #521 I'm not able to merge the fork I made earlier last year #501 with the new stb method. no problem I redo everything starting from a fresh fork in one of my organization.
description
In this PR I tried to create a dark theme. This dark theme can be triggered by the user preferences and/or using the little btn in the navbar. The user defined value has the priority over the system.
design discussion
That's the first time I'm working on CSS so I followed all the recomendation from https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#using-php-cookies.
method
With the
index.jsI can change thedata-themeanddata-modeof the<body>tag.This is changing the behaviour of the css. Every variable is prefixed with a
body[data-theme="dark"]to change every time the button is pressed.coloring
For the coloring I tried to remove all the colors that were defined in the
.scssand use variables instead, bringing them all back from the theme.css file to a_color.sccsfile. I did a first draft, I'm happy to hear what works and what doesn't according to you.As a rule of thumb I understand that the colors need to be desaturated so I used this tool : https://mdigi.tools/desaturate-color/#b3571b
pygment
Pygment is an issue as to create 2 themes I need to fix the Pygment css. I used 2 redefined theme (tango for light and native for dark) and overwrite the pygment css file accordingly. The user loose the capacity to change the pygment theming.
shadows
everything that have shadow have been lightened from the dark background to reproduce the depth without the issue of white shadows
update since #501
Preview changes
Readthedocs preview is here: https://pydata-sphinx-theme--540.org.readthedocs.build/en/540/