From b57899b30992be3a60ee97f198b65d647402ab95 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 13 Oct 2024 11:14:10 +0200
Subject: Themes with @light/@dark suffix

---
 src/_themes.scss | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

(limited to 'src')

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 {
-- 
cgit v1.2.3-70-g09d2