Hello! I'm one of the more active theme creators for the LXQt project and have been porting a lot of older GTK2/3 themes to .qss format. I've been trying to make "generic" themes that will pick up on the user's highlight/accent color so that, for example, I would need only one theme for Mint-X, Mint-Y, Shiki-Colors, Materia, etc.
The problem is that many of the more skeumorphic GTK engines produce gradients and glassy effects programmatically and then send internally-computed values to Cairo or whatever they're using to do the actual rendering. Looking at the code of GTK3, the shade function (takes two arguments, a value from 0.0 to 2.0 and a color, returns a shaded or tinted version of the second argument) appears to be doing internal conversion from RGBA to HSLA and back to RGBA.
In QSS, this would need to be done by specifying the background color as background-color: palette(highlight); and then overlaying a translucent .svg or .png, e.g. border-image: url(assets/buttons/hover.svg) 3; to produce a glassy or shaded effect. Problem is, as far as I can tell even setting the Blend mode to Luminance or Lighten and exporting the SVG file doesn't produce the right colors.
Is there a way to export a .svg file that will darken what's under it in the L of HSLA sense, rather than the A of RGBA sense? Alpha and Lightness aren't the same thing...
Select your shapes then open the Fill and Stroke dialog. Near the bottom set [Blend mode: Lighten]. For each colour channel (R, G and B) the value of the upper shape is compared to the lower shape and the higher value (i.e. the lighter colour) is rendered.
@Paddy_CAD, so, let's say the highlight color is #729cfc and the GTK engine produces a sharp top to bottom gradient with 4 stops: 20% lighter at the top, shading to 10% lighter at the middle, then a sharp demarcation in the middle, then the bottom part of the gradient that goes from 10% lighter to 0% lighter (neutral/no L). Stops at 0, 50, 51, and 100 in other words.
Would I create this by making a four-stop gradient and assigning HSLA values of (0, 0, 255, 20%), (0, 0, 255, 10%), (0, 0, 255, 10%), (0, 0, 255, 0%) at their respective stops and choosing Lighten as the blend mode? Or do I do the percentage changes in the L channel rather than the A channel? And, when the SVG is exported, does Qt (this is for LXQt) know to apply HSL Lightness rather than RGBA Alpha?
Thank you in advance for all the information! I know I may be asking something impossible here.
It seems I misunderstood your needs in my first reply.
Here's a gradient-filled rectangle that (hopefully) matches your description. I copied your hex colour value and used the Fill and Stroke dialog [shift+ctrl+f] to set a linear gradient fill. The default gradient uses only two colour stops, applying the last-used colour on the left and fading to transparent on the right. You can of course change these colours, add and delete colour stops, change the stop position, and change the gradient direction.
That's very close! But what I'm trying to do is export a translucent SVG that will produce that when overlaid on top of a block of #729fcf; the theme specifies that solid color for a hover/active button. Is it possible to export an SVG that's basically a "lightening mask" that could be applied with Qt/QSS's border-image directive? The code looks something like
I know this is going to be partly implementation-dependent, i.e., even if the SVG file itself specifies HSLA information, Qt might be doing some kind of conversion to RGBA that won't keep the proper values.
The first example has [Blend mode: Lighten] as described in comment #2 above. The second example has [Blend mode: Screen] which might better suit your needs.
I don't know how QT will handle these. I recommend experimentation.
I think I may have misunderstood this...the Luminosity blend mode looks like it might be what I'm looking for? It says it "preserves the hue and chroma values in the base layer but applies the luma value from the blend layer." So if I had the translucent overlay of this .svg file as a top to bottom gradient of white, I'd just need to find out what the V values are in the screenshot of the theme I'm trying to duplicate and apply those, then export it...
and then when the svg is overlaid, it will merge the color below it with the luminosity gradient?
Beyond the Basics Replicating GTK's HSL shading with a gradient overlay
Inkscape.org
Hello! I'm one of the more active theme creators for the LXQt project and have been porting a lot of older GTK2/3 themes to .qss format. I've been trying to make "generic" themes that will pick up on the user's highlight/accent color so that, for example, I would need only one theme for Mint-X, Mint-Y, Shiki-Colors, Materia, etc.
The problem is that many of the more skeumorphic GTK engines produce gradients and glassy effects programmatically and then send internally-computed values to Cairo or whatever they're using to do the actual rendering. Looking at the code of GTK3, the shade function (takes two arguments, a value from 0.0 to 2.0 and a color, returns a shaded or tinted version of the second argument) appears to be doing internal conversion from RGBA to HSLA and back to RGBA.
In QSS, this would need to be done by specifying the background color as
background-color: palette(highlight);and then overlaying a translucent .svg or .png, e.g.border-image: url(assets/buttons/hover.svg) 3;to produce a glassy or shaded effect. Problem is, as far as I can tell even setting the Blend mode to Luminance or Lighten and exporting the SVG file doesn't produce the right colors.Is there a way to export a .svg file that will darken what's under it in the L of HSLA sense, rather than the A of RGBA sense? Alpha and Lightness aren't the same thing...
Yes, there's a way.
Select your shapes then open the Fill and Stroke dialog. Near the bottom set [Blend mode: Lighten]. For each colour channel (R, G and B) the value of the upper shape is compared to the lower shape and the higher value (i.e. the lighter colour) is rendered.
@Paddy_CAD, so, let's say the highlight color is #729cfc and the GTK engine produces a sharp top to bottom gradient with 4 stops: 20% lighter at the top, shading to 10% lighter at the middle, then a sharp demarcation in the middle, then the bottom part of the gradient that goes from 10% lighter to 0% lighter (neutral/no L). Stops at 0, 50, 51, and 100 in other words.
Would I create this by making a four-stop gradient and assigning HSLA values of (0, 0, 255, 20%), (0, 0, 255, 10%), (0, 0, 255, 10%), (0, 0, 255, 0%) at their respective stops and choosing Lighten as the blend mode? Or do I do the percentage changes in the L channel rather than the A channel? And, when the SVG is exported, does Qt (this is for LXQt) know to apply HSL Lightness rather than RGBA Alpha?
Thank you in advance for all the information! I know I may be asking something impossible here.
It seems I misunderstood your needs in my first reply.
Here's a gradient-filled rectangle that (hopefully) matches your description. I copied your hex colour value and used the Fill and Stroke dialog [shift+ctrl+f] to set a linear gradient fill. The default gradient uses only two colour stops, applying the last-used colour on the left and fading to transparent on the right. You can of course change these colours, add and delete colour stops, change the stop position, and change the gradient direction.
That's very close! But what I'm trying to do is export a translucent SVG that will produce that when overlaid on top of a block of #729fcf; the theme specifies that solid color for a hover/active button. Is it possible to export an SVG that's basically a "lightening mask" that could be applied with Qt/QSS's
border-imagedirective? The code looks something like#TaskBar QToolButton:hover {color: palette(highlighted-text);background: palette(highlight);border: 3px solid transparent;border-image: url(assets/buttons/hover-trans.svg);}I know this is going to be partly implementation-dependent, i.e., even if the SVG file itself specifies HSLA information, Qt might be doing some kind of conversion to RGBA that won't keep the proper values.
The first example has [Blend mode: Lighten] as described in comment #2 above. The second example has [Blend mode: Screen] which might better suit your needs.
I don't know how QT will handle these. I recommend experimentation.
I think I may have misunderstood this...the Luminosity blend mode looks like it might be what I'm looking for? It says it "preserves the hue and chroma values in the base layer but applies the luma value from the blend layer." So if I had the translucent overlay of this .svg file as a top to bottom gradient of white, I'd just need to find out what the V values are in the screenshot of the theme I'm trying to duplicate and apply those, then export it...
and then when the svg is overlaid, it will merge the color below it with the luminosity gradient?