从零开始-文件资源管理器-24-Next.js + antd 暗黑|明亮主题切换

当前主题默认为 "dard" 暗黑模式。这次将支持"暗黑模式"与"明亮模式"之间的切换。

开发

创建一个"主题"上下文文件

explorer/src/components/change-theme/change-theme-context.tsx

typescript 复制代码
'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

javascript 复制代码
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

javascript 复制代码
...
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

javascript 复制代码
'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 下拉菜单,并插入页面右上角位置。

javascript 复制代码
'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

yangWs29/share-explorer

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1118 小时前
css实现div被图片撑开
前端·css