diff --git a/src/layout/AppProvider.vue b/src/layout/AppProvider.vue
index 627436b..f4949ec 100644
--- a/src/layout/AppProvider.vue
+++ b/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"
diff --git a/src/pages/colorCard/index.vue b/src/pages/colorCard/index.vue
index 778d353..f5b1479 100644
--- a/src/pages/colorCard/index.vue
+++ b/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,10 +34,14 @@ 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
@@ -97,4 +101,8 @@ const themeModelList: {
   </view>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+// page {
+//   --at-apply: uno: bg-background;
+// }
+</style>
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index 300e6ee..3c84121 100644
--- a/src/pages/demo/index.vue
+++ b/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>