首页样式

src/assets/main.scss

@@ -0,0 +1,31 @@
+/* 亮色模式 */
+:root {
+  --bg-color: #ffffff;
+  --text-color: rgba(0, 0, 0, .85);
+  --border-top: #f0f0f0;
+  --border-color:#eee;
+  --border-bottom:#eee;
+  --font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+}
+
+/* 暗黑模式 */
+:root.dark,
+:root[data-theme="dark"] {
+  --bg-color: #232324;
+  --border-color: #2e2e30;
+  --border-bottom:#484849;
+  --text-color: rgba(255, 255, 255, .7);
+  --border-top: #121111;
+  --color: #fff;
+}
+
+/* 应用变量 */
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: var(--font-family);
+  border-top: 1px solid  var(--border-top);
+  border-color: var(--border-color);
+  border-bottom: var(--border-bottom);
+  transition: all 0.3s ease; /* 平滑过渡效果 */
+}

src/components/layout/src/Layout.vue

@@ -149,7 +149,7 @@
 
   .dark {
     .l-content {
-      background-color: #1e1e1e; // 暗黑模式下的背景色，可自定义
+      background-color: black; // 暗黑模式下的背景色，可自定义
     }
   }
 </style>

src/main.ts

@@ -6,6 +6,7 @@ import "animate.css";
 import App from "./App.vue";
 import router from "./router";
 import "./assets/scss/common.scss";
+import './assets/main.scss'
 // import { initEnums, } from "@/utils/emnus";
 
 // initEnums();

src/stores/settings.ts

@@ -5,6 +5,18 @@ export const useSettingsStore = defineStore(
   "setting",
   () => {
     const isDark = ref(false);
+
+    watch(isDark, (newVal) => {
+      // 控制根元素 class
+      if (newVal) {
+        document.documentElement.classList.add('dark');
+        document.documentElement.setAttribute('data-theme', 'dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.setAttribute('data-theme', 'light');
+      }
+    }, { immediate: true }); // 立即执行一次初始化
+
     const theme = computed<GlobalTheme | null>(() =>
       isDark.value ? darkTheme : null
     );

src/views/index.vue

@@ -167,18 +167,20 @@
   ])
 </script>
 <style scoped lang="scss">
+
   .home{
     display: flex;
     justify-content: space-between;
     //align-items: center;
     font-size: 14px;
     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-    .homeItem{
+    .homeItem {
       width: 100%;
-      background: #ffffff;
+      background: var(--bg-color);
       margin-bottom: 10px;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
       padding: 10px 15px;
+      color:var(--text-color);
       .homeItemIndex{
         margin-bottom: 10px;
         line-height: 1.6;
@@ -198,17 +200,18 @@
     }
     .home2Item{
       width: 100%;
-      background: #ffffff;
+      background: var(--bg-color);
       margin-bottom: 10px;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
       padding: 10px 15px;
+      color:var(--text-color);
+
       .header-wrapper {
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
       }
-
       .fold-button {
         display: flex;
         align-items: center;
@@ -226,7 +229,7 @@
       }
 
       .fold-content {
-        border-top: 1px solid #f0f0f0;
+        border-top: var(--border-top);
         .fold-content_item{
           margin-top: 15px;
           display: flex;
@@ -236,11 +239,11 @@
             padding: 10px;
             min-height: 90px;
             border-radius: 5px;
-            border-color: #eee;
+            border-color: var(--border-color);
             border-width: 1px;
             border-style: solid;
-            background-color: #fff;
+            background: var(--bg-color);
-            color: #666;
+            color:var(--text-color);
             box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
             width: 22%;
             margin-right: 5px;
@@ -249,6 +252,7 @@
               display: flex;
               justify-content: space-between;
               align-items: center;
+              color:var(--color);
               .content{
                 font-weight: bold;
                 font-size: 16px !important;
@@ -266,7 +270,7 @@
               margin: 10px 0;
               padding: 0;
               border: none !important;
-              border-bottom: 1px solid #eee !important;
+              border-bottom: 1px solid var(--border-bottom) !important;
               clear: both;
               background: 0 0
             }
@@ -296,9 +300,10 @@
     .home3Item{
       margin-bottom: 15px;
       border-radius: 2px;
-      background-color: #fff;
+      background: var(--bg-color);
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
       padding: 10px 15px;
+      color:var(--text-color);
     }
   }