From f403880686b9537e9aecb74311422d73dc9ca3fd Mon Sep 17 00:00:00 2001
From: terwer <youweics@163.com>
Date: Mon, 10 Oct 2022 00:49:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:#1=20=E5=AE=8C=E6=88=90=E6=9A=97=E9=BB=91?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/scss/index.dark.scss       |  5 +++++
 assets/scss/index.scss            | 33 +++++++++++++++++--------------
 components/default/Footer.vue     | 13 +++++++++++-
 components/default/HeaderTime.vue |  2 +-
 locales/en_US.ts                  |  3 ++-
 locales/zh_CN.ts                  |  1 +
 nuxt.config.ts                    |  6 +++++-
 7 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 assets/scss/index.dark.scss

diff --git a/assets/scss/index.dark.scss b/assets/scss/index.dark.scss
new file mode 100644
index 0000000..626fa74
--- /dev/null
+++ b/assets/scss/index.dark.scss
@@ -0,0 +1,5 @@
+html.dark body{
+  /* 自定义深色背景颜色 */
+  --custom-app-color:#ffffff;
+  --custom-app-bg-color: #000000;
+}
\ No newline at end of file
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
index 2a09c9b..9d55425 100644
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@@ -1,3 +1,4 @@
+/* 样式重置 */
 html,
 body,
 #app {
@@ -5,36 +6,37 @@ body,
   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;
 }
\ No newline at end of file
diff --git a/components/default/Footer.vue b/components/default/Footer.vue
index 0e47f56..f89418c 100644
--- 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>
\ No newline at end of file
diff --git a/components/default/HeaderTime.vue b/components/default/HeaderTime.vue
index 6bbe042..05c2144 100644
--- 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
index 5ac26ed..5eef773 100644
--- 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",
 }
\ No newline at end of file
diff --git a/locales/zh_CN.ts b/locales/zh_CN.ts
index 831295c..656f047 100644
--- 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":"现在是",
 }
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ab238fe..f1fe584 100644
--- 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: {