DEV Community

loading...

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

shadowfaxrodeo profile image Nathaniel Originally published at endtimes.dev ・2 min read

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 filenew
  3. Select quick actionchoose
  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
    
  7. 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 keyboardShortcuts
  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

Discussion (3)

pic
Editor guide
Collapse
cchana profile image
Charanjit Chana

Not sure why I didn’t think of doing something like this before! 🤦‍♂️

Collapse
harrisgeo88 profile image
Harris Geo 👨🏻‍💻

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.

Collapse
shadowfaxrodeo profile image
Nathaniel Author

I don't, I have heard of it. I'll take a look, thanks.