A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

 _colors.scss

View raw Download
text/plain • 5.4 kiB
ASCII text
        
            
1
// When color definition differs for dark and light variant,
2
// it gets @if ed depending on $variant
3
4
@import 'color-palette';
5
$google_blue_color: #4285F4;
6
$google_green_color: #34A853;
7
$google_yellow_color: #FBBC05;
8
$google_red_color: #EA4335;
9
10
@function gtkalpha($c, $a) {
11
@return unquote("alpha(#{$c}, #{$a})");
12
}
13
14
// Foreground colors
15
$dark_fg_color: rgba(black, 0.87);
16
$light_fg_color: white;
17
18
$fg_color: if($variant == 'light', rgba(black, 0.87), white);
19
$button_fg_color: if($variant == 'light', rgba(black, 0.62), rgba(white, 0.8)); // extra fg color for raised buttons
20
$secondary_fg_color: if($variant == 'light', rgba(black, 0.54), rgba(white, 0.7));
21
$hint_fg_color: if($variant == 'light', rgba(black, 0.38), rgba(white, 0.5));
22
$disabled_fg_color: if($variant == 'light', rgba(black, 0.38), rgba(white, 0.5));
23
$disabled_secondary_fg_color: if($variant == 'light', rgba(black, 0.26), rgba(white, 0.3));
24
$track_color: if($variant == 'light', rgba(black, 0.26), rgba(white, 0.3));
25
$divider_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
26
$fill_color: if($variant == 'light', rgba(black, 0.04), rgba(white, 0.04));
27
28
$titlebar_fg_color: if($titlebar == 'light', rgba(black, 0.87), white);
29
$titlebar_secondary_fg_color: if($titlebar == 'light', rgba(black, 0.54), rgba(white, 0.7));
30
$titlebar_hint_fg_color: if($titlebar == 'light', rgba(black, 0.38), rgba(white, 0.5));
31
$titlebar_disabled_fg_color: if($titlebar == 'light', rgba(black, 0.38), rgba(white, 0.5));
32
$titlebar_disabled_secondary_fg_color: if($titlebar == 'light', rgba(black, 0.26), rgba(white, 0.3));
33
$titlebar_track_color: if($titlebar == 'light', rgba(black, 0.26), rgba(white, 0.3));
34
$titlebar_divider_color: if($titlebar == 'light', rgba(black, 0.12), rgba(white, 0.12));
35
$titlebar_fill_color: if($titlebar == 'light', rgba(black, 0.04), rgba(white, 0.04));
36
37
$inverse_fg_color: white;
38
$inverse_secondary_fg_color: rgba(white, 0.7);
39
$inverse_hint_fg_color: rgba(white, 0.5);
40
$inverse_disabled_fg_color: rgba(white, 0.5);
41
$inverse_disabled_secondary_fg_color: rgba(white, 0.3);
42
$inverse_track_color: rgba(white, 0.3);
43
$inverse_divider_color: rgba(white, 0.12);
44
$inverse_fill_color: rgba(white, 0.04);
45
46
// Background colors
47
$bg_color: if($variant == 'light', #F2F2F2, #282828);
48
$base_color: if($variant == 'light', #FFFFFF, #303030);
49
$alt_base_color: if($variant == 'light', #FAFAFA, #2C2C2C);
50
$popup_bg_color: if($variant == 'light', #FFFFFF, #424242);
51
$alt_lighter_bg_color: if($variant == 'light', #EEEEEE, #303030); // for gnome-shell sub menu
52
$button_bg_color: if($variant == 'light', #FAFAFA, #424242);
53
54
$titlebar_bg_color: if($titlebar == 'dark', #383838, #E0E0E0);
55
56
$panel_bg_color: rgba(black, 0.6);
57
$alt_panel_bg_color: rgba(black, 0.3);
58
$inverse_panel_bg_color: rgba(white, 0.1);
59
$solid_panel_bg_color: if($titlebar == 'dark', #212121, $panel_bg_color);
60
$opaque_panel_bg_color: if($titlebar == 'dark', #212121, #CBCBCB); // for Unity panel which cannot use translucent colors
61
62
$gdm_bg_color: #303030;
63
64
$hover_bg_color: gtkalpha(currentColor, 0.08);
65
$focus_bg_color: gtkalpha(currentColor, 0.12);
66
$hover_focus_bg_color: gtkalpha(currentColor, 0.16);
67
$active_bg_color: gtkalpha(currentColor, 0.12);
68
$checked_bg_color: gtkalpha(currentColor, 0.24);
69
70
// Misc colors
71
$primary_color: $google_blue_color;
72
$alt_primary_color: #7BAAF7;
73
$secondary_color: #01A299;
74
$disabled_secondary_color: rgba($secondary_color, 0.5);
75
76
$link_color: $primary_color;
77
$visited_link_color: $purple_A200;
78
79
$warning_color: $google_yellow_color;
80
$error_color: $google_red_color;
81
$success_color: $google_green_color;
82
83
$suggested_color: $secondary_color;
84
$destructive_color: $google_red_color;
85
86
$info_bg_color: $google_green_color;
87
$question_bg_color: $google_blue_color;
88
$warning_bg_color: $google_yellow_color;
89
$error_bg_color: $google_red_color;
90
91
$tooltip_bg_color: rgba(#616161, 0.9);
92
$tooltip_fg_color: white;
93
94
$border_color: if($variant == 'light', rgba(black, 0.12), rgba(black, 0.26));
95
$alt_border_color: rgba(black, 0.26); // for non-native GTK+ apps (e.g. Firefox and Chrome)
96
$highlight_color: if($variant == 'light', rgba(white, 0.4), rgba(white, 0.1));
97
$titlebar_highlight_color: if($titlebar == 'dark', rgba(white, 0.1), rgba(white, 0.4));
98
$alt_highlight_color: rgba(white, 0.2); // for selection-mode headerbar which colored with $primary_color
99
$titlebar_indicator_color: if($titlebar == 'dark', currentColor, $primary_color);
100
101
// FIXME: Electron/Atom menu does not allow translucent colors
102
$opaque_fg_color: if($variant == 'light', $grey_900, $white);
103
$opaque_secondary_fg_color: if($variant == 'light', $grey_600, mix($white, $popup_bg_color, percentage(0.7)));
104
$opaque_disabled_fg_color: if($variant == 'light', $grey_500, mix($white, $popup_bg_color, percentage(0.5)));
105
$opaque_divider_color: if($variant == 'light', $grey_300, mix($white, $popup_bg_color, percentage(0.12)));
106
107
// FIXME: gtk @placeholder_text_color does not allow translucent colors
108
$placeholder_text_color: if($variant == 'light', $grey_600, mix($white, $base_color, percentage(0.7)));
109