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

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

import { defineComponent, createVNode, 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: {
    // @ts-ignore
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    change: (dark) => true
  },
  setup: (_, {
    emit
  }) => {
    const mode = useColorMode({
      selector: "body",
      attribute: "arco-theme",
      storageKey: "arco-theme",
      onChanged: (mode2, defaultHandler) => {
        defaultHandler(mode2);
        emit("change", mode2 === "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
};