diff --git a/.changeset/polite-points-exercise.md b/.changeset/polite-points-exercise.md
new file mode 100644
index 00000000..a6d182cc
--- /dev/null
+++ b/.changeset/polite-points-exercise.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Add color schema
diff --git a/bindings/devup-ui-wasm/src/lib.rs b/bindings/devup-ui-wasm/src/lib.rs
index bcad86ec..6a10f4ba 100644
--- a/bindings/devup-ui-wasm/src/lib.rs
+++ b/bindings/devup-ui-wasm/src/lib.rs
@@ -235,7 +235,7 @@ mod tests {
 
         assert_eq!(
             get_css().unwrap(),
-            ":root{--primary:#FFF;}\n:root[data-theme=dark]{--primary:#000;}\n"
+            ":root{color-scheme:light;--primary:#FFF;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#000;}\n"
         );
     }
 
diff --git a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__deserialize_theme.snap b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__deserialize_theme.snap
index 2f9fdfdb..35b833db 100644
--- a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__deserialize_theme.snap
+++ b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__deserialize_theme.snap
@@ -2,4 +2,4 @@
 source: bindings/devup-ui-wasm/src/lib.rs
 expression: theme.to_css()
 ---
-":root{--primary:#000;}\n:root[data-theme=dark]{--primary:#fff;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5em}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5em}}\n@media (min-width:768px){.typo-default{font-family:Arial;font-size:24px;line-height:1.5;letter-spacing:0.5em}}"
+":root{color-scheme:light;--primary:#000;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#fff;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5em}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5em}}\n@media (min-width:768px){.typo-default{font-family:Arial;font-size:24px;line-height:1.5;letter-spacing:0.5em}}"
diff --git a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-2.snap b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-2.snap
index ffb48ab5..27e376b0 100644
--- a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-2.snap
+++ b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-2.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/theme.rs
 expression: theme.to_css()
 ---
-":root{--primary:#000;}\n:root[data-theme=dark]{--primary:#000;}\n"
+":root{color-scheme:light;--primary:#000;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#000;}\n"
diff --git a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-3.snap b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-3.snap
index bc44dff4..f144fad0 100644
--- a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-3.snap
+++ b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-3.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/theme.rs
 expression: theme.to_css()
 ---
-":root{--primary:#000;}\n:root[data-theme=b]{--primary:#000;}\n"
+":root{color-scheme:light;--primary:#000;}\n:root[data-theme=b]{color-scheme:dark;--primary:#000;}\n"
diff --git a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-4.snap b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-4.snap
index bde53e3e..952dcc47 100644
--- a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-4.snap
+++ b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-4.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/theme.rs
 expression: theme.to_css()
 ---
-":root{--primary:#000;}\n:root[data-theme=a]{--primary:#000;}\n:root[data-theme=b]{--primary:#000;}\n:root[data-theme=c]{--primary:#000;}\n"
+":root{color-scheme:light;--primary:#000;}\n:root[data-theme=a]{color-scheme:dark;--primary:#000;}\n:root[data-theme=b]{color-scheme:dark;--primary:#000;}\n:root[data-theme=c]{color-scheme:dark;--primary:#000;}\n"
diff --git a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-5.snap b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-5.snap
new file mode 100644
index 00000000..a6d06aaa
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-5.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/theme.rs
+expression: theme.to_css()
+---
+":root{--primary:#000;}\n"
diff --git a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme.snap b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme.snap
index ffb48ab5..27e376b0 100644
--- a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme.snap
+++ b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/theme.rs
 expression: theme.to_css()
 ---
-":root{--primary:#000;}\n:root[data-theme=dark]{--primary:#000;}\n"
+":root{color-scheme:light;--primary:#000;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#000;}\n"
diff --git a/libs/sheet/src/theme.rs b/libs/sheet/src/theme.rs
index b5ebc1a7..94c06e7b 100644
--- a/libs/sheet/src/theme.rs
+++ b/libs/sheet/src/theme.rs
@@ -152,16 +152,29 @@ impl Theme {
                 });
                 col
             };
+            let single_theme = entries.len() <= 1;
             for (theme_name, theme_properties) in entries {
                 if let Some(theme_key) = if *theme_name == *default_theme_key {
                     None
                 } else {
                     Some(theme_name)
                 } {
-                    theme_declaration
-                        .push_str(format!(":root[data-theme={}]{{", theme_key).as_str());
+                    theme_declaration.push_str(
+                        format!(":root[data-theme={}]{{{}", theme_key, "color-scheme:dark;")
+                            .as_str(),
+                    );
                 } else {
-                    theme_declaration.push_str(":root{");
+                    theme_declaration.push_str(
+                        format!(
+                            ":root{{{}",
+                            if single_theme {
+                                ""
+                            } else {
+                                "color-scheme:light;"
+                            }
+                        )
+                        .as_str(),
+                    );
                 }
                 for (prop, value) in theme_properties.0.iter() {
                     theme_declaration.push_str(format!("--{}:{};", prop, value).as_str());
@@ -278,7 +291,7 @@ mod tests {
         let css = theme.to_css();
         assert_eq!(
             css,
-            ":root{--primary:#000;}\n:root[data-theme=dark]{--primary:#fff;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}.typo-default1{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}}"
+            ":root{color-scheme:light;--primary:#000;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#fff;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}.typo-default1{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}}"
         );
 
         assert_eq!(Theme::default().to_css(), "");
@@ -386,6 +399,17 @@ mod tests {
             }),
         );
         assert_debug_snapshot!(theme.to_css());
+
+        let mut theme = Theme::default();
+        theme.add_color_theme(
+            "light",
+            ColorTheme({
+                let mut map = HashMap::new();
+                map.insert("primary".to_string(), "#000".to_string());
+                map
+            }),
+        );
+        assert_debug_snapshot!(theme.to_css());
     }
 
     #[test]