58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
|
import { defineStore } from 'pinia';
|
||
|
|
import * as styles from '@/styles';
|
||
|
|
import { darkModeKey, styleKey } from '@/config';
|
||
|
|
|
||
|
|
export const StyleService = defineStore('style', {
|
||
|
|
state: () => ({
|
||
|
|
/* Styles */
|
||
|
|
asideStyle: '',
|
||
|
|
asideScrollbarsStyle: '',
|
||
|
|
asideBrandStyle: '',
|
||
|
|
asideMenuItemStyle: '',
|
||
|
|
asideMenuItemActiveStyle: '',
|
||
|
|
asideMenuDropdownStyle: '',
|
||
|
|
navBarItemLabelStyle: '',
|
||
|
|
navBarItemLabelHoverStyle: '',
|
||
|
|
navBarItemLabelActiveColorStyle: '',
|
||
|
|
overlayStyle: '',
|
||
|
|
|
||
|
|
/* Dark mode default false */
|
||
|
|
darkMode: false,
|
||
|
|
}),
|
||
|
|
|
||
|
|
actions: {
|
||
|
|
// style payload = 'basic' or 'white' with blue font
|
||
|
|
setStyle(payload) {
|
||
|
|
if (!styles[payload]) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof localStorage !== 'undefined') {
|
||
|
|
localStorage.setItem(styleKey, payload);
|
||
|
|
}
|
||
|
|
|
||
|
|
const style = styles[payload];
|
||
|
|
|
||
|
|
for (const key in style) {
|
||
|
|
this[`${key}Style`] = style[key];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// toggle dark mode
|
||
|
|
setDarkMode(payload = null) {
|
||
|
|
this.darkMode = payload !== null ? payload : !this.darkMode;
|
||
|
|
|
||
|
|
if (typeof localStorage !== 'undefined') {
|
||
|
|
localStorage.setItem(darkModeKey, this.darkMode ? '1' : '0');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof document !== 'undefined') {
|
||
|
|
document.body.classList[this.darkMode ? 'add' : 'remove']('dark-scrollbars');
|
||
|
|
|
||
|
|
document.documentElement.classList[this.darkMode ? 'add' : 'remove'](
|
||
|
|
'dark-scrollbars-compat'
|
||
|
|
);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|