docusaurus的使用
· 2 min read
切换主题的同时切换pages页面的主题?
思路
怎么去拿docusaurus主题这个值?
antd如何修改主题?
实现
useAntdTheme.ts
// 让antd样式随页面主题变化而变化
import { useEffect, useState } from 'react';
import { theme as antdTheme} from "antd";
const useAntdTheme = () => {
// darkAlgorithm defaultAlgorithm
const [curThemeStr, setCurThemeStr] = useState('defaultAlgorithm')
useEffect(() => {
const handleThemeChange = () => {
const themePreference = localStorage.getItem('theme');
if (themePreference === 'light') {
setCurThemeStr('defaultAlgorithm');
} else {
setCurThemeStr('darkAlgorithm');
}
}
handleThemeChange();
window.addEventListener('storage', handleThemeChange);
return () => window.removeEventListener('storage', handleThemeChange);
},[])
return {
curTheme: antdTheme[curThemeStr]
}
}
export default useAntdTheme;
xx.tsx
import { ConfigProvider } from "antd";
// hooks
import useAntdTheme from '@site/src/hooks/useAntdTheme';
export default function Xxxx() {
const {siteConfig} = useDocusaurusContext();
const groupedTodos = groupByYearAndMonth(TODO_CONTENT)
const {curTheme} = useAntdTheme();
return (
<Layout
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<ConfigProvider theme={{ algorithm: curTheme }}>
{/* ... */}
</ConfigProvider>
</Layout>
);
}
