chore: updating color scheme with dark mode

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() {

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" />
+      <div>
         <b>
-        Genera<span class="text--accent">TOR</span> <sup class="text--grayed">v{{ version }}</sup>
+          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;

src/styles/_global.scss

@@ -1,21 +1,8 @@
 @use 'fonts';
 @use 'colors';
 
-// Global scrollbar style
+[data-theme='dark'] {
-::-webkit-scrollbar {
+  color-scheme: dark;
-  width: 15px;
-}
-
-::-webkit-scrollbar-track {
-  background: #333;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
 }
 
 body,

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;