fix(style): dark mode on some mobile devices (#33)

zhufucdev · web-flow · commit a4473668cde3 · 2025-12-02T23:46:25.000+08:00
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -41,7 +41,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="min-h-screen w-full bg-gray-50 flex flex-row dark:bg-gray-900">
+  <div class="min-h-screen w-full flex flex-row ">
     <div
       class="fixed z-9999 left-0 top-0 md:relative h-screen max-h-screen flex flex-col p-5 transition-all duration-300 ease-in-out overflow-hidden"
       :class="`${(collapsed ? 'w-4/5 md:w-80 shadow-lg' : 'w-20 bg-transparent md:bg-gray-200')} bg-gray-200 dark:bg-gray-800`">
@@ -94,4 +94,18 @@ onMounted(() => {
 .fade-leave-to {
   opacity: 0;
 }
+
+</style>
+
+<style>
+:root {
+  --at-apply: bg-gray-50;
+}
+
+@media(prefers-color-scheme: dark) {
+  :root {
+    --at-apply: bg-gray-900;
+  }
+}
+
 </style>
diff --git a/unocss.config.ts b/unocss.config.ts
@@ -1,8 +1,12 @@
-import { defineConfig, presetWind3, presetAttributify } from 'unocss'
+import {
+  defineConfig,
+  presetWind3,
+  presetAttributify,
+  transformerDirectives,
+} from "unocss";
 
 export default defineConfig({
-  presets: [
-    presetWind3(),
-    presetAttributify(),
-  ],
-})
+  presets: [presetWind3(), presetAttributify()],
+  transformers: [transformerDirectives()],
+});
+
