fix(core): apply color scheme according to media rather than classname (#149)

liangmiQwQ · web-flow · commit f31c70bae552 · 2025-12-25T01:20:11.000+09:00
diff --git a/packages/core/src/client/standalone/index.html b/packages/core/src/client/standalone/index.html
@@ -6,7 +6,7 @@
     <title>Vite DevTools</title>
     <meta name="description" content="Vite DevTools" />
   </head>
-  <body class="font-sans dark:text-white dark:bg-black">
+  <body class="font-sans">
     <div id="app"></div>
     <script type="module" src="./main.ts"></script>
   </body>
diff --git a/packages/core/src/client/standalone/styles/main.css b/packages/core/src/client/standalone/styles/main.css
@@ -6,6 +6,8 @@ body,
   padding: 0;
 }
 
-html.dark {
-  color-scheme: dark;
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,8 @@ body,`
`6`	`6`	`padding: 0;`
`7`	`7`	`}`
`8`	`8`
`9`		`-html.dark {`
`10`		`- color-scheme: dark;`
	`9`	`+@media (prefers-color-scheme: dark) {`
	`10`	`+ html {`
	`11`	`+ color-scheme: dark;`
	`12`	`+ }`
`11`	`13`	`}`