捉影留光，Next.js 赋能暗黑主题魔方

2023-09-19 21:30:59

在计算机视觉的魔法国度，有一座名为Next.js的岛屿。它以其便捷性、灵活性与精湛的现代化建筑，吸引着众多朝圣者。在这个岛屿上，居住着一种神秘而强大的生物——Ant Design。Ant Design携带着一大袋设计灵感，奉献了一款款精雕细琢的UI组件，让开发者们趋之若鹜。

然而，随着时光的流转，开发者们发现Ant Design虽然强大，却缺少了一丝神秘感与个性。于是，他们开始探索如何为Ant Design披上暗黑主题的斗篷，让它在寂静的夜空中绽放光彩。

今天，我们将共同踏上一次探索之旅，揭开Next.js与Ant Design携手共舞，实现主题切换的奥秘。准备好你的键盘和鼠标，我们即将开启这段奇妙的旅程！

基础构建：组件与样式

首先，我们必须为Ant Design准备一个舒适的家，即项目根目录下的pages文件夹。在这里，我们将创建一个名为index.js的文件。在这个文件中，我们引入了Ant Design的基础样式文件antd/dist/antd.css，为Ant Design的组件们穿上合体的衣裳。

import React from "react";
import 'antd/dist/antd.css';
import { Button } from 'antd';

const Index = () => {
  return (
    <div className="App">
      <Button type="primary">按钮</Button>
    </div>
  );
};

export default Index;

引入主题切换组件

接下来，我们需要一位主题切换的向导，来帮助我们实现亮白与暗黑主题之间的无缝切换。我们将从antd/lib/style/themes/dark.js中引入DarkTheme组件，并将其应用于根组件App上。

import React from "react";
import { DarkTheme } from 'antd/lib/style/themes/dark.js';
import { Global } from '@emotion/react';
import 'antd/dist/antd.css';
import { Button } from 'antd';

const Index = () => {
  return (
    <div className="App">
      <Global styles={DarkTheme} />
      <Button type="primary">按钮</Button>
    </div>
  );
};

export default Index;

注入切换逻辑

现在，我们需要赋予用户切换主题的能力。为此，我们将在App组件中加入一个state变量theme，并引入一个名为useDarkMode的自定义hook。这个hook将根据用户偏好设置主题，并返回一个toggleTheme函数，用于在亮白与暗黑主题之间切换。

import React, { useState } from "react";
import { DarkTheme } from 'antd/lib/style/themes/dark.js';
import { Global } from '@emotion/react';
import 'antd/dist/antd.css';
import { Button } from 'antd';

const useDarkMode = () => {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    theme === 'light' ? setTheme('dark') : setTheme('light')
  };
  return [theme, toggleTheme]
};

const Index = () => {
  const [theme, toggleTheme] = useDarkMode();
  return (
    <div className="App">
      <Global styles={theme === 'dark' ? DarkTheme : null} />
      <Button type="primary" onClick={toggleTheme}>按钮</Button>
    </div>
  );
};

export default Index;

构建主题切换按钮

最后，我们需要一个按钮来触发主题切换。我们将为按钮添加一个onClick事件处理函数，调用toggleTheme函数即可在亮白与暗黑主题之间切换。

import React, { useState } from "react";
import { DarkTheme } from 'antd/lib/style/themes/dark.js';
import { Global } from '@emotion/react';
import 'antd/dist/antd.css';
import { Button } from 'antd';

const useDarkMode = () => {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    theme === 'light' ? setTheme('dark') : setTheme('light')
  };
  return [theme, toggleTheme]
};

const Index = () => {
  const [theme, toggleTheme] = useDarkMode();
  return (
    <div className="App">
      <Global styles={theme === 'dark' ? DarkTheme : null} />
      <Button type="primary" onClick={toggleTheme}>切换主题</Button>
    </div>
  );
};

export default Index;