Wrote a ton of color themes

src/App.vue

@@ -37,8 +37,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../src/styles/global-styles.scss';
+@import '@/styles/global-styles.scss';
-@import '../src/styles/color-palette.scss';
+@import '@/styles/color-palette.scss';
+@import '@/styles/color-themes.scss';
 
 body {
   background: var(--background);

src/components/LinkItems/Collapsable.vue

@@ -90,13 +90,11 @@ export default {
 @import '@/styles/media-queries.scss';
 
 .collapsable {
-    padding: 5px;
+    padding: var(--item-group-padding);
     margin: 10px;
     border-radius: var(--curve-factor);
     background: var(--primary);
-    // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    box-shadow: var(--item-group-shadow);
-    // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    box-shadow: 1px 1px 2px #130f23;
     height: fit-content;
     width: 100%;
     width: stretch;

src/components/LinkItems/Item.vue

@@ -82,7 +82,7 @@ export default {
         trigger: 'hover focus',
         hideOnTargetClick: true,
         html: false,
-        delay: { show: 350, hide: 200 },
+        delay: { show: 600, hide: 200 },
       };
     },
   },
@@ -100,17 +100,17 @@ export default {
   color: var(--primary);
   vertical-align: middle;
   margin: 0.5rem;
-  background: #607d8b33;
+  background: var(--item-background);
   text-align: center;
   padding: 2px;
   outline: 2px solid transparent;
   border: 1px solid var(--outline-color);
   border-radius: var(--curve-factor);
-  box-shadow: 1px 1px 2px #373737;
+  box-shadow: var(--item-shadow);
   cursor: pointer;
   &:hover {
-    box-shadow: 1px 2px 4px #373737;
+    box-shadow: var(--item-hover-shadow);
-    background: #607d8b4d;
+    background: var(--item-background-hover);
   }
   &:focus {
     outline: 2px solid var(--primary);
@@ -130,6 +130,7 @@ export default {
   overflow: hidden;
   position: relative;
   padding: 0;
+  z-index: 2;
   span.text {
     position: absolute;
     white-space: nowrap;
@@ -150,8 +151,7 @@ export default {
     .overflow-dots {
       display: block;
       opacity: 1;
-      // background: var(--background-transparent);
+      background: var(--item-background);
-      background: #283e51;
       position: absolute;
       z-index: 5;
       right: 0;
@@ -181,14 +181,9 @@ export default {
     }
   }
 
-  /* Colourize icons on hover */
+  /* Apply transofmation of icons on hover */
-  .tile-svg {
+  .tile-icon, .tile-svg  {
-    filter: drop-shadow(4px 8px 3px var(--transparent-50));
+    filter: var(--item-icon-transform-hover);
-  }
-  .tile-icon {
-    filter:
-      drop-shadow(4px 8px 3px var(--transparent-50))
-      saturate(2);
   }
 }
 

src/components/LinkItems/ItemGroup.vue

@@ -78,7 +78,7 @@ export default {
     border-radius: var(--curve-factor);
     background: #607d8b33;
     color: var(--primary);
-    box-shadow: 1px 1px 2px #373737;
+    box-shadow: var(--item-shadow);
 }
 
 .there-are-items {

src/components/LinkItems/ItemIcon.vue

@@ -85,6 +85,6 @@ export default {
 
 .tile-icon {
     width: 60px;
-    filter: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
+    filter: var(--item-icon-transform);
 }
 </style>

src/components/PageStrcture/PageTitle.vue

@@ -26,7 +26,7 @@ export default {
     // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
     // -webkit-background-clip: text;
     // -webkit-text-fill-color: transparent;
-    font-size: 3rem;
+    font-size: 2.5rem;
     margin: 0;
   }
   span.subtitle {

src/components/Settings/ItemSizeSelector.vue

@@ -46,14 +46,14 @@ export default {
 <style scoped lang="scss">
 
 span.options-label {
-  color: var(--primary);
+  color: var(--settings-text-color);
 }
 
 .display-options {
-  color: var(--primary);
+  color: var(--settings-text-color);
   svg {
     path {
-      fill: var(--primary);
+      fill: var(--settings-text-color);
     }
     width: 1rem;
     height: 1rem;
@@ -65,7 +65,7 @@ span.options-label {
     border-radius: var(--curve-factor);
     cursor: pointer;
     &:hover, &.selected {
-      background: var(--primary);
+      background: var(--settings-text-color);
       path { fill: var(--background); }
     }
   }

src/components/Settings/LayoutSelector.vue

@@ -46,14 +46,14 @@ export default {
 <style scoped lang="scss">
 
 span.options-label {
-  color: var(--primary);
+  color: var(--settings-text-color);
 }
 
 .display-options {
-  color: var(--primary);
+  color: var(--settings-text-color);
   svg {
     path {
-      fill: var(--primary);
+      fill: var(--settings-text-color);
     }
     width: 1rem;
     height: 1rem;
@@ -65,7 +65,7 @@ span.options-label {
     border-radius: var(--curve-factor);
     cursor: pointer;
     &:hover, &.selected {
-      background: var(--primary);
+      background: var(--settings-text-color);
       path { fill: var(--background); }
     }
   }

src/components/Settings/SearchBar.vue

@@ -66,10 +66,10 @@ export default {
     align-items: center;
     border-radius: 0 0 var(--curve-factor-navbar) 0;
     padding: 0 0.2rem 0.2rem 0;
-    background: var(--background-darker);
+    background: var(--search-container-background);
     label {
         display: inline;
-        color: var(--primary);
+        color: var(--settings-text-color);
         margin: 0.5rem;
         display: inline;
     }
@@ -83,16 +83,16 @@ export default {
       border: none;
       border-radius: var(--curve-factor);
       background: var(--background);
-      color: var(--primary);
+      color: var(--settings-text-color);
       border: 1px solid var(--outline-color);
       &:focus {
-        border-color: var(--primary);
+        border-color: var(--settings-text-color);
         opacity: var(--dimming-factor);
       }
     }
     .clear-search {
       position: absolute;
-      color: var(--primary);
+      color: var(--settings-text-color);
       margin: 0.55rem 0 0 -2.2rem;
       padding: 0 0.4rem;
       font-style: normal;

src/components/Settings/SettingsContainer.vue

@@ -68,7 +68,7 @@ export default {
     flex: 1;
     padding: 0.5rem 1rem;
     border-radius: var(--curve-factor-navbar) 0 0;
-    background: var(--background);
+    background: var(--settings-background);
     div {
       margin-left: 0.5rem;
       opacity: var(--dimming-factor);

src/components/Settings/ThemeSelector.vue

@@ -91,24 +91,27 @@ export default {
 
 .theme-dropdown {
   div.vs__dropdown-toggle {
-    border-color: var(--primary);
+    border-color: var(--settings-text-color);
     border-radius: var(--curve-factor);
     min-width: 10rem;
     height: 1.8rem;
     font-size: 0.85rem;
+    cursor: pointer;
   }
   span.vs__selected, li.vs__dropdown-option {
-    color: var(--primary);
+    color: var(--settings-text-color);
+    text-transform: capitalize;
   }
   svg.vs__open-indicator {
-    fill: var(--primary);
+    fill: var(--settings-text-color);
   }
   ul.vs__dropdown-menu {
     width: auto;
     background: var(--background);
+    z-index: 5;
   }
   li.vs__dropdown-option--highlight {
-    background: var(--primary);
+    background: var(--settings-text-color);
     color: var(--background);
   }
   button.vs__clear {
@@ -123,7 +126,7 @@ export default {
   height: 100%;
   span.theme-label {
     font-size: 1rem;
-    color: var(--primary);
+    color: var(--settings-text-color);
     margin: 1px 0 2px 0;
   }
 }

src/data/conf.yml

@@ -2,9 +2,6 @@
 pageInfo:
   title: Hello World
   description: 'This is a demo'
-appConfig:
-  theme: 'Default'
-  externalStyleSheet: 'https://bootswatch.com/4/solar/bootstrap.min.css'
 sections:
 - name: Firewall
   items:

src/styles/color-palette.scss

@@ -19,46 +19,18 @@
   --curve-factor: 5px;
   --curve-factor-navbar: 16px;
   --dimming-factor: 0.8;
-}
 
-html[data-theme='hacker-red'] {
+  /* Settings for specific components */
-  --background: #000;
+  --item-group-padding: 5px;
-  --background-darker: #000;
+  --item-shadow: 1px 1px 2px #130f23;
-  --primary: red;
+  --item-group-shadow: var(--item-shadow);
-  --outline-color: red;
+  --item-hover-shadow: 1px 2px 4px #373737;
-  --curve-factor: 0px;
+  --item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
-}
+  --item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
 
-html[data-theme='hacker-green'] {
+  --item-background: #607d8b33;
-  --background: #000;
+  --item-background-hover: #607d8b4d;
-  --background-darker: #000;
+  --settings-text-color: var(--primary);
-  --primary: #2bca2b;
+  --settings-background: var(--background);
-  --outline-color: #2bca2b;
+  --search-container-background: var(--background-darker);
-  --curve-factor: 0px;
 }
-
-html[data-theme='hacker-pink'] {
-  --background: #000;
-  --background-darker: #000;
-  --primary: #e435f1;
-  --outline-color: #e435f1;
-  --curve-factor: 0px;
-}
-
-html[data-theme='high-contrast-light'] {
-  --background: #fff;
-  --background-darker: #fff;
-  --item-group-background: #fff;
-  --primary: #000;
-  --outline-color: #000;
-  --curve-factor: 0px;
-}
-
-html[data-theme='high-contrast-dark'] {
-  --background: #000;
-  --background-darker: #000;
-  --item-group-background: #000;
-  --primary: #fff;
-  --outline-color: #fff;
-  --curve-factor: 0px;
-}

src/styles/color-themes.scss

@@ -0,0 +1,138 @@
+html[data-theme='nord'] {
+  --primary: #D8DEE9;
+  --background: #3B4252;
+  --background-darker: #2E3440;
+  --item-background: #434C5E;
+  --item-background-hover: #4C566A;
+  .collapsable:nth-child(1n) { background: #BF616A; }
+  .collapsable:nth-child(2n) { background: #D08770; }
+  .collapsable:nth-child(3n) { background: #EBCB8B; }
+  .collapsable:nth-child(4n) { background: #A3BE8C; }
+}
+
+html[data-theme='nord-frost'] {
+  --primary: #D8DEE9;
+  --background: #3B4252;
+  --background-darker: #2E3440;
+  --item-background: #434C5E;
+  --item-background-hover: #4C566A;
+  .collapsable:nth-child(1n) { background: #8FBCBB; }
+  .collapsable:nth-child(2n) { background: #88C0D0; }
+  .collapsable:nth-child(3n) { background: #81A1C1; }
+  .collapsable:nth-child(4n) { background: #5E81AC; }
+}
+
+html[data-theme='callisto'] {
+  --background: #141b33;
+  --background-darker: #060913;
+  --item-group-background: #0b1021;
+  --item-background: #141b33;
+  --item-background-hover: #060913;
+  --item-hover-shadow: 0 1px 3px #00ccb4b3, 0 1px 2px #00ccb4bf;
+  --primary: #00CCB4;
+}
+
+html[data-theme='thebe'] {
+  --background: #141b33;
+  --background-darker: #060913;
+  --item-group-background: #0b1021;
+  --item-background: #141b33;
+  --item-background-hover: #060913;
+  --item-hover-shadow: 0 1px 3px #9660ecb3, 0 1px 2px #9660ecbf;
+  --primary: #9660ec;
+}
+
+html[data-theme='dracula'] {
+  --background: #44475a;
+  --background-darker: #282a36;
+  --item-group-background: #282a36;
+  --item-background: none;
+  --item-background-hover: #191b22;
+  --item-shadow: none;
+  --item-hover-shadow: none;
+  --settings-text-color: #98ace9;
+  --primary: #6272a4;
+  .collapsable:nth-child(1n) { background: #8be9fd; .item { border: 1px solid #8be9fd; span {color: #8be9fd; }}}
+  .collapsable:nth-child(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; span {color: #50fa7b; }}}
+  .collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; span {color: #ffb86c; }}}
+  .collapsable:nth-child(4n) { background: #ff79c6; .item { border: 1px solid #ff79c6; span {color: #ff79c6; }}}
+  .collapsable:nth-child(4n) { background: #bd93f9; .item { border: 1px solid #bd93f9; span {color: #bd93f9; }}}
+}
+
+html[data-theme='bee'] {
+  --primary: #c3eb5c;
+  --item-group-background: #0b1021;
+}
+
+html[data-theme='raspberry-jam'] {
+  --primary: #eb2d6c;
+  --item-group-background: #0b1021;
+}
+
+html[data-theme='tiger'] {
+  --primary: #f58233;
+  --item-group-background: #0b1021;
+}
+
+html[data-theme='matrix-red'] {
+  --background: #000;
+  --background-darker: #000;
+  --primary: red;
+  --outline-color: red;
+  --curve-factor: 0px;
+}
+
+html[data-theme='matrix'] {
+  --background: #000;
+  --background-darker: #000;
+  --primary: #2bca2b;
+  --outline-color: #2bca2b;
+  --curve-factor: 0px;
+}
+
+html[data-theme='hacker-girl'] {
+  --background: #000;
+  --background-darker: #000;
+  --primary: #e435f1;
+  --outline-color: #e435f1;
+  --curve-factor: 0px;
+}
+
+html[data-theme='high-contrast-light'] {
+  --background: #fff;
+  --background-darker: #fff;
+  --item-group-background: #fff;
+  --item-background: #fff;
+  --primary: #000;
+  --outline-color: #000;
+  --curve-factor: 0px;
+}
+
+html[data-theme='high-contrast-dark'] {
+  --background: #000;
+  --background-darker: #000;
+  --item-group-background: #000;
+  --primary: #fff;
+  --outline-color: #fff;
+  --curve-factor: 0px;
+}
+
+html[data-theme='material'] {
+  --primary: #29B6F6;
+  --settings-text-color: #01579b;
+  --background: #e2e1e0;
+  --background-darker: #01579B;
+  --settings-background: #01579B;
+  --item-group-background: #f8f8f8;
+  --item-background: #fff;
+  --item-background-hover: #fff;
+  --settings-background: #29B6F6;
+  --search-container-background: #29B6F6;
+  --curve-factor: 2px;
+  --curve-factor-navbar: 0;
+  --item-group-padding: 5px 0 0;
+  --item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
+  --item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
+  --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);
+}

src/styles/themes/DemoTheme.scss

@@ -1,4 +0,0 @@
-body {
-  background: red !important;
-  border: 2px dashed yellow;
-}

src/utils/defaults.js

@@ -1,4 +1,19 @@
 module.exports = {
   defaultTheme: 'Default',
-  builtInThemes: ['hacker-green', 'hacker-red', 'hacker-pink'],
+  builtInThemes: [
+    'nord',
+    'nord-frost',
+    'callisto',
+    'thebe',
+    'material',
+    'dracula',
+    'matrix',
+    'matrix-red',
+    'hacker-girl',
+    'bee',
+    'raspberry-jam',
+    'tiger',
+    'high-contrast-light',
+    'high-contrast-dark',
+  ],
 };

src/views/Home.vue

@@ -155,12 +155,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../src/styles/media-queries.scss';
+@import '@/styles/media-queries.scss';
 
 .home {
-  background: var(--background);
   padding-bottom: 1px;
-  min-height: 90%;
+  background: var(--background);
+  min-height: calc(100vh - 126px);
 }
 
 /* Outside container wrapping the item groups*/