🚚 Re-writes all theming functionality. Much better now :)

src/utils/ConfigHelpers.js

@@ -4,7 +4,6 @@ import { languages } from '@/utils/languages';
 import {
   visibleComponents,
   localStorageKeys,
-  theme as defaultTheme,
   language as defaultLanguage,
 } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
@@ -26,6 +25,13 @@ export const makePageSlug = (pageName, pageType) => {
   return `/${pageType}/${formattedName}`;
 };
 
+/* Put fetch path for additional configs in correct format */
+export const formatConfigPath = (configPath) => {
+  if (configPath.includes('http')) return configPath;
+  if (configPath.substring(0, 1) !== '/') return `/${configPath}`;
+  return configPath;
+};
+
 /**
  * Initiates the Accumulator class and generates a complete config object
  * Self-executing function, returns the full user config as a JSON object
@@ -67,27 +73,6 @@ export const componentVisibility = (appConfig) => {
   };
 };
 
-/**
- * Gets the users saved theme, first looks for local storage theme,
- * then looks at user's appConfig, and finally checks the defaults
- * @returns {string} Name of theme to apply
- */
-export const getTheme = () => {
-  const localTheme = localStorage[localStorageKeys.THEME];
-  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);
-};
-
 /**
  * Returns a list of items which the user has assigned a hotkey to
  * So that when the hotkey is pressed, the app/ service can be launched

src/utils/StoreMutations.js

@@ -5,7 +5,7 @@ const KEY_NAMES = [
   'INITIALIZE_MULTI_PAGE_CONFIG',
   'SET_CONFIG',
   'SET_ROOT_CONFIG',
-  'SET_REMOTE_CONFIG',
+  'SET_CONFIG_ID',
   'SET_CURRENT_SUB_PAGE',
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',

src/utils/ThemeHelper.js

@@ -1,72 +0,0 @@
-import ErrorHandler from '@/utils/ErrorHandler';
-import { getTheme, getCustomColors } from '@/utils/ConfigHelpers';
-import { 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 themeColors = getCustomColors()[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];
-  if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme');
-  htmlTag.setAttribute('data-theme', newTheme);
-};
-
-/**
- * A function for pre-loading, and easy switching of external stylesheets
- * External CSS is preloaded to avoid FOUC
- */
-export const LoadExternalTheme = function th() {
-  /* Preload selected external theme */
-  const preloadTheme = (href) => {
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.type = 'text/css';
-    link.href = href;
-    document.head.appendChild(link);
-    return new Promise((resolve, reject) => {
-      link.onload = e => {
-        const { sheet } = e.target;
-        sheet.disabled = true;
-        resolve(sheet);
-      };
-      link.onerror = reject;
-    });
-  };
-
-  /* Check theme is selected, and it exists */
-  const checkTheme = (themes, name) => {
-    if ((!name) || (name !== 'custom' && !themes[name])) {
-      ErrorHandler(`Theme: '${name || '[not selected]'}' does not exist.`);
-      return false;
-    }
-    return true;
-  };
-
-  /* Disable all but selected theme */
-  const selectTheme = (themes, name) => {
-    if (checkTheme(themes, name)) {
-      const t = themes; // To avoid ESLint complaining about mutating a param
-      Object.keys(themes).forEach(n => { t[n].disabled = (n !== name); });
-    }
-  };
-
-  const themes = {};
-
-  return {
-    add(name, href) { return preloadTheme(href).then(s => { themes[name] = s; }); },
-    set theme(name) { selectTheme(themes, name); },
-    get theme() { return Object.keys(themes).find(n => !themes[n].disabled); },
-  };
-};