Add dark mode switch (#19)

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"
+}

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');
+      }
     }
   }
 });

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 {

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;
     }
   }

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.
      */

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"
   }
-}
+}

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 {

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);

src/store/common/persist.ts

@@ -1 +1 @@
-export default ['user', 'token', 'setting', 'locale'];
+export default ['user', 'token', 'setting', 'locale', 'dark'];