feat: dark mode

vue-mini · May 26, 2024 · 9fd1561 · 9fd1561
1 parent 0d89a56
commit 9fd1561
Show file tree

Hide file tree

Showing 17 changed files with 56 additions and 11 deletions.
diff --git a/template/base/src/app.css b/template/base/src/app.css
@@ -1,5 +1,5 @@
 page {
-  color: #333;
+  color: #181818;
   font-size: 28px;
   font-family:
     ui-sans-serif,
@@ -9,3 +9,10 @@ page {
     sans-serif;
   background: #fff;
 }
+
+@media (prefers-color-scheme: dark) {
+  page {
+    color: #fff;
+    background: #181818;
+  }
+}
diff --git a/template/base/src/app.json b/template/base/src/app.json
@@ -1,26 +1,32 @@
 {
+  "darkmode": true,
+  "themeLocation": "theme.json",
   "pages": ["pages/home/index", "pages/mine/index"],
   "window": {
-    "navigationBarBackgroundColor": "#ffffff",
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "vue-mini-project"
+    "navigationBarBackgroundColor": "@bgColor",
+    "navigationBarTextStyle": "@style",
+    "navigationBarTitleText": "vue-mini-project",
+    "backgroundColor": "@bgColor",
+    "backgroundColorTop": "@bgColor",
+    "backgroundColorBottom": "@bgColor"
   },
   "tabBar": {
-    "color": "#000",
-    "selectedColor": "#000",
-    "backgroundColor": "#ffffff",
+    "color": "@color",
+    "selectedColor": "@color",
+    "backgroundColor": "@bgColor",
+    "borderStyle": "@style",
     "list": [
       {
         "text": "主页",
         "pagePath": "pages/home/index",
-        "iconPath": "/images/home.png",
-        "selectedIconPath": "/images/home-selected.png"
+        "iconPath": "@homeIcon",
+        "selectedIconPath": "@homeSelectedIcon"
       },
       {
         "text": "我",
         "pagePath": "pages/mine/index",
-        "iconPath": "/images/mine.png",
-        "selectedIconPath": "/images/mine-selected.png"
+        "iconPath": "@mineIcon",
+        "selectedIconPath": "@mineSelectedIcon"
       }
     ]
   },

diff --git a/template/base/src/images/home-dark-selected.png b/template/base/src/images/home-dark-selected.png
diff --git a/template/base/src/images/home-dark.png b/template/base/src/images/home-dark.png
diff --git a/template/base/src/images/home-light-selected.png b/template/base/src/images/home-light-selected.png
diff --git a/template/base/src/images/home-light.png b/template/base/src/images/home-light.png
diff --git a/template/base/src/images/home-selected.png b/template/base/src/images/home-selected.png
diff --git a/template/base/src/images/home.png b/template/base/src/images/home.png
diff --git a/template/base/src/images/mine-dark-selected.png b/template/base/src/images/mine-dark-selected.png
diff --git a/template/base/src/images/mine-dark.png b/template/base/src/images/mine-dark.png
diff --git a/template/base/src/images/mine-light-selected.png b/template/base/src/images/mine-light-selected.png
diff --git a/template/base/src/images/mine-light.png b/template/base/src/images/mine-light.png
diff --git a/template/base/src/images/mine-selected.png b/template/base/src/images/mine-selected.png
diff --git a/template/base/src/images/mine.png b/template/base/src/images/mine.png
diff --git a/template/base/src/pages/home/index.css b/template/base/src/pages/home/index.css
@@ -13,3 +13,9 @@
   font-size: 64px;
   font-weight: bold;
 }
+
+@media (prefers-color-scheme: dark) {
+  .greeting {
+    color: #fff;
+  }
+}
diff --git a/template/base/src/pages/mine/index.css b/template/base/src/pages/mine/index.css
@@ -13,3 +13,9 @@
   font-size: 64px;
   font-weight: bold;
 }
+
+@media (prefers-color-scheme: dark) {
+  .greeting {
+    color: #fff;
+  }
+}
diff --git a/template/base/src/theme.json b/template/base/src/theme.json
@@ -0,0 +1,20 @@
+{
+  "light": {
+    "style": "black",
+    "color": "#181818",
+    "bgColor": "#ffffff",
+    "homeIcon": "/assets/home-light.png",
+    "homeSelectedIcon": "/assets/home-light-selected.png",
+    "mineIcon": "/assets/mine-light.png",
+    "mineSelectedIcon": "/assets/mine-light-selected.png"
+  },
+  "dark": {
+    "style": "white",
+    "color": "#ffffff",
+    "bgColor": "#181818",
+    "homeIcon": "/assets/home-dark.png",
+    "homeSelectedIcon": "/assets/home-dark-selected.png",
+    "mineIcon": "/assets/mine-dark.png",
+    "mineSelectedIcon": "/assets/mine-dark-selected.png"
+  }
+}