[Add] 🎊 Dark Theme #32

Harry-zklcdc · Aug 1, 2023 · 76b6fd7 · 76b6fd7
1 parent fc3266f
commit 76b6fd7
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 64 deletions.
diff --git a/frontend/src/components/ChatNav/ChatNav.vue b/frontend/src/components/ChatNav/ChatNav.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { h, ref, onMounted } from 'vue';
-import { NDropdown, type DropdownOption, NModal, NInput, NButton, useMessage, NImage, NForm, NFormItem, NSwitch, NTag } from 'naive-ui';
+import { NDropdown, type DropdownOption, NModal, NInput, NButton, useMessage, NImage, NForm, NFormItem, NSwitch, NTag, NSelect, NConfigProvider, lightTheme, darkTheme } from 'naive-ui';
 import settingSvgUrl from '@/assets/img/setting.svg?url';
 import { usePromptStore } from '@/stores/modules/prompt';
 import { storeToRefs } from 'pinia';
@@ -26,8 +26,13 @@ const { isShowChatServiceSelectModal } = storeToRefs(chatStore);
 const userStore = useUserStore();
 const localVersion = __APP_INFO__.version;
 const lastVersion = ref('加载中...');
-const { historyEnable } = storeToRefs(userStore)
+const { historyEnable, themeMode } = storeToRefs(userStore)
 let history = ref(true);
+let themeModeSetting = ref('auto');
+let theme = ref(lightTheme);
+let settingIconStyle = ref({
+  filter: 'invert(70%)',
+})
 
 const GetLastVersion = async () => {
   const res = await fetch('https://api.github.com/repos/Harry-zklcdc/go-proxy-bingai/releases/latest');
@@ -77,6 +82,37 @@ const navConfigs = [
   },
 ];
 
+const themeModeOptions = ref([
+  {
+    label: '浅色',
+    value: 'light',
+  }, {
+    label: '深色',
+    value: 'dark',
+  }, {
+    label: '跟随系统',
+    value: 'auto',
+  }
+]);
+
+onMounted(() => {
+  if (themeMode.value == 'light') {
+    theme.value = lightTheme;
+    settingIconStyle.value = { filter: 'invert(0%)' }
+  } else if (themeMode.value == 'dark') {
+    theme.value = darkTheme;
+    settingIconStyle.value = { filter: 'invert(70%)' }
+  } else if (themeMode.value == 'auto') {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      theme.value = darkTheme;
+      settingIconStyle.value = { filter: 'invert(70%)' }
+    } else {
+      theme.value = lightTheme;
+      settingIconStyle.value = { filter: 'invert(0%)' }
+    }
+  }
+})
+
 const renderDropdownLabel = (option: DropdownOption) => {
   return h(ChatNavItem as Component, { navConfig: option });
 };
@@ -98,6 +134,8 @@ const handleSelect = (key: string) => {
       {
         userToken.value = userStore.getUserToken();
         userKievRPSSecAuth.value = userStore.getUserKievRPSSecAuth();
+        history.value = historyEnable.value;
+        themeModeSetting.value = themeMode.value;
         isShowSettingModal.value = true;
       }
       break;
@@ -151,70 +189,95 @@ const saveSetting = () => {
     CIB.vm.sidePanel.isVisibleDesktop = false;
     CIB.vm.sidePanel.isVisibleMobile = false;
   }
+  themeMode.value = themeModeSetting.value;
+  if (themeModeSetting.value == 'light') {
+    CIB.changeColorScheme(0);
+    theme.value = lightTheme;
+    settingIconStyle.value = { filter: 'invert(0%)' }
+  } else if (themeModeSetting.value == 'dark') {
+    CIB.changeColorScheme(1);
+    theme.value = darkTheme;
+    settingIconStyle.value = { filter: 'invert(70%)' }
+  } else if (themeModeSetting.value == 'auto') {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      CIB.changeColorScheme(1);
+      theme.value = darkTheme;
+      settingIconStyle.value = { filter: 'invert(70%)' }
+    } else {
+      CIB.changeColorScheme(0);
+      theme.value = lightTheme;
+      settingIconStyle.value = { filter: 'invert(0%)' }
+    }
+  }
   isShowSettingModal.value = false;
 };
 </script>
 
 <template>
-  <NDropdown v-if="isMobile()" class="select-none" :show="isShowMore" :options="navConfigs" :render-label="renderDropdownLabel" @select="handleSelect">
-    <NImage class="fixed top-6 right-4 cursor-pointer z-50" :src="settingSvgUrl" alt="设置菜单" :preview-disabled="true" @click="isShowMore = !isShowMore"></NImage>
-  </NDropdown>
-  <NDropdown v-else class="select-none" trigger="hover" :options="navConfigs" :render-label="renderDropdownLabel" @select="handleSelect">
-    <NImage class="fixed top-6 right-6 cursor-pointer z-50" :src="settingSvgUrl" alt="设置菜单" :preview-disabled="true"></NImage>
-  </NDropdown>
-  <NModal v-model:show="isShowSettingModal" preset="dialog" :show-icon="false">
-    <template #header>
-      <div class="text-3xl py-2">设置</div>
-    </template>
-    <NForm ref="formRef" label-placement="left" label-width="auto" require-mark-placement="right-hanging" style="margin-top: 16px;">
-      <NFormItem path="token" label="用户Token">
-        <NInput size="large" v-model:value="userToken" type="text" placeholder="用户 Cookie ,仅需要 _U 的值" />
-      </NFormItem>
-      <NFormItem path="token" label="用户KievRPSSecAuth">
-        <NInput size="large" v-model:value="userKievRPSSecAuth" type="text" placeholder="用户 Cookie ,仅需要 KievRPSSecAuth 的值" />
-      </NFormItem>
-      <NFormItem path="history" label="历史记录">
-        <NSwitch v-model:value="history" />
-      </NFormItem>
-    </NForm>
-    <template #action>
-      <NButton size="large" @click="isShowSettingModal = false">取消</NButton>
-      <NButton ghost size="large" type="info" @click="saveSetting">保存</NButton>
-    </template>
-  </NModal>
-  <NModal v-model:show="isShowClearCacheModal" preset="dialog" :show-icon="false">
-    <template #header>
-      <div class="text-xl py-2">将删除包括 Cookie 等的所有缓存？</div>
-    </template>
-    <template #action>
-      <NButton size="large" @click="isShowClearCacheModal = false">取消</NButton>
-      <NButton ghost size="large" type="error" @click="resetCache">确定</NButton>
-    </template>
-  </NModal>
-  <NModal v-model:show="isShowSetAboutModal" preset="dialog" :show-icon="false">
-    <template #header>
-      <div class="text-3xl py-2">关于</div>
-    </template>
-    <NForm ref="formRef" label-placement="left" label-width="auto" size="small" style="margin-top: 16px;">
-      <NFormItem path="" label="版本号">
-        <NTag type="info" size="small" round>{{ 'v'+localVersion }}</NTag>
-      </NFormItem>
-      <NFormItem path="" label="最新版本">
-        <NTag type="info" size="small" round>{{ lastVersion }}</NTag>
-      </NFormItem>
-      <NFormItem path="token" label="开源地址">
-        <NButton text tag="a" href="https://github.com/Harry-zklcdc/go-proxy-bingai" target="_blank" type="success">Harry-zklcdc/go-proxy-bingai</NButton>
-      </NFormItem>
-      <NFormItem path="token" label="原作者">
-        <NButton text tag="a" href="https://github.com/adams549659584" target="_blank" type="success">adams549659584</NButton>
-      </NFormItem>
-      <NFormItem path="token" label="原开源地址">
-        <NButton text tag="a" href="https://github.com/adams549659584/go-proxy-bingai" target="_blank" type="success">adams549659584/go-proxy-bingai</NButton>
-      </NFormItem>
-    </NForm>
-    <template #action>
-      <NButton ghost size="large" @click="isShowSetAboutModal = false" type="info">确定</NButton>
-    </template>
-  </NModal>
-  <CreateImage v-model:show="isShowCreateImageModal" />
+  <NConfigProvider :theme="theme">
+    <NDropdown v-if="isMobile()" class="select-none" :show="isShowMore" :options="navConfigs" :render-label="renderDropdownLabel" @select="handleSelect">
+      <NImage class="fixed top-6 right-4 cursor-pointer z-50" :src="settingSvgUrl" alt="设置菜单" :preview-disabled="true" @click="isShowMore = !isShowMore" :style="settingIconStyle"></NImage>
+    </NDropdown>
+    <NDropdown v-else class="select-none" trigger="hover" :options="navConfigs" :render-label="renderDropdownLabel" @select="handleSelect">
+      <NImage class="fixed top-6 right-6 cursor-pointer z-50" :src="settingSvgUrl" alt="设置菜单" :preview-disabled="true" :style="settingIconStyle"></NImage>
+    </NDropdown>
+    <NModal v-model:show="isShowSettingModal" preset="dialog" :show-icon="false">
+      <template #header>
+        <div class="text-3xl py-2">设置</div>
+      </template>
+      <NForm ref="formRef" label-placement="left" label-width="auto" require-mark-placement="right-hanging" style="margin-top: 16px;">
+        <NFormItem path="token" label="Token">
+          <NInput size="large" v-model:value="userToken" type="text" placeholder="用户 Cookie ,仅需要 _U 的值" />
+        </NFormItem>
+        <NFormItem path="token" label="KievRPSSecAuth">
+          <NInput size="large" v-model:value="userKievRPSSecAuth" type="text" placeholder="用户 Cookie ,仅需要 KievRPSSecAuth 的值" />
+        </NFormItem>
+        <NFormItem path="history" label="历史记录">
+          <NSwitch v-model:value="history" />
+        </NFormItem>
+        <NFormItem path="themeMode" label="主题模式">
+          <NSelect v-model:value="themeModeSetting" :options="themeModeOptions" size="large" placeholder="请选择主题模式"/>
+        </NFormItem>
+      </NForm>
+      <template #action>
+        <NButton size="large" @click="isShowSettingModal = false">取消</NButton>
+        <NButton ghost size="large" type="info" @click="saveSetting">保存</NButton>
+      </template>
+    </NModal>
+    <NModal v-model:show="isShowClearCacheModal" preset="dialog" :show-icon="false">
+      <template #header>
+        <div class="text-xl py-2">将删除包括 Cookie 等的所有缓存？</div>
+      </template>
+      <template #action>
+        <NButton size="large" @click="isShowClearCacheModal = false">取消</NButton>
+        <NButton ghost size="large" type="error" @click="resetCache">确定</NButton>
+      </template>
+    </NModal>
+    <NModal v-model:show="isShowSetAboutModal" preset="dialog" :show-icon="false">
+      <template #header>
+        <div class="text-3xl py-2">关于</div>
+      </template>
+      <NForm ref="formRef" label-placement="left" label-width="auto" size="small" style="margin-top: 16px;">
+        <NFormItem path="" label="版本号">
+          <NTag type="info" size="small" round>{{ 'v'+localVersion }}</NTag>
+        </NFormItem>
+        <NFormItem path="" label="最新版本">
+          <NTag type="info" size="small" round>{{ lastVersion }}</NTag>
+        </NFormItem>
+        <NFormItem path="token" label="开源地址">
+          <NButton text tag="a" href="https://github.com/Harry-zklcdc/go-proxy-bingai" target="_blank" type="success">Harry-zklcdc/go-proxy-bingai</NButton>
+        </NFormItem>
+        <NFormItem path="token" label="原作者">
+          <NButton text tag="a" href="https://github.com/adams549659584" target="_blank" type="success">adams549659584</NButton>
+        </NFormItem>
+        <NFormItem path="token" label="原开源地址">
+          <NButton text tag="a" href="https://github.com/adams549659584/go-proxy-bingai" target="_blank" type="success">adams549659584/go-proxy-bingai</NButton>
+        </NFormItem>
+      </NForm>
+      <template #action>
+        <NButton ghost size="large" @click="isShowSetAboutModal = false" type="info">确定</NButton>
+      </template>
+    </NModal>
+    <CreateImage v-model:show="isShowCreateImageModal" />
+  </NConfigProvider>
 </template>
diff --git a/frontend/src/stores/modules/user/index.ts b/frontend/src/stores/modules/user/index.ts
@@ -15,6 +15,7 @@ export const useUserStore = defineStore(
     const randIpCookieName = 'BingAI_Rand_IP';
     const authKeyCookieName = 'BingAI_Auth_Key';
     const historyEnable = ref(true);
+    const themeMode = ref('auto');
 
     const sysConfig = ref<SysConfig>();
 
@@ -137,13 +138,14 @@ export const useUserStore = defineStore(
       getUserKievRPSSecAuth,
       saveUserKievRPSSecAuth,
       historyEnable,
+      themeMode,
     };
   },
   {
     persist: {
       key: 'user-store',
       storage: localStorage,
-      paths: ['historyEnable'],
+      paths: ['historyEnable', 'themeMode'],
     },
   }
 );
diff --git a/frontend/src/views/chat/components/Chat/Chat.vue b/frontend/src/views/chat/components/Chat/Chat.vue
@@ -43,6 +43,8 @@ const isShowHistory = computed(() => {
   return (CIB.vm.isMobile && CIB.vm.sidePanel.isVisibleMobile) || (!CIB.vm.isMobile && CIB.vm.sidePanel.isVisibleDesktop);
 });
 
+const { themeMode } = storeToRefs(userStore);
+
 onMounted(async () => {
   await initChat();
   hackDevMode();
@@ -54,6 +56,20 @@ onMounted(async () => {
   isShowLoading.value = false;
   hackStyle();
   initChatPrompt();
+
+  // set Theme
+  if (themeMode.value == 'light') {
+    CIB.changeColorScheme(0);
+  } else if (themeMode.value == 'dark') {
+    CIB.changeColorScheme(1);
+  } else if (themeMode.value == 'auto') {
+    // CIB.changeColorScheme(2);
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      CIB.changeColorScheme(1);
+    } else {
+      CIB.changeColorScheme(0);
+    }
+  }
 });
 
 const hackDevMode = () => {

diff --git a/frontend/types/bing/index.d.ts b/frontend/types/bing/index.d.ts
@@ -273,4 +273,6 @@ declare const CIB: {
   onWorkToggleChanged: PublicSubscribeEvent;
 
   responseTone: ToneType;
+
+  changeColorScheme: (O: 0 | 1) => {}
 };