hirsun-vuepress-theme-hope-plus/lib/client/modules/outlook/components/AppearanceSwitch.js

A light vuepress theme with tons of features and typewriter effect

import { defineComponent, h } from "vue";
import { AutoIcon, DarkIcon, LightIcon, } from "@theme-hope/modules/outlook/components/icons/index";
import { useDarkmode } from "@theme-hope/modules/outlook/composables/index";
import "../styles/appearance-switch.scss";
export default defineComponent({
    name: "AppearanceSwitch",
    setup() {
        const { config, status } = useDarkmode();
        const toggleDarkMode = () => {
            if (config.value === "switch")
                status.value = {
                    light: "dark",
                    dark: "auto",
                    auto: "light",
                }[status.value];
            else
                status.value = status.value === "light" ? "dark" : "light";
        };
        return () => h("button", {
            type: "button",
            id: "appearance-switch",
            onClick: () => toggleDarkMode(),
        }, [
            h(AutoIcon, {
                style: {
                    display: status.value === "auto" ? "block" : "none",
                },
            }),
            h(DarkIcon, {
                style: {
                    display: status.value === "dark" ? "block" : "none",
                },
            }),
            h(LightIcon, {
                style: {
                    display: status.value === "light" ? "block" : "none",
                },
            }),
        ]);
    },
});
//# sourceMappingURL=AppearanceSwitch.js.map