Night Mode Button

I know there is a dark theme and you can easily change it in the options menu, but in my opinion, adding a dark mode theme button, is more accessible, I constantly find myself switching to dark mode in most of the programs I use at night.

An implementation like this would be perfect!

Thoughts? @bedwardly-down @PackElend @laurent


It's a good idea but since there are multiple dark and light themes, we'd have to define what is the dark one and what is the light one. I think it goes back to the feature that was discussed there:

For night mode switch, you'd only need theme.preferedDarkTheme and theme.preferedLightTheme settings for now.

1 Like

what I was thinking was having a predefined complementary theme for each.

  • Light ⟷ Dark

  • Dark ⟷ Light

  • Solarised Light ⟷ Solarised dark

  • Nord ⟶ Light

  • Dracula ⟶ Light

We can use light for Nord and Dracula but since it not truly complementary we can disable(hide from the toolbar?) this button for those themes.
This is how I would try to go about it :wink:

1 Like

Hmm, this might not work as intended. e.g. I use a userstyle.css and userchrome.css for the Dark theme. If I were to switch to the light theme, a lot of the text would be unreadable.

1 Like

In general userstyles should not stop us from enhancing the app because there’s many things we can break in userstyle when we improve the app.

I’m thinking of making this very clear in doc and config screen: something like:

userstyle.css and chrome.css are provided for convenience but they are advanced settings, and defined styles may break from one version to the next. If you want to use them, know that it might require regular development work from you to keep them working.


I have one doubt, As you mentioned here:

When Auto Detect option is unchecked, preferred theme options won't be visible then how we can be able to set preferred themes for Night Mode button?
I think preferred theme options should be visible and Auto Detect theme option should also set theme according to preferred themes.

  • Auto Detect [ :heavy_check_mark:] -> Detected Dark theme ? => Theme: preferredDarkTheme

  • Auto Detect [ :heavy_check_mark:] -> Detected Light theme ? => Theme: preferredLightTheme

  • Auto Detect [ :heavy_check_mark:] -> Hide Theme drop down

  • Auto Detect [ :heavy_multiplication_x:] -> Visible Theme drop down

  • Night Mode button should toggle between preferred theme options

Here is the demo video of what I implemented in my first PR.

You’re right, night mode wasn’t discussed when this spec was written, so it should be changed to take it into account.

  • Preferred dark theme should always be visible
  • Preferred light theme should always be visible
  • If auto-detect theme is “on” - hide theme dropdown
  • If auto-detect theme is “off” - show theme dropdown
1 Like

Same here. This would be an issue for anyone who customizes the themes (most of us.)

Do we need to show the theme dropdown at all?

The night/day button would toggle the theme between preferred light and dark themes. Auto-detect would use the system info to decide which to use. So the theme setting itself could remain hidden from the user, as they would already have everything they need to configure.

In fact showing it and allowing the user to set it might be confusing for the user. If they set the theme dropdown, then later press the night/day button, the theme they set would be clobbered. When they go back to see the setting they had made, they will find it changed!

1 Like

Continuing the GitHub discussion from PR.

I was looking at the other apps which uses auto-detect feature and I found GitHub Desktop app here is how they implemented showing the demo in GIF:

Here I observed that on enabling auto-detect option theme set to system theme (Dark in my case) and manually changing the theme automatically disabled the auto-detect option.

This is much simpler, and doesn’t need a new setting. Perhaps I misunderstand the feature, is there a flaw in my suggestion?

I agree with you about removing theme option, based on your suggestions I have some changes in mind I would like to share:

  • For auto-detect enabled
    • Theme should match with the system theme can be DARK and LIGHT only
    • Hide preferred theme options
    • Night Mode button should toggle between DARK and LIGHT theme only
  • For auto-detect disabled
    • Show preferred theme options
    • Night Mode button should toggle between preferred Dark/Light themes

Let’s wait for community input may someone shade a light on this issue

I see what you mean but I feel it complicates the UI for users who don't really need the auto-switching. Now, you can go to the setting, set the theme and be done with it. If we only offer light/dark theme dropdowns, it's a bit irrelevant and confusing if you don't need light/dark theme distinction and only care to set the theme.

Based on the gifs that Kowalski posted that behaviour sounds good.

1 Like

Agree, especially if the night/day toggle button is eliminated.

There have been plenty of combinations discussed, which is the current preferred spec? Perhaps:

  • When auto-detect is enabled

    • “Theme” dropdown hidden
    • “Preferred dark theme” visible
    • “Preferred light theme” visible
  • When auto-detect disabled

    • “Theme” dropdown visible
    • “Preferred dark theme” hidden
    • “Preferred light theme” hidden
  • While auto-detect is enabled, the theme setting is overwritten with applicable light or dark theme.

  • No night/day toggle button


I’ve suggestion that why we need to show two dropdown if only one is taken into account. i.e on enabling auto-detect option we should only show one dropdown based on detected system theme like if detected system theme is Dark then ‘theme’ dropdown should be hidden and Preferred Dark Theme dropdown should be visible so that way user can easily understand what theme is detected and UI will also looks clear.

I agree, I think we can implement exactly this behaviour.

okay then I’ll implement in that way.