mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-06 08:39:54 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: theme store

Browse Source
This commit is contained in:
Zack Spear
2023-06-21 17:59:27 -05:00
parent 7b4afb86ba
commit 9f2c857646
1 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
store/theme.ts
View File

@@ -9,13 +9,19 @@ setActivePinia(createPinia());
export const useThemeStore = defineStore('theme', () => {
// State
const serverTheme = ref<Theme|undefined>();
const theme = ref<Theme|undefined>();
// Getters
const darkMode = computed(() => (serverTheme.value?.name === 'black' || serverTheme.value?.name === 'azure') ?? false);
const darkMode = computed(() => (theme.value?.name === 'black' || theme.value?.name === 'azure') ?? false);
const bannerGradient = computed(() => {
if (!theme.value?.banner || !theme.value?.bannerGradient) return undefined;
const start = theme.value?.bgColor ? 'var(--color-customgradient-start)' : 'rgba(0, 0, 0, 0)';
const end = theme.value?.bgColor ? 'var(--color-customgradient-end)' : 'var(--color-beta)';
return `background-image: linear-gradient(90deg, ${start} 0, ${end} 30%);`;
});
// Actions
const setTheme = (data: Theme) => {
console.debug('[setTheme]');
serverTheme.value = data;
theme.value = data;
};
const setCssVars = () => {
const body = document.body;
@@ -33,13 +39,13 @@ export const useThemeStore = defineStore('theme', () => {
};
let { alpha, beta, gamma } = darkMode.value ? defaultColors.darkTheme : defaultColors.lightTheme;
// overwrite with hex colors set in webGUI @ /Settings/DisplaySettings
if (serverTheme.value?.textColor) alpha = serverTheme.value?.textColor;
if (serverTheme.value?.bgColor) {
beta = serverTheme.value?.bgColor;
if (theme.value?.textColor) alpha = theme.value?.textColor;
if (theme.value?.bgColor) {
beta = theme.value?.bgColor;
body.style.setProperty('--color-customgradient-start', hexToRgba(beta, 0));
body.style.setProperty('--color-customgradient-end', hexToRgba(beta, 0.9));
body.style.setProperty('--color-customgradient-end', hexToRgba(beta, 0.7));
}
if (serverTheme.value?.metaColor) gamma = serverTheme.value?.metaColor;
if (theme.value?.metaColor) gamma = theme.value?.metaColor;
body.style.setProperty('--color-alpha', alpha);
body.style.setProperty('--color-beta', beta);
body.style.setProperty('--color-gamma', gamma);
@@ -49,11 +55,15 @@ export const useThemeStore = defineStore('theme', () => {
body.style.setProperty('--ring-shadow', `0 0 ${beta}`);
};
watch(serverTheme, () => {
watch(theme, () => {
setCssVars();
});
return {
// state
theme,
bannerGradient,
// actions
setTheme,
};
});