SCSS GTK3/4. An attempt to explain it

Pling.com - Libre Publishing Products
1

Color definitions:
First you create a new color definition:
$selected_bg_color: #3584e4;
You can use them like this:
background-color: $selected_bg_color

Nested nodes:
CSS:
button {color:yellow};
button:active { color: red};
button:active:hover {color:green};

SCSS:
button{
color:yellow;
&:active {

color:red;
&:hover { color:green}
}
}

Mixings:
_drawing.scss:
//t = state of the nise, c= bg_color, tc= fg_color

@mixin button($t,$c, $tc) {

@if t==normal {
background-color: $c;
color:$tc;
}

@if t==active {
background-color: $selected_bg_color;
color:$tc;
}

}

_common.scss
button{
@include button(normal, $bg_color,$fg_color);
&:active {
@include button(active,donotread,$selected_fg_color}
}

In css:
button { color: $fg_color; background-color: $bg_color};
button:active{color: $selected_fg_color; background-color:$selected_bg_color};

Extends:
Scss
%funnycode {
color:white,
background-color:#fff;
}

button {
&,&:hover{
@extend %funnycode}}

Css:
button, button:hover {
color: white, background-color:white}

1 Like
2

You have mixin’s ( to use with @include) and you have %funnycode that you can use with @extend

What is the difference?

1 Like
3

With mixings you can usw variables…
First variable is usually something like : hover or :selected. Second is the background color and third the text color.
You can feed the mixin with different variable definition and depending of that you get different output.

An extend is Static text snippet. You can not use extend with a variable.

4

Ok, thanks, I get it. Still, I will have to download Adwaita and figure things out and fiddle with it.
If I have any questions I will post them here.

5

Hey Paul, I have been trying to get you to see that for McOS-Mint-Cinnamon-Edition-master I can only see the light theme, cannot see the dark theme in system settings. How do I activate the dark theme please?

Edit: I have Linux Mint 20.1. I simply pasted the extracted folder into my .themes folder, is there anything else I should have done?

6

That’s all very nice. Now how do you theme the TITLEBAR? The GNOME project manage to finally break GTK3/4 theming so that my old Esco (Metacity) theme [1] no longer works. I had to find a hack simply to get my ‘Active’ window to show a different color titlebar than all the background windows (seriously, do the GNOME ‘designers’ actually do any WORK on their machines?). But as of now it’s only a solid-color titlebar; I want back the texture and character of my old themes. This whole Material Design/Metro/TIFKAM/etc flat/fugly look is an abomination on computer interfaces.

[1] metacity-themes/Esco/metacity-1 at master · charlesbos/metacity-themes · GitHub