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

#productivity #macos #webdev

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

Open automator
Click file ▸ new
Select quick action ▸ choose
Select "workflow receives current no input in any application" from the dropdown options.
In the long list of actions on the left find Run AppleScript. Then Double-Click to add it to your workflow.

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

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

Open System Preferences
Click keyboard ▸ Shortcuts
Click services on the left.
Scroll down and find general, your workflow is there.
Double Click on the right hand side of your workflow, where it says none
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