Set up a Dark theme

[12rambau]

Description

I think it would be super usefull as more and more tools on the web are starting to use this light/dark theme to improve UX.

In this PR I tried to create a dark theme (there is still work to do on the variables, some are still set directly in the css).
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.

Here is a GIF to show how it works:

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

2 methods for switching from a theme to another sounds promising to me :
1/ using a different set of stylesheet
2/ add a class (dark) to the root element and write twice all the colors and font variables

I decided to go for the first one as it allows eventually to go for more than 2 theme but I you prefer to keep it simple with only 1 css file I can port back everything to theme.css

coloring

For the coloring I tried to remove all the colors that were defined in the scss and use variables instead, bringing them all back to the theme.css file. I did a first draft, I'm happy to hear what works and what doesn't according to you (note that I'll continue working on it in the next days).

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 Native and default for my example
Also I remove the shadows in the dark theme for obvious reasons

shadows

everything that have shadow have been lightened from the dark background to reproduce the depth without the issue of white shadows

Todo

• add a parameter in the conf.py for people that want to fix the theme (choice between 'dark', 'light' for the init theme and a boolean enble_change.
• Fix the colors (lots of them are still missing and I think some cleanup will be needed at the end
• jupyter-sphinx remains white and I don't think I can do anything about it
• create a second set of logo / image to jump from one to another

PS

sorry for the commit duplication I stupidely coded my previous PR on my fork master branch (lucky me it as been accepted)

[choldgraf]

agreed this would be really great - did you happen to see #273 or take a look at all?

[12rambau]

agreed this would be really great - did you happen to see #273 or take a look at all?

I actually did but that was done too far away from the current master branch so I decided to start back from there.

Main differences are the following:

• the change of theme is piloted from a specific div instead of the specific stylesheet in my implementation. I think that it's easier to customize so I will fallback to it by adding "dark" class in html.
• work was already done to pilot the colors with variables, I'm doing the same thing, I just need to hunt down the few colors that are still hard coded.
• the change of theme is [wip] demo day/night with radios #273 is saved in localvariables meaning that if you have selected dark theme, when you come back to the site dark theme is preserved. I don't know how make it compatible with theme options.
• I wrote a full css day&night btn (that was fun but maybe useless)

[choldgraf]

Sounds good - well ping when you're ready for somebody to take a look - the demo looked pretty nice to me! A couple quick thoughts:

• We might want to put some of these CSS files into a sub-folder since they seem to be vendored (e.g., from pygments) rather than created by us
• it would definitely be important to persist night mode across pages, what's the major blocker there?
• Might as well put the button in a standalone component so that people could re-use it elsewhere
• the button is cool!

[damianavila]

Closing this one in favor of #540