refactor: update theme

Author: cwandev

src/components/NavBar.vue

@@ -20,10 +20,10 @@ const title = computed(() => {
 </script>
 
 <template>
-  <var-app-bar v-show="title" :title="title" :fixed="true" :safe-area-top="true" @click-left="onBack">
+  <var-app-bar v-show="title" :title="title" :fixed="true" :safe-area-top="true">
     <template #left>
       <var-button color="transparent" text-color="#fff" round text @click="onBack">
-        <var-icon name="chevron-left" />
+        <var-icon name="chevron-left" :size="24" />
       </var-button>
     </template>
   </var-app-bar>

src/locales/en-US.json

@@ -1,7 +1,9 @@
 {
   "app": {
     "pleaseUseMobileVisit": "Please use a mobile device to access",
-    "warning": "WARNING"
+    "warning": "WARNING",
+    "notFound": "Not found",
+    "backBtn": "Back"
   },
   "home": {
     "darkMode": "🌗 Dark Mode",

src/locales/zh-CN.json

@@ -1,7 +1,9 @@
 {
   "app": {
     "warning": "警告",
-    "pleaseUseMobileVisit": "请使用移动设备访问"
+    "pleaseUseMobileVisit": "请使用移动设备访问",
+    "notFound": "没有找到",
+    "backBtn": "返回"
   },
   "home": {
     "darkMode": "🌗 暗黑模式",

src/pages/[...all].vue

@@ -12,14 +12,12 @@ function onBack() {
 <template>
   <Container>
     <div text="center gray-300 dark:gray-200 18">
-      <var-icon name="warning" size="3em" />
-      <div> Not found </div>
+      <var-icon name="warning" size="5em" />
+      <div> {{ $t('app.notFound') }} </div>
 
-      <div class="mt-10">
-        <button btn m="3 t8" class="px-10 py-6 font-bold" @click="onBack">
-          Back
-        </button>
-      </div>
+      <var-button type="primary" class="mt-10" @click="onBack">
+        {{ $t('app.backBtn') }}
+      </var-button>
     </div>
   </Container>
 </template>

src/pages/index.vue

@@ -56,15 +56,15 @@ const menus = computed(() => ([
 
 <template>
   <Container>
-    <var-paper radius="10">
+    <var-paper radius="10" :elevation="2">
       <var-cell border>
         {{ t('home.darkMode') }}
         <template #extra>
           <var-switch v-model="checked" @click="toggle" />
         </template>
       </var-cell>
 
-      <var-cell border @click="languagePicker">
+      <var-cell ripple border @click="languagePicker">
         {{ t('home.language') }}
         <template #extra>
           <div class="w-80 flex items-center justify-right">
@@ -78,6 +78,7 @@ const menus = computed(() => ([
         v-for="(item, index) in menus"
         :key="item.router"
         :border="index !== menus.length - 1"
+        ripple
         @click="$router.push(item.router)"
       >
         {{ item.title }}

src/pages/unocss/index.vue

@@ -15,12 +15,8 @@ definePage({
       Hello, Unocss!
     </h1>
 
-    <p class="mt-4 text-gray-700 dark:text-white">
-      This is a simple example of Unocss in action.
+    <p class="mt-4 text-[var(--color-primary)] dark:text-white">
+      This is a simple example of Unocss.
     </p>
-
-    <button class="px-10 py-6 font-bold btn">
-      Button
-    </button>
   </Container>
 </template>

src/styles/app.less

@@ -32,12 +32,12 @@ body {
 // NProgress Style
 #nprogress {
   .bar {
-    background: var(--color-nprogress) !important;
+    background: var(--color-primary) !important;
   }
 
   .spinner-icon {
-    border-top-color: var(--color-nprogress);
-    border-left-color: var(--color-nprogress);
+    border-top-color: var(--color-primary);
+    border-left-color: var(--color-primary);
   }
 }
 

src/styles/dark.ts

@@ -1,9 +1,7 @@
 import { Themes } from '@varlet/ui'
 
 export const darkTheme = Themes.toViewport({
-  ...Themes.dark,
-  '--color-primary': '#00C16A',
-  '--color-nprogress': '#D9FBE8',
+  ...Themes.md3Dark,
 }, {
   viewportUnit: 'vw',
 })

src/styles/light.ts

@@ -1,9 +1,7 @@
 import { Themes } from '@varlet/ui'
 
 export const lightTheme = Themes.toViewport({
-  '--color-primary': '#00C16A',
-  '--color-nprogress': '#75EDAE',
-  '--color-body': '#f7f8fa',
+  ...Themes.md3Light,
 }, {
   viewportUnit: 'vw',
 })

uno.config.ts

@@ -5,18 +5,17 @@ import {
   presetMini,
   presetUno,
 } from 'unocss'
-import { presetVarlet } from '@varlet/preset-unocss'
 
+import { presetVarlet } from '@varlet/preset-unocss'
 import presetRemToPx from '@unocss/preset-rem-to-px'
 
-// Friends who have just used unocss can use this tool: https://to-unocss.netlify.app
-
 export default defineConfig({
   presets: [
     presetUno,
-    presetVarlet(),
     presetAttributify,
-    presetIcons(),
+    presetIcons,
+    presetMini,
+    presetVarlet,
     // Why use this plug-in?
     // The template uses viewport as the mobile adaptation scheme, and the default unit of unocss is rem
     // So it needs to be converted to px, and then postcss converts px to vw/vh to complete the adaptation.
@@ -25,10 +24,5 @@ export default defineConfig({
       // https://juejin.cn/post/7262975395620618298
       baseFontSize: 4,
     }),
-    presetMini(),
-  ],
-  shortcuts: [
-    // shortcuts to multiple utilities
-    ['btn', 'px-6 py-3 rounded-3 border-none inline-block bg-green-400 text-white cursor-pointer !outline-none hover:bg-green-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
   ],
 })