Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-30 01:22:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

🏗️ Reads custom colors from conf as well as local storage

Browse Source
This commit is contained in:
Alicia Sykes 2021-07-18 17:55:55 +01:00
parent 1f40a12ac2
commit 514edcbde9
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/utils/ConfigHelpers.js
View File

@ -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);
};

7
src/utils/ThemeHelper.js
View File

@ -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]);