import defaultSettings from "@/settings";
|
import { useColorMode, usePreferredDark } from "@vueuse/core";
|
import { useDynamicTitle } from "@/utils/dynamicTitle";
|
|
const preferredDark = usePreferredDark();
|
const colorMode = useColorMode({
|
emitAuto: true,
|
});
|
|
const {
|
sideTheme,
|
showSettings,
|
topNav,
|
tagsView,
|
fixedHeader,
|
sidebarLogo,
|
dynamicTitle,
|
darkMode,
|
} = defaultSettings;
|
|
const storageSetting = JSON.parse(localStorage.getItem("layout-setting") || "{}");
|
const defaultDarkMode = darkMode || "auto";
|
const initialDarkMode = storageSetting.darkMode || defaultDarkMode;
|
colorMode.value = initialDarkMode;
|
const getIsDark = (mode) => mode === "dark" || (mode === "auto" && preferredDark.value);
|
|
const useSettingsStore = defineStore("settings", () => {
|
const title = ref("");
|
const theme = ref(storageSetting.theme || "#002fa7");
|
const sideThemeValue = ref(storageSetting.sideTheme || sideTheme);
|
const showSettingsValue = ref(showSettings);
|
const topNavValue = ref(
|
storageSetting.topNav === undefined ? topNav : storageSetting.topNav
|
);
|
const tagsViewValue = ref(
|
storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView
|
);
|
const fixedHeaderValue = ref(
|
storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader
|
);
|
const sidebarLogoValue = ref(
|
storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo
|
);
|
const dynamicTitleValue = ref(
|
storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
|
);
|
const darkModeValue = ref(initialDarkMode);
|
const isDark = computed(() => getIsDark(darkModeValue.value));
|
|
function changeSetting(data) {
|
const { key, value } = data;
|
const settingMap = {
|
title,
|
theme,
|
sideTheme: sideThemeValue,
|
showSettings: showSettingsValue,
|
topNav: topNavValue,
|
tagsView: tagsViewValue,
|
fixedHeader: fixedHeaderValue,
|
sidebarLogo: sidebarLogoValue,
|
dynamicTitle: dynamicTitleValue,
|
darkMode: darkModeValue,
|
};
|
if (Object.prototype.hasOwnProperty.call(settingMap, key)) {
|
settingMap[key].value = value;
|
if (key === "darkMode") {
|
colorMode.value = value;
|
}
|
}
|
}
|
|
function setTitle(value) {
|
title.value = value;
|
useDynamicTitle();
|
}
|
|
function setDarkMode(mode) {
|
darkModeValue.value = mode;
|
colorMode.value = mode;
|
}
|
|
function toggleTheme() {
|
setDarkMode(isDark.value ? "light" : "dark");
|
}
|
|
return {
|
title,
|
theme,
|
sideTheme: sideThemeValue,
|
showSettings: showSettingsValue,
|
topNav: topNavValue,
|
tagsView: tagsViewValue,
|
fixedHeader: fixedHeaderValue,
|
sidebarLogo: sidebarLogoValue,
|
dynamicTitle: dynamicTitleValue,
|
darkMode: darkModeValue,
|
isDark,
|
changeSetting,
|
setTitle,
|
setDarkMode,
|
toggleTheme,
|
};
|
});
|
|
export default useSettingsStore;
|
