One Tip a Week: VS Code Native Auto Theme Switcher

This week’s tip of the week is a set of VS Code settings that allows you to switch between light and dark themes automatically based on the preferred colour scheme that your operating system (OS) dictates. All you need to do is enable the Window: Auto Detect Color Scheme setting and you are good to go. Now when your operating system switches themes, based on time of day, the same goes for VS Code.

In the animation below, it’s after 5pm my time so the OS is using a dark theme. If I enable the Window: Auto Detect Color Scheme, notice that it switches to a dark theme automatically.

This works in Cursor and other forks of VS Code as well as anywhere your VS Code settings synchronize, e.g. GitHub Codespaces.

You can also configure this via the user settings JSON.

    "workbench.preferredDarkColorTheme": "Default Light Modern",
    "workbench.preferredHighContrastColorTheme": "Night Owl",
    "workbench.preferredHighContrastLightColorTheme": "Night Owl Light",
    "workbench.preferredLightColorTheme": "Night Owl Light",
    "window.autoDetectColorScheme": true,

Speaking of themes, I’m a big fan of Sarah Drasner’s themes Fortnite and Night Owl. Check ‘em out!

That’s it! Short and sweet. Until the next one!