tethys.backend/resources/js/Stores/style.ts

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