Add "dark mode" option in the settings

[WesleyBranton]

The automatic dark mode is not working on all browsers. We should include a dark mode toggle option on the preferences page to allow the user to select dark mode.

[dannycolin]

It should because prefers-color-scheme is supported on Firefox 67+. Do you have more details about the issue (OS, FF version, etc)?

[WesleyBranton]

I can't get it to work on Windows 10 release or beta Firefox. It might just be easier to add a dark mode option in the settings.

[dannycolin]

Maybe but it'd still be interesting to find the problem. Have you set Windows to dark mode and also Firefox to dark mode (not the default theme)?

[jhonatasrm]

It should because prefers-color-scheme is supported on Firefox 67+. Do you have more details about the issue (OS, FF version, etc)?

I got feedback from a user with the OS: OS X El Capitan and Firefox version 71

[jhonatasrm]

Maybe but it'd still be interesting to find the problem. Have you set Windows to dark mode and also Firefox to dark mode (not the default theme)?

I think is a good option use a button to select the theme, this gives the user more options... 🤔

[dannycolin]

I think is a good option use a button to select the theme, this gives the user more options

I'm ok with a <select> option containing "auto-detect" (can be hidden while we find the issue), "dark" amd "light". Sounds good to you? :)

[WesleyBranton]

Maybe but it'd still be interesting to find the problem. Have you set Windows to dark mode and also Firefox to dark mode (not the default theme)?

My OS is not set to dark mode, but the Firefox theme is. When I set Windows to dark mode, it works. I would think that the dark mode would be set by the Firefox theme, but maybe I'm wrong.

[dannycolin]

I would think that the dark mode would be set by the Firefox theme, but maybe I'm wrong.

Ah that's why. prefers-color-scheme specification follows the OS preferences. So currently, it's not a bug but a feature :P. However, there's a bugreport upstream to make it respect the Firefox theme instead of the OS one. (See https://bugzilla.mozilla.org/show_bug.cgi?id=1529323).

[dannycolin]

Posting some info here to remember it later this week:

• It's possible to detect the prefers-color-scheme of the user via window.matchMedia
• Instead of using @media (prefers-color-scheme: dark) in css/app.css, we could set a class containing the dark or light CSS custom properties to the :root or body element of the page.
• The option should be a <select> with 3 values:
  • auto-detect: we honor the OS prefers-color-scheme value
  • dark: force the dark theme
  • light: force the light theme

[dannycolin]

Hey @WesleyBranton @jhonatasrm,

I've pushed a branch called issue-108. There's a few styling issue to fix (e.g wrong arrow icon color) but the option to choose a light, dark or auto-detect theme works. Suggestions, comments are welcomed :).

[jhonatasrm]

It is getting amazing! I think could be a good idea, do a reload of the tab after select the theme. 🙂

[dannycolin]

It is getting amazing! I think could be a good idea, do a reload of the tab after select the theme.

Done. It should now reload everytime you change the pref.