- second commit

resources/js/Stores/style.ts

@@ -0,0 +1,57 @@
+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'
+				);
+			}
+		},
+	},
+});