Switch between light and dark icons based on the user's current theme [Updated March 4, 2014]

[ClintonStrong]

Many Alfred workflows out there use monochromatic icons (aka “glyphs”). They look great, but it introduces a problem: you have to maintain two separate workflows. This creates extra work for the developer, and extra work for the user, should they happen to change their theme.

This is a script to help solve that problem. Bundle both light and dark icons with your theme, and let alfred-icons decide which ones to use. This eliminates the need to maintain two separate workflows for light and dark themes; it just works.

To sum it up: alfred-icons analyzes the background color of the user’s current theme and swaps out the icons based on whether it’s light or dark. Simple.

Download | Source

How to use

To put it in use, you’ll need to conform to a simple naming convention. Alfred already names the icons for you, based on a UUID something like 3A20DDBC-D992-4DD1-9A65-4A1860EEEC7D.png. For the sake of explanation, let’s assume your icon is dark (i.e. designed for light themes). Now add in the light variant of your icon. Give it the same name as the dark icon, but with “-light” appended to the end. For example, you might name the new icon 3A20DDBC-D992-4DD1-9A65-4A1860EEEC7D-light.png. If your default icons are light (i.e. designed for dark themes), append “-dark” instead.

So to clarify, add the “-light” prefix to light icons designed for dark themes, and “-dark” to dark icons designed for light themes. Don’t rename the original icons Alfred generates for you.

Now that you have the icons set up, download the latest release and place the SetupIconsForTheme script into your workflow’s folder. It’s up to you how you want it to run: you could add in a keyword to manually change the icon colors, or you could automate the process and run it every time your script/script filter is run.

Including it in your script

In Ruby and PHP, you can run it by including the command in backticks:

`./SetupIconsForTheme`

In Python, you can use subprocess:

import subprocess
subprocess.call('./SetupIconsForTheme')

In AppleScript:

do shell script "./SetupIconsForTheme"

You may need to adjust the path if your script is stored in a subdirectory, but you get the idea.

Other notes

The one drawback and this is still the case even if you have separate “light” and “dark” workflows is that the background color for the selected result might have a dark background, while the rest of the theme is light. This could cause “invisible” or hard to see icons for the selected result, while everything else looks fine. Unfortunately, we can’t change the icon for just the selected result it has to use the same icon for every result. You could work around the issue entirely by adding backgrounds to your icons, but then you lose out on the clean, simple look of monochromatic icons. I’ll leave that decision up to you.

Note that there’s a bit of delay before the script recognizes you’ve switched themes. If you’re testing it out and it doesn’t work right away, just give it a few seconds and try again.

Ideas for future improvements

• Use a cache file so it doesn’t run on every keystroke. Maybe limit it to 30 seconds or a minute so it’s still responsive to changes by the user, but it won’t run needlessly.
• Check if Alfred’s preferences have changed since the last run. If they have, it’s possible the user might have changed their theme. If not, we know the theme didn’t change, so there’s no need to run it again.
• Generate the dark or light icons for you, without needing an image editor. Not guaranteed, but I’ll consider it for a future release.

Edited March 5, 2014 by Clinton Strong

[rice.shawn]

Clinton,

 

This is great. I had a similar idea a few months ago, but I hadn't a good idea of how to implement it and didn't have the time to research it. Thanks so much for this great resource.

[Ritashugisha]

Great job! This is an amazing resource for all workflows. 

Very useful <3

[Ritashugisha]

@ClintonStrong 

 

I've made a couple of my own modifications to your program. Thanks for the idea as well as the base class! 

 

If you want to see what I changed you can view the source HERE.

[rice.shawn]

I wanted this to work with all of my icons in my script filters as well. So, here's what I did. First, I did create a "light" version of each icon that I used; then I dropped this code into the beginning of the script filter:

if [ -e 'icon-dark.png' ]; then
  suffix='-light.png'
else
  suffix='.png'
fi

After that, whenever I called an icon, I just called it as "icon_name$suffix"; then, everything worked out perfectly.

 

This approach could be used with any language.