Completed theme switching functionality

src/components/LinkItems/Collapsable.vue

@@ -87,7 +87,6 @@ export default {
 
 <style scoped lang="scss">
 
-@import '@/styles/constants.scss';
 @import '@/styles/media-queries.scss';
 
 .collapsable {
@@ -143,7 +142,7 @@ export default {
         border-radius: var(--curve-factor);
         transition: all 0.25s ease-out;
         text-align: left;
-        color: var(--background-transparent);
+        color: var(--item-group-background);
 
         h3 {
             margin: 0;
@@ -177,8 +176,8 @@ export default {
         max-height: 0px;
         overflow: hidden;
         transition: max-height .25s ease-in-out;
-        background: var(--background-transparent);
+        background: var(--item-group-background);
-        border-radius: 0 0 $inner-radius $inner-radius;
+        border-radius: 0 0 var(--curve-factor) var(--curve-factor);
     }
 
     .toggle:checked + .lbl-toggle + .collapsible-content {

src/components/LinkItems/Item.vue

@@ -93,7 +93,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../src/styles/constants.scss';
 
 .item {
   flex-grow: 1;

src/components/LinkItems/ItemGroup.vue

@@ -68,7 +68,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../src/styles/constants.scss';
 
 .no-items {
     width: 100px;
@@ -76,7 +75,7 @@ export default {
     padding: 0.8rem;
     text-align: center;
     cursor: default;
-    border-radius: $curve-factor;
+    border-radius: var(--curve-factor);
     background: #607d8b33;
     color: var(--primary);
     box-shadow: 1px 1px 2px #373737;

src/components/Settings/ItemSizeSelector.vue

@@ -63,7 +63,6 @@ span.options-label {
     background: var(--background);
     border: 1px solid currentColor;
     border-radius: var(--curve-factor);
-    opacity: var(--dimming-factor);
     cursor: pointer;
     &:hover, &.selected {
       background: var(--primary);

src/components/Settings/SettingsContainer.vue

@@ -2,7 +2,7 @@
   <section>
     <SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" />
     <div class="options-container">
-      <ThemeSelector class="theme-selector" :themes="availableThemes" />
+      <ThemeSelector :themes="availableThemes" :confTheme="getInitialTheme()"/>
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
     </div>
@@ -23,6 +23,7 @@ export default {
     displayLayout: String,
     iconSize: String,
     availableThemes: Object,
+    appConfig: Object,
   },
   components: {
     SearchBar,
@@ -44,6 +45,9 @@ export default {
     updateIconSize(iconSize) {
       this.$emit('change-icon-size', iconSize);
     },
+    getInitialTheme() {
+      return this.appConfig.theme || '';
+    },
   },
 };
 </script>

src/components/Settings/ThemeSelector.vue

@@ -13,42 +13,74 @@
 <script>
 
 import ThemeHelper from '@/utils/ThemeHelper';
+import Defaults from '@/utils/defaults';
 
 export default {
   name: 'ThemeSelector',
   props: {
     themes: Object,
+    confTheme: String,
   },
   watch: {
-    selectedTheme(newTheme) {
+    selectedTheme(newTheme) { this.updateTheme(newTheme); },
-      this.themeHelper.theme = newTheme;
-    },
   },
   data() {
     return {
-      selectedTheme: 'Default',
+      selectedTheme: this.getInitialTheme(),
       themeHelper: new ThemeHelper(),
       loading: true,
+      builtInThemes: Defaults.builtInThemes,
     };
   },
   computed: {
-    themeNames: function themeNames() { return Object.keys(this.themes); },
+    themeNames: function themeNames() {
+      const externalThemeNames = Object.keys(this.themes);
+      return externalThemeNames.concat(this.builtInThemes);
+    },
   },
   created() {
     const added = Object.keys(this.themes).map(
       name => this.themeHelper.add(name, this.themes[name]),
     );
-    Promise.all(added).then(() => {
+    // Quicker loading, if the theme is local we can apply it immidiatley
-      this.loading = false;
+    if (this.isThemeLocal(this.selectedTheme)) {
-      this.themeHelper.theme = 'Deafault';
+      this.updateTheme(this.selectedTheme);
-    });
+    // If it's an external stylesheet, then wait for promise to resolve
+    } else if (this.selectedTheme !== 'Default') {
+      Promise.all(added).then(() => {
+        this.updateTheme(this.selectedTheme);
+      });
+    }
   },
   methods: {
-    toggleLocalTheme(newTheme) {
+    setLocalTheme(newTheme) {
       const htmlTag = document.getElementsByTagName('html')[0];
       if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme');
       htmlTag.setAttribute('data-theme', newTheme);
     },
+    /* Get default theme */
+    getInitialTheme() {
+      return localStorage.theme || this.confTheme || Defaults.defaultTheme;
+    },
+    isThemeLocal(themeToCheck) {
+      return this.builtInThemes.includes(themeToCheck);
+    },
+    /* Updates theme. Checks if the new theme is local or external,
+    and calls appropirate updating function. Updates local storage */
+    updateTheme(newTheme) {
+      if (newTheme === 'Deafault') {
+        this.resetToDefault();
+        this.themeHelper.theme = 'Deafault';
+      } else if (this.isThemeLocal(newTheme)) {
+        this.setLocalTheme(newTheme);
+      } else {
+        this.themeHelper.theme = newTheme;
+      }
+      localStorage.setItem('theme', newTheme);
+    },
+    resetToDefault() {
+      document.getElementsByTagName('html')[0].removeAttribute('data-theme');
+    },
   },
 };
 </script>

src/data/conf.yml

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

src/styles/color-palette.scss

@@ -6,20 +6,19 @@
   --primary: #5cabca;
 
   /* Modified Colors */
-  --background-transparent: #0b1021cc;
+  --item-group-background: #0b1021cc;
   --medium-grey: #5e6474;
 
-  --outline-color: none;
-  --curve-factor: 5px;
-  --curve-factor-navbar: 16px;
-
-  --dimming-factor: 0.8;
-
   /* Semi-Transparent Black*/
   --transparent-70: #000000b3;
   --transparent-50: #00000080;
   --transparent-30: #0000004d;
 
+  /* Other Variables */
+  --outline-color: none;
+  --curve-factor: 5px;
+  --curve-factor-navbar: 16px;
+  --dimming-factor: 0.8;
 }
 
 html[data-theme='hacker-red'] {
@@ -30,9 +29,26 @@ html[data-theme='hacker-red'] {
   --curve-factor: 0px;
 }
 
+html[data-theme='hacker-green'] {
+  --background: #000;
+  --background-darker: #000;
+  --primary: #2bca2b;
+  --outline-color: #2bca2b;
+  --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;
@@ -41,6 +57,7 @@ html[data-theme='high-contrast-light'] {
 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/constants.scss

@@ -1,5 +0,0 @@
-
-// Used as constant border radius
-$curve-factor: 5px;
-
-$inner-radius: $curve-factor - 2;

src/utils/ThemeHelper.js

@@ -1,8 +1,8 @@
 /**
  * A function for pre-loading, and easy switching of external stylesheets
+ * External CSS is preloaded to avoid FOUC
  */
 const ThemeHelper = function th() {
-  /* Preload content, to avoid FOUC */
   const preloadTheme = (href) => {
     const link = document.createElement('link');
     link.rel = 'stylesheet';
@@ -19,11 +19,9 @@ const ThemeHelper = function th() {
   };
 
   const selectTheme = (themes, name) => {
-    const themeResults = themes;
+    const t = themes; // To avoid ESLint complaining about mutating a param
-    if (name && !themes[name]) {
+    if (name && !themes[name]) throw new Error(`Theme: '${name}' does not exist.`);
-      throw new Error(`'${name}' has not been defined as a theme.`);
+    Object.keys(themes).forEach(n => { t[n].disabled = (n !== name); });
-    }
-    Object.keys(themeResults).forEach(n => { themeResults[n].disabled = (n !== name); });
   };
 
   const themes = {};

src/utils/defaults.js

@@ -0,0 +1,4 @@
+module.exports = {
+  defaultTheme: 'Default',
+  builtInThemes: ['hacker-green', 'hacker-red', 'hacker-pink'],
+};

src/views/Home.vue

@@ -7,7 +7,8 @@
       @change-icon-size="setItemSize"
       :displayLayout="layout"
       :iconSize="itemSizeBound"
-      :availableThemes="getAvailibleThemes()"
+      :availableThemes="getExternalCSSLinks()"
+      :appConfig="appConfig"
       class="filter-container"
     />
     <!-- Main content, section for each group of items -->
@@ -108,7 +109,8 @@ export default {
     setItemSize(itemSize) {
       this.iconSize = itemSize;
     },
-    getAvailibleThemes() {
+    /* Returns an array of links to external CSS from the Config */
+    getExternalCSSLinks() {
       const availibleThemes = {};
       if (this.appConfig) {
         if (this.appConfig.externalStyleSheet) {