♻️ Ensures all colors are using variables

src/components/LinkItems/Item.vue

@@ -137,6 +137,7 @@ export default {
   padding: 0;
   z-index: 2;
   span.text {
+    position: absolute;
     white-space: nowrap;
     transition: 1s;
     float: left;

src/components/PageStrcture/Footer.vue

@@ -35,9 +35,9 @@ footer {
 }
 
 footer a{
-  color: var(--medium-grey);
+  color: var(--footer-text-color);
   &:hover {
-    color: var(--primary);
+    color: var(--footer-text-color-link);
   }
 }
 

src/components/PageStrcture/Nav.vue

@@ -36,18 +36,17 @@ nav {
         outline: none;
         border: none;
         border-radius: var(--curve-factor);
-        background: #607d8b33;
         -webkit-box-shadow: 1px 1px 2px #232323;
         box-shadow: 1px 1px 2px #232323;
-        color: var(--primary);
+        color: var(--nav-link-text-color);
+        background: var(--nav-link-background-color);
+        border: 1px solid var(--nav-link-border-color);
         text-decoration: none;
-        &:hover {
-            background: #607d8b1c;
-            box-shadow: 1px 4px 3px #232323;
+        &.router-link-active, &:hover {
+            color: var(--nav-link-text-color-hover);
+            background: var(--nav-link-background-color-hover);
+            border: 1px solid var(--nav-link-border-color-hover);
         }
     }
-    .router-link-active {
-        border: 1px solid var(--primary);
-    }
 }
 </style>

src/components/PageStrcture/PageTitle.vue

@@ -22,12 +22,12 @@ export default {
   display: flex;
   flex-direction: column;
   h1 {
-    color: var(--primary);
+    color: var(--heading-text-color);
     font-size: 2.5rem;
     margin: 0;
   }
   span.subtitle {
-    color: var(--primary);
+    color: var(--heading-text-color);
     font-style: italic;
     text-shadow: 1px 1px 2px #130f23;
     opacity: var(--dimming-factor);

src/components/Settings/SearchBar.vue

@@ -84,7 +84,7 @@ export default {
       outline: none;
       border: none;
       border-radius: var(--curve-factor);
-      background: var(--background);
+      background: var(--search-field-background);
       color: var(--settings-text-color);
       border: 1px solid var(--outline-color);
       &:focus {