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
Top comments (3)
Not sure why I didn’t think of doing something like this before! 🤦♂️
Do you use alfred? If you’re into that kind of shortcuts you will love it.
Their paid version has the workflows which basically allow you to run scripts. You can do crazy things with it.
I don't, I have heard of it. I'll take a look, thanks.