diff options
-rw-r--r-- | src/_themes.scss | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/src/_themes.scss b/src/_themes.scss index 8296064..7b9554e 100644 --- a/src/_themes.scss +++ b/src/_themes.scss | |||
@@ -5,18 +5,66 @@ $static-themes: 'black' 'white' !default; | |||
5 | 5 | ||
6 | @include iro.bem-theme('base') { | 6 | @include iro.bem-theme('base') { |
7 | background-color: fn.global-color(--bg-base); | 7 | background-color: fn.global-color(--bg-base); |
8 | |||
9 | @include iro.bem-suffix('light') { | ||
10 | @media (prefers-color-scheme: light) { | ||
11 | background-color: fn.global-color(--bg-base); | ||
12 | } | ||
13 | } | ||
14 | |||
15 | @include iro.bem-suffix('dark') { | ||
16 | @media (prefers-color-scheme: dark) { | ||
17 | background-color: fn.global-color(--bg-base); | ||
18 | } | ||
19 | } | ||
8 | } | 20 | } |
9 | 21 | ||
10 | @include iro.bem-theme('l1') { | 22 | @include iro.bem-theme('l1') { |
11 | background-color: fn.global-color(--bg-l1); | 23 | background-color: fn.global-color(--bg-l1); |
24 | |||
25 | @include iro.bem-suffix('light') { | ||
26 | @media (prefers-color-scheme: light) { | ||
27 | background-color: fn.global-color(--bg-l1); | ||
28 | } | ||
29 | } | ||
30 | |||
31 | @include iro.bem-suffix('dark') { | ||
32 | @media (prefers-color-scheme: dark) { | ||
33 | background-color: fn.global-color(--bg-l1); | ||
34 | } | ||
35 | } | ||
12 | } | 36 | } |
13 | 37 | ||
14 | @include iro.bem-theme('l2') { | 38 | @include iro.bem-theme('l2') { |
15 | background-color: fn.global-color(--bg-l2); | 39 | background-color: fn.global-color(--bg-l2); |
40 | |||
41 | @include iro.bem-suffix('light') { | ||
42 | @media (prefers-color-scheme: light) { | ||
43 | background-color: fn.global-color(--bg-l2); | ||
44 | } | ||
45 | } | ||
46 | |||
47 | @include iro.bem-suffix('dark') { | ||
48 | @media (prefers-color-scheme: dark) { | ||
49 | background-color: fn.global-color(--bg-l2); | ||
50 | } | ||
51 | } | ||
16 | } | 52 | } |
17 | 53 | ||
18 | @include iro.bem-theme('50') { | 54 | @include iro.bem-theme('50') { |
19 | background-color: fn.global-color(--base --50); | 55 | background-color: fn.global-color(--base --50); |
56 | |||
57 | @include iro.bem-suffix('light') { | ||
58 | @media (prefers-color-scheme: light) { | ||
59 | background-color: fn.global-color(--base --50); | ||
60 | } | ||
61 | } | ||
62 | |||
63 | @include iro.bem-suffix('dark') { | ||
64 | @media (prefers-color-scheme: dark) { | ||
65 | background-color: fn.global-color(--base --50); | ||
66 | } | ||
67 | } | ||
20 | } | 68 | } |
21 | 69 | ||
22 | @each $theme in $static-themes { | 70 | @each $theme in $static-themes { |