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.template

View raw Download
text/plain • 5.78 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
6
@function gtkalpha($c, $a) {
7
@return unquote("alpha(#{$c}, #{$a})");
8
}
9
10
@function on($color, $state: 'primary') {
11
@if ($color == 'light') { $color: white; }
12
@if ($color == 'dark') { $color: black; }
13
14
// Calculate color brightness according to https://www.w3.org/TR/AERT/#color-contrast
15
$brightness: (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;
16
17
@if ($brightness >= 128) {
18
@if ($state == 'primary') { @return rgba(black, 0.87); }
19
@if ($state == 'secondary') { @return rgba(black, 0.54); }
20
@if ($state == 'disabled') { @return rgba(black, 0.38); }
21
@if ($state == 'secondary-disabled') { @return rgba(black, 0.26); }
22
@if ($state == 'track') { @return rgba(black, 0.26); }
23
@if ($state == 'track-disabled') { @return rgba(black, 0.12); }
24
@if ($state == 'divider') { @return rgba(black, 0.12); }
25
@if ($state == 'fill') { @return rgba(black, 0.04); }
26
} @else {
27
@if ($state == 'primary') { @return white; }
28
@if ($state == 'secondary') { @return rgba(white, 0.7); }
29
@if ($state == 'disabled') { @return rgba(white, 0.5); }
30
@if ($state == 'secondary-disabled') { @return rgba(white, 0.3); }
31
@if ($state == 'track') { @return rgba(white, 0.3); }
32
@if ($state == 'track-disabled') { @return rgba(white, 0.12); }
33
@if ($state == 'divider') { @return rgba(white, 0.12); }
34
@if ($state == 'fill') { @return rgba(white, 0.04); }
35
}
36
}
37
38
@function highlight($color) {
39
@if (lightness($color) > 80%) { @return rgba(white, 0.4); }
40
@else if (lightness($color) > 40%) { @return rgba(white, 0.2); }
41
@else { @return rgba(white, 0.1); }
42
}
43
44
//
45
// Basic colors
46
//
47
48
$blue: %TERMINAL_COLOR12%;
49
$green: %TERMINAL_COLOR10%;
50
$yellow: %TERMINAL_COLOR11%;
51
$red: %TERMINAL_COLOR9%;
52
53
$primary-dark: %SEL_BG%;
54
$primary-light: %SEL_BG%;
55
$primary: if($variant == 'light', $primary-dark, $primary-light);
56
57
$background: %BG%;
58
$surface: %MATERIA_SURFACE%;
59
$base: %MATERIA_VIEW%;
60
$base-alt: %INACTIVE_MATERIA_VIEW%;
61
62
$os-background: %HDR_BG3%;
63
$tooltip: rgba(%HDR_BG%, 0.9);
64
$scrim: rgba(black, %MATERIA_PANEL_OPACITY%);
65
$scrim-alt: rgba(black, 0.3);
66
$scrim-inverse: rgba(white, 0.1);
67
$titlebar: %HDR_BG%;
68
$titlebar-backdrop: %MATERIA_VIEW%;
69
$panel: if($topbar == 'dark', %HDR_BG3%, $scrim);
70
$panel-solid: %HDR_BG3%; // for Unity panel which doesn't allow translucent colors
71
72
//
73
// Misc colors
74
//
75
76
$link: $primary;
77
$link-visited: %TERMINAL_COLOR5%;
78
79
$warning: %TERMINAL_COLOR11%;
80
$error: %TERMINAL_COLOR9%;
81
$success: %TERMINAL_COLOR10%;
82
83
$suggested: $primary-dark;
84
$destructive: $error;
85
86
$infobar-info: %TERMINAL_COLOR10%;
87
$infobar-question: %TERMINAL_COLOR12%;
88
$infobar-warning: $warning;
89
$infobar-error: $error;
90
91
$frame: if($variant == 'light', rgba(black, 0.12), rgba(black, 0.26));
92
$border-alt: rgba(black, 0.26); // darker border color for Chrome and Firefox
93
$titlebar-indicator: if($topbar == 'dark', currentColor, $primary);
94
95
//
96
// Overlay state colors
97
//
98
99
$overlay-hover: gtkalpha(currentColor, 0.08);
100
$overlay-focus: gtkalpha(currentColor, 0.12);
101
$overlay-focus-hover: gtkalpha(currentColor, 0.16);
102
$overlay-active: gtkalpha(currentColor, 0.12);
103
$overlay-checked: gtkalpha(currentColor, 0.24);
104
$overlay-selected: rgba($primary, %MATERIA_SELECTION_OPACITY%);
105
106
//
107
// Text and derivative colors
108
//
109
110
$text: %FG%;
111
$text-secondary: rgba(%FG%, 0.7);
112
$text-disabled: rgba(%FG%, 0.5);
113
$text-secondary-disabled: rgba(%FG%, 0.3);
114
$track: rgba(%FG%, 0.3);
115
$track-disabled: rgba(%FG%, 0.12);
116
$divider: rgba(%FG%, 0.12);
117
$fill: rgba(%FG%, 0.04);
118
119
$titlebar-text: %HDR_FG%;
120
$titlebar-text-secondary: rgba(%HDR_FG%, 0.7);
121
$titlebar-text-disabled: rgba(%HDR_FG%, 0.5);
122
$titlebar-text-secondary-disabled: rgba(%HDR_FG%, 0.3);
123
$titlebar-track: rgba(%HDR_FG%, 0.3);
124
$titlebar-track-disabled: rgba(%HDR_FG%, 0.12);
125
$titlebar-divider: rgba(%HDR_FG%, 0.12);
126
$titlebar-fill: rgba(%HDR_FG%, 0.04);
127
128
// workaround for Electron menu which doesn't allow translucent colors
129
$solid-text: %FG%;
130
$solid-text-secondary: mix(%FG%, $surface, percentage(0.7));
131
$solid-text-disabled: mix(%FG%, $surface, percentage(0.5));
132
$solid-divider: mix(%FG%, $surface, percentage(0.12));
133
134
// workaround for GTK3 @placeholder_text_color which doesn't allow translucent colors
135
$placeholder_text_color: mix(%FG%, $base, percentage(0.7));
136