@vrx-arco/pro-components/dist/ThemeDarkLight/index.js

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

import { createVNode, defineComponent, isVNode } from "vue";
import { Button } from "@arco-design/web-vue";
import { useColorMode } from "@vueuse/core";
import IconDesktop from "@vrx-arco/icons-vue/IconDesktop";
import IconMoonFill from "@vrx-arco/icons-vue/IconMoonFill";
import IconSunFill from "@vrx-arco/icons-vue/IconSunFill";
function _isSlot(s) {
	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const ThemeDarkLight = /* @__PURE__ */ defineComponent({
	name: "vrx-arco-theme-dark-light",
	emits: { change: (dark) => true },
	setup: (_, { emit }) => {
		const mode = useColorMode({
			selector: "body",
			attribute: "arco-theme",
			storageKey: "arco-theme",
			onChanged: (mode$1, defaultHandler) => {
				defaultHandler(mode$1);
				emit("change", mode$1 === "dark");
			},
			modes: {
				dark: "dark",
				light: "light"
			}
		});
		const cycleList = (index, length) => (index % length + length) % length;
		const toggleDark = () => {
			const list = [
				"auto",
				"light",
				"dark"
			];
			const index = list.findIndex((item) => item === mode.store.value);
			mode.value = list[cycleList(index + 1, list.length)];
		};
		return () => {
			let _slot;
			const renderIcon = () => {
				const colorMode = mode.store.value;
				const config = {
					auto: () => createVNode(IconDesktop, { "class": "arco-icon" }, null),
					light: () => createVNode(IconSunFill, { "class": "arco-icon" }, null),
					dark: () => createVNode(IconMoonFill, { "class": "arco-icon" }, null)
				};
				return config[colorMode]();
			};
			return createVNode(Button, {
				"onClick": () => toggleDark(),
				"shape": "circle"
			}, _isSlot(_slot = renderIcon()) ? _slot : { default: () => [_slot] });
		};
	}
});
export { ThemeDarkLight };