♻️ 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 {

src/styles/color-palette.scss

@@ -31,6 +31,13 @@
   --item-group-shadow: var(--item-shadow);
 
   /* Specific components, using variables allows them to be overridden individually */
+  --heading-text-color: var(--primary);
+  --nav-link-text-color: var(--primary);
+  --nav-link-background-color: #607d8b33;
+  --nav-link-text-color-hover: var(--primary);
+  --nav-link-background-color-hover: #607d8b33;
+  --nav-link-border-color: transparent;
+  --nav-link-border-color-hover: var(--primary);
   --item-text-color: var(--primary);
   --item-group-outer-background: var(--primary);
   --item-group-heading-text-color: var(--item-group-background);
@@ -38,4 +45,7 @@
   --settings-background: var(--background);
   --settings-text-color: var(--primary);
   --search-container-background: var(--background-darker);
+  --search-field-background: var(--background);
+  --footer-text-color: var(--medium-grey);
+  --footer-text-color-link:  var(--primary);
 }

src/styles/color-themes.scss

@@ -17,6 +17,8 @@ html[data-theme='thebe'] {
   --item-background-hover: #060913;
   --item-hover-shadow: 0 1px 3px #9660ecb3, 0 1px 2px #9660ecbf;
   --primary: #9660ec;
+  --item-group-outer-background: #9660EC
+    linear-gradient(45deg,  #9660ec 2%,#5f60ea 51%,#9660ec 100%);
 }
 
 html[data-theme='dracula'] {
@@ -38,17 +40,23 @@ html[data-theme='dracula'] {
 
 html[data-theme='bee'] {
   --primary: #c3eb5c;
+  --item-background: #1c2636;
   --item-group-background: #0b1021;
+  --nav-link-background-color: #0b1021;
 }
 
 html[data-theme='raspberry-jam'] {
   --primary: #eb2d6c;
+  --item-background: #1c2636;
   --item-group-background: #0b1021;
+  --nav-link-background-color: #0b1021;
 }
 
 html[data-theme='tiger'] {
   --primary: #f58233;
+  --item-background: #1c2636;
   --item-group-background: #0b1021;
+  --nav-link-background-color: #0b1021;
 }
 
 html[data-theme='matrix-red'] {
@@ -138,6 +146,33 @@ html[data-theme='material'] {
   --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
 }
 
+html[data-theme='material-dark'] {
+  --primary: #08B0BB;
+  --settings-text-color: #08B0BB;
+  --background: #39434C;
+  --background-darker: #08B0BB;
+  --settings-background: #092b3a;
+  --item-group-background: #333C43;
+  --item-background: #414B55;
+  --item-background-hover: #414B55;
+  --settings-background: #131a1f;
+  --search-container-background: #131a1f;
+  --search-field-background: #39434c;
+  --heading-text-color: #131a1f;
+  --nav-link-text-color: #08B0BB;
+  --nav-link-background-color: #131a1f;
+  --nav-link-text-color-hover: #08B0BB;
+  --nav-link-background-color-hover: #131a1fc7;
+  --nav-link-border-color-hover: transparent;
+  --curve-factor: 2px;
+  --curve-factor-navbar: 0;
+  --item-group-padding: 5px 0 0;
+  --item-shadow: 2px 2px 3px #00000082, 0 1px 10px #00000040;
+  --item-hover-shadow: 4px 4px 3px #00000082, 0 1px 10px #00000040;
+  --item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
+  --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
+}
+
 html[data-theme='colorful'] {
   --primary: #e8eae1;
   --background: #0b1021;
@@ -161,5 +196,6 @@ html[data-theme='colorful'] {
     background: currentColor;
     span { color: #05070e; }
     svg path { fill: #05070e; }
+    i.fas, i.fab, i.far, i.fal, i.fad { color: #05070e; }
   }
 }

src/utils/defaults.js

@@ -18,6 +18,7 @@ module.exports = {
     'callisto',
     'thebe',
     'material',
+    'material-dark',
     'dracula',
     'matrix',
     'matrix-red',

src/views/Home.vue

@@ -169,6 +169,11 @@ export default {
 .item-group-container {
   display: grid;
   gap: 0.5rem;
+  margin: 0 auto;
+  max-width: 1200px;
+  @include monitor-up {
+    max-width: 1400px;
+  }
 
   /* Options for alternate layouts, triggered by buttons */
   &.orientation-horizontal {