🎨 Updated color schemes

assets/css/styles.scss

@@ -27,12 +27,7 @@ html {
   width: 4px;
   height: 4px;
   border-radius: 4px;
-  background-color: var(--bg-dark-color);
+  background-color: var(--bg-light-color);
-  visibility: hidden;
-
-  &:hover {
-    visibility: visible;
-  }
 }
 
 ::-webkit-scrollbar-thumb {
@@ -158,6 +153,7 @@ footer {
   order: 2;
   position: relative;
   padding: 0 16px;
+  background-color: var(--bg-light-color);
 }
 
 .nav-second {
@@ -183,7 +179,7 @@ nav.primary-nav {
     flex-shrink: 0;
     padding: 14px;
     border-radius: 50%;
-    background-color: var(--brd-color);
+    background-color: var(--bg-light-color);
     color: var(--fg-light-color);
     fill: var(--fg-light-color);
     margin: 8px;
@@ -213,7 +209,7 @@ nav.primary-nav {
 
 nav.secondary-nav {
   display: flex;
-  border-top: 1px solid var(--brd-color);
+  border-top: 1px dashed var(--brd-color);
 
   ul {
     display: flex;
@@ -445,9 +441,10 @@ button {
 
 fieldset {
   margin: 16px 0;
-  border: 1px solid var(--brd-color);
+  // border: 1px solid var(--brd-color);
-  border-radius: 8px;
+  border-radius: 16px;
   transition: all 0.2s ease-in-out;
+  background-color: var(--bg-dark-color);
 }
 
 legend {
@@ -832,7 +829,22 @@ input[type="radio"]:checked + label + .tab {
     flex-flow: row nowrap;
     overflow: auto;
     justify-content: space-around;
+
+    a {
+      background-color: transparent;
+
+      &.nuxt-link-exact-active {
+        background-color: transparent;
+        color: var(--ac-color);
+        fill: var(--ac-color);
+
+        svg {
+          fill: var(--ac-color);
+        }
+      }
+    }
   }
+
   nav.secondary-nav {
     display: none;
   }

assets/css/themes.scss

@@ -8,10 +8,12 @@
 
 // Dark is the default theme variant.
 @mixin darkTheme {
-  // Dark Background color
-  --bg-dark-color: rgb(41, 42, 45);
   // Background color
   --bg-color: rgb(37, 38, 40);
+  // Light Background color
+  --bg-light-color: rgba(255, 255, 255, 0.05);
+  //Dark Background color
+  --bg-dark-color: rgba(0, 0, 0, 0.1);
   // Auto-complete color
   --atc-color: rgb(49, 49, 55);
   // Text color
@@ -28,19 +30,13 @@
   --act-color: rgb(37, 38, 40);
 }
 
-:root {
-  @include darkTheme;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root.auto {
-    @include darkTheme;
-  }
-}
-
 @mixin lightTheme {
   // Dark Background color
   --bg-dark-color: #eeeeee;
+  // Light Background color
+  --bg-light-color: rgba(0, 0, 0, 0.02);
+  //Dark Background color
+  --bg-dark-color: rgba(0, 0, 0, 0.05);
   // Background color
   --bg-color: #ffffff;
   // Auto-complete color
@@ -59,19 +55,13 @@
   --act-color: #ffffff;
 }
 
-:root.light {
-  @include lightTheme;
-}
-
-@media (prefers-color-scheme: light) {
-  :root.auto {
-    @include lightTheme;
-  }
-}
-
 @mixin blackTheme {
   // Dark Background color
   --bg-dark-color: rgb(8, 8, 8);
+  // Light Background color
+  --bg-light-color: rgba(255, 255, 255, 0.02);
+  //Dark Background color
+  --bg-dark-color: rgba(255, 255, 255, 0.02);
   // Background color
   --bg-color: #000000;
   // Auto-complete color
@@ -90,6 +80,26 @@
   --act-color: #000000;
 }
 
+:root {
+  @include darkTheme;
+}
+
+:root.light {
+  @include lightTheme;
+}
+
 :root.black {
   @include blackTheme;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root.auto {
+    @include darkTheme;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root.auto {
+    @include lightTheme;
+  }
+}

components/history.vue

@@ -300,7 +300,7 @@ ol li {
     top: 10px;
     right: 10px;
     font-family: "Roboto Mono", monospace;
-    background-color: var(--bg-color);
+    background-color: transparent;
     padding: 2px 6px;
     border-radius: 8px;
   }
@@ -312,7 +312,7 @@ ol li {
 }
 
 .bg-color {
-  background-color: var(--bg-color);
+  background-color: transparent;
 }
 
 @media (max-width: 720px) {