当前主题默认为 “dard” 暗黑模式。这次将支持“暗黑模式”与“明亮模式”之间的切换。
开发
创建一个“主题”上下文文件
explorer/src/components/change-theme/change-theme-context.tsx
'use client'
import createCtx from '@/lib/create-ctx'
import React from 'react'
export const ChangeThemeContext = createCtx<string>('')
export const ChangeThemeProvider: React.FC<React.ProviderProps<string>> = ({ value, children }) => {
return <ChangeThemeContext.ContextProvider value={value}>{children}</ChangeThemeContext.ContextProvider>
}
再创建一个内联 cookie 的文件
explorer/src/components/change-theme/inject-cookie.tsx
import { ChangeThemeProvider } from '@/components/change-theme/change-theme-context'
import React from 'react'
import { cookies } from 'next/headers'
const InjectCookieChangeThemeProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
const theme = cookies().get('theme')?.value || 'dark'
return <ChangeThemeProvider value={theme}>{children}</ChangeThemeProvider>
}
export default InjectCookieChangeThemeProvider
为 SSR 渲染时获取 cookie 内的 theme 的值，保持服务端与客户端渲染一致。避免主题切换闪屏。
该主题的改变会影响所有的组件渲染。所以将 InjectCookieChangeThemeProvider 内联 cookie 的组件插入最顶层的 layout 组件内。
explorer/src/app/layout.tsx
...
import InjectCookieChangeThemeProvider from '@/components/change-theme/inject-cookie'
...
const RootLayout: React.FC<React.PropsWithChildren> = ({ children }) => (
<html lang="en">
<body className={inter.className}>
<InjectCookieChangeThemeProvider>
...
</InjectCookieChangeThemeProvider>
</body>
</html>
)
export default RootLayout
antd 的 ConfigProvider 上下文通过 ChangeThemeContext 上下文获取当前主题。
explorer/src/lib/antd-registry.tsx
'use client'
...
import { ChangeThemeContext } from '@/components/change-theme/change-theme-context'
...
const AntdConfigProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
const select_theme = ChangeThemeContext.useStore()
return (
<ConfigProvider
componentSize="small"
theme={{
algorithm: select_theme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
}}
>
<Layout style={{ height: '100vh' }}>{children}</Layout>
</ConfigProvider>
)
}
...
创建一个改变主题的dropdown 下拉菜单，并插入页面右上角位置。
'use client'
import React from 'react'
import { Button, Dropdown } from 'antd'
import { DarkIcon, LightIcon } from '@/components/icon/theme'
import { ChangeThemeContext } from '@/components/change-theme/change-theme-context'
import { useCookieState } from 'ahooks'
const ChangeThemeDropdown: React.FC = () => {
const theme = ChangeThemeContext.useStore()
const changeThemeDispatch = ChangeThemeContext.useDispatch()
const [, changeCookies] = useCookieState('theme')
return (
<Dropdown
menu={{
selectedKeys: [theme],
onClick: (item) => {
changeThemeDispatch(item.key)
changeCookies(item.key)
},
items: [
{ key: 'light', icon: <LightIcon />, label: '明亮模式' },
{ key: 'dark', icon: <DarkIcon />, label: '暗黑模式' },
],
}}
>
<Button type="text" icon={theme === 'dark' ? <DarkIcon /> : <LightIcon />} />
</Dropdown>
)
}
export default ChangeThemeDropdown
当点击下拉菜单项时改变 ChangeThemeContext 上下文的值，并将当前改变值写入 cookie 内。
效果
到此，完成了改变主题的功能，通过将主题状态写入 cookie 内，保证服务端与客户端的渲染一致。
git-repo
原文链接：https://juejin.cn/post/7317882649275711540 作者：寒露
