import { computed, onMounted, onUnmounted, ref, toValue, watch } from "vue";
//#region src/v2/hooks/use-color-mode.ts
/**
* Gets the system color mode preference from the browser.
* Falls back to 'light' if running in a non-browser environment.
*
* @returns The system preference for dark or light mode.
*/
var getSystemModePreference = () => {
	if (typeof window === "undefined" || typeof window?.matchMedia !== "function") return "light";
	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
};
/**
* Converts a ColorMode to a DarkLightMode by resolving 'system' to the actual system preference.
*
* @param mode - The color mode to convert.
* @returns The resolved dark or light mode.
*/
var getDarkLightMode = (mode) => {
	return mode === "system" ? getSystemModePreference() : mode;
};
/**
* Applies the color mode by adding/removing the appropriate CSS classes on the document body.
* This function is safe to call in non-browser environments (no-op).
*
* @param mode - The dark or light mode to apply.
*/
var applyColorMode = (mode) => {
	if (typeof document === "undefined") return;
	const isDark = mode === "dark";
	document.body.classList.toggle("dark-mode", isDark);
	document.body.classList.toggle("light-mode", !isDark);
};
/**
* Composable hook that manages color mode (dark/light/system) based on workspace store configuration.
* Automatically listens to system preference changes when mode is set to 'system'.
*
* @param options - Configuration options for the color mode hook.
* @param options.workspaceStore - The workspace store instance that contains the color mode preference.
* @returns Reactive color mode state and computed properties.
*/
var useColorMode = ({ workspaceStore }) => {
	const colorMode = computed(() => toValue(workspaceStore)?.workspace["x-scalar-color-mode"] ?? "system");
	const darkLightMode = computed(() => getDarkLightMode(colorMode.value));
	const isDarkMode = computed(() => darkLightMode.value === "dark");
	const mediaQuery = ref(null);
	/**
	* Handles system preference changes.
	* Only updates the color mode if the current mode is set to 'system'.
	*/
	const handleSystemPreferenceChange = () => {
		if (colorMode.value === "system") applyColorMode(getSystemModePreference());
	};
	watch(colorMode, (mode) => applyColorMode(getDarkLightMode(mode)), { immediate: true });
	onMounted(() => {
		if (typeof window !== "undefined" && typeof window?.matchMedia === "function") {
			mediaQuery.value = window.matchMedia("(prefers-color-scheme: dark)");
			mediaQuery.value.addEventListener("change", handleSystemPreferenceChange);
		}
	});
	onUnmounted(() => {
		mediaQuery.value?.removeEventListener("change", handleSystemPreferenceChange);
	});
	return {
		colorMode,
		isDarkMode
	};
};
//#endregion
export { useColorMode };

//# sourceMappingURL=use-color-mode.js.map