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

Some Composable Functions And Components for Vue 3

import { getColors } from "./_helper.js";
import { computed, ref, toValue, watchEffect } from "vue";
import { darkTheme, dateEnUS, dateZhCN, enUS, zhCN } from "naive-ui";

//#region src/composables/useNaiveTheme.ts
const naiveLocaleMap = {
	"zh-CN": {
		name: "简体中文",
		dateLocale: dateZhCN,
		locale: zhCN
	},
	"en-US": {
		name: "English",
		dateLocale: dateEnUS,
		locale: enUS
	}
};
function useNaiveTheme(options) {
	const { language, darkMode, colors, globalThemeOverrides } = options ?? {};
	const languageRef = ref(toValue(language));
	watchEffect(() => {
		languageRef.value = toValue(language);
	});
	const darkModeRef = ref(toValue(darkMode));
	watchEffect(() => {
		darkModeRef.value = toValue(darkMode);
	});
	const { common, ...extra } = globalThemeOverrides ?? {};
	const colorRef = ref({ ...colors });
	function setColor(v) {
		colorRef.value = {
			...colorRef.value,
			...v
		};
	}
	return {
		language: languageRef,
		darkMode: darkModeRef,
		theme: computed(() => {
			return darkModeRef?.value ? darkTheme : void 0;
		}),
		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,
					...common
				},
				...extra
			};
		}),
		locale: computed(() => {
			if (!languageRef?.value || !naiveLocaleMap[languageRef.value]) return naiveLocaleMap["zh-CN"].locale;
			return naiveLocaleMap[languageRef.value].locale;
		}),
		dateLocale: computed(() => {
			if (!languageRef?.value || !naiveLocaleMap[languageRef.value]) return naiveLocaleMap["zh-CN"].dateLocale;
			return naiveLocaleMap[languageRef.value].dateLocale;
		}),
		color: colorRef,
		setColor
	};
}

//#endregion
export { useNaiveTheme };