Using gtk theme with scss

[ShadowS0ng]

I wanted to know is there a way to use scss with gtk theme ? gtk theme defines colors with @define-color (name) (color) and sassc isn't able to compile them throwing and error . i searched on the internet and didn't find any way. so if i want to use colors defined in the gtk theme i have to use css? i can write a script to extract the theme colors and replace @define-colors with $(name) but is there any other way?

[jilv220]

You can define a loader like this

@use "sass:string";

@function gtkalpha($c, $a) {
  @return string.unquote("alpha(#{$c},#{$a})");
}

@function gtkmix($c1, $c2, $r) {
  $ratio: 1 - $r / 100%; // match SCSS mix()
  @return string.unquote("mix(#{$c1},#{$c2},#{$ratio})");
}

/**
 * Multiplies the luminance of $c by $s
 */
@function gtkshade($c, $s) {
  @return string.unquote("shade(#{$c},#{$s})");
}

@function gtkcolor($c) {
  @return string.unquote("@#{$c}");
}

[jilv220]

Then load the gtk theme as regular scss variables.

@use "functions" as *;
@use 'sass:color';

$theme_fg_color: gtkcolor(theme_fg_color);

$theme_bg_color: gtkcolor(theme_bg_color);

$theme_selected_bg_color: gtkcolor(theme_selected_bg_color);

$theme_text_color: gtkcolor(theme_text_color);
$wm_borders_edge: gtkcolor(wm_borders_edge);
$theme_unfocused_fg_color: gtkcolor(theme_unfocused_fg_color);

$borders: gtkcolor(borders);
$unfocused_borders: gtkcolor(unfocused_borders);

// To be compatible with non libadwita themes
$popup_bg_color: gtkshade($theme_bg_color, 1.57);
$panel_focused_bg_color : gtkshade($theme_bg_color, 1.57);

$button_normal_color: gtkshade($theme_bg_color, 1.106);
$button_hover_color: gtkshade($theme_bg_color, 1.207);
$button_active_color: gtkshade($theme_bg_color, 1.32);

[ShadowS0ng]

Then load the gtk theme as regular scss variables.

@use "functions" as *;
@use 'sass:color';

$theme_fg_color: gtkcolor(theme_fg_color);

$theme_bg_color: gtkcolor(theme_bg_color);

$theme_selected_bg_color: gtkcolor(theme_selected_bg_color);

$theme_text_color: gtkcolor(theme_text_color);
$wm_borders_edge: gtkcolor(wm_borders_edge);
$theme_unfocused_fg_color: gtkcolor(theme_unfocused_fg_color);

$borders: gtkcolor(borders);
$unfocused_borders: gtkcolor(unfocused_borders);

// To be compatible with non libadwita themes
$popup_bg_color: gtkshade($theme_bg_color, 1.57);
$panel_focused_bg_color : gtkshade($theme_bg_color, 1.57);

$button_normal_color: gtkshade($theme_bg_color, 1.106);
$button_hover_color: gtkshade($theme_bg_color, 1.207);
$button_active_color: gtkshade($theme_bg_color, 1.32);

wow, that actually worked , but i had to change it like below 👇 , not sure probably syntax changes in sass itself. i also commented out the @use lines they were not converted correctly by sassc. ty big times for the help❤️❤️ can i ask where did you learn that stuff so i can learn it too?

// @use "sass:string";

@function gtkalpha($c, $a) {
  @return unquote($string: "alpha(#{$c},#{$a})");
}

@function gtkmix($c1, $c2, $r) {
  $ratio: 1 - $r / 100%; // match SCSS mix()
  @return unquote($string: "mix(#{$c1},#{$c2},#{$ratio})");
}

/**
 * Multiplies the luminance of $c by $s
 */
@function gtkshade($c, $s) {
  @return unquote($string: "shade(#{$c},#{$s})");
}

@function gtkcolor($c) {
  @return unquote($string: "@#{$c}")
}

// @use "functions" as *;
// @use 'sass:color';

$theme_fg_color: gtkcolor(theme_fg_color);

$theme_bg_color: gtkcolor(theme_bg_color);

$theme_selected_bg_color: gtkcolor(theme_selected_bg_color);

$theme_selected_fg_color: gtkcolor(theme_selected_fg_color);

$theme_text_color: gtkcolor(theme_text_color);
$wm_borders_edge: gtkcolor(wm_borders_edge);
$theme_unfocused_fg_color: gtkcolor(theme_unfocused_fg_color);

$borders: gtkcolor(borders);
$unfocused_borders: gtkcolor(unfocused_borders);

// To be compatible with non libadwita themes
$popup_bg_color: gtkshade($theme_bg_color, 1.57);
$panel_focused_bg_color : gtkshade($theme_bg_color, 1.57);

$button_normal_color: gtkshade($theme_bg_color, 1.106);
$button_hover_color: gtkshade($theme_bg_color, 1.207);
$button_active_color: gtkshade($theme_bg_color, 1.32);

[jilv220]

I learned this from looking up the code of popular gtk themes, and this is how they create gtk themes with sass

[ShadowS0ng]

I learned this from looking up the code of popular gtk themes, and this is how them create gtk themes with sass

ty , i'm closing this issue as done