blob: b61eb9409cc6d1fd5d53363bc402b13207a826e0 (
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
|
@mixin ayu-dark {
color-scheme: dark;
--bg: #0F1419; // base00 default background
--bg-alt: #131721; // base01 raised background
--bg-sel: #272D38; // base02 selection background
--grey: #3E4B59; // base03 comments, invisibles
--fg-dim: #BFBDB6; // base04 muted foreground
--fg: #E6E1CF; // base05 default foreground
--fg-alt: #E6E1CF; // base06
--fg-bright: #F3F4F5; // base07 brightest foreground
--red: #F07178; // base08
--orange: #FF8F40; // base09
--yellow: #FFB454; // base0A
--green: #B8CC52; // base0B
--cyan: #95E6CB; // base0C
--blue: #59C2FF; // base0D
--purple: #D2A6FF; // base0E
--brown: #E6B673; // base0F
}
@mixin ayu-light {
color-scheme: light;
--bg: #FAFAFA; // base00
--bg-alt: #F3F4F5; // base01
--bg-sel: #F8F9FA; // base02
--grey: #ABB0B6; // base03
--fg-dim: #828C99; // base04
--fg: #5C6773; // base05
--fg-alt: #242936; // base06
--fg-bright: #1A1F29; // base07
--red: #F07178; // base08
--orange: #FA8D3E; // base09
--yellow: #F2AE49; // base0A
--green: #86B300; // base0B
--cyan: #4CBF99; // base0C
--blue: #36A3D9; // base0D
--purple: #A37ACC; // base0E
--brown: #E6BA7E; // base0F
}
:root { @include ayu-light; }
@media (prefers-color-scheme: dark) {
:root { @include ayu-dark; }
}
:root[data-theme="dark"] { @include ayu-dark; }
:root[data-theme="light"] { @include ayu-light; }
|
