打造暗黑与明亮主题切换，尽享视觉盛宴！

2023-08-03 08:32:02

使用 Next.js + Antd 实现网站暗黑与明亮主题切换功能

引言

在当今网络世界中，为用户提供个性化和舒适的视觉体验至关重要。其中一个重要的方法是实现暗黑与明亮主题切换功能，让用户可以在不同的环境下享受最优的视觉体验。本文将指导您如何使用 Next.js + Antd 在您的网站中实现这一功能。

第一步：安装 Next.js 和 Antd

首先，使用以下命令安装 Next.js 和 Antd：

npm install next react react-dom antd

第二步：创建 Next.js 项目

接下来，使用以下命令创建一个 Next.js 项目：

npx create-next-app my-app

第三步：添加 Antd 样式文件

在您的项目中，添加 Antd 的样式文件：

npm install --save antd@4.16.13

第四步：创建主题切换组件

创建一个名为 ThemeSwitcher.js 的组件，该组件负责切换主题：

import { Switch, Button } from 'antd';

const ThemeSwitcher = () => {
  const [theme, setTheme] = useState('light');

  const handleChange = (value) => {
    setTheme(value ? 'dark' : 'light');
  };

  return (
    <div>
      <Switch checked={theme === 'dark'} onChange={handleChange} />
      <Button type="primary" onClick={() => setTheme('light')}>Light</Button>
      <Button type="primary" onClick={() => setTheme('dark')}>Dark</Button>
    </div>
  );
};

export default ThemeSwitcher;

第五步：将主题切换组件添加到布局

将 ThemeSwitcher 组件添加到您的布局中，通常是在 _app.js 文件中：

import ThemeSwitcher from './components/ThemeSwitcher';

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <ThemeSwitcher />
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

第六步：在 CSS 中添加主题样式

在 CSS 中添加主题样式，例如在 global.css 文件中：

body {
  background-color: ${theme === 'dark' ? '#000' : '#fff'};
  color: ${theme === 'dark' ? '#fff' : '#000'};
}

第七步：在服务端和客户端保持主题一致

为了确保在服务端和客户端保持主题一致，在 _app.js 文件中添加以下代码：

// pages/_app.js
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const theme = window.localStorage.getItem('theme');
    if (theme) {
      document.body.classList.add(theme);
    }
  }, []);

  return (
    <div>
      <ThemeSwitcher />
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;