wip: support for dark mode

Author: cwandev

package.json

@@ -16,7 +16,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
     "store": "^2.0.12",
-    "vant": "^3.4.9",
+    "vant": "4.0.0-alpha.4",
     "vconsole": "^3.14.6",
     "vue": "^3.2.25",
     "vue-router": "^4.0.15"

plop-templates/component/index.hbs

@@ -8,7 +8,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-export default defineComponent({})
+export default defineComponent({
+  name: '{{ properCase name }}',
+})
 </script>
 {{/if}}
 

plop-templates/view/index.hbs

@@ -8,7 +8,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-export default defineComponent({})
+export default defineComponent({
+  name: '{{ properCase name }}',
+})
 </script>
 {{/if}}
 

src/App.vue

@@ -1,3 +1,30 @@
 <template>
-  <router-view />
+  <van-config-provider :theme="theme">
+    <van-switch v-model="checked" />
+    <router-view />
+  </van-config-provider>
 </template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue'
+export default defineComponent({
+  setup() {
+    const theme = ref('dark')
+    const checked = ref(true)
+
+    watch(
+      checked,() => {
+        if(checked.value) {
+          document.getElementsByTagName('html')[0].setAttribute('data-theme', 'data-theme-dark')
+        } else {
+          document.getElementsByTagName('html')[0].setAttribute('data-theme', 'data-theme-light')
+        }
+    }, { immediate: true })
+    
+    return {
+      theme,
+      checked
+    }
+  }
+})
+</script>

src/app.less

@@ -0,0 +1,21 @@
+body {
+  overflow: hidden;
+}
+#app {
+  height: 100%;
+  overflow-x: hidden;
+}
+
+*,
+*::before,
+*::after {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+[data-theme='data-theme-dark'] {
+  &,
+  * {
+    color-scheme: dark !important;
+  }
+}

src/main.ts

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import { createPinia } from 'pinia'
 
+import './app.less'
 import Vant from 'vant'
 import 'vant/lib/index.css'