Refs #1064 -- Add dark mode

[sabderemane]

I have done something for the issue #1064 :)

Looks like that :

UPDATE:

• Review accessibility colors for dark theme
• Add CSS variables for each colors to make dark / light theme in CSS
• Add switch button to toggle theme (it takes system preferences by default and override it if the button is clicked)
• Change icon switch according Django admin switch based on Furo icon theme

[pauloxnet]

Thanks for working on this issue. Can you check the accessibility of colors in the dark version? It seems that some light text on a dark background has a low contrast level.

[sabderemane]

Yes @pauloxnet , I didn't check all elements for the accessibility, I will do that and update the PR

[davidism]

This is cool!

Having more (less?) contrast is important to readability. I find it really hard to read white on black text, but much easier if they're light and dark greys instead. That said, I strongly prefer light mode for docs, so this needs to have a switch that can override whatever is detected from OS/browser preference.

[sabderemane]

Thank you! I understand, I will add button in the header for that.

[dryan]

I'm happy to help with a toggle switch if needed!

[sabderemane]

Hi folks, I finally finish it 😄 I updated the PR and the description. Happy to have feedbacks.

[pauloxnet]

Hi folks, I finally finish it smile I updated the PR and the description. Happy to have feedbacks.

Thank, it seems great. Can you add a screenshot of the documentation search result page ?

[sabderemane]

Sure @pauloxnet

[pauloxnet]

Thank you @sabderemane

I have only two personal final thoughts:

• I don't know if the word "dark mode" is redundant, I would leave only "dark" and "light" or remove it completely
• I would make sure that the toggle button is always visible when viewed on mobile, therefore outside the hamburger icon menu

[sabderemane]

Thank you for the feedback @pauloxnet

I see, first of all, I put the button only, I found it weird. We don't know really what is it about except by clicking on it.

May be like that it's better, what do you think ? I have to think of other options for the button and make proposal.

I would make sure that the toggle button is always visible when viewed on mobile, therefore outside the hamburger icon menu

Yes good point, actually it's on the menu but I will see to make it outside of the navigation.

[matthiask]

I have to think of other options for the button and make proposal.

I really like the way it's done in the Furo sphinx theme: https://pradyunsg.me/furo/ (Sorry for the borderline bikeshedding)