ignore: cloud

2 files changed, 48 insertions, 48 deletions

diff --git a/cloud/app/src/style/base.css b/cloud/app/src/style/base.css
index 2c95cdbb7..853b3c386 100644
--- a/cloud/app/src/style/base.css
+++ b/cloud/app/src/style/base.css
@@ -1,6 +1,6 @@
 html {
-  color-scheme: dark;
   line-height: 1;
+  background-color: var(--color-bg);
 }
 
 body {
diff --git a/cloud/app/src/style/token/color.css b/cloud/app/src/style/token/color.css
index 5382321e3..35846acd9 100644
--- a/cloud/app/src/style/token/color.css
+++ b/cloud/app/src/style/token/color.css
@@ -1,53 +1,8 @@
-body {
+:root {
   --color-white: #ffffff;
   --color-black: #000000;
-}
-
-[data-color-mode="dark"] {
-  /* OpenCode theme colors */
-  --color-bg: #0c0c0e;
-  --color-bg-surface: #161618;
-  --color-bg-elevated: #1c1c1f;
-
-  --color-text: #ffffff;
-  --color-text-muted: #a1a1a6;
-  --color-text-disabled: #68686f;
-
-  --color-accent: #007aff;
-  --color-accent-hover: #0056b3;
-  --color-accent-active: #004085;
-
-  --color-success: #30d158;
-  --color-warning: #ff9f0a;
-  --color-danger: #ff453a;
-
-  --color-border: #38383a;
-  --color-border-muted: #2c2c2e;
-
-  /* Button colors */
-  --color-primary: var(--color-accent);
-  --color-primary-hover: var(--color-accent-hover);
-  --color-primary-active: var(--color-accent-active);
-  --color-primary-text: #ffffff;
 
-  --color-danger: #ff453a;
-  --color-danger-hover: #d70015;
-  --color-danger-active: #a50011;
-  --color-danger-text: #ffffff;
-
-  --color-warning: #ff9f0a;
-  --color-warning-hover: #cc7f08;
-  --color-warning-active: #995f06;
-  --color-warning-text: #000000;
-
-  /* Surface colors */
-  --color-surface: var(--color-bg-surface);
-  --color-surface-hover: var(--color-bg-elevated);
-  --color-border: var(--color-border);
-}
-
-[data-color-mode="light"] {
-  /* OpenCode light theme colors */
+  /* Default light theme colors */
   --color-bg: #ffffff;
   --color-bg-surface: #f5f5f7;
   --color-bg-elevated: #ffffff;
@@ -88,3 +43,48 @@ body {
   --color-surface-hover: var(--color-bg-elevated);
   --color-border: var(--color-border);
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* OpenCode dark theme colors */
+    --color-bg: #0c0c0e;
+    --color-bg-surface: #161618;
+    --color-bg-elevated: #1c1c1f;
+
+    --color-text: #ffffff;
+    --color-text-muted: #a1a1a6;
+    --color-text-disabled: #68686f;
+
+    --color-accent: #007aff;
+    --color-accent-hover: #0056b3;
+    --color-accent-active: #004085;
+
+    --color-success: #30d158;
+    --color-warning: #ff9f0a;
+    --color-danger: #ff453a;
+
+    --color-border: #38383a;
+    --color-border-muted: #2c2c2e;
+
+    /* Button colors */
+    --color-primary: var(--color-accent);
+    --color-primary-hover: var(--color-accent-hover);
+    --color-primary-active: var(--color-accent-active);
+    --color-primary-text: #ffffff;
+
+    --color-danger: #ff453a;
+    --color-danger-hover: #d70015;
+    --color-danger-active: #a50011;
+    --color-danger-text: #ffffff;
+
+    --color-warning: #ff9f0a;
+    --color-warning-hover: #cc7f08;
+    --color-warning-active: #995f06;
+    --color-warning-text: #000000;
+
+    /* Surface colors */
+    --color-surface: var(--color-bg-surface);
+    --color-surface-hover: var(--color-bg-elevated);
+    --color-border: var(--color-border);
+  }
+}