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: ThemeModelKey
+  value: string
 }[] = [
   {
     key: 'LIGHT',
@@ -34,14 +34,10 @@ const themeModelList: {
     value: 'DARK',
   },
 ];
-
-onMounted(() => {
-  //
-});
 </script>
 
 <template>
-  <view class="bg-background flex-1">
+  <view class="bg-background  flex-1">
     <div class="py-[32rpx] b flex flex-col b-[#123]">
       <h2 class="text-onBackground">
         click it to change themeModel
@@ -101,8 +97,4 @@ onMounted(() => {
   </view>
 </template>
 
-<style lang="scss">
-// page {
-//   --at-apply: uno: bg-background;
-// }
-</style>
+<style lang="scss" scoped></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" class="text-primary" />
+      <SvgIcon icon="i-svg-spinners-12-dots-scale-rotate" />
     </view>
   </view>
 </template>