blob: 1ca496a0d18c52d3847020ce5265f4a65a3d767b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
/*
Derives app colors for both dark & light themes from common.css variables
*/
:root {
--hot-pink: #d900b8;
--light-pink: #fedcfb;
--gray-light: #dfdfdf;
--drop-shadow: 0 0 var(--gap-quarter) var(--color-background),
var(--gap) var(--gap) 0 var(--color-drop-shadow),
inset 0 0 0 1px var(--color-accent-muted);
--color-navbar-background: var(--faff-pink);
--color-navbar-text: var(--light-theme-text);
--color-navbar-link: var(--light-theme-text);
--color-accent: var(--faff-pink);
--color-accent-light: var(--light-pink);
--color-accent-hot: var(--hot-pink);
--color-accent-dark: var(--unexpected-aubergine);
}
html.theme-light {
--color-background: var(--light-theme-background);
--color-background-dim: var(--light-theme-background-dim);
--color-text: var(--light-theme-text);
--color-text-secondary: var(--light-theme-text-secondary);
--color-link: var(--light-theme-text);
--color-link-decoration: var(--faff-pink);
--color-code: var(--light-theme-code);
--color-divider: var(--faff-pink);
--color-drop-shadow: var(--gray-light);
--color-accent-muted: var(--color-accent-light);
--color-text-accent: var(--color-accent-dark);
color-scheme: light;
}
html.theme-dark {
--color-background: var(--dark-theme-background);
--color-background-dim: var(--dark-theme-background-dim);
--color-text: var(--dark-theme-text);
--color-text-secondary: var(--dark-theme-text-secondary);
--color-link: var(--dark-theme-text);
--color-link-decoration: var(--faff-pink);
--color-code: var(--dark-theme-code);
--color-divider: var(--unexpected-aubergine);
--color-drop-shadow: var(--color-background-dim);
--color-accent-muted: var(--color-accent-dark);
--color-text-accent: var(--color-accent-light);
color-scheme: dark;
}
|
