Adds more themes, adds ability to hide unneeded components

src/App.vue

@@ -2,13 +2,14 @@
   <div id="dashy" data-theme="dark">
     <Header :pageInfo="getPageInfo(pageInfo)" />
     <router-view />
-    <Footer />
+    <Footer v-if="showFooter" />
   </div>
 </template>
 <script>
 
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
+import Defaults from '@/utils/defaults';
 import conf from '@/data/conf.yml';
 
 export default {
@@ -19,6 +20,7 @@ export default {
   },
   data: () => ({
     pageInfo: conf.pageInfo,
+    showFooter: Defaults.visibleComponents.footer,
   }),
   methods: {
     /* Returns either page info from the config, or default values */

src/components/LinkItems/Collapsable.vue

@@ -93,7 +93,7 @@ export default {
     padding: var(--item-group-padding);
     margin: 10px;
     border-radius: var(--curve-factor);
-    background: var(--primary);
+    background: var(--item-group-outer-background);
     box-shadow: var(--item-group-shadow);
     height: fit-content;
     width: 100%;
@@ -140,7 +140,7 @@ export default {
         border-radius: var(--curve-factor);
         transition: all 0.25s ease-out;
         text-align: left;
-        color: var(--item-group-background);
+        color: var(--item-group-heading-text-color); //var(--item-group-background);
 
         h3 {
             margin: 0;
@@ -150,7 +150,7 @@ export default {
     }
 
     .lbl-toggle:hover {
-        color: var(--background);
+        color: var(--item-group-heading-text-color-hover);
     }
 
     .lbl-toggle::before {

src/components/LinkItems/Item.vue

@@ -97,7 +97,7 @@ export default {
 .item {
   flex-grow: 1;
   position: relative;
-  color: var(--primary);
+  color: var(--item-text-color);
   vertical-align: middle;
   margin: 0.5rem;
   background: var(--item-background);

src/components/LinkItems/ItemOpenMethodIcon.vue

@@ -43,7 +43,8 @@ export default {
     width: 1rem;
     margin: 2px;
     path {
-      fill: var(--primary);
+      // fill: var(--primary);
+      fill: currentColor;
     }
   }
   &.top svg { top: 0; }

src/components/PageStrcture/Header.vue

@@ -1,13 +1,14 @@
 <template>
     <header>
-      <PageTitle :title="pageInfo.title" :description="pageInfo.description" />
+      <PageTitle :title="pageInfo.title" :description="pageInfo.description" v-if="titleVisible" />
-      <Nav class="nav"/>
+      <Nav class="nav" v-if="navVisible" />
     </header>
 </template>
 
 <script>
 import PageTitle from '@/components/PageStrcture/PageTitle.vue';
 import Nav from '@/components/PageStrcture/Nav.vue';
+import Defaults from '@/utils/defaults';
 
 export default {
   name: 'Header',
@@ -18,6 +19,12 @@ export default {
   props: {
     pageInfo: Object,
   },
+  data() {
+    return {
+      titleVisible: Defaults.visibleComponents.pageTitle,
+      navVisible: Defaults.visibleComponents.navigation,
+    };
+  },
 };
 </script>
 

src/components/Settings/LayoutSelector.vue

@@ -2,8 +2,8 @@
   <div>
     <span class="options-label">Layout</span>
     <div class="display-options">
-      <IconDeafault @click="updateDisplayLayout('default')" v-tooltip="tooltip('Auto')"
+      <IconDeafault @click="updateDisplayLayout('auto')" v-tooltip="tooltip('Auto')"
-        :class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" tabindex="2" />
+        :class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`" tabindex="2" />
       <IconHorizontal @click="updateDisplayLayout('horizontal')" v-tooltip="tooltip('Horizontal')"
         :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" tabindex="2" />
       <IconVertical @click="updateDisplayLayout('vertical')" v-tooltip="tooltip('Vertical')"

src/components/Settings/SettingsContainer.vue

@@ -1,8 +1,9 @@
 <template>
   <section>
-    <SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" />
+    <SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" v-if="searchVisible" />
-    <div class="options-container">
+    <div class="options-container" v-if="settingsVisible">
-      <ThemeSelector :themes="availableThemes" :confTheme="getInitialTheme()"/>
+      <ThemeSelector :themes="availableThemes"
+        :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
     </div>
@@ -11,6 +12,7 @@
 </template>
 
 <script>
+import Defaults from '@/utils/defaults';
 import SearchBar from '@/components/Settings/SearchBar';
 import ThemeSelector from '@/components/Settings/ThemeSelector';
 import LayoutSelector from '@/components/Settings/LayoutSelector';
@@ -48,6 +50,15 @@ export default {
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
+    getUserThemes() {
+      return this.appConfig.cssThemes || [];
+    },
+  },
+  data() {
+    return {
+      searchVisible: Defaults.visibleComponents.searchBar,
+      settingsVisible: Defaults.visibleComponents.settings,
+    };
   },
 };
 </script>

src/components/Settings/ThemeSelector.vue

@@ -20,6 +20,7 @@ export default {
   props: {
     themes: Object,
     confTheme: String,
+    userThemes: Array,
   },
   watch: {
     selectedTheme(newTheme) { this.updateTheme(newTheme); },
@@ -29,7 +30,7 @@ export default {
       selectedTheme: this.getInitialTheme(),
       themeHelper: new ThemeHelper(),
       loading: true,
-      builtInThemes: Defaults.builtInThemes,
+      builtInThemes: Defaults.builtInThemes.concat(this.userThemes),
     };
   },
   computed: {

src/styles/color-palette.scss

@@ -1,13 +1,15 @@
 
 :root {
   /* Basic*/
-  --background: #0b1021;
+  --primary: #5cabca; // Main accent color
-  --background-darker: #05070e;
+  --background: #0b1021; // Page background
-  --primary: #5cabca;
+  --background-darker: #05070e; // Used for navigation bar, footer and fills
 
   /* Modified Colors */
   --item-group-background: #0b1021cc;
   --medium-grey: #5e6474;
+  --item-background: #607d8b33;
+  --item-background-hover: #607d8b4d;
 
   /* Semi-Transparent Black*/
   --transparent-70: #000000b3;
@@ -16,21 +18,24 @@
 
   /* Other Variables */
   --outline-color: none;
-  --curve-factor: 5px;
+  --curve-factor: 5px; // Border radius for most components
-  --curve-factor-navbar: 16px;
+  --curve-factor-navbar: 16px; // Border radius for header
-  --dimming-factor: 0.8;
+  --dimming-factor: 0.8; // Opacity for semi-transparent components
 
   /* Settings for specific components */
-  --item-group-padding: 5px;
+  --item-group-padding: 5px; // Determines width of item-group outline
   --item-shadow: 1px 1px 2px #130f23;
-  --item-group-shadow: var(--item-shadow);
   --item-hover-shadow: 1px 2px 4px #373737;
   --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);
+  --item-group-shadow: var(--item-shadow);
 
-  --item-background: #607d8b33;
+  /* Specific components, using variables allows them to be overridden individually */
-  --item-background-hover: #607d8b4d;
+  --item-text-color: var(--primary);
-  --settings-text-color: var(--primary);
+  --item-group-outer-background: var(--primary);
+  --item-group-heading-text-color: var(--item-group-background);
+  --item-group-heading-text-color-hover: var(--background);
   --settings-background: var(--background);
+  --settings-text-color: var(--primary);
   --search-container-background: var(--background-darker);
 }

src/styles/color-themes.scss

@@ -1,26 +1,3 @@
-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;
@@ -117,6 +94,30 @@ html[data-theme='high-contrast-dark'] {
   --curve-factor: 0px;
 }
 
+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='material'] {
   --primary: #29B6F6;
   --settings-text-color: #01579b;
@@ -135,4 +136,30 @@ html[data-theme='material'] {
   --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);
+}
+
+html[data-theme='colorful'] {
+  --primary: #e8eae1;
+  --background: #0b1021;
+  --item-background: #05070e;
+  --item-background-hover: #0b1021;
+  --item-group-background: transparent;
+  --item-group-outer-background: #05070e;
+  --item-group-heading-text-color: #e8eae1;
+  --item-group-heading-text-color-hover: #fff;
+  .item:nth-child(1n) { color: #eb5cad; border: 1px solid #eb5cad; }
+  .item:nth-child(2n) { color: #985ceb; border: 1px solid #985ceb; }
+  .item:nth-child(3n) { color: #5c90eb; border: 1px solid #5c90eb; }
+  .item:nth-child(4n) { color: #5cdfeb; border: 1px solid #5cdfeb; }
+  .item:nth-child(5n) { color: #5ceb8d; border: 1px solid #5ceb8d; }
+  .item:nth-child(6n) { color: #afeb5c; border: 1px solid #afeb5c; }
+  .item:nth-child(7n) { color: #ebb75c; border: 1px solid #ebb75c; }
+  .item:nth-child(8n) { color: #eb615c; border: 1px solid #eb615c; }
+  .item:hover, .item:focus {
+    opacity: 0.85;
+    outline: none;
+    background: currentColor;
+    span { color: #05070e; }
+    svg path { fill: #05070e; }
+  }
 }

src/utils/defaults.js

@@ -1,5 +1,7 @@
 module.exports = {
-  defaultTheme: 'Default',
+  iconSize: 'medium',
+  layout: 'auto',
+  defaultTheme: 'default',
   builtInThemes: [
     'nord',
     'nord-frost',
@@ -13,7 +15,15 @@ module.exports = {
     'bee',
     'raspberry-jam',
     'tiger',
+    'colorful',
     'high-contrast-light',
     'high-contrast-dark',
   ],
+  visibleComponents: {
+    pageTitle: true,
+    navigation: true,
+    searchBar: true,
+    settings: true,
+    footer: true,
+  },
 };

src/views/Home.vue

@@ -33,6 +33,7 @@
 
 import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
 import ItemGroup from '@/components/LinkItems/ItemGroup.vue';
+import Defaults from '@/utils/defaults';
 
 export default {
   name: 'home',
@@ -51,14 +52,14 @@ export default {
   }),
   computed: {
     layoutOrientation: {
-      get: () => localStorage.layoutOrientation || 'default',
+      get: () => localStorage.layoutOrientation || Defaults.layout,
       set: function setLayout(layout) {
         localStorage.setItem('layoutOrientation', layout);
         this.layout = layout;
       },
     },
     iconSize: {
-      get: () => localStorage.iconSize || 'medium',
+      get: () => localStorage.iconSize || Defaults.iconSize,
       set: function setIconSize(iconSize) {
         localStorage.setItem('iconSize', iconSize);
         this.itemSizeBound = iconSize;