docusaurus引入其他框架同步色彩模式

docusaurus 的官方文档中：Color mode并没有提到如何和其他前端框架同步色彩模式。 指同步多个前端框架的light和dark模式。

你需要做的是跟docusaurus 增加评论系统类似，对docusaurus使用swizzle

执行以下命令：

yarn swizzle @docusaurus/theme-classic ColorModeToggle

此时终端会有选项

在终端选择js,

选择 Eject (Unsafe) 回车

选择 YES: I know what I am doing! 回车

会在src/theme/ColorModeToggle目录下生成index.js

打开index.js, 增加下方高亮的代码，在if (value === 'light') {中写另一个前端框架的颜色模式切换，这里我用的是semi-ui

import React, { useEffect } from "react";
import ColorModeToggle from '@theme-original/ColorModeToggle';

export default function ColorModeToggleWrapper(props) {

    const { value } = props;
    useEffect(() => {
        console.log("Docusaurus theme changed to = " + value);
        console.log("Synching theme change with other UI framework");
        const body = document.body;
        if (value === 'light') {
            body.removeAttribute('theme-mode');
        } else {
            body.setAttribute('theme-mode', 'dark');
        }
    }, [value]);

  return (
    <>
      <ColorModeToggle {...props} />
    </>
  );
}

大功告成！重新启动试试