111

MacOS now supports both "Light" and "Dark" mode (found in "System Preferences", "General", "Appearance").

How can I make VS Code automatically change its theme to be light or dark, when I change my MacOS "Appearance"?

Improve this question
3
  • This is a vscode question, not an Apple question.
    – ThaJay
    Mar 31, 2021 at 16:34
  • @ThaJay This question is using software on Apple hardware, so it's perfectly on-topic.
    – nohillside ♦
    Apr 1, 2021 at 15:12
  • 1
    This is the same across all OS that have light and dark mode so it's purely about vscode. I used this answer on my Windows install.
    – ThaJay
    Apr 6, 2021 at 14:01

3 Answers 3

Reset to default
154
  1. Enable Auto Detect (Search in Settings: window.autoDetectColorScheme)
  2. Customize Color Themes (Search in Settings: workbench preferred color theme)

More Detail (Visual Studio Code Themes):

Auto switch based on OS color scheme Windows and macOS support light and dark color schemes. There is a setting, window.autoDetectColorScheme, that instructs VS Code to listen to changes to the OS's color scheme and switch to a matching theme accordingly.

To customize the themes that are used when a color scheme changes, you can set the preferred light, dark, and high contrast themes with the settings:

workbench.preferredLightColorTheme - defaults to "Default Light+" workbench.preferredDarkColorTheme - defaults to "Default Dark+" workbench.preferredHighContrastColorTheme - defaults to "Default High Contrast" workbench.preferredHighContrastLightColorTheme - defaults to "Default High Contrast Light"

Improve this answer
2
  • And is it possible to manually override this setting? Like having a switch/command that switches to the preferred dark theme, even though my system setting is light.
    – LinusGeffarth
    Mar 18, 2020 at 11:25
  • @LinusGeffarth I just manually make the switch (instructions below - quite easy!). Haven’t looked for a way to switch based on the workbench setting. code.visualstudio.com/docs/getstarted/themes
    – JBallin
    Mar 18, 2020 at 18:44
53

Go to settings and search for theme -> Auto Detect Color Scheme

enter image description here

Improve this answer
1
  • Removed. Will you edit yours, @vdegenne?
    – Joaquin Iurchuk
    Nov 7 at 21:56
0

I also found that property "workbench.colorTheme" is not well working with auto theme switcher. So I added it to ignore and now all works like a charm.

  "workbench.colorTheme": "GitHub Light",
  "settingsSync.ignoredSettings": [
    "workbench.colorTheme"
  ],
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .