chore: Optimize interface for light mode (#51)

Author: cwandev

index.html

@@ -8,12 +8,8 @@
       ;(function () {
         const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
         const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
-        
-        if (setting === 'dark' || (prefersDark && setting !== 'light')) {
+        if (setting === 'dark' || (prefersDark && setting !== 'light'))
           document.documentElement.classList.toggle('dark', true)
-        } else {
-          document.documentElement.classList.toggle('light', true)
-        }
       })()
     </script>
   </head>

src/components/container/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full p-16 py-60" light="bg-[--van-gray-1]">
+  <main class="h-full w-full p-16 py-60">
     <slot />
-  </div>
+  </main>
 </template>

src/styles/app.less

@@ -4,6 +4,11 @@
   overflow-x: hidden;
 }
 
+html {
+  background: var(--van-gray-1);
+  color-scheme: light;
+}
+
 html.dark {
   background: #121212;
   color-scheme: dark;

src/views/charts/index.vue

@@ -72,15 +72,15 @@ const onClickLeft = () => history.back()
     <VanNavBar title="📊 Echarts" left-arrow fixed @click-left="onClickLeft" />
 
     <Container>
-      <div class="chart light:bg-white">
+      <div class="chart">
         <Chart :option="refBarOption" :style="{ height: '330px' }" />
       </div>
 
-      <div class="chart item light:bg-white">
+      <div class="chart item">
         <Chart :option="refLineOption" :style="{ height: '330px' }" />
       </div>
 
-      <div class="chart item light:bg-white">
+      <div class="chart item">
         <Chart :option="refScoreOption" :style="{ height: '330px' }" />
       </div>
     </Container>

src/views/index.vue

@@ -18,7 +18,7 @@ function toggle() {
 </script>
 
 <template>
-  <div class="h-full w-full py-60" light="bg-[--van-gray-1]">
+  <main class="h-full w-full py-60">
     <VanCellGroup inset title="一个集成最新技术栈、完整干净的移动端模板">
       <VanCell center title="🌗 暗黑模式">
         <template #right-icon>
@@ -40,5 +40,5 @@ function toggle() {
         </template>
       </VanCell>
     </VanCellGroup>
-  </div>
+  </main>
 </template>

src/views/mock/index.vue

@@ -32,7 +32,7 @@ const onClickLeft = () => history.back()
         来自异步请求的数据
       </div>
 
-      <div class="data-content dark:bg-[--van-background-2] light:bg-white">
+      <div class="data-content bg-white dark:bg-[--van-background-2]">
         <div v-if="messages">
           {{ messages }}
         </div>