DEV Community

Jonas Brømsø
Jonas Brømsø

Posted on

Dark and Light Mode for the non-standard tools

#macos #tools #appearance

At work we recently moved. In the office we have automated blinds, these can be manually overwritten, so from my chair, they kind of live their own life.

My solution is to switch appearance on macOS depending on the amount of light in the room.

Most of the apps support switching between light and dark mode and follow the system settings. Many websites also do this and I even wrote the user story to get one of the products I manage to support this.

A few applications however do need a little bit of help. So here I are a few I recently tweaked so they would still be usable in light mode - after all dark mode is the default, we all can agree on that.

Do note I use macOS, but the material below should cover Windows as well - well untested from my side, but enough to get you going.

Warp.app

Warp can follow the system settings, you just have to flip a switch under appearance, I just mention it here because I think it is a great terminal emulator and especially the terminal in dark mode is quite sensitive

Ghostty

You can specify light and dark themes for the Ghostty terminal emulator in the configuration file.

theme = dark:nord,light:Builtin Solarized Light
Enter fullscreen mode Exit fullscreen mode

From the Ghostty documentation:

When separate light and dark themes are specified, Ghostty will automatically switch between the light and dark theme based on the system appearance.

To see available themes, run the following command:

ghostty +list-themes
Enter fullscreen mode Exit fullscreen mode

Pick some cool looking themes for both modes and you are good to go. Well remember to reload the configuration.

Zed

In the Zed configuration file, you can specify a light and dark theme to use for the editor. The themes are specified in the theme section of the configuration file.

In addition you can set the mode to: system to follow the system setting.

{
  "theme": {
    "mode": "system",
    "light": "One Light",
    "dark": "One Dark"
  }
}
Enter fullscreen mode Exit fullscreen mode

To find some great themes check out:

And check the Zed Documentation on themes

VSCode

For VSCode you can also specify a light and dark theme and you can enable that the editor should follow the system settings.

Dark mode:

"workbench.preferredDarkColorTheme": "Solarized Dark"
Enter fullscreen mode Exit fullscreen mode

Light mode:

"workbench.preferredLightColorTheme": "Solarized Light"
Enter fullscreen mode Exit fullscreen mode

And finally enabling following the system setting, which can of course also be disbled.

"window.autoDetectColorScheme": true
Enter fullscreen mode Exit fullscreen mode

Wrap Up

All of the above tips are lifted from my TIL collection.

One more thing before you go.

Switching back and forth between light and dark mode has to be as fast as the blinds or my colleagues opinions on the matter, so being able to do this from the command line is a must.

Luckily I found a brief blog post on how to switch to and from dark mode from the command line.

osascript -e 'tell app "System Events" to tell appearance preferences to set dark mode to not dark mode'
Enter fullscreen mode Exit fullscreen mode

The setting is a boolean so it works both ways, as a light switch practically.

This is one those small things, where open menus a click around and when you finally get around to doing something about, you do not understand why you did not do it earlier - the dishwasher acquisition syndrome.

If you have any other tools worth mentioning please comment below, I just took the obvious ones I use all the time, but I am sure there are more and I will add to my TIL collection as I go along.

Top comments (0)