Adds more themes, adds ability to hide unneeded components

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" />
-      <Nav class="nav"/>
+      <PageTitle :title="pageInfo.title" :description="pageInfo.description" v-if="titleVisible" />
+      <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')"
-        :class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" tabindex="2" />
+      <IconDeafault @click="updateDisplayLayout('auto')" v-tooltip="tooltip('Auto')"
+        :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" />
-    <div class="options-container">
-      <ThemeSelector :themes="availableThemes" :confTheme="getInitialTheme()"/>
+    <SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" v-if="searchVisible" />
+    <div class="options-container" v-if="settingsVisible">
+      <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: {