tethys.backend/resources/js/Stores/style.ts
Arno Kaimbacher f403c3109f
All checks were successful
CI Pipeline / japa-tests (push) Successful in 54s
- add methods for releasing datasets from submitter
- npm updates
- side menu with child items
- flash messages via HttpContext response (extended via macro)
2023-06-27 18:23:18 +02:00

56 lines
1.6 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');
}
},
},
});