feat:#1 完成暗黑模式适配

terwer · Oct 9, 2022 · f403880 · f403880
1 parent 61d30f6
commit f403880
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 19 deletions.
diff --git a/assets/scss/index.dark.scss b/assets/scss/index.dark.scss
@@ -0,0 +1,5 @@
+html.dark body{
+  /* 自定义深色背景颜色 */
+  --custom-app-color:#ffffff;
+  --custom-app-bg-color: #000000;
+}
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
@@ -1,40 +1,42 @@
+/* 样式重置 */
 html,
 body,
 #app {
   margin: 0;
   padding: 0;
 }
 
-html.dark {
-  background: #222;
-  color: white;
-}
-
 a {
   font-weight: 400;
   color: var(--el-color-primary);
 }
 
-/**
-* 所有主题公共样式
-* 注意：每个主题都要引用这个样式
-*/
-body {
-  font-family: "LXGW WenKai","Wenquanyi Micro Hei","Wenquanyi Micro Hei Mono","Microsoft YaHei", "PT Sans", "-apple-system", "Liberation Mono", monospace, dejavu sans mono,Fira Code,Microsoft Yahei,Consolas,Courier New,monospace,Menlo,Monaco !important;
-  color: #666 !important;
-}
 body,
 * {
   box-sizing: border-box;
 }
+
 body a {
   text-decoration: none;
   color: #00a4ff;
 }
+
 body a:hover {
   color: orangered;
 }
 
+/**
+* 所有主题公共样式
+* 注意：每个主题都要引用这个样式
+*/
+body {
+  font-family: "LXGW WenKai", "Wenquanyi Micro Hei", "Wenquanyi Micro Hei Mono", "Microsoft YaHei", "PT Sans", "-apple-system", "Liberation Mono", monospace, dejavu sans mono, Fira Code, Microsoft Yahei, Consolas, Courier New, monospace, Menlo, Monaco !important;
+  --custom-app-color: #666;
+  --custom-app-bg-color: #ffffff;
+  color: var(--custom-app-color);
+  background: var(--custom-app-bg-color);
+}
+
 /*
 页面动画
 https://github.com/nuxt/framework/issues/3141#issuecomment-1212899838
@@ -68,9 +70,10 @@ https://github.com/nuxt/framework/issues/3141#issuecomment-1212899838
 }
 
 /* layout */
-.jvue-body{
+.jvue-body {
   padding: 20px;
 }
-.el-menu-item > div{
+
+.el-menu-item > div {
   margin-left: -20px !important;
 }
diff --git a/components/default/Footer.vue b/components/default/Footer.vue
@@ -12,14 +12,21 @@
     <div class="page copyright">
       &copy; 2011-{{ getNowYear() }} <a href="https://terwer.space" target="_blank">Terwer</a> All Rights Reseaved.
       <a href="https://github.com/terwer/jvue-front" target="_blank">Github</a>.
-      <a>暗黑模式</a>
+      <a @click="toggleDark()" class="footer-mode">
+        {{ isDark ? $t('theme.mode.light') : $t('theme.mode.dark') }}
+      </a>
+
     </div>
   </footer>
 </template>
 
 <script lang="ts" setup>
 import {getNowYear, getCountDown} from "~/lib/DateUtil";
+import {useDark, useToggle} from "@vueuse/core";
 
+// 模式
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
 </script>
 
 <script lang="ts">
@@ -34,4 +41,8 @@ export default {
 .page {
   padding: 5px 0;
 }
+
+.footer-mode {
+  cursor: pointer;
+}
 </style>
diff --git a/components/default/HeaderTime.vue b/components/default/HeaderTime.vue
@@ -3,7 +3,7 @@
     <client-only>
       <el-col :xs="24" :sm="24" :md="8">
         <div>
-          现在是
+          {{ $t('header.nowis') }}
           {{ timeData.clientTime }}
           {{ timeData.weekday }}
         </div>

diff --git a/locales/en_US.ts b/locales/en_US.ts
@@ -7,5 +7,6 @@ export default {
     "theme.choose": "Choose theme",
     "theme.choose.default": "Default theme",
     "theme.choose.terwer": "Terwer theme",
-    "ele.select.placeholder": "Select"
+    "ele.select.placeholder": "Select",
+    "header.nowis":"Now is",
 }
diff --git a/locales/zh_CN.ts b/locales/zh_CN.ts
@@ -8,4 +8,5 @@ export default {
     "theme.choose.default": "默认主题",
     "theme.choose.terwer": "特维主题",
     "ele.select.placeholder": "请选择",
+    "header.nowis":"现在是",
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -22,7 +22,11 @@ export default defineNuxtConfig({
     },
 
     // css
-    css: ['~/assets/scss/index.scss'],
+    css: [
+        '~/assets/scss/index.scss',
+        '~/assets/scss/index.dark.scss',
+        'element-plus/theme-chalk/dark/css-vars.css'
+    ],
 
     // build
     build: {