From 5d0a99b84d5eccc1926865c21fc8fb729577941f Mon Sep 17 00:00:00 2001
From: AceDataCloud <office@acedata.cloud>
Date: Sat, 6 Apr 2024 14:58:25 +0800
Subject: [PATCH] Add dark mode switch (#19)

---
 ...-a9c0a3be-0ea1-4b6e-9b3d-89cd2d4b4511.json |  7 +++
 src/components/common/DarkSelector.vue        | 47 ++++++++++++-------
 src/components/common/Navigator.vue           | 10 ++--
 .../midjourney/tasks/TaskPreview.vue          |  9 ++--
 src/config.ts                                 |  5 ++
 src/i18n/en/common.json                       | 10 ++--
 src/pages/distribution/Index.vue              |  6 +--
 src/plugins/font-awesome.ts                   |  2 +
 src/store/common/persist.ts                   |  2 +-
 9 files changed, 65 insertions(+), 33 deletions(-)
 create mode 100644 change/@acedatacloud-hub-a9c0a3be-0ea1-4b6e-9b3d-89cd2d4b4511.json

diff --git a/change/@acedatacloud-hub-a9c0a3be-0ea1-4b6e-9b3d-89cd2d4b4511.json b/change/@acedatacloud-hub-a9c0a3be-0ea1-4b6e-9b3d-89cd2d4b4511.json
new file mode 100644
index 00000000..be003cd4
--- /dev/null
+++ b/change/@acedatacloud-hub-a9c0a3be-0ea1-4b6e-9b3d-89cd2d4b4511.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add dark mode switch",
+  "packageName": "@acedatacloud/hub",
+  "email": "cqc@cuiqingcai.com",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/common/DarkSelector.vue b/src/components/common/DarkSelector.vue
index c9261deb..a7a5b10b 100644
--- a/src/components/common/DarkSelector.vue
+++ b/src/components/common/DarkSelector.vue
@@ -1,41 +1,52 @@
 <template>
-  <dark-switch class="switch" dark-background="#333" light-background="#fff" />
+  <el-button :class="{ active: !!dark }" @click="setDark(!dark)">
+    <font-awesome-icon v-if="dark" icon="fa-solid fa-moon" />
+    <font-awesome-icon v-else icon="fa-solid fa-moon" />
+  </el-button>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Switch as DarkSwitch, toggleDark, isDark } from 'vue-dark-switch';
+import { toggleDark } from 'vue-dark-switch';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { ElButton } from 'element-plus';
 
 export default defineComponent({
   components: {
-    DarkSwitch
+    FontAwesomeIcon,
+    ElButton
   },
   emits: ['update:dark'],
   computed: {
     dark() {
       return this.$store.getters.dark;
-    },
-    switchValue() {
-      return isDark.value;
     }
+    // switchValue() {
+    //   return isDark.value;
+    // }
   },
   watch: {
-    switchValue(val) {
-      console.log('switchValue', val);
-      this.$store.dispatch('setDark', val);
-    },
     dark(val) {
-      document.documentElement.classList.toggle('dark', val);
-      this.$store.dispatch('setDark', this.dark);
+      this.setDark(val);
     }
+    // switchValue(val) {
+    //   console.log('switchValue', val);
+    //   // this.$store.dispatch('setDark', val);
+    // }
   },
   mounted() {
-    if (this.dark) {
-      toggleDark(true);
-      document.documentElement.classList.add('dark');
-    } else {
-      toggleDark(false);
-      document.documentElement.classList.remove('dark');
+    console.log('mounted', this.dark);
+    this.setDark(this.dark);
+  },
+  methods: {
+    setDark(flag: boolean) {
+      toggleDark(flag);
+      this.$store.dispatch('setDark', flag);
+      if (flag === true) {
+        document.documentElement.classList.add('dark');
+      } else if (flag === false) {
+        document.documentElement.classList.remove('dark');
+      }
     }
   }
 });
diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue
index 7c202bae..e9f220c1 100644
--- a/src/components/common/Navigator.vue
+++ b/src/components/common/Navigator.vue
@@ -5,7 +5,6 @@
     <div class="top">
       <div v-if="!collapsed">
         <logo @click="onHome" />
-        <dark-selector v-show="false" />
       </div>
       <el-menu v-if="!collapsed" :default-active="activeIndex">
         <el-menu-item
@@ -47,6 +46,11 @@
       </el-menu>
     </div>
     <div v-else class="bottom">
+      <div v-if="$config.navigation?.darkMode" class="link">
+        <el-tooltip effect="dark" :content="$t('common.nav.darkMode')" placement="right">
+          <dark-selector class="button" />
+        </el-tooltip>
+      </div>
       <div v-if="$config.navigation?.locale" class="link">
         <el-tooltip effect="dark" :content="$t('common.nav.locale')" placement="right">
           <el-button class="button">
@@ -84,6 +88,7 @@ import { defineComponent } from 'vue';
 import { ElButton, ElTooltip, ElMenu, ElMenuItem } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import LocaleSelector from './LocaleSelector.vue';
+import DarkSelector from './DarkSelector.vue';
 import {
   ROUTE_CHATDOC_INDEX,
   ROUTE_CHATDOC_CONVERSATION,
@@ -98,7 +103,6 @@ import {
   ROUTE_MIDJOURNEY_INDEX
 } from '@/router/constants';
 import Chevron from './Chevron.vue';
-import DarkSelector from './DarkSelector.vue';
 import Logo from './Logo.vue';
 
 export default defineComponent({
@@ -262,7 +266,7 @@ export default defineComponent({
         border-radius: 10px;
         border: none;
         color: var(--el-text-color-primary);
-        background-color: var(--el-bg-color-overlay);
+        background-color: var(--el-bg-color-page);
         &.active,
         &:hover,
         &:focus {
diff --git a/src/components/midjourney/tasks/TaskPreview.vue b/src/components/midjourney/tasks/TaskPreview.vue
index e5eb9f5c..c4ba7a81 100644
--- a/src/components/midjourney/tasks/TaskPreview.vue
+++ b/src/components/midjourney/tasks/TaskPreview.vue
@@ -93,7 +93,7 @@
     <div class="extra">
       <p v-if="modelValue?.created_at" class="datetime">
         <font-awesome-icon icon="fa-regular fa-clock" class="mr-1" />
-        {{ $dayjs.format(new Date(parseFloat(modelValue?.created_at) * 1000)) }}
+        {{ $dayjs.format('' + new Date(parseFloat(modelValue?.created_at) * 1000)) }}
       </p>
     </div>
   </div>
@@ -337,8 +337,7 @@ export default defineComponent({
         width: 100%;
         height: 100%;
         background: var(--el-fill-color-light);
-        color: var(--el-text-color-secondary);
-        // font-size: 30px;
+        color: var(--el-text-color-regular);
       }
     }
     .progress {
@@ -362,7 +361,7 @@ export default defineComponent({
     flex-wrap: wrap;
     overflow: hidden;
     text-align: center;
-    color: #666;
+    color: var(--el-text-color-regular);
     font-size: 14px;
     overflow-y: scroll;
 
@@ -380,7 +379,7 @@ export default defineComponent({
     .datetime,
     .prompt {
       font-size: 12px;
-      color: #666;
+      color: var(--el-text-color-regular);
       margin-bottom: 5px;
     }
   }
diff --git a/src/config.ts b/src/config.ts
index 2a2d3f8f..289ed391 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -53,6 +53,11 @@ export default {
      */
     locale: true,
 
+    /**
+     * Show dark entry in left navigation.
+     */
+    darkMode: true,
+
     /**
      * Show console entry in left navigation.
      */
diff --git a/src/i18n/en/common.json b/src/i18n/en/common.json
index 7022dfcd..e31a1f95 100644
--- a/src/i18n/en/common.json
+++ b/src/i18n/en/common.json
@@ -241,7 +241,7 @@
   },
   "nav.chat": {
     "message": "Chat",
-    "description": "The text in nav bar of the website, which is used to show the chat page"
+    "description": "The text in nav bar of the website, which is used to show the chat page, please do not translate 'Chat', keep it as 'Chat'"
   },
   "nav.midjourney": {
     "message": "Midjourney",
@@ -249,7 +249,7 @@
   },
   "nav.chatdoc": {
     "message": "Chatdoc",
-    "description": "The text in nav bar of the website, which is used to show the chatdoc page"
+    "description": "The text in nav bar of the website, which is used to show the chatdoc page, please do not translate 'Chatdoc', keep it as 'Chatdoc'"
   },
   "nav.distribution": {
     "message": "Referral Earnings",
@@ -263,6 +263,10 @@
     "message": "Language",
     "description": "The text in nav bar of the website, which is used to change the language"
   },
+  "nav.darkMode": {
+    "message": "Dark Mode",
+    "description": "The text in nav bar of the website, which is used to change the theme to dark mode"
+  },
   "title.alert": {
     "message": "Alert",
     "description": "The title of the alert message"
@@ -311,4 +315,4 @@
     "message": "Credentials",
     "description": "The title of the page to show all credentials, the credentials are used to access the API"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/distribution/Index.vue b/src/pages/distribution/Index.vue
index 2d676466..57c00f64 100644
--- a/src/pages/distribution/Index.vue
+++ b/src/pages/distribution/Index.vue
@@ -376,7 +376,7 @@ export default defineComponent({
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 20px;
-    color: #333;
+    color: var(--el-text-color-primary);
   }
   .icon {
     margin-right: 5px;
@@ -385,7 +385,7 @@ export default defineComponent({
     padding: 15px 0;
     p {
       text-align: center;
-      color: #999;
+      color: var(--el-text-color-regular);
       font-size: 12px;
     }
   }
@@ -402,7 +402,7 @@ export default defineComponent({
   }
 
   .description {
-    color: #999;
+    color: var(--el-text-color-regular);
     font-size: 14px;
     margin-bottom: 10px;
     .more {
diff --git a/src/plugins/font-awesome.ts b/src/plugins/font-awesome.ts
index 781d6fd7..f1a98c46 100644
--- a/src/plugins/font-awesome.ts
+++ b/src/plugins/font-awesome.ts
@@ -9,6 +9,7 @@ import {
 } from '@fortawesome/free-regular-svg-icons';
 import {
   faChevronRight as faSolidChevronRight,
+  faMoon as faSolidMoon,
   faChevronLeft as faSolidChevronLeft,
   faFire as faSolidFire,
   faBook as faSolidBook,
@@ -71,6 +72,7 @@ library.add(faSolidCheck);
 library.add(faSolidLocationArrow);
 library.add(faRegularUser);
 library.add(faRegularSun);
+library.add(faSolidMoon);
 library.add(faSolidBolt);
 library.add(faSolidBook);
 library.add(faSolidGear);
diff --git a/src/store/common/persist.ts b/src/store/common/persist.ts
index 7e5be526..c03ba9c5 100644
--- a/src/store/common/persist.ts
+++ b/src/store/common/persist.ts
@@ -1 +1 @@
-export default ['user', 'token', 'setting', 'locale'];
+export default ['user', 'token', 'setting', 'locale', 'dark'];