There’s odd excitement around dark themes these days, but I find that being able to switch between a light and dark theme to be really useful for working conditions (i.e. bright light or in the evenings).
I’ve got shortcuts to toggle my: OS, Visual Studio Code and iTerm2.
[](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
Toggle theme in MacOS[](#toggle-theme-in-macos)
The simplest of the methods, I use an Alfred command: [theme-dark-mode-switcher](https://www.alfredforum.com/topic/11561-macos-mojave-theme-dark-mode-switcher/).
Then I can hit cmd+space and "toggle" to switch mode quickly. Like I said, simple.
Toggle theme in VS Code[](#toggle-theme-in-vs-code)
Updated 2021-06-21
Auto theme switching is now part of VS Code out of the box. It took me a little while to find it, but once it’s in place you can forget about it.
First is the window.autoDetectColorScheme needs to be set to true, then you select a theme for workbench.preferredLightColorTheme and workbench.preferredDarkColorTheme:
Below is my original method
For this, I use an extension called (unsurprisingly) ["Toggle" by Peng Lv](https://marketplace.visualstudio.com/items?itemName=rebornix.toggle). Once Toggle is installed, I’ve got the command set up with the following keyboard bindings settings:
[
{
"key": "shift+alt+5",
"command": "toggle",
"when": "editorTextFocus",
"args": {
"id": "theme",
"value": [
{ "workbench.colorTheme": "Atom One Light" },
{ "workbench.colorTheme": "Nord" }
]
}
}
]To actually add this setting, you have to go to the [Advanced Customisation](https://code.visualstudio.com/docs/getstarted/keybindings#_advanced-customization) keyboard settings in VS Code (the link shows you what icon to click, it’s far from obvious).
Also from the JSON above, the themes I’m toggling between are [Nord](https://marketplace.visualstudio.com/items?itemName=arcticicestudio.nord-visual-studio-code) (dark) and [Atom One Light](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onelight) - both can be install via extensions in VS Code.
Toggle theme in iTerm2[](#toggle-theme-in-iterm2)
Perhaps the trickiest, but definitely the most rewarding. I use a project called [base16](https://github.com/chriskempson/base16/) and two shell aliases that let me quickly switch between the themes on the command line. I don’t think the light theme is perfect, but it’s good enough for teaching.
To enable this I followed the install directions for [base16-shell](https://github.com/chriskempson/base16-shell) and then from there I was able to select my themes.
I use [onedark](https://github.com/tilal6991/base16-onedark-scheme) ([preview](https://base16.netlify.com/previews/base16-onedark.html)) and [atelier-forest-light](https://github.com/atelierbram/base16-atelier-schemes) ([preview](https://base16.netlify.com/previews/base16-atelier-forest-light.html)) as my dark and light pairing, and I can switch between them using aliases:
$ alias light="base16_atelier-forest-light"
$ alias dark="base16_onedark"I put all the base16 themes up on glitch to [quickly preview](https://base16.netlify.com/) or you can preview theme all in the terminal using this command:
$ for f in ~/.config/base16-shell/scripts/*;
sh $f && \ # run theme
printf $f && \ # print the name
read; # wait for user to press keyWhat would be a nice bonus would be if my themes switched automatically after a predefined number of hours after sunset (like my phone does), but I’ll leave that for another day.
Published 27-Jan 2020 under #web. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/toggle-light-and-dark.md)
👍 13 likes
[](](](](](](](https://twitter.com/tollmanz)