How To - Icon Sets with alternative dark and light icons

This is based on Fluent Style Icon Set

The icon set in that thread is still the definitive version, and may have new icons added to it after this example is published. This is just an example of how to do alternative dark/light icons in an icon set, and is not meant to replace the original.

  • :warning: Requires 13.0.41, which we just released. We needed to make some changes for this to work!
  • Install the new beta first, else you'll need to delete the files under /dopuslocaldata/Icon Cache.

Download

Grab it from Fluent Style Icon Set - The version there has these changes now.

PNG Icon Grids

Example of what one of the PNG icon grids now looks like, with icons for each mode:

The dark and light icons don't have to be in separate blocks. That was just the easiest way to recolor them all as a group in Photoshop. You can also have each pair together if you prefer:

XML

In the XML, the main <icon col="x" row="y"> specifies the icon grid position for light mode.

Within that, there's a <dark col="x" row="y" /> which specifies the alternative dark mode icon. (If that's missing, the same icon will be used for both modes, as before.)

  <icon col="1" row="16" name="empty">  <dark col="1"  row="1" /></icon>
  <icon col="2" row="16" name="spacer"> <dark col="2"  row="1" /></icon>
  <icon col="3" row="16" name="copy">   <dark col="3"  row="1" /></icon>
  <icon col="4" row="16" name="copyas"> <dark col="4"  row="1" /></icon>

Although it is not used in this example, you can also use remap_dark="yes" to tell Opus to automatically convert monochrome icons designed for light mode. They will be recolored to use the Preferences / Colors and Fonts / Windows Colors / Window contents / Text color. (But you may not want that color, e.g. if you want white icons instead of grey, and it's probably only good for converting icons made for light mode, not vice versa, which is why I did not use it in this case.)

  <icon col="1" row="1" name="empty"  remap_dark="yes" />
  <icon col="2" row="1" name="spacer" remap_dark="yes" />
  <icon col="3" row="1" name="copy"   remap_dark="yes" />
  <icon col="4" row="1" name="copyas" remap_dark="yes" />

Opus 12 Compatibility

At least in theory, this should also still work with Opus 12, but you'll always get the light mode icons, not the dark mode ones, in Opus 12.

7 Likes



works seamlessly, many thanks :slight_smile:

2 Likes