如何在Docusaurus中让自定义Antd Menu动态跟随主题模式？

实现步骤 #

• 借助Docusaurus内置的useThemeContext钩子获取当前主题模式，该钩子会自动监听主题切换操作，状态更新时触发组件重渲染。
• 将获取到的主题模式直接绑定到Antd Menu组件的theme属性上，两者的主题取值（light/dark）完全匹配，无需额外转换逻辑。

修改后的代码 #

import { useThemeContext } from '@docusaurus/theme-common';

// ... 其他业务代码

const { isDarkTheme } = useThemeContext();

return (
  <nav className={clsx(styles.sidebar, 'thin-scrollbar')}>
    <div style={{width: 256}}>
      <Menu 
        mode="inline" 
        theme={isDarkTheme ? "dark" : "light"} 
        inlineCollapsed={collapsed}
      >
        {menus}
      </Menu>
    </div>
  </nav>
);

Antd Menu组件theme属性说明（翻译自官方文档） #

theme 属性用于定义菜单的主题风格，可选值为 light 和 dark：

• light：浅色主题，菜单背景为浅色调，文字为深色
• dark：深色主题，菜单背景为深色调，文字为浅色

内容的提问来源于stack exchange，提问作者Starry_sky