48 lines
1.6 KiB
JavaScript
48 lines
1.6 KiB
JavaScript
import { ref, computed } from 'vue';
|
|
import { defineStore } from 'pinia';
|
|
|
|
export const useThemeStore = defineStore('theme', () => {
|
|
const theme = ref('light'); // 초기 상태는 light
|
|
|
|
const isDarkMode = computed(() => theme.value === 'dark');
|
|
|
|
const customClass = '.custom-css'; // custom.css 경로
|
|
const coreClass = '.core-css';
|
|
const themeClass = '.theme-css';
|
|
|
|
const switchToDarkMode = () => {
|
|
theme.value = 'dark';
|
|
document.documentElement.classList.add('dark-style');
|
|
document.documentElement.classList.remove('light-style');
|
|
document.querySelector(customClass).setAttribute('href', '/css/custom-dark.css');
|
|
document.querySelector(coreClass).setAttribute('href', '/vendor/css/rtl/core-dark.css');
|
|
document.querySelector(themeClass).setAttribute('href', '/vendor/css/rtl/theme-default-dark.css');
|
|
};
|
|
|
|
const switchToLightMode = () => {
|
|
theme.value = 'light';
|
|
document.documentElement.classList.remove('dark-style');
|
|
document.documentElement.classList.add('light-style');
|
|
document.querySelector(customClass).setAttribute('href', '/css/custom.css');
|
|
document.querySelector(coreClass).setAttribute('href', '/vendor/css/rtl/core.css');
|
|
document.querySelector(themeClass).setAttribute('href', '/vendor/css/rtl/theme-default.css');
|
|
};
|
|
|
|
return {
|
|
theme,
|
|
isDarkMode,
|
|
switchToDarkMode,
|
|
switchToLightMode,
|
|
};
|
|
}, {
|
|
persist: {
|
|
enabled: true,
|
|
strategies: [
|
|
{
|
|
storage: localStorage
|
|
}
|
|
],
|
|
}
|
|
|
|
});
|