Respect `prefers-color-scheme` of the underlying OS

[jasikpark]

Check for existing issues

• [X] Completed

Describe the feature

VSCode and many other apps support setting two different themes for light mode and dark mode, while respecting the underlying preference of the OS - this allows things like having dark mode at night and light mode during the day.

It'd be great to have support for this!

If applicable, add mockups / screenshots to help present your vision of the feature

// Zed settings
//
// For information on how to configure Zed, see the Zed
// documentation: https://zed.dev/docs/configuring-zed
//
// To see all of Zed's default settings without changing your
// custom settings, run the `open default settings` command
// from the command palette or from `Zed` application menu.
{
    "theme": {
        "light": "One Light",
        "dark": "One Dark"
    },
    // "buffer_font_size": 15,
    // "language_overrides": {
    //     "JavaScript": {
    //         "format_on_save": {
    //             "external": {
    //                 "command": "npx prettier",
    //                 "arguments": [
    //                     "--stdin-filepath",
    //                     "{buffer_path}"
    //                 ]
    //             }
    //         }
    //     }
    // }
}

[iamnbutler]

This likely will be an option as we update themes. Would you specifically be wanting to use two different themes across light and dark appearances, or you just want it to use the correct mode if you set it to "system"?

[jasikpark]

I would want to be able to set what theme respecting light and dark mode would trigger, plus maybe manually toggling between "light, dark, respect os" as theming options

[mmnathan]

Something like this? That would be quite nice.

"theme": {
    "mode": "system"
    "light": "One Light",
    "dark": "One Dark"
},

or as TS types:

type ThemeName = string

type ThemeMode = 'light' | 'dark' | 'system'

type ThemeSetting = ThemeName | {
  mode?: ThemeMode
  light?: ThemeName
  dark?: ThemeName
}

[jasikpark]

Yep! though in my head the presence of light and dark settings would imply mode: system, being explicit is probably good

[dangh]

Would setting both keys to the same value sufficient?

[gregwebs]

I would tackle this in 2 phases and make a separate ticket for the first (manual toggle):

1. support toggle between preferred light/dark themes (there are various ways this might be broken down depending on what you have in mind for convenience of working with themes
2. support automatic switching between preferred light and dark themes based on system settings

The tools that do the second are magical. But just doing the first is fine. VSCode doesn't seem to be doing it automatically, but I just type Ctrl+P, '>', 't', Enter. Because it shows the most recently used commands, this is quick and I could even down-arrow to it instead of typing 't'. I would imagine that automatic switching is going to break on some platforms for some users or some users. Also, there are times where one may want to toggle on a different timing from the system schedule, particularly as seasons change (this may indicate the user not knowing how to properly set the system schedule, but that's the way things might be).

Prior art

NotesNook auto switches but also has a button available to manually toggle (look for the moon in the lower left):

[MatthiasGrandl]

I added this feature in my own GPUI app Loungy with the help of the dark-light crate. It works great although sadly it doesn't pick up system theme changes due to a bug on MacOS.

[texastoland]

VSCode doesn't seem to be doing it automatically

It has worked for years with the following settings keys:

• window.autoDetectColorScheme
• window.preferredDarkColorTheme
• window.preferredLightColorTheme

I checked Alacritty and Rio but they both use winit's (complex) implementation (Mac impl.).

[maxdeviant]

This is supported in Zed with the changes in https://github.com/zed-industries/zed/pull/7404.

[texastoland]

Wooow confirmed working 👏🏼

"theme": {
  "light": "Ayu Light",
  "dark": "Ayu Dark"
},

[gregwebs]

I can confirm it works as well after updating Zed.

[maxdeviant]

Closing this issue since the feature is available in Zed 0.122.2.