Merge pull request #39 from ximo-156/main-min

feat: 增加黑暗主题
codercup · Mar 28, 2024 · 1527e69 · 1527e69
2 parents 81a5017 + a67c786
commit 1527e69
Show file tree

Hide file tree

Showing 17 changed files with 105 additions and 19 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -49,5 +49,6 @@
     "uvui",
     "WechatMiniprogram"
   ],
-  "typescript.tsdk": "node_modules\\typescript\\lib"
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "i18n-ally.localesPaths": ["src/locale"]
 }
diff --git a/manifest.config.ts b/manifest.config.ts
@@ -39,12 +39,21 @@ export default defineManifestConfig({
       autoclose: true,
       delay: 0,
     },
+    safearea: {
+      // iOS平台的安全区域
+      background: '@bgColorBottom',
+      backgroundDark: '#2f0508', // HX 3.1.19+支持
+      bottom: {
+        offset: 'auto',
+      },
+    },
     /* 模块配置 */
     modules: {},
     /* 应用发布信息 */
     distribute: {
       /* android打包配置 */
       android: {
+        darkmode: true, // 暗黑模式
         minSdkVersion: 30,
         targetSdkVersion: 30,
         abiFilters: ['armeabi-v7a', 'arm64-v8a'],
@@ -67,7 +76,9 @@ export default defineManifestConfig({
         ],
       },
       /* ios打包配置 */
-      ios: {},
+      ios: {
+        darkmode: true, // 暗黑模式
+      },
       /* SDK配置 */
       sdkConfigs: {},
       /* 图标配置 */
@@ -81,14 +92,17 @@ export default defineManifestConfig({
   quickapp: {},
   /* 小程序特有相关 */
   'mp-weixin': {
+    darkmode: true, // 暗黑模式
     appid: VITE_WX_APPID,
     setting: {
       urlCheck: false,
     },
     usingComponents: true,
     // __usePrivacyCheck__: true,
   },
+  // 支付宝小程序配置
   'mp-alipay': {
+    // darkmode: true, // 暗黑模式
     usingComponents: true,
   },
   'mp-baidu': {

diff --git a/pages.config.ts b/pages.config.ts
@@ -4,40 +4,42 @@ export default defineUniPages({
   globalStyle: {
     navigationStyle: 'default',
     navigationBarTitleText: 'unibest',
-    navigationBarBackgroundColor: '#f8f8f8',
-    navigationBarTextStyle: 'black',
-    backgroundColor: '#FFFFFF',
+    navigationBarBackgroundColor: '@navBgColor',
+    navigationBarTextStyle: '@navTxtStyle',
+    backgroundColor: '@bgColor',
+    backgroundTextStyle: '@bgTxtStyle',
+    backgroundColorTop: '@bgColorTop',
+    backgroundColorBottom: '@bgColorBottom',
     h5: {
       navigationStyle: 'custom',
     },
   },
   easycom: {
     autoscan: true,
     custom: {
-      '^uni-(.*)': '@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue',
       '^uv-(.*)': '@climblee/uv-ui/components/uv-$1/uv-$1.vue',
       '^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
     },
   },
   tabBar: {
-    color: '#999999',
-    selectedColor: '#018d71',
-    backgroundColor: '#F8F8F8',
-    borderStyle: 'black',
     height: '50px',
     fontSize: '10px',
-    iconWidth: '24px',
+    iconWidth: '30px',
     spacing: '3px',
+    color: '@tabFontColor',
+    selectedColor: '@tabSelectedColor',
+    backgroundColor: '@tabBgColor',
+    borderStyle: '@tabBorderStyle',
     list: [
       {
-        iconPath: 'static/tabbar/home.png',
-        selectedIconPath: 'static/tabbar/homeHL.png',
+        iconPath: '@iconPath1',
+        selectedIconPath: '@selectedIconPath1',
         pagePath: 'pages/index/index',
         text: '首页',
       },
       {
-        iconPath: 'static/tabbar/example.png',
-        selectedIconPath: 'static/tabbar/exampleHL.png',
+        iconPath: '@iconPath2',
+        selectedIconPath: '@selectedIconPath2',
         pagePath: 'pages/demo/index',
         text: '示例',
       },

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -1,8 +1,26 @@
 <template>
   <view class="default-layout">
-    <slot />
+    <wd-config-provider :theme="theme" :themeVars="themeVars">
+      <slot />
+    </wd-config-provider>
   </view>
 </template>
+<script lang="ts" setup>
+import type { ConfigProviderThemeVars } from 'wot-design-uni'
+
+const themeVars: ConfigProviderThemeVars = {
+  // 定制 WOT-UI库的主题色
+  // colorTheme: '#8053f9',
+}
+// 获取系统主题色
+const theme = ref('dark')
+
+uni.getSystemInfo({
+  success(res) {
+    theme.value = res.hostTheme
+  },
+})
+</script>
 
 <style lang="scss">
 .default-layout {

diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
@@ -13,7 +13,7 @@
         v-for="(tab, idx) in tabList"
         :key="tab.id"
       >
-        <view class="font-800" @click="currIdx = idx">{{ tab.title }}</view>
+        <view class="font-800 some-text" @click="currIdx = idx">{{ tab.title }}</view>
       </view>
     </view>
     <view class="bg-slate-100 px-4 pt-3">
@@ -23,7 +23,7 @@
             class="flex bg-white items-center justify-between p-3 mb-2"
             @click="goDetailPage(item.path)"
           >
-            <text class="flex-1 text-4 text-dark">{{ item.title }}</text>
+            <text class="flex-1 text-4 some-text">{{ item.title }}</text>
             <text class="i-carbon-chevron-right"></text>
           </view>
         </view>

diff --git a/src/static/tabbar/acty-dark-code.png b/src/static/tabbar/acty-dark-code.png
diff --git a/src/static/tabbar/acty-light-home.png b/src/static/tabbar/acty-light-home.png
diff --git a/src/static/tabbar/code-dark.png b/src/static/tabbar/code-dark.png
diff --git a/src/static/tabbar/example.png b/src/static/tabbar/example.png
diff --git a/src/static/tabbar/exampleHL.png b/src/static/tabbar/exampleHL.png
diff --git a/src/static/tabbar/home.png b/src/static/tabbar/home.png
diff --git a/src/static/tabbar/homeHL.png b/src/static/tabbar/homeHL.png
diff --git a/src/static/tabbar/light-home.png b/src/static/tabbar/light-home.png
diff --git a/src/static/tabbar/personal.png b/src/static/tabbar/personal.png
diff --git a/src/static/tabbar/personalHL.png b/src/static/tabbar/personalHL.png
diff --git a/src/style/index.scss b/src/style/index.scss
@@ -6,6 +6,23 @@
   color: red;
 }
 
+// 黑暗模式需要用到媒体查询来确定样式
+@media (prefers-color-scheme: dark) {
+  /* DarkMode 下的样式 start */
+  .bg-white {
+    background: #1b1b1b;
+  }
+
+  .bg-slate-100 {
+    background: #1b1b1b;
+  }
+
+  .some-text {
+    color: #fff;
+  }
+  /* DarkMode 下的样式 end */
+}
+
 // 全局字体引用 DEMO
 // @font-face {
 //   font-family: TiTi;
@@ -14,4 +31,4 @@
 
 // .titi {
 //   font-family: TiTi, Arial, sans-serif;
-// }
+// }
diff --git a/src/theme.json b/src/theme.json
@@ -0,0 +1,34 @@
+{
+  "light": {
+    "navBgColor": "#f8f8f8",
+    "navTxtStyle": "black",
+    "bgColor": "#ffffff",
+    "bgTxtStyle": "light",
+    "bgColorTop": "#eeeeee",
+    "bgColorBottom": "#efefef",
+    "tabFontColor": "#000000",
+    "tabSelectedColor": "#3cc51f",
+    "tabBgColor": "#ffffff",
+    "tabBorderStyle": "black",
+    "iconPath1": "/static/tabbar/light-home.png",
+    "selectedIconPath1": "/static/tabbar/acty-light-home.png",
+    "iconPath2": "/static/tabbar/code-dark.png",
+    "selectedIconPath2": "/static/tabbar/acty-dark-code.png"
+  },
+  "dark": {
+    "navBgColor": "#292929",
+    "navTxtStyle": "white",
+    "bgColor": "#1f1f1f",
+    "bgTxtStyle": "dark",
+    "bgColorTop": "#292929",
+    "bgColorBottom": "#1f1f1f",
+    "tabFontColor": "#ffffff",
+    "tabSelectedColor": "#51a937",
+    "tabBgColor": "#292929",
+    "tabBorderStyle": "white",
+    "iconPath1": "/static/tabbar/light-home.png",
+    "selectedIconPath1": "/static/tabbar/acty-light-home.png",
+    "iconPath2": "/static/tabbar/code-dark.png",
+    "selectedIconPath2": "/static/tabbar/acty-dark-code.png"
+  }
+}