vue3 切换dark模式

[pinghe]

基于 sandcode 中 milkdown-vue-setup 示例。

1、实现了 useDark.js

import { useDark as useDarkVueuse } from "@vueuse/core";

const code = {
    light: "https://unpkg.com/prism-themes/themes/prism-material-light.css",
    dark: "https://unpkg.com/prism-themes/themes/prism-nord.css",
};

const getStyleLink = () => {
    const target = document.querySelector("#prism-theme");

    if (target) {
        return target;
    }

    const link = document.createElement("link");
    link.id = "prism-theme";
    link.setAttribute("rel", "stylesheet");
    document.head.appendChild(link);
    return link;
};

export function useDark() {
    const isDark = useDarkVueuse({
        onChanged(isDarkMode) {
            document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");

            const target = getStyleLink();

            target.setAttribute("href", isDarkMode ? code.dark : code.light);

            document.body.classList.remove(`body--${isDarkMode === true ? 'light' : 'dark'}`)
            document.body.classList.add(`body--${isDarkMode === true ? 'dark' : 'light'}`)
        },
    });

    return isDark;
}

2、页面中添加按钮使用 useDark，编辑器未切换模式

import { useDark } from "./../hooks/useDark.js";
import { useToggle } from "@vueuse/shared";

const isDark = useDark();
const toggleDark = useToggle(isDark);



<button @click="toggleDark()">Dark</button>

页面中相应内容正确变化了，但编辑器未切换模式。

[pinghe]

Milkdown 换肤是需要重建编辑器实例吗？

[Saul-Mirone]

对的

[pinghe]

切换dark模式也是如此？

[Saul-Mirone]

v6.0中不用了，有了专门的切换主题功能