Apply stylesheet for `ctkRangeSlider`

keri · November 12, 2021, 5:37pm

Hi,

Is there a way to change ctkRangeSlider color filled between min and max values?

I look in the source code of ctkRangeSlider and I can’t understand what parameter controls this.
The original QSlider seems to have no option to control this color.

Also where are Slicer dark and light themes are defined?
I’m not much familiar with styling but I expected that Slicer use some Qt Style Sheet (probably some .css file) but instead I can see classes like (slicersources-src/Base/QTGUI) qSlicerStyle, qSlicerDarkStyle, qSlicerLightStyle inherited form ctkProxyStyle → QProxyStyle. Are these classes are fully responsible (or almost fully responsible) for Slicer GUI style?

jamesobutler · November 12, 2021, 5:55pm

Widgets use colors based on the ColorRole from the Palette. This provides a theme of colors used consistently across the GUI.

I believe a Qt slider’s active range uses the QPalette::Highlight specification. You’re showing Slicer when it is using the Slicer Dark mode, so the Highlight color of the QPalette for Slicer Dark is at:

github.com

Slicer/Slicer/blob/6582c1f0b0ec5772776564e5c2704e78b82ea261/Base/QTGUI/qSlicerStyle.cxx#L270

    
      
            palette.setColor(QPalette::ButtonText, Qt::white);
            palette.setColor(QPalette::Disabled, QPalette::ButtonText, "#b4b4b4");
            palette.setColor(QPalette::BrightText, "#ff4444"); // Lighter than Qt::red
            // Color roles used mostly for 3D bevel and shadow effects.
            palette.setColor(QPalette::Light, "#828284");  // Lighter than Button color.
            palette.setColor(QPalette::Midlight, "#5a5a5b");  // Between Button and Light.
            palette.setColor(QPalette::Dark, "#232323");  // Darker than Button.
            palette.setColor(QPalette::Mid, "#2b2b2b");  // Between Button and Dark.
            palette.setColor(QPalette::Shadow, "#141414");  // A very dark color.
            // Color roles relate to selected (marked) items
            palette.setColor(QPalette::Highlight, "#3ca4ff");
            palette.setColor(QPalette::Disabled, QPalette::Highlight, "#505050");
            palette.setColor(QPalette::HighlightedText, Qt::white);
            palette.setColor(QPalette::Disabled, QPalette::HighlightedText, "#6d6d6d");
            // Color roles related to hyperlinks
            palette.setColor(QPalette::Link, "#3ca4ff");
            return palette;
          }
          
          
//------------------------------------------------------------------------------
          int qSlicerStyle::styleHint(StyleHint hint, const QStyleOption *opt, const QWidget *widget,

keri · November 12, 2021, 8:22pm

Thank you very much,

You were right!

It took some time to understand how to create custom style plugin so that it is visible in Slicer->Edit->Application Settings->Appearance->Themes but after I did that I could change the color of ctkRangeSlicer

Topic		Replies	Views
Can't remember Slicer based app running on web Support	2	266	June 7, 2022
CTK/Slicer UI customization with stylesheet Development	0	136	May 6, 2024
New icons for Slicer: styling to include monochromatic designs and optional accent colors Development	5	154	April 15, 2024
Changing the background color of slice views Development	9	1436	May 12, 2022
Crash with ctkRangeWidget Development ctk	8	548	February 1, 2021

Apply stylesheet for `ctkRangeSlider`

Related topics