High-contrast stylesheet and color theme

emilm · September 14, 2024, 8:19pm

Here are two color themes and companion stylesheets made to somewhat fit in with the high contrast setting and dark mode on macOS, as well as a stylesheet that’s more KDE breeze-like.

I had totally missed that these stylesheets were a thing until recently. ^^ There are bits and pieces still un-styled, some inconsistencies and some compromises made.

Stylesheets that helped other than the documentation: darkstyle.qss, MaterialDark.qss, BreezeDark.qss

And the PluginDevTools was super useful for this!:

Style sheet loader plugin:

Fork that will work with all the stylesheets included:

Original plugin (works with Krita-darker-high-contrast qss but not the UniversalDark ones):

Download:

Installation:

Unzip and place the Krita-darker-high-contrast-qss folder at a convenient location.
Place the color theme file in the color-schemes folder inside the krita resource folder.
Download and install the color modifier fork of Style Sheet Loader
Optionally apply the color theme.
Apply a qss stylesheet: Tools → Scripts → Load stylesheet
– Tick the ‘Use folder resource prefix:’ checkbox and enter stylesheet (if it says anything else).
– Select right .qss file for your platform.
Add separators where the gaps is too small in the toolbar: Settings → Configure Toolbars… (I couldn’t figure out how to remove the 4px spacing from between buttons nested in a QWidget.)

sooz · September 15, 2024, 1:54am

Thank you, @emilm.

Studio-Kyubo · September 15, 2024, 3:15am

Really, this one is the best theme I’ve ever seen.
Thanks a lot…

K.A.B.H.

emilm · September 18, 2024, 5:50pm

Update:
Tested with display scaling/hi-PPI mode on macOS and KDE Plasma, and it worked fine other than for the custom icons so made some SVGs to fix that.

Styled the document tabs to look more like document tabs. (If you know how to hide the krita logo in the tab, please do let me know.):

The tabs hide when there’s only a single tab:

I also tried styling subwindows. No idea how to get rid of the white background on the titles, and couldn’t figure out how to style the subwindows focused state.

…plus some other minor tweaks.

emilm · October 2, 2024, 7:13pm

Update:
Made some more tweaks and also changed Krita Redesign plugin to have rounded corners on the tooloptions box. - I could share it if anyone wants.

Maverick · October 2, 2024, 8:10pm

Thank you! This theme looks awesome. I’m setting this up today.

Michelist · October 3, 2024, 3:18am

That is cool! Did you change the 0.2 or the 0.5 version of the Krita Redesign plugin?
But since their differences are only cosmetic, I would like it anyway no matter which version you tweaked.

Michelist

emilm · October 3, 2024, 5:47am

I believe I downloaded the master branch and not one of the releases. So it’s probably the 0.2 version then. I will try the 0.5-alpha.

Files with changes:
variables.py

nu_toggle_button_style = f"""
        QToolButton {{
            background-color: #aa{background};
            border: none;
            border-radius: 4px;
            margin-bottom: 0px;
        }}
        
        QToolButton:hover {{
            background-color: #{highlight};
        }}
        
        QToolButton:pressed {{
            background-color: #{alternate};
        }}
        """

nu_tool_options_style = f"""
        QScrollArea {{
            background-color: #{background};
            border-radius: 6px;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 4px;
            padding-right: 4px;
            margin-top: 0px;
        }}
        QScrollArea > QWidget > .QWidget, QScrollArea > QWidget > QWidget > .QWidget, QScrollArea > QWidget > QWidget > QWidget > .QWidget {{
            padding-top: 4px;
            padding-bottom: 4px;
            min-height: 4px;
        }}
        
        """

nttooloptions.py
uncomment this line

self.pad.setStyleSheet(variables.nu_tool_options_style)

ntwidgetpad.py
add some extra space to prevent scrollbars

 if isinstance(self.widget, ntScrollAreaContainer):
                containerSize = self.widget.sizeHint() + QSize(12, 16)

EDIT: padding mistake

Michelist · October 3, 2024, 6:21am

Thank you!

Michelist

emilm · October 3, 2024, 7:07am

For 0.5 version: KritaRedesign0.5-alpha-round-corners.zip - Google Drive

emilm · October 8, 2024, 10:00pm

Tried adding a background image to the welcome screen. Not quite sure which one to pick, if any, so I’ll exclude it for now.

Made a change to the stylesheet loader plugin so you don’t have to edit the image paths manually. Just select the qss and the images should load if placed in the same directory.

111 · October 9, 2024, 2:33am

cool!

emilm · October 9, 2024, 6:48am

Update:
Freya Lupen included an improved way to set the resource path in the Style Sheet Loader extension, so I updated the stylesheet to make use of that.

emilm · March 7, 2025, 5:05am

Update:
Made more tweaks to the stylesheet, created a color version, one with slightly less rounded corners and one that’s more KDE-like.

The color ones (with UniversalDark in the name) requires this version of Style Sheet Loader:

It uses the current color theme to modify the qss before loading and can replace the colors for svg images (doesn’t work with gradients).

These stylesheets work with Krita blender and darker color themes.

You can make your Krita look like this if you want :

(Maybe not advisable to have a colorful UI when painting.) Color theme Lime-Green: Lime-Green-Plasma-Theme/colors at master · L4ki/Lime-Green-Plasma-Theme · GitHub