From fac854dbbd5366c70c58900a1cae047f37ff6f02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 29 Jun 2022 13:58:44 +0300
Subject: [PATCH] Fixed #2730 - Add color-scheme style to Themes

---
 public/themes/arya-blue/theme.css               | 1 +
 public/themes/arya-green/theme.css              | 1 +
 public/themes/arya-orange/theme.css             | 1 +
 public/themes/arya-purple/theme.css             | 1 +
 public/themes/bootstrap4-dark-blue/theme.css    | 1 +
 public/themes/bootstrap4-dark-purple/theme.css  | 1 +
 public/themes/bootstrap4-light-blue/theme.css   | 1 +
 public/themes/bootstrap4-light-purple/theme.css | 1 +
 public/themes/fluent-light/theme.css            | 1 +
 public/themes/lara-dark-blue/theme.css          | 1 +
 public/themes/lara-dark-indigo/theme.css        | 1 +
 public/themes/lara-dark-purple/theme.css        | 1 +
 public/themes/lara-dark-teal/theme.css          | 1 +
 public/themes/lara-light-blue/theme.css         | 1 +
 public/themes/lara-light-indigo/theme.css       | 1 +
 public/themes/lara-light-purple/theme.css       | 1 +
 public/themes/lara-light-teal/theme.css         | 1 +
 public/themes/luna-amber/theme.css              | 1 +
 public/themes/luna-blue/theme.css               | 1 +
 public/themes/luna-green/theme.css              | 1 +
 public/themes/luna-pink/theme.css               | 1 +
 public/themes/md-dark-deeppurple/theme.css      | 1 +
 public/themes/md-dark-indigo/theme.css          | 1 +
 public/themes/md-light-deeppurple/theme.css     | 1 +
 public/themes/md-light-indigo/theme.css         | 1 +
 public/themes/mdc-dark-deeppurple/theme.css     | 1 +
 public/themes/mdc-dark-indigo/theme.css         | 1 +
 public/themes/mdc-light-deeppurple/theme.css    | 1 +
 public/themes/mdc-light-indigo/theme.css        | 1 +
 public/themes/nova-accent/theme.css             | 1 +
 public/themes/nova-alt/theme.css                | 1 +
 public/themes/nova-vue/theme.css                | 1 +
 public/themes/nova/theme.css                    | 1 +
 public/themes/rhea/theme.css                    | 1 +
 public/themes/saga-blue/theme.css               | 1 +
 public/themes/saga-green/theme.css              | 1 +
 public/themes/saga-orange/theme.css             | 1 +
 public/themes/saga-purple/theme.css             | 1 +
 public/themes/tailwind-light/theme.css          | 1 +
 public/themes/vela-blue/theme.css               | 1 +
 public/themes/vela-green/theme.css              | 1 +
 public/themes/vela-orange/theme.css             | 1 +
 public/themes/vela-purple/theme.css             | 1 +
 43 files changed, 43 insertions(+)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 86cc3a38d..21f6df7d3 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 1px #93cbf9;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
 }
 
 * {
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 8c3279d3a..ab013b4d0 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 1px #a7d8a9;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
 }
 
 * {
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 9ccb4e321..25bb3a59d 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 1px #ffe284;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
 }
 
 * {
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index cd4dcefc8..2229b7e8c 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 1px #cf95d9;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
 }
 
 * {
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 08b0a4bc0..2750b42a3 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.04);
   --focus-ring: 0 0 0 1px #e3f3fe;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
 }
 
 * {
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 1f8df372d..28a833021 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.04);
   --focus-ring: 0 0 0 1px #f0e6f5;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
 }
 
 * {
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index d8bc79a6a..7ede1d15b 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#e9ecef;
   --focus-ring: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 22e390d43..8cf12df26 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#e9ecef;
   --focus-ring: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 2e66cefa9..c904d1939 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#f3f2f1;
   --focus-ring: inset 0 0 0 1px #605e5c;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index db42e6c8d..f9f3018b4 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
 }
 
 * {
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index f716b8ca6..e515e5f59 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
 }
 
 * {
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index fe2cc9259..d542a71d6 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
 }
 
 * {
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index e097d60ad..07ba47c1b 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: dark;
 }
 
 * {
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index e5e6f1936..c8213a4bf 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#f6f9fc;
   --focus-ring: 0 0 0 0.2rem #BFDBFE;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 41ba07ee7..b0db29633 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#f6f9fc;
   --focus-ring: 0 0 0 0.2rem #C7D2FE;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 1128164f9..8efa41a3e 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#f6f9fc;
   --focus-ring: 0 0 0 0.2rem #DDD6FE;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index ae66ade0a..cabba488d 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#f6f9fc;
   --focus-ring: 0 0 0 0.2rem #99F6E4;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 81e3d0fce..78b4ffa9d 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#4c4c4c;
   --focus-ring: 0 0 0 0.1rem white;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light dark;
 }
 
 * {
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index a894b8997..801677eb8 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#4c4c4c;
   --focus-ring: 0 0 0 0.1rem white;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light dark;
 }
 
 * {
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 9787dec8c..95f81067d 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#4c4c4c;
   --focus-ring: 0 0 0 0.1rem white;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light dark;
 }
 
 * {
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index f8cfefe86..05b0dde77 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#4c4c4c;
   --focus-ring: 0 0 0 0.1rem white;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light dark;
 }
 
 * {
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 47df03abf..2bdb82f15 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:hsla(0,0%,100%,.04);
   --focus-ring: none;
   --maskbg: rgba(0, 0, 0, 0.32);
+  color-scheme: dark;
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 9b17c799f..49c337531 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:hsla(0,0%,100%,.04);
   --focus-ring: none;
   --maskbg: rgba(0, 0, 0, 0.32);
+  color-scheme: dark;
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 983594e5f..6a43cb3f5 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(0,0,0,.04);
   --focus-ring: none;
   --maskbg: rgba(0, 0, 0, 0.32);
+  color-scheme: light;
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 4a56ee309..a055db57c 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(0,0,0,.04);
   --focus-ring: none;
   --maskbg: rgba(0, 0, 0, 0.32);
+  color-scheme: light;
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 13cb56225..78ef14edf 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:hsla(0,0%,100%,.04);
   --focus-ring: none;
   --maskbg: rgba(0, 0, 0, 0.32);
+  color-scheme: dark;
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index dcb9e781b..cb92f2bba 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:hsla(0,0%,100%,.04);
   --focus-ring: none;
   --maskbg: rgba(0, 0, 0, 0.32);
+  color-scheme: dark;
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index c95dc020f..1074cc584 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(0,0,0,.04);
   --focus-ring: none;
   --maskbg: rgba(0, 0, 0, 0.32);
+  color-scheme: light;
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index cc01f869f..b903072bc 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(0,0,0,.04);
   --focus-ring: none;
   --maskbg: rgba(0, 0, 0, 0.32);
+  color-scheme: light;
 }
 
 /* roboto-regular - latin-ext_latin */
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index bb17b2aee..77a4bb009 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#eaeaea;
   --focus-ring: 0 0 0 0.2rem #8dcdff;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 52f5f4612..1a4b1c17b 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#eaeaea;
   --focus-ring: 0 0 0 0.2rem #8dcdff;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index d83db26ca..6a580ac74 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#eaeaea;
   --focus-ring: 0 0 0 0.2rem #c2e9d8;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 50914c667..e59222f91 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:#eaeaea;
   --focus-ring: 0 0 0 0.2rem #8dcdff;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index f0129d3df..228d9b2e6 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -42,6 +42,7 @@
   --surface-hover: #eaeaea;
   --focus-ring: 0 0 0 0.2rem #e4e9ec;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 72269ad94..46d19a838 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -42,6 +42,7 @@
   --surface-hover: #e9ecef;
   --focus-ring: 0 0 0 0.2rem #a6d5fa;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 4eb838054..279d4c4c9 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -42,6 +42,7 @@
   --surface-hover: #e9ecef;
   --focus-ring: 0 0 0 0.2rem #b7e0b8;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index eff7de935..0631ee761 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -42,6 +42,7 @@
   --surface-hover: #e9ecef;
   --focus-ring: 0 0 0 0.2rem #ffe69c;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 1ee15ced6..8ed843b51 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover: #e9ecef;
   --focus-ring: 0 0 0 0.2rem #df9eea;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 * {
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index d693c61c2..0e94f5c2a 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -42,6 +42,7 @@
   --surface-hover: #f4f4f5;
   --focus-ring: 0 0 0 1px #6366F1;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light;
 }
 
 @font-face {
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 42f98ba3f..25c413631 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 1px #93cbf9;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light dark;
 }
 
 * {
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 75ace5b7d..67616bdb2 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 1px #a7d8a9;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light dark;
 }
 
 * {
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 42984a955..41e48b048 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 1px #ffe284;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light dark;
 }
 
 * {
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 74ee80818..4bef64e4b 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 1px #cf95d9;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light dark;
 }
 
 * {