Add theme setting

package.json

@@ -27,8 +27,11 @@
     "core-js": "^3.30.2",
     "electron-builder": "^23.6.0",
     "github-markdown-css": "^5.2.0",
+    "highlight.js": "^11.8.0",
     "markdown-it-highlightjs": "^4.0.1",
     "material-design-icons": "^3.0.1",
+    "sass": "^1.63.5",
+    "sass-loader": "^13.3.2",
     "update-electron-app": "^2.0.1",
     "uuid": "^9.0.0",
     "vue": "^3.3.4",

src/App.vue

@@ -2,22 +2,36 @@
   <div id="app">
     <header>
       <div class="header-content">
-        <img class="logo" src="@/assets/logo-banner.png" alt="ChatALL" />
+        <img
+          :class="{ 'dark-png': store.state.theme === Theme.DARK }"
+          class="logo"
+          src="@/assets/logo-banner.png"
+          alt="ChatALL"
+        />
         <div class="column-icons">
           <img
             src="@/assets/column-1.svg"
             @click="changeColumns(1)"
-            :class="{ selected: columns === 1 }"
+            :class="{
+              selected: columns === 1,
+              'dark-png': store.state.theme === Theme.DARK,
+            }"
           />
           <img
             src="@/assets/column-2.svg"
             @click="changeColumns(2)"
-            :class="{ selected: columns === 2 }"
+            :class="{
+              selected: columns === 2,
+              'dark-png': store.state.theme === Theme.DARK,
+            }"
           />
           <img
             src="@/assets/column-3.svg"
             @click="changeColumns(3)"
-            :class="{ selected: columns === 3 }"
+            :class="{
+              selected: columns === 3,
+              'dark-png': store.state.theme === Theme.DARK,
+            }"
           />
         </div>
         <div>
@@ -54,8 +68,10 @@
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
+import { useTheme } from "vuetify";
 import { useStore } from "vuex";
 import { v4 as uuidv4 } from "uuid";
+import { applyTheme, resolveTheme, Theme } from "./theme";
 
 import i18n from "./i18n";
 
@@ -69,7 +85,17 @@ import UpdateNotification from "@/components/Notification/UpdateNotificationModa
 // Styles
 import "@mdi/font/css/materialdesignicons.css";
 
+const { ipcRenderer } = window.require("electron");
+
 const store = useStore();
+const vuetifyTheme = useTheme();
+const onUpdatedSystemTheme = async () => {
+  const resolvedTheme = await resolveTheme(store.state.mode, ipcRenderer);
+  store.commit("setTheme", resolvedTheme);
+  applyTheme(resolvedTheme, vuetifyTheme);
+};
+
+ipcRenderer.on("on-updated-system-theme", onUpdatedSystemTheme);
 
 const confirmModal = ref(null);
 const isSettingsOpen = ref(false);
@@ -102,7 +128,15 @@ onMounted(() => {
 });
 </script>
 
-<style>
+<style lang="scss">
+[data-theme='dark'] {
+  @import url('github-markdown-css/github-markdown-dark.css');
+}
+
+[data-theme='light'] {
+  @import url('github-markdown-css/github-markdown-light.css');
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -124,7 +158,7 @@ header {
     top: 0;
     left: 0;
     width: 100%;
-    background-color: white;
+    background-color: rgb(var(--v-theme-header));
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
     padding: 16px;
     z-index: 999;
@@ -154,11 +188,15 @@ img.selected {
 
 .content {
     flex: 1;
-    background-color: #f3f3f3;
+    background-color: rgb(var(--v-theme-background));
     padding: 16px;
 }
 
 .cursor-pointer {
     cursor: pointer;
 }
+
+.dark-png {
+  filter: grayscale(1) brightness(5);
+}
 </style>

src/background.js

@@ -1,9 +1,9 @@
 "use strict";
 
-import { app, protocol, BrowserWindow, ipcMain } from "electron";
+import { app, protocol, BrowserWindow, ipcMain, nativeTheme } from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import installExtension, { VUEJS3_DEVTOOLS } from "electron-devtools-installer";
-import updateApp from './update';
+import updateApp from "./update";
 const isDevelopment = process.env.NODE_ENV !== "production";
 
 const DEFAULT_USER_AGENT = ""; // Empty string to use the Electron default
@@ -14,12 +14,13 @@ protocol.registerSchemesAsPrivileged([
   { scheme: "app", privileges: { secure: true, standard: true } },
 ]);
 
-
 async function createWindow() {
   // Create the browser window.
   const win = new BrowserWindow({
     width: 800,
     height: 600,
+    backgroundColor: nativeTheme.shouldUseDarkColors ? "#343541" : "#fff",
+    show: false,
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
@@ -107,11 +108,13 @@ async function createWindow() {
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
     await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
+    win.show();
     if (!process.env.IS_TEST) win.webContents.openDevTools();
   } else {
     createProtocol("app");
     // Load the index.html when not in development
-    win.loadURL("app://./index.html");
+    await win.loadURL("app://./index.html");
+    win.show();
   }
 }
 
@@ -167,6 +170,16 @@ ipcMain.handle("create-new-window", (event, url, userAgent) => {
   createNewWindow(url, userAgent);
 });
 
+ipcMain.handle("get-native-theme", () => {
+  return Promise.resolve({
+    shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
+  });
+});
+
+nativeTheme.on("updated", () => {
+  mainWindow.webContents.send("on-updated-system-theme");
+});
+
 // Quit when all windows are closed.
 app.on("window-all-closed", () => {
   // On macOS it is common for applications and their menu bar

src/components/Footer/FooterBar.vue

@@ -197,7 +197,6 @@ onBeforeMount(async () => {
   bottom: 0;
   left: 0;
   width: 100%;
-  background-color: rgba(243, 243, 243, 0.7);
   display: flex;
   align-items: flex-end;
   justify-content: space-between;

src/components/Messages/ChatMessage.vue

@@ -49,9 +49,6 @@ import { useMatomo } from "@/composables/matomo";
 import ConfirmModal from "@/components/ConfirmModal.vue";
 import bots from "@/bots";
 
-import "highlight.js/styles/github.css";
-import "github-markdown-css/github-markdown-light.css";
-
 const props = defineProps({
   message: {
     type: Object,
@@ -152,7 +149,7 @@ function handleClick(event) {
 }
 
 .prompt {
-    background-color: #95EC69;
+    background-color: rgb(var(--v-theme-prompt));
     width: fit-content;
     grid-column: 1 / span var(--columns);
 }
@@ -163,7 +160,7 @@ function handleClick(event) {
 }
 
 .response {
-    background-color: #FFF;
+    background-color: rgb(var(--v-theme-response));
     width: 100%;
     grid-column: auto / span 1;
 }
@@ -182,8 +179,7 @@ function handleClick(event) {
     margin-right: 4px;
 }
 
-.markdown-body {
-    background-color: inherit;
-    font-family: inherit;
+:deep() .markdown-body {
+  margin-left: 1.5rem;
 }
 </style>

src/components/Notification/UpdateNotificationModal.vue

@@ -1,38 +1,47 @@
 <template>
   <div id="snackbar" class="text-center">
-    <v-snackbar color="#fff" :vertical="true" :timeout="-1" multi-line v-model="snackbar">
-      <span class="text-black text-center font-weight-bold">
-        {{ $t('updates.updateAvailable') }}
+    <v-snackbar :vertical="true" :timeout="-1" multi-line v-model="snackbar">
+      <span class="text-center font-weight-bold">
+        {{ $t("updates.updateAvailable") }}
       </span>
-      <span class="text-black text-center">
-        {{ $t('updates.currentVersion') }}: {{ versions.current }}
+      <span class="text-center">
+        {{ $t("updates.currentVersion") }}: {{ versions.current }}
       </span>
-      <span class="text-black text-center">
-        {{ $t('updates.latestVersion') }}: {{ versions.latest }}
+      <span class="text-center">
+        {{ $t("updates.latestVersion") }}: {{ versions.latest }}
       </span>
-      <v-btn prepend-icon="mdi-github" color="primary" variant="tonal" @click="openReleasePage">
-        {{ $t('updates.downloadFromGitHub') }}
+      <v-btn
+        prepend-icon="mdi-github"
+        color="primary"
+        variant="tonal"
+        @click="openReleasePage"
+      >
+        {{ $t("updates.downloadFromGitHub") }}
       </v-btn>
       <template v-slot:actions>
         <v-btn color="primary" @click="skip">
-          {{ $t('updates.skipThisVersion') }}
+          {{ $t("updates.skipThisVersion") }}
         </v-btn>
         <v-btn color="primary" @click="snackbar = false">
-          {{ $t('updates.close') }}
+          {{ $t("updates.close") }}
         </v-btn>
       </template>
     </v-snackbar>
   </div>
 </template>
 <script setup>
 import { ref } from "vue";
-import { compare } from 'compare-versions';
+import { compare } from "compare-versions";
 const { shell } = window.require("electron");
 
 const versions = JSON.parse(localStorage.getItem("chatall-versions"));
 const snackbar = ref(false);
-if (versions?.latest && versions?.current && compare(versions.latest, versions.current, '>')) {
-  if (!versions?.skip || compare(versions.latest, versions.skip, '>')) {
+if (
+  versions?.latest &&
+  versions?.current &&
+  compare(versions.latest, versions.current, ">")
+) {
+  if (!versions?.skip || compare(versions.latest, versions.skip, ">")) {
     snackbar.value = true;
   }
 }
@@ -69,4 +78,8 @@ function openReleasePage() {
   width: 100%;
   justify-content: center;
 }
+
+span {
+  color: rgb(var(--v-theme-response-font));
+}
 </style>

src/components/SettingsModal.vue

@@ -28,7 +28,19 @@
             ></v-select>
           </v-list-item>
         </div>
-
+        <div class="section">
+          <v-list-item>
+            <v-list-item-title>{{ $t("settings.theme") }}</v-list-item-title>
+            <v-select
+              :items="modes"
+              item-title="name"
+              item-value="code"
+              hide-details
+              :model-value="currentMode"
+              @update:model-value="setCurrentMode($event)"
+            ></v-select>
+          </v-list-item>
+        </div>
         <template v-for="(setting, index) in settings" :key="index">
           <v-divider></v-divider>
           <div class="section">
@@ -44,6 +56,7 @@
 import { computed } from "vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
+import { useTheme } from "vuetify";
 
 import ChatGPTBotSettings from "@/components/BotSettings/ChatGPTBotSettings.vue";
 import OpenAIAPIBotSettings from "@/components/BotSettings/OpenAIAPIBotSettings.vue";
@@ -59,8 +72,12 @@ import QianWenBotSettings from "@/components/BotSettings/QianWenBotSettings.vue"
 import PoeBotSettings from "@/components/BotSettings/PoeBotSettings.vue";
 import SkyWorkBotSettings from "@/components/BotSettings/SkyWorkBotSettings.vue";
 
+import { resolveTheme, applyTheme, Mode } from "../theme";
+
+const { ipcRenderer } = window.require("electron");
 const { t: $t, locale } = useI18n();
 const store = useStore();
+const vuetifyTheme = useTheme();
 
 const props = defineProps(["open"]);
 const emit = defineEmits(["update:open", "done"]);
@@ -95,12 +112,25 @@ const languages = computed(() => [
   { name: "简体中文", code: "zh" },
 ]);
 
+const modes = computed(() => [
+  { name: $t("settings.system"), code: Mode.SYSTEM },
+  { name: $t("settings.light"), code: Mode.LIGHT },
+  { name: $t("settings.dark"), code: Mode.DARK },
+]);
+
 const lang = computed(() => store.state.lang);
+const currentMode = computed(() => store.state.mode);
 
 const setCurrentLanguage = (lang) => {
   locale.value = lang;
   store.commit("setCurrentLanguage", lang);
 };
+const setCurrentMode = async (mode) => {
+  const resolvedTheme = await resolveTheme(mode, ipcRenderer);
+  store.commit("setMode", mode);
+  store.commit("setTheme", resolvedTheme);
+  applyTheme(resolvedTheme, vuetifyTheme);
+};
 const closeDialog = () => {
   emit("update:open", false);
   emit("done");
@@ -113,4 +143,8 @@ const closeDialog = () => {
   margin-bottom: 16px;
   padding: 0 16px;
 }
+
+:deep() .v-slider-thumb__label {
+  color: rgb(var(--v-theme-response-font));
+}
 </style>

src/i18n/locales/en.json

@@ -10,7 +10,11 @@
     "loginOrOut": "Login/Logout",
     "loginOrOutPrompt": "Click the link below to log in or log out in the new window, and then close it",
     "notice": "Notice",
-    "secretPrompt": "Your secret token will remain on your device and will not be shared with anyone else"
+    "secretPrompt": "Your secret token will remain on your device and will not be shared with anyone else",
+    "theme": "Theme",
+    "system": "System",
+    "light": "Light",
+    "dark": "Dark"
   },
   "header": {
     "clearMessages": "Clear all messages?",