Use a keyboard shortcut to quickly toggle light and dark mode on MacOs.

When developing a site with a light and dark modes, it gets bothersome to change your settings to see results.

Especially if you're testing javascript that listens for the change in user preferences — or if you've animated the change between modes.

I work on a MacBook and would open settings to do this, i'd miss the css transitions. It was annoying.

But there's a fix for this. You can set up a keyboard shortcut to toggle between light and dark mode with automator, here's how:

Add workflow to Automator #

  1. Open automator
  2. Click file ▸ new
  3. Select quick action ▸ choose
  4. Select "workflow receives current no input in any application" from the dropdown options.
  5. In the long list of actions on the left find Run AppleScript. Then Double-Click to add it to your workflow.
  6. Paste the following commands in your workflow:
tell application "System Events"
tell appearance preferences
set dark mode to not dark mode
end tell
end tell
  1. Save the Workflow, call it something sensible like "toggle dark mode"

Click the the play button ▶️ to see the script in action.

Add the shortcut #

  1. Open System Preferences
  2. Click keyboard ▸ Shortcuts
  3. Click services on the left.
  4. Scroll down and find general, your workflow is there.
  5. Double Click on the right hand side of your workflow, where it says none
  6. Type the shortcut you want to use. I use shift-command-7.

I have my appearance preferences set to auto and this shortcut doesn't interfere with it. When the time comes, it sets itself to the correct setting.

Source: I found this tip by googling it then finding this post on lifehacker

published
24 Dec 2020
modified
24 Dec 2020
author
Nathaniel
tags
posts productivity MacOs Apple