diff --git a/src/views/demo/base/unocss/index.vue b/src/views/demo/base/unocss/index.vue
index 8d6358a..520cc08 100644
--- a/src/views/demo/base/unocss/index.vue
+++ b/src/views/demo/base/unocss/index.vue
@@ -13,50 +13,50 @@
     <div f-c-c flex-col mt-20 w-350>
       <div flex flex-wrap justify-around p-10 rounded-10 b-1 bc-ccc>
         <div w-50 h-50 b-1 rounded-5 f-c-c p-10 m-20>
-          <span w-6 h-6 rounded-3 bg-black></span>
+          <span w-6 h-6 rounded-3 bg-black dark:bg-white />
         </div>
         <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
-          <span w-6 h-6 rounded-3 bg-black></span>
-          <span w-6 h-6 rounded-3 bg-black self-end></span>
+          <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+          <span w-6 h-6 rounded-3 bg-black dark:bg-white self-end />
         </div>
         <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
-          <span w-6 h-6 rounded-3 bg-black></span>
-          <span w-6 h-6 rounded-3 bg-black self-center></span>
-          <span w-6 h-6 rounded-3 bg-black self-end></span>
+          <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+          <span w-6 h-6 rounded-3 bg-black dark:bg-white self-center />
+          <span w-6 h-6 rounded-3 bg-black dark:bg-white self-end />
         </div>
         <div w-50 h-50 b-1 rounded-5 flex justify-between p-10 m-20>
           <div flex-col justify-between>
-            <span w-6 h-6 rounded-3 bg-black></span>
-            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
           </div>
           <div flex-col justify-between>
-            <span w-6 h-6 rounded-3 bg-black></span>
-            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
           </div>
         </div>
         <div w-50 h-50 b-1 rounded-5 flex-col justify-between items-center p-10 m-20>
           <div flex w-full justify-between>
-            <span w-6 h-6 rounded-3 bg-black></span>
-            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
           </div>
-          <div w-6 h-6 rounded-3 bg-black></div>
+          <div w-6 h-6 rounded-3 bg-black dark:bg-white />
           <div flex w-full justify-between>
-            <span w-6 h-6 rounded-3 bg-black></span>
-            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
           </div>
         </div>
         <div w-50 h-50 b-1 rounded-5 flex-col justify-between p-10 m-20>
           <div flex w-full justify-between>
-            <span w-6 h-6 rounded-3 bg-black></span>
-            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
           </div>
           <div flex w-full justify-between>
-            <span w-6 h-6 rounded-3 bg-black></span>
-            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
           </div>
           <div flex w-full justify-between>
-            <span w-6 h-6 rounded-3 bg-black></span>
-            <span w-6 h-6 rounded-3 bg-black></span>
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
+            <span w-6 h-6 rounded-3 bg-black dark:bg-white />
           </div>
         </div>
       </div>