Hello all,
I wanted to confirm next steps for me and also confirm some followup on QSS/other-styling questions.
next steps:
Change Slicer BG color in Dark Theme to be #000000 and make sure this works with existing icons. Not a big change, but I’ll verify all new icons are good to go.
Curate a refactored version of icons that are each FLAT SVG that works for the default theme. (I assume if we are dropping in a few icons to test that Light theme is the default – please let me know if you’d prefer Dark instead.)
For testing, we’ll start with the Load/Save and Application Basics icons, which are simplest and can be used for testing. I’ll let the group know when these refactored icons are checked in and where to find them. Should have them in place early next week.
followup:
Regarding the new icons with accent color(s), I have some questions about QSS for icon.svg files. I understood that Sam was looking into this and would guide me about how that translates into icon design requirements. In particular I wonder whether existing icons can be optionally instrumented with selectors that Qt can use to handle accent colors --or whether there is another acceptable strategy. And in the absence of that ability… all monochromatic, like material symbols icons?..
Ideally, we can keep the creation of icons super simple, as Andras emphasized at the end of this week’s developer mtg – but still add the value of accent colors for designers willing to take the extra steps, and in a way that is trusted to work efficiently and reliably. Have our cake and eat it too!
So I’ll stay tuned for more info before touching the existing icons with color, or making new icons for slice controller widgets etc.
Cheers! Also, I will post the latest versions of light and dark theme mockups. Cheers!
I’m not sure if pure black is the best option. Material Design appears to suggest #121212 for dark themes for accessibility reasons:
A dark theme uses dark grey, rather than black, as the primary surface color for components. Dark grey surfaces can express a wider range of color, elevation, and depth, because it’s easier to see shadows on grey (instead of black).
Dark grey surfaces also reduce eye strain, as light text on a dark grey surface has less contrast than light text on a black surface.
I’m happy to go with that instead – #000000 was suggested in the meeting for better contrast than #323232 gives, which is shown in the current mockup. Betting #121212 would accomplish that just fine! Thanks, James.
Yes, sorry if it sounded like I was suggesting pure black, I meant just something darker than what we had. Something like #121212 sounds like a good option.
Hi all,
Keeping you posted: flat (no layered elements) icon versions of light themed icons are checked into github, accessible here:
Only versions of DataIO (load, save, dicom) and ApplicationBasics icons so far. These are for testing with various approaches to styling for different themes and interaction states. I’ve also updated the palettes to include DarkSlicer background color as #121212.
I looked a bit at Qt Stylesheets and QtStyle, and wasn’t able to see how these can be used on the svgs themselves – so I’m deferring to Sam on this for sure! In the meantime, I’m playing with logic to modify an lxml etree parsed version of an svg – we’ll see if that can be a sufficiently robust and performant option…
Meanwhile, I will work on flattening other layered versions of icons.
