summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-13 11:14:10 +0200
committerVolpeon <git@volpeon.ink>2024-10-13 11:14:10 +0200
commitb57899b30992be3a60ee97f198b65d647402ab95 (patch)
tree376a3d457dccda952628b3a2ac92b4f0992bb50f
parentFix APCA contrast (diff)
downloadiro-design-b57899b30992be3a60ee97f198b65d647402ab95.tar.gz
iro-design-b57899b30992be3a60ee97f198b65d647402ab95.tar.bz2
iro-design-b57899b30992be3a60ee97f198b65d647402ab95.zip
Themes with @light/@dark suffix
-rw-r--r--src/_themes.scss48
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 {