feat: add dark mode (#243)

package.json

@@ -27,6 +27,7 @@
     "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",
     "update-electron-app": "^2.0.1",

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);
@@ -124,7 +150,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 +180,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 ? "#1a1a20" : "#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

@@ -198,7 +198,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,
@@ -140,6 +137,10 @@ function handleClick(event) {
 </script>
 
 <style scoped>
+.markdown-body{
+  background-color: rgb(var(--v-theme-response));
+}
+
 .message {
     border-radius: 8px;
     padding: 16px;
@@ -152,7 +153,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 +164,7 @@ function handleClick(event) {
 }
 
 .response {
-    background-color: #FFF;
+    background-color: rgb(var(--v-theme-response));
     width: 100%;
     grid-column: auto / span 1;
 }
@@ -181,9 +182,4 @@ function handleClick(event) {
     height: 20px;
     margin-right: 4px;
 }
-
-.markdown-body {
-    background-color: inherit;
-    font-family: inherit;
-}
 </style>

src/components/Notification/UpdateNotificationModal.vue

@@ -1,46 +1,55 @@
 <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, ipcRenderer } = window.require("electron");
 
 let versions = undefined;
 const snackbar = ref(false);
-ipcRenderer.on('version-saved', checkVersion);
+ipcRenderer.on("version-saved", checkVersion);
 
 function checkVersion() {
   versions = JSON.parse(localStorage.getItem("chatall-versions"));
-  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;
     }
   }
-  ipcRenderer.removeListener('version-saved', checkVersion);
+  ipcRenderer.removeListener("version-saved", checkVersion);
 }
 
 function skip() {
@@ -75,4 +84,8 @@ function openReleasePage() {
   width: 100%;
   justify-content: center;
 }
+
+span {
+  color: rgb(var(--v-theme-font));
+}
 </style>