✨ Users custom colors are applied on load

src/components/Settings/CustomThemeMaker.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="`theme-configurator-wrapper ${showingAllVars ? 'showing-all' : ''}`">
-    <h3 class="configurator-title">Custom Configurator</h3>
+    <h3 class="configurator-title">Theme Configurator</h3>
     <div class="color-row-container">
     <div class="color-row" v-for="colorName in Object.keys(customColors)" :key="colorName">
       <label :for="`color-input-${colorName}`" class="color-name">
@@ -31,7 +31,10 @@
       />
     </div> <!-- End of color list -->
     </div>
-    <p @click="findAllVariableNames" class="show-more-variables">
+    <p @click="resetAndSave" class="action-text-btn show-all-vars-btn">
+      Reset Styles for '{{ themeToEdit }}'
+    </p>
+    <p @click="findAllVariableNames" class="action-text-btn">
       Show All Variables
     </p>
     <div class="action-buttons">
@@ -44,14 +47,12 @@
 <script>
 import VSwatches from 'vue-swatches';
 import 'vue-swatches/dist/vue-swatches.css';
-import { localStorageKeys } from '@/utils/defaults';
+import { localStorageKeys, mainCssVars } 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';
 
-const mainVariables = ['primary', 'background', 'background-darker'];
-
 export default {
   name: 'ThemeMaker',
   components: {
@@ -62,7 +63,7 @@ export default {
   },
   data() {
     return {
-      customColors: this.makeInitialData(mainVariables),
+      customColors: this.makeInitialData(mainCssVars),
       showingAllVars: false,
     };
   },
@@ -92,8 +93,14 @@ export default {
       variables.forEach((variable) => {
         document.documentElement.style.removeProperty(`--${variable}`);
       });
+      this.customColors = this.makeInitialData(mainCssVars);
       this.$emit('closeThemeConfigurator');
     },
+    resetAndSave() {
+      this.resetUnsavedColors();
+      this.customColors = this.makeInitialData(mainCssVars);
+      this.saveChanges();
+    },
     /* Returns a JSON object, with the variable name as key, and color as value */
     makeInitialData(variableArray) {
       const data = {};
@@ -218,7 +225,7 @@ div.theme-configurator-wrapper {
   }
 }
 
-p.show-more-variables {
+p.action-text-btn {
   cursor: pointer;
   margin: 0.5rem auto 0;
   padding: 0.2rem 0.4rem;
@@ -243,6 +250,7 @@ p.show-more-variables {
 
 div.action-buttons {
   display: flex;
+  justify-content: center;
   button {
     min-width: 6rem;
     padding: 0.25rem 0.5rem;
@@ -255,7 +263,7 @@ div.theme-configurator-wrapper.showing-all {
   div.color-row-container {
     overflow: auto;
   }
-  p.show-more-variables {
+  p.show-all-vars-btn {
     display: none;
   }
 }

src/components/Settings/ThemeSelector.vue

@@ -24,7 +24,11 @@
 <script>
 
 import CustomThemeMaker from '@/components/Settings/CustomThemeMaker';
-import { LoadExternalTheme, ApplyLocalTheme, ApplyCustomTheme } from '@/utils/ThemeHelper';
+import {
+  LoadExternalTheme,
+  ApplyLocalTheme,
+  ApplyCustomVariables,
+} from '@/utils/ThemeHelper';
 import Defaults, { localStorageKeys } from '@/utils/defaults';
 import IconPalette from '@/assets/interface-icons/config-color-palette.svg';
 
@@ -52,7 +56,7 @@ export default {
       themeHelper: new LoadExternalTheme(),
       themeConfiguratorOpen: false, // Control the opening of theme config popup
       ApplyLocalTheme,
-      ApplyCustomTheme,
+      ApplyCustomVariables,
     };
   },
   computed: {
@@ -100,9 +104,7 @@ export default {
     /* Updates theme. Checks if the new theme is local or external,
     and calls appropirate updating function. Updates local storage */
     updateTheme(newTheme) {
-      if (newTheme === 'custom') {
-        this.ApplyCustomTheme();
-      } else if (newTheme === 'Deafault') {
+      if (newTheme === 'Deafault') {
         this.resetToDefault();
         this.themeHelper.theme = 'Deafault';
       } else if (this.isThemeLocal(newTheme)) {
@@ -110,6 +112,7 @@ export default {
       } else {
         this.themeHelper.theme = newTheme;
       }
+      this.ApplyCustomVariables(newTheme);
       localStorage.setItem(localStorageKeys.THEME, newTheme);
     },
     /* Removes any applied themes */

src/utils/ThemeHelper.js

@@ -1,9 +1,22 @@
 import ErrorHandler from '@/utils/ErrorHandler';
 import { getTheme } from '@/utils/ConfigHelpers';
+import { localStorageKeys, mainCssVars } from '@/utils/defaults';
 
 /* Returns users current theme */
 export const GetTheme = () => getTheme();
 
+/* Gets user custom color preferences for current theme, and applies to DOM */
+export const ApplyCustomVariables = (theme) => {
+  mainCssVars.forEach((vName) => { document.documentElement.style.removeProperty(`--${vName}`); });
+  const customColors = JSON.parse(localStorage[localStorageKeys.CUSTOM_COLORS] || '{}');
+  const themeColors = customColors[theme];
+  if (themeColors) {
+    Object.keys(themeColors).forEach((customVar) => {
+      document.documentElement.style.setProperty(`--${customVar}`, themeColors[customVar]);
+    });
+  }
+};
+
 /* Sets the theme, by updating data-theme attribute on the html tag */
 export const ApplyLocalTheme = (newTheme) => {
   const htmlTag = document.getElementsByTagName('html')[0];
@@ -11,11 +24,6 @@ export const ApplyLocalTheme = (newTheme) => {
   htmlTag.setAttribute('data-theme', newTheme);
 };
 
-/* Sets specific CSS variables, for the users custom theme */
-export const ApplyCustomTheme = () => {
-  ApplyLocalTheme('custom');
-};
-
 /**
  * A function for pre-loading, and easy switching of external stylesheets
  * External CSS is preloaded to avoid FOUC

src/utils/defaults.js

@@ -80,6 +80,11 @@ module.exports = {
     APP_CONFIG: 'appConfig',
     SECTIONS: 'sections',
   },
+  mainCssVars: ['primary', 'background', 'background-darker'],
+  splashScreenTime: 1900,
+  metaTagData: [
+    { name: 'description', content: 'A simple static homepage for you\'re server' },
+  ],
   toastedOptions: {
     position: 'bottom-center',
     duration: 2500,
@@ -88,10 +93,6 @@ module.exports = {
     iconPack: 'fontawesome',
   },
   backupEndpoint: 'https://dashy-sync-service.as93.net',
-  splashScreenTime: 1900,
-  metaTagData: [
-    { name: 'description', content: 'A simple static homepage for you\'re server' },
-  ],
   faviconApiEndpoints: {
     mcapi: 'https://eu.mc-api.net/v3/server/favicon/$URL',
     clearbit: 'https://logo.clearbit.com/$URL',