VW2024 Dark Mode Custom Icons

[Jesse Cogswell]

I love that we now have Dark Mode on Windows, but it does appear that there are a couple of bumps.  One that I noticed this morning is that custom icons for tools and toolsets don't work in Dark Mode and just display as a red "X".  I'm guessing this is because icons now can have a Dark Mode component (invert blacks, etc) that requires the .png to be named in some way for the system to see it.  The VW help does not allude to this at all, but it may just be out of date.  Anyone from VW want to share the magic sauce?

 

Custom Toolset Icon in Light Mode:

 

Custom Toolset Icon in Dark Mode:

 

I've noticed the same thing when applying new icons to plug-ins while in Dark Mode, though existing icons seem to work properly.

 

One other minor complaint about Dark Mode is that selected background color nearly matches the icon color on the View Bar, making it nearly impossible to ascertain which button is which.

 

Snaps and Font Settings in Light Mode:

 

Snaps and Font Settings in Dark Mode:

[Mark Aceto]

10 minutes ago, Jesse Cogswell said:

I'm guessing this is because icons now can have a Dark Mode component (invert blacks, etc) that requires the .png to be named in some way for the system to see it.

 

They're no longer PNG's. They're SVG's now.

[Jesse Cogswell]

It appears as though we have an option of either PNGs or SVGs now, the explorer window looks for both, though I'm guessing SVGs will be the now preferred file.  The Help menu should be updated to notify us of the change.  Super not looking forward to rebuilding a bunch of icons in the new format, though having it in a vector format will certain help in creating more legible small icons.

 

My original point still stands, I can't get a custom icon in Dark Mode on Windows.  I tested by building a super simple SVG file, just a single line with a non-uniform stroke in green.  It works in Light Mode, but now doesn't even display a red X in Dark Mode, it just doesn't display an icon at all.  It makes me believe that it wants two versions of the icon, one Light and one Dark.

 

SVG Icon in Light Mode:

 

SVG Icon in Dark Mode:

 

Workspace Editor showing no icon loaded:

 

[Mark Aceto]

1 minute ago, Jesse Cogswell said:

I'm guessing SVGs will be the now preferred file. 

 

I'm guessing your guess is right.

 

That said, I'm currently on a Mac, so I can't speak to Windows icon file formats (yet).

 

From memory, I think the toolset icons are that ascii quagmire but this is what I see for tools on a Mac:

 

 

 

[Mark Aceto]

@Stephan Moenninghoff can clarify everything here.

[Jesse Cogswell]

Extracting the Vectorworks Resource file and looking at the default icons, I appear to have been correct.  Each icon has two versions, one standard and one with a "_dark" suffix.  However, I can't seem to make any of my custom icons work even with the suffix.  But when I use one of the default icons, it works as expected, so I must be doing something wrong.

[Josh Loy]

I believe it's related to your accent color...

[Stephan Moenninghoff]

19 minutes ago, Jesse Cogswell said:

Extracting the Vectorworks Resource file and looking at the default icons, I appear to have been correct.  Each icon has two versions, one standard and one with a "_dark" suffix.  However, I can't seem to make any of my custom icons work even with the suffix.  But when I use one of the default icons, it works as expected, so I must be doing something wrong.

If SVGs are not displayed as you expect, there can be several reasons for it. I noticed you are using a non-uniform stroke. This might be one of them although I haven't tried.

Here are the known issues:

• Patterns not supported
• Transformations not supported
• Non-scaling strokes not supported (just ignored. The icon still displays correctly)
• Nested clipping paths not supported. (You can use a clip path but you cannot clip it again, using another clip path on top of it).

Using "_dark" as a suffix will use that resource for dark mode. Failing to supply it will use the light version for dark mode.

You can still use PNG but SVG is preferred, as it stays sharp when the UI is scaled.

 

Use a vector graphic app like Adobe Illustrator, Sketch or any other vector format authoring tool that lets you export SVG and you should be good. 

 

HTH

[Jesse Cogswell]

Thank you to @Josh Loy and @Stephan Moenninghoff, I was able to get my custom icon to work (rebuilt icon as SVG from original vector source) and now I can read my icons in Dark Mode.  I'm not terribly wild about needing to have my Windows accent be that light, but it's important to me to know what I'm clicking.  If it ends up annoying me down the road, I'll just switch back to Light Mode.  After all, I've used it for the last 13 years and I'm pretty used to it at this point.