DEV Community

Remy Sharp
Remy Sharp

Posted on • Originally published at remysharp.com on

Toggle light and dark

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.

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

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.

Originally published on Remy Sharp's b:log

Top comments (0)