✨ Users custom colors are applied on load

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',