wip: 深色模式开发

src/components/MCard/index.ts

@@ -1 +0,0 @@
-export { default } from './index.vue'

src/components/MCard/index.vue

@@ -5,7 +5,7 @@
       padding: `${padding}px`,
       background: `${bgColor}`,
     }"
-    :class="[`${rounded ? 'rounded-12px' : ''}`]"
+    :class="[`${rounded ? 'rounded-12px' : ''}`, `${spaceClass}`]"
   >
     <slot></slot>
   </view>
@@ -14,23 +14,48 @@
 <script setup lang="ts">
   defineOptions({ name: 'MCard' })
 
-  withDefaults(
+  const props = withDefaults(
     defineProps<{
       bgColor?: string
       rounded?: boolean
       padding?: number | string
+      border?: boolean
+      space?: boolean
+      justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
+      direction?: 'vertical' | 'horizontal'
+      align?: 'center'
     }>(),
     {
-      bgColor: 'white',
+      bgColor: 'var(--bg-card)',
       padding: 16,
       rounded: true,
+      border: false,
+      space: false,
+      direction: 'vertical',
+      align: 'center',
+      justify: 'start',
     }
   )
+
+  const spaceClass = computed(() => {
+    if (props.space) {
+      let cls = `flex gap-8px items-${props.align}`
+      if (props.direction === 'vertical') {
+        cls = cls + ' flex-col'
+      }
+      if (props.justify) {
+        cls = cls + ` justify-${props.justify}`
+      }
+      return cls
+    } else {
+      return ''
+    }
+  })
 </script>
 
 <style scoped lang="scss">
   .m-card {
-    @apply my-12px;
+    @apply my-12px bg-bg-card;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 20%);
   }
 </style>

src/components/MFooter/index.ts

@@ -1 +0,0 @@
-export { default } from './index.vue'

src/components/MPage/index.ts

@@ -1 +0,0 @@
-export { default } from './index.vue'

src/components/MPage/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-18 11:40:55
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-09 11:08:08
+ * @LastEditTime: 2024-07-09 17:24:26
  * @Description: 
 -->
 <template>
@@ -12,8 +12,12 @@
 </template>
 
 <script setup lang="ts">
+  import { useAppStore } from '@/stores/modules/appStore'
+
   defineOptions({ name: 'MPage' })
 
+  const appStore = useAppStore()
+
   withDefaults(
     defineProps<{
       bg?: boolean
@@ -27,7 +31,7 @@
 <style scoped lang="scss">
   .m-page {
     @apply relative flex-1 h-full p-12px overflow-y-auto;
-    background: linear-gradient(180deg, #c5e6ff 0%, #ffffff 100%);
+    background: linear-gradient(180deg, var(--color-primary-2) 0%, var(--bg-page) 100%);
     :deep(.m-footer) {
       padding-bottom: 25px;
     }

src/layouts/default.vue

@@ -2,16 +2,28 @@
  * @Author: wjc
  * @Date: 2024-06-25 15:42:58
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-03 11:40:24
+ * @LastEditTime: 2024-07-09 17:44:34
  * @Description: 
 -->
 <template>
-  <MPage>
-    <slot></slot>
-    <MFooter></MFooter>
-  </MPage>
+  <view class="default-layout" :class="[appStore.isDark ? 'dark' : 'light']">
+    <MPage>
+      <slot></slot>
+      <MFooter></MFooter>
+    </MPage>
+  </view>
 </template>
 
 <script setup lang="ts">
+  import { useAppStore } from '@/stores/modules/appStore'
+
   defineOptions({ name: 'DefaultLayout' })
+
+  const appStore = useAppStore()
 </script>
+
+<style scoped lang="scss">
+  .default-layout {
+    @apply relative flex-1 h-full overflow-y-auto color-text-1;
+  }
+</style>

src/manifest.json

@@ -5,8 +5,21 @@
     "versionName" : "1.0.0",
     "versionCode" : "100",
     "transformPx" : false,
+    "h5" : {
+        "darkmode" : true,
+        "themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
+    },
     /* 5+App特有相关 */
     "app-plus" : {
+        "darkmode": true,
+        "themeLocation": "theme.json",
+        "safearea": { //iOS平台的安全区域
+            "background": "#ffffff",
+            "backgroundDark": "#2f0508", // HX 3.1.19+支持
+            "bottom": {
+                "offset": "auto"
+            }
+        },
         "usingComponents" : true,
         "nvueStyleCompiler" : "uni-app",
         "compilerVersion" : 3,

src/models/appTypes.ts

@@ -1,3 +1,4 @@
 export interface AppState {
   selectedTabbar: number
+  isDark: boolean
 }

src/pages/index/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2019-08-22 19:41:20
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-09 10:11:27
+ * @LastEditTime: 2024-07-09 17:56:17
  * @Description: 
 -->
 <template>
@@ -18,7 +18,7 @@
     </view>
     <u-button type="primary" text="确定"></u-button>
     <u-button @click="onTest">前往 Auth 页面</u-button>
-    <view style="height: 500px; background: #fff">长内容</view>
+    <view style="height: 500px">长内容</view>
   </view>
   <MTabBar></MTabBar>
 </template>

src/pages/mine/index.vue

@@ -2,16 +2,20 @@
  * @Author: wjc
  * @Date: 2024-06-17 16:02:59
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-08 16:56:12
+ * @LastEditTime: 2024-07-09 17:36:34
  * @Description: 
 -->
 <template>
   <MCard>
     <view>{{ userStore.userInfo.name }}</view>
   </MCard>
+  <MCard :space="true" direction="horizontal" justify="between">
+    <view>深色模式</view>
+    <up-switch v-model="appStore.isDark"></up-switch>
+  </MCard>
   <up-button type="primary" class="btn-primary" @click="handleConfirmLogout">退出登录</up-button>
   <up-modal :show="logoutShow">
-    <view class="text-18px py-24px">确认退出登录？</view>
+    <view class="text-18px py-24px color-text-1">确认退出登录？</view>
     <template #confirmButton>
       <view class="flex justify-between text-center gap-20px">
         <view class="btn-default flex-1" @click="handleCancel">取消</view>
@@ -24,11 +28,14 @@
 
 <script setup lang="ts">
   import { useUserStore } from '@/stores/modules/userStore'
+  import { useAppStore } from '@/stores/modules/appStore'
 
   defineOptions({ name: 'Mine' })
 
   const userStore = useUserStore()
+  const appStore = useAppStore()
   const logoutShow = ref(false)
+  const darkValue = ref(false)
 
   const handleCancel = () => {
     logoutShow.value = false
@@ -41,6 +48,10 @@
     onLogout()
   }
 
+  // const changeDark = (value: boolean) => {
+  //   appStore.isDark = value
+  // }
+
   const onLogout = () => {
     userStore.logoutAction().then((res) => {
       if (res) {

src/static/styles/vars.scss

@@ -1,10 +1,23 @@
 :root {
   --color-primary: #0f67f8;
+  --color-primary-2: #c5e6ff;
   --color-success: #10b86f;
   --color-warning: #ffa800;
   --color-danger: #ff495e;
   --color-error: #ff495e;
   --color-info: #26a2fa;
 
+  --text-color-1: #213547;
+
   --bg-page: #f1f1f3;
+  --bg-card: #fff;
+}
+
+.dark {
+  --color-primary-2: #242424;
+
+  --bg-page: #242424;
+  --bg-card: #1a1a1a;
+
+  --text-color-1: rgba(255, 255, 255, 0.87);
 }

src/stores/modules/appStore.ts

@@ -13,8 +13,10 @@ export const useAppStore = defineStore('app', {
   state: (): AppState => {
     return {
       selectedTabbar: 0,
+      isDark: false,
     }
   },
+  persist: true,
   actions: {
     setTabbar(val: number) {
       this.selectedTabbar = val

uno.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2023-05-07 20:59:28
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-26 15:00:37
+ * @LastEditTime: 2024-07-09 17:46:51
  * @Description:
  */
 import {
@@ -73,7 +73,7 @@ export default defineConfig({
       danger: 'var(--color-danger)',
       error: 'var(--color-error)',
       info: 'var(--color-info)',
-      color: {
+      text: {
         '1': 'var(--text-color-1)',
         '2': 'var(--text-color-2)',
         '3': 'var(--text-color-3)',
@@ -89,6 +89,7 @@ export default defineConfig({
         3: 'var(--bg-color-3)',
         4: 'var(--bg-color-4)',
         page: 'var(--bg-page)',
+        card: 'var(--bg-card)',
         place: 'var(--text-color-place)',
         divider: 'var(--bg-divider)',
         overlay: 'var(--bg-overlay)',