From 514edcbde97d36c4c880ae39c1d39f8fc4e0849d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 18 Jul 2021 17:55:55 +0100
Subject: [PATCH] :building_construction: Reads custom colors from conf as well
 as local storage

---
 src/utils/ConfigHelpers.js | 11 ++++++++++-
 src/utils/ThemeHelper.js   |  7 +++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/utils/ConfigHelpers.js b/src/utils/ConfigHelpers.js
index 353628b4..97003b57 100644
--- a/src/utils/ConfigHelpers.js
+++ b/src/utils/ConfigHelpers.js
@@ -1,5 +1,4 @@
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
-
 import { visibleComponents, localStorageKeys, theme as defaultTheme } from '@/utils/defaults';
 
 /**
@@ -51,3 +50,13 @@ export const getTheme = () => {
   const appConfigTheme = config.appConfig.theme;
   return localTheme || appConfigTheme || defaultTheme;
 };
+
+/**
+ * Gets any custom styles the user has applied, wither from local storage, or from the config
+ * @returns {object} An array of objects, one for each theme, containing kvps for variables
+ */
+export const getCustomColors = () => {
+  const localColors = JSON.parse(localStorage[localStorageKeys.CUSTOM_COLORS] || '{}');
+  const configColors = config.appConfig.customColors || {};
+  return Object.assign(configColors, localColors);
+};
diff --git a/src/utils/ThemeHelper.js b/src/utils/ThemeHelper.js
index 3cb9b3d6..b16b27e3 100644
--- a/src/utils/ThemeHelper.js
+++ b/src/utils/ThemeHelper.js
@@ -1,6 +1,6 @@
 import ErrorHandler from '@/utils/ErrorHandler';
-import { getTheme } from '@/utils/ConfigHelpers';
-import { localStorageKeys, mainCssVars } from '@/utils/defaults';
+import { getTheme, getCustomColors } from '@/utils/ConfigHelpers';
+import { mainCssVars } from '@/utils/defaults';
 
 /* Returns users current theme */
 export const GetTheme = () => getTheme();
@@ -8,8 +8,7 @@ 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];
+  const themeColors = getCustomColors()[theme];
   if (themeColors) {
     Object.keys(themeColors).forEach((customVar) => {
       document.documentElement.style.setProperty(`--${customVar}`, themeColors[customVar]);