🏪 Adds custom theme options to store

src/components/Settings/CustomThemeMaker.vue

@@ -2,45 +2,48 @@
   <div :class="`theme-configurator-wrapper ${showingAllVars ? 'showing-all' : ''}`">
     <h3 class="configurator-title">{{ $t('theme-maker.title') }}</h3>
     <div class="color-row-container">
-    <div class="color-row" v-for="colorName in Object.keys(customColors)" :key="colorName">
+      <!-- Show color swatch input for each color -->
-      <label :for="`color-input-${colorName}`" class="color-name">
+      <div class="color-row" v-for="colorName in Object.keys(customColors)" :key="colorName">
-        {{colorName.replaceAll('-', ' ')}}
+        <label :for="`color-input-${colorName}`" class="color-name">
-      </label>
+          {{colorName.replaceAll('-', ' ')}}
-      <v-swatches
+        </label>
-        v-if="isColor(colorName, customColors[colorName])"
+        <v-swatches
-        v-model="customColors[colorName]"
+          v-if="isColor(colorName, customColors[colorName])"
-        show-fallback
+          v-model="customColors[colorName]"
-        fallback-input-type="color"
+          show-fallback
-        popover-x="left"
+          fallback-input-type="color"
-        :swatches="swatches"
+          popover-x="left"
-        @input="setVariable(colorName, customColors[colorName])"
+          :swatches="swatches"
-      >
+          @input="setVariable(colorName, customColors[colorName])"
-      <input
+        >
-        :id="`color-input-${colorName}`"
+          <input
-        slot="trigger"
+            :id="`color-input-${colorName}`"
-        :value="customColors[colorName]"
+            slot="trigger"
-        class="swatch-input form__input__element"
+            :value="customColors[colorName]"
-        readonly
+            class="swatch-input form__input__element"
-        :style="makeSwatchStyles(colorName)"
+            readonly
-      />
+            :style="makeSwatchStyles(colorName)"
-      </v-swatches>
+          />
-      <input v-else
+        </v-swatches>
-        :id="`color-input-${colorName}`"
+        <input v-else
-        :value="customColors[colorName]"
+          :id="`color-input-${colorName}`"
-        class="misc-input"
+          :value="customColors[colorName]"
-        @input="setVariable(colorName, customColors[colorName])"
+          class="misc-input"
-      />
+          @input="setVariable(colorName, customColors[colorName])"
-    </div> <!-- End of color list -->
+        />
+      </div> <!-- End of color list -->
     </div>
+    <!-- More options: Export, Reset, Show all -->
     <p @click="exportToClipboard" class="action-text-btn">
       {{ $t('theme-maker.export-button') }}
     </p>
-    <p @click="resetAndSave" class="action-text-btn show-all-vars-btn">
+    <p @click="resetAndSave" class="action-text-btn">
        {{ $t('theme-maker.reset-button') }} '{{ themeToEdit }}'
     </p>
-    <p @click="findAllVariableNames" class="action-text-btn">
+    <p @click="findAllVariableNames" class="action-text-btn show-all-vars-btn">
        {{ $t('theme-maker.show-all-button') }}
     </p>
+    <!-- Save and cancel buttons -->
     <div class="action-buttons">
       <Button :click="saveChanges">
         <SaveIcon /> {{ $t('theme-maker.save-button') }}
@@ -55,8 +58,8 @@
 <script>
 import VSwatches from 'vue-swatches';
 import 'vue-swatches/dist/vue-swatches.css';
+import StoreKeys from '@/utils/StoreMutations';
 import { localStorageKeys, mainCssVars, swatches } from '@/utils/defaults';
-
 import Button from '@/components/FormElements/Button';
 import SaveIcon from '@/assets/interface-icons/save-config.svg';
 import CancelIcon from '@/assets/interface-icons/config-cancel.svg';
@@ -88,11 +91,12 @@ export default {
     setVariable(variable, value) {
       document.documentElement.style.setProperty(`--${variable}`, value);
     },
-    /* Saves the users omdified variables in local storage */
+    /* Updates browser storage, and srore with new color settings, and shows success msg */
     saveChanges() {
       const priorSettings = JSON.parse(localStorage[localStorageKeys.CUSTOM_COLORS] || '{}');
       priorSettings[this.themeToEdit] = this.customColors;
       localStorage.setItem(localStorageKeys.CUSTOM_COLORS, JSON.stringify(priorSettings));
+      this.$store.commit(StoreKeys.SET_CUSTOM_COLORS, priorSettings);
       this.$toasted.show(this.$t('theme-maker.saved-toast', { theme: this.themeToEdit }));
       this.$emit('closeThemeConfigurator');
     },

src/store.js

@@ -18,6 +18,7 @@ const {
   SET_ITEM_LAYOUT,
   SET_ITEM_SIZE,
   SET_THEME,
+  SET_CUSTOM_COLORS,
   UPDATE_ITEM,
   SET_EDIT_MODE,
   SET_PAGE_INFO,
@@ -208,6 +209,12 @@ const store = new Vuex.Store({
       state.config = newConfig;
       InfoHandler('Theme updated', InfoKeys.VISUAL);
     },
+    [SET_CUSTOM_COLORS](state, customColors) {
+      const newConfig = { ...state.config };
+      newConfig.appConfig.customColors = customColors;
+      state.config = newConfig;
+      InfoHandler('Color palette updated', InfoKeys.VISUAL);
+    },
     [SET_ITEM_LAYOUT](state, layout) {
       state.config.appConfig.layout = layout;
     },

src/utils/StoreMutations.js

@@ -8,6 +8,7 @@ const KEY_NAMES = [
   'SET_ITEM_LAYOUT',
   'SET_ITEM_SIZE',
   'SET_THEME',
+  'SET_CUSTOM_COLORS',
   'UPDATE_ITEM',
   'SET_PAGE_INFO',
   'SET_APP_CONFIG',