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.

UK EVENTAttend ffconf.org 2024

The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!

Toggle theme in MacOS

The simplest of the methods, I use an Alfred command: theme-dark-mode-switcher.

Then I can hit cmd+space and "toggle" to switch mode quickly. Like I said, simple.

Alfred toggle

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:

Light and dark theme selection in VS Code

Below is my original method

For this, I use an extension called (unsurprisingly) "Toggle" by Peng Lv. 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 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 (dark) and Atom One Light - both can be install via extensions in VS Code.

Toggle theme in iTerm2

Perhaps the trickiest, but definitely the most rewarding. I use a project called 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.

My two terminal themes

To enable this I followed the install directions for base16-shell and then from there I was able to select my themes.

I use onedark (preview) and atelier-forest-light (preview) 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 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 key

What 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.