mirror of
https://github.com/unraid/api.git
synced 2026-01-02 22:50:02 -06:00
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import { defineStore, createPinia, setActivePinia } from 'pinia';
|
|
import hexToRgba from 'hex-to-rgba';
|
|
|
|
/**
|
|
* @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
|
|
* @see https://github.com/vuejs/pinia/discussions/1085
|
|
*/
|
|
setActivePinia(createPinia());
|
|
|
|
export interface Theme {
|
|
banner: string;
|
|
bannerGradient: string;
|
|
bgColor: string;
|
|
descriptionShow: boolean;
|
|
metaColor: string;
|
|
name: string;
|
|
textColor: string;
|
|
}
|
|
|
|
export const useThemeStore = defineStore('theme', () => {
|
|
// State
|
|
const theme = ref<Theme | undefined>();
|
|
// Getters
|
|
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]');
|
|
theme.value = data;
|
|
};
|
|
const setCssVars = () => {
|
|
const body = document.body;
|
|
const defaultColors = {
|
|
darkTheme: {
|
|
alpha: '#1c1b1b',
|
|
beta: '#f2f2f2',
|
|
gamma: '#999999',
|
|
},
|
|
lightTheme: {
|
|
alpha: '#f2f2f2',
|
|
beta: '#1c1b1b',
|
|
gamma: '#999999',
|
|
},
|
|
};
|
|
let { alpha, beta, gamma } = darkMode.value ? defaultColors.darkTheme : defaultColors.lightTheme;
|
|
// overwrite with hex colors set in webGUI @ /Settings/DisplaySettings
|
|
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.7));
|
|
}
|
|
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);
|
|
// box shadow
|
|
body.style.setProperty('--shadow-beta', `0 25px 50px -12px ${hexToRgba(beta, 0.15)}`);
|
|
body.style.setProperty('--ring-offset-shadow', `0 0 ${beta}`);
|
|
body.style.setProperty('--ring-shadow', `0 0 ${beta}`);
|
|
};
|
|
|
|
watch(theme, () => {
|
|
setCssVars();
|
|
});
|
|
|
|
return {
|
|
// state
|
|
bannerGradient,
|
|
darkMode,
|
|
theme,
|
|
// actions
|
|
setTheme,
|
|
};
|
|
});
|