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);
-        border-radius: 0 0 $inner-radius $inner-radius;
+        background: var(--item-group-background);
+        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) {
-      this.themeHelper.theme = newTheme;
-    },
+    selectedTheme(newTheme) { this.updateTheme(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(() => {
-      this.loading = false;
-      this.themeHelper.theme = 'Deafault';
-    });
+    // Quicker loading, if the theme is local we can apply it immidiatley
+    if (this.isThemeLocal(this.selectedTheme)) {
+      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>