@bitrix24/b24ui-nuxt
Version:
Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE
42 lines (41 loc) • 1.27 kB
JavaScript
import { useColorMode as useColorModeVueUse } from "@vueuse/core";
import appConfig from "#build/app.config";
export const useColorMode = () => {
if (!appConfig.colorMode) {
return {
forced: true
};
}
const colorModeTypeLight = appConfig?.colorModeTypeLight || "light";
const colorModeInitialValue = appConfig?.colorModeInitialValue || "light";
const storageKey = typeof appConfig.colorModeStorageKey === "undefined" ? "vueuse-color-scheme" : appConfig.colorModeStorageKey === null ? null : appConfig.colorModeStorageKey;
const modes = {
"auto": "auto",
"light": colorModeTypeLight,
"edge-dark": "edge-dark",
"edge-light": "edge-light",
"dark": "dark"
};
const modeKeysList = Object.keys(modes);
const { store, system } = useColorModeVueUse({
attribute: "class",
initialValue: colorModeInitialValue,
modes,
storageKey
});
return {
modeKeysList,
colorModeInitialValue,
colorModeTypeLight,
get preference() {
return store.value === "auto" ? "system" : store.value;
},
set preference(value) {
store.value = value === "system" ? "auto" : value;
},
get value() {
return store.value === "auto" ? system.value : store.value;
},
forced: false
};
};