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;
 
 @include iro.bem-theme('base') {
     background-color: fn.global-color(--bg-base);
+
+    @include iro.bem-suffix('light') {
+        @media (prefers-color-scheme: light) {
+            background-color: fn.global-color(--bg-base);
+        }
+    }
+
+    @include iro.bem-suffix('dark') {
+        @media (prefers-color-scheme: dark) {
+            background-color: fn.global-color(--bg-base);
+        }
+    }
 }
 
 @include iro.bem-theme('l1') {
     background-color: fn.global-color(--bg-l1);
+
+    @include iro.bem-suffix('light') {
+        @media (prefers-color-scheme: light) {
+            background-color: fn.global-color(--bg-l1);
+        }
+    }
+
+    @include iro.bem-suffix('dark') {
+        @media (prefers-color-scheme: dark) {
+            background-color: fn.global-color(--bg-l1);
+        }
+    }
 }
 
 @include iro.bem-theme('l2') {
     background-color: fn.global-color(--bg-l2);
+
+    @include iro.bem-suffix('light') {
+        @media (prefers-color-scheme: light) {
+            background-color: fn.global-color(--bg-l2);
+        }
+    }
+
+    @include iro.bem-suffix('dark') {
+        @media (prefers-color-scheme: dark) {
+            background-color: fn.global-color(--bg-l2);
+        }
+    }
 }
 
 @include iro.bem-theme('50') {
     background-color: fn.global-color(--base --50);
+
+    @include iro.bem-suffix('light') {
+        @media (prefers-color-scheme: light) {
+            background-color: fn.global-color(--base --50);
+        }
+    }
+
+    @include iro.bem-suffix('dark') {
+        @media (prefers-color-scheme: dark) {
+            background-color: fn.global-color(--base --50);
+        }
+    }
 }
 
 @each $theme in $static-themes {