working switch theme button and tuning dark theme

src/assets/app.scss

@@ -38,6 +38,13 @@
 
 // Dark Theme override here
 .dark {
+    background-color: #090C10;
+    color: $dark-font-color;
+
+    .shadow-box {
+        background-color: #0D1117;
+    }
+
     a:hover {
         color: #7ce8a4;
     }
@@ -81,4 +88,8 @@
         color: var(--main-font-color);
         background-color: var(--background-4);
     }
+
+    .form-control {
+        border-color: #21262D;
+    }
 }

src/assets/vars.scss

@@ -7,18 +7,15 @@ $border-radius: 50rem;
 $highlight: #7ce8a4;
 $highlight-white: #e7faec;
 
-.dark {
-    $primary: #5cdd8b;
-    $danger: #dc3545;
-    $warning: #dca235;
 
-    :root {
+$dark-font-color: #b1b8c0;
+
+.dark {
     --page-background: #0a0a0a;
     --background-secondary: #656565;
-        --background-4: #313131;
+    --background-4: #070A10;
     --background-ternary: #a7a7a7;
     --background-sidebar-active: #777777;
     --background-navbar: #333333;
-        --main-font-color: #e4e4e4;
-    }
+    --main-font-color: $dark-font-color;
 }

src/layouts/Layout.vue

@@ -143,12 +143,6 @@ export default {
     }
 }
 
-.dark {
-    .bottom-nav {
-        background-color: var(--background-navbar);
-    }
-}
-
 .title {
     font-weight: bold;
 }
@@ -172,4 +166,19 @@ footer {
     text-align: center;
 }
 
+.dark {
+    header {
+        background-color: #161B22;
+        border-bottom-color: #161B22 !important;
+
+        span {
+            color: #F0F6FC;
+        }
+    }
+
+    .bottom-nav {
+        background-color: var(--background-navbar);
+    }
+}
+
 </style>

src/mixins/theme.js

@@ -23,10 +23,9 @@ export default {
         }
     },
 
-    methods: {
-        changeTheme(name) {
-            localStorage.theme = name;
-            this.userTheme = name;
+    watch: {
+        userTheme(to, from) {
+            localStorage.theme = to;
         }
     }
 }

src/pages/Settings.vue

@@ -22,13 +22,13 @@
 
                     <div class="mb-3">
                         <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
-                            <input id="btncheck1" type="radio" class="btn-check" name="theme" autocomplete="off">
+                            <input id="btncheck1" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="light">
                             <label class="btn btn-outline-primary" for="btncheck1">Light</label>
 
-                            <input id="btncheck2" type="radio" class="btn-check" name="theme" autocomplete="off">
+                            <input id="btncheck2" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="dark">
                             <label class="btn btn-outline-primary" for="btncheck2">Dark</label>
 
-                            <input id="btncheck3" type="radio" class="btn-check" name="theme" autocomplete="off">
+                            <input id="btncheck3" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="auto">
                             <label class="btn btn-outline-primary" for="btncheck3">Auto</label>
                         </div>
                     </div>