blob: 878ffda991a46fac0f9ccc2cd707ef544ddb7fae (
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
/*
Derives app colors for both dark & light themes from common.css variables
*/
:root {
--hot-pink: #d900b8;
--light-pink: #fff8fe;
--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;
}
/* Hide body while theme init is occurring (50ms) */
html.theme-init body {
opacity: 0
}
/*
removes all transitions in the page during first theme render to avoid FOUC
(the theme-init class is removed from DOM 1 frame after the page content loads)
*/
html.theme-init * {
transition: none !important;
}
body {
opacity: 1;
transition: opacity 300ms ease-out 0s;
}
html * {
transition-duration: 150ms, 300ms;
transition-property: color, background;
transition-timing-function: ease-out;
transition-delay: 0;
}
|
