vuepress-theme-hope
Version:
A light vuepress theme with tons of features
83 lines • 2.88 kB
JavaScript
import { useEventListener, usePreferredDark, useStorage, watchImmediate } from "@vueuse/core";
import { computed, inject, onMounted, watchEffect } from "vue";
import { useTheme } from "@theme-hope/composables/useTheme";
export const darkModeSymbol = Symbol(__VUEPRESS_DEV__ ? "darkMode" : "");
/**
* Inject dark mode global computed
*
* @returns Dark mode global computed
*/
export const useDarkMode = () => {
const darkMode = inject(darkModeSymbol);
if (!darkMode)
throw new Error("useDarkMode() is called without provider.");
return darkMode;
};
export const injectDarkMode = (app) => {
const isDarkPreferred = usePreferredDark();
const theme = useTheme();
const config = computed(() => theme.value.darkmode ?? "switch");
const status = useStorage("vuepress-theme-hope-scheme", "auto");
const isDarkMode = computed(() => {
const darkModeConfig = config.value;
switch (darkModeConfig) {
case "disable": {
return false;
}
case "enable": {
return true;
}
case "auto": {
return isDarkPreferred.value;
}
case "switch": {
return status.value === "dark" || (status.value === "auto" && isDarkPreferred.value);
}
case "toggle": {
return status.value === "dark";
}
default: {
return status.value === "dark" || (status.value === "auto" && isDarkPreferred.value);
}
}
});
const canToggle = computed(() => {
const darkmode = config.value;
return darkmode === "switch" || darkmode === "toggle";
});
app.provide(darkModeSymbol, {
canToggle,
config,
isDarkMode,
status,
});
// Provide global helpers
Object.defineProperties(app.config.globalProperties, {
$isDarkMode: { get: () => isDarkMode.value },
});
};
export const setupDarkMode = () => {
const { config, isDarkMode, status } = useDarkMode();
watchEffect(() => {
if (config.value === "disable")
status.value = "light";
else if (config.value === "enable")
status.value = "dark";
else if (config.value === "toggle" && status.value === "auto")
status.value = "light";
});
useEventListener("beforeprint", () => {
if (isDarkMode.value)
document.documentElement.dataset.theme = "light";
});
useEventListener("afterprint", () => {
if (isDarkMode.value)
document.documentElement.dataset.theme = "dark";
});
onMounted(() => {
watchImmediate(isDarkMode, (value) => {
document.documentElement.dataset.theme = value ? "dark" : "light";
});
});
};
//# sourceMappingURL=useDarkMode.js.map