xx

src/layout/AppProvider.vue

@@ -3,7 +3,7 @@
   <view
     id="layout"
     :class="{
-      dark: __themeModel === 'dark',
+      dark: __themeModel === 'DARK',
     }"
     class="bg-page flex flex-col"
     :style="__theme"

src/pages/colorCard/index.vue

@@ -23,7 +23,7 @@ type ThemeModelKey = keyof typeof THEME_MODEL;
 
 const themeModelList: {
   key: ThemeModelKey
-  value: string
+  value: ThemeModelKey
 }[] = [
   {
     key: 'LIGHT',
@@ -34,6 +34,10 @@ const themeModelList: {
     value: 'DARK',
   },
 ];
+
+onMounted(() => {
+  //
+});
 </script>
 
 <template>
@@ -97,4 +101,8 @@ const themeModelList: {
   </view>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+// page {
+//   --at-apply: uno: bg-background;
+// }
+</style>

src/pages/demo/index.vue

@@ -11,7 +11,7 @@ import SvgIcon from '@/components/SvgIcon/index.vue';
       <SvgIcon icon="i-mdi-account-box" size="48" class="text-blue" />
       <SvgIcon icon="i-mdi-account-box" size="32" class="text-green-400" />
       <SvgIcon icon="i-mdi-account-box" class="text-red-400" />
-      <SvgIcon icon="i-svg-spinners-12-dots-scale-rotate" />
+      <SvgIcon icon="i-svg-spinners-12-dots-scale-rotate" class="text-primary" />
     </view>
   </view>
 </template>