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 #
- Open
automator
- Click
file
▸new
- Select
quick action
▸choose
- Select "workflow receives current
no input
inany application
" from the dropdown options. - In the long list of
actions
on the left findRun 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
- published
- 24 Dec 2020
- modified
- 24 Dec 2020
- author
- Nathaniel
- tags
posts
productivity
MacOs
Apple