From 039c52a8b7ea7772a0b17301acbc6ea8ee0fee75 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 23 Jan 2026 17:40:33 +0100
Subject: [PATCH] chore: updating color scheme with dark mode

---
 src/App.vue                   |  1 +
 src/components/App/Navbar.vue | 17 ++++++++++++++---
 src/styles/_global.scss       | 17 ++---------------
 src/views/Home.vue            |  1 +
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 410210e..99c0105 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,6 +65,7 @@ export default defineComponent({
       }
 
       this.store.orderDarkMode = this.getOrderSetting('dark-mode') === 'true';
+      document.documentElement.setAttribute('data-theme', this.store.orderDarkMode ? 'dark' : 'light');
     },
 
     handleQueries() {
diff --git a/src/components/App/Navbar.vue b/src/components/App/Navbar.vue
index b6d8219..2433ac2 100644
--- a/src/components/App/Navbar.vue
+++ b/src/components/App/Navbar.vue
@@ -2,9 +2,14 @@
   <nav class="app-navbar">
     <div class="navbar-brand">
       <img src="/favicon.ico" alt="generator logo" width="30" />
-      <b>
-        Genera<span class="text--accent">TOR</span> <sup class="text--grayed">v{{ version }}</sup>
-      </b>
+      <div>
+        <b>
+          Genera<span class="text--accent">TOR</span>
+          <sup class="text--grayed">v{{ version }}</sup>
+        </b>
+
+        <b class="brand-author">&nbsp;by Spythere</b>
+      </div>
     </div>
 
     <div class="navbar-actions">
@@ -31,6 +36,7 @@ const store = useStore();
 function switchDarkMode() {
   store.orderDarkMode = !store.orderDarkMode;
   window.localStorage.setItem('dark-mode', `${store.orderDarkMode}`);
+  document.documentElement.setAttribute('data-theme', store.orderDarkMode ? 'dark' : 'light');
 }
 
 function switchLang() {
@@ -60,6 +66,11 @@ function switchLang() {
   }
 }
 
+.brand-author {
+  font-size: 0.8em;
+  color: #aaa;
+}
+
 .navbar-actions {
   display: flex;
   align-items: center;
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index e5116b8..dd7d720 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -1,21 +1,8 @@
 @use 'fonts';
 @use 'colors';
 
-// Global scrollbar style
-::-webkit-scrollbar {
-  width: 15px;
-}
-
-::-webkit-scrollbar-track {
-  background: #333;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
+[data-theme='dark'] {
+  color-scheme: dark;
 }
 
 body,
diff --git a/src/views/Home.vue b/src/views/Home.vue
index cf96e04..5ad5002 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -110,6 +110,7 @@ const panelComponent = computed(() => {
 .panel-container {
   display: grid;
   grid-template-rows: auto auto 1fr;
+  color-scheme: dark;
 
   padding: 2px;
   max-width: 800px;