@oiij/naive-ui/dist/composables/useNaiveTheme.js

Som Composable Functions And Components for Vue 3

import { computed, ref, toValue, watchEffect } from "vue";
import { colord } from "colord";
import { darkTheme, dateEnUS, dateZhCN, enUS, zhCN } from "naive-ui";

//#region src/composables/useNaiveTheme.ts
function getStatusColor(color = "#ff461f") {
	return {
		color,
		hover: colord(color).lighten(.1).toHex(),
		pressed: colord(color).darken(.1).toHex(),
		suppl: colord(color).lighten(.1).toHex()
	};
}
const naiveLocaleMap = {
	"zh-CN": {
		name: "简体中文",
		dateLocale: dateZhCN,
		locale: zhCN
	},
	"en-US": {
		name: "English",
		dateLocale: dateEnUS,
		locale: enUS
	}
};
function getColors(color) {
	const { primary, info, success, warning, error } = color;
	return {
		primary: getStatusColor(primary),
		info: getStatusColor(info),
		success: getStatusColor(success),
		warning: getStatusColor(warning),
		error: getStatusColor(error)
	};
}
function useNaiveTheme(options) {
	const { language, darkMode, color, globalThemeOverrides } = options ?? {};
	const languageRef = ref(toValue(language));
	watchEffect(() => {
		languageRef.value = toValue(language);
	});
	const darkModeRef = ref(toValue(darkMode));
	watchEffect(() => {
		darkModeRef.value = toValue(darkMode);
	});
	const { common, Dialog,...extra } = globalThemeOverrides ?? {};
	const colorRef = ref({
		primary: "#64748B",
		info: "#06b6d4",
		success: "#10b981",
		warning: "#fbbf24",
		error: "#f43f5e",
		...color
	});
	function setColor(v) {
		colorRef.value = v;
	}
	const theme = computed(() => {
		return darkModeRef?.value ? darkTheme : void 0;
	});
	const themeOverrides = computed(() => {
		const { primary, info, success, warning, error } = getColors(colorRef.value);
		return {
			common: {
				bodyColor: darkModeRef?.value ? "#1f1f1f" : "#f5f5f5",
				primaryColor: primary.color,
				primaryColorHover: primary.hover,
				primaryColorPressed: primary.pressed,
				primaryColorSuppl: primary.suppl,
				infoColor: info.color,
				infoColorHover: info.hover,
				infoColorPressed: info.pressed,
				infoColorSuppl: info.suppl,
				successColor: success.color,
				successColorHover: success.hover,
				successColorPressed: success.pressed,
				successColorSuppl: success.suppl,
				warningColor: warning.color,
				warningColorHover: warning.hover,
				warningColorPressed: warning.pressed,
				warningColorSuppl: warning.suppl,
				errorColor: error.color,
				errorColorHover: error.hover,
				errorColorPressed: error.pressed,
				errorColorSuppl: error.suppl,
				borderRadius: "6px",
				...common
			},
			Dialog: {
				borderRadius: "12px",
				padding: "20px",
				closeMargin: "20px 20px 0 0",
				...Dialog
			},
			...extra
		};
	});
	const locale = computed(() => {
		if (!languageRef?.value || !naiveLocaleMap[languageRef.value]) return naiveLocaleMap["zh-CN"].locale;
		return naiveLocaleMap[languageRef.value].locale;
	});
	const dateLocale = computed(() => {
		if (!languageRef?.value || !naiveLocaleMap[languageRef.value]) return naiveLocaleMap["zh-CN"].dateLocale;
		return naiveLocaleMap[languageRef.value].dateLocale;
	});
	return {
		language: languageRef,
		darkMode: darkModeRef,
		theme,
		themeOverrides,
		locale,
		dateLocale,
		color: colorRef,
		setColor
	};
}

//#endregion
export { useNaiveTheme };