赋予您的网站生命力：从零开始构建自定义明暗主题系统

前端

2023-11-11 21:09:08

如果您正在寻求一种让您的网站在白天和黑夜都令人惊叹的方法，那么自定义明暗主题系统是一个完美的解决方案。它允许您的用户根据他们的喜好定制您的网站外观，从而提升用户体验并使您的网站更具吸引力。

本教程将指导您从头开始构建一个自定义明暗主题系统。我们将使用 React、Ant Design 和 UnoCSS 来构建一个系统，该系统利用 CSS 变量和媒体查询来动态切换网站的主题。

前提条件

在开始之前，请确保您具备以下先决条件：

基本的 React 和 JavaScript 知识
Node.js 和 npm 安装在您的系统上
文本编辑器或 IDE

设置项目

让我们从头开始一个新的 React 项目：

npx create-react-app my-theme-system

导航到新创建的项目目录：

cd my-theme-system

安装依赖项

接下来，让我们安装必要的依赖项：

npm install antd uno.css

创建主题变量

在 src 目录中创建一个名为 theme.css 的新文件。在此文件中，我们将定义我们的主题变量：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --light-text-color: #ffffff;
  --dark-text-color: #000000;
  --background-color: #ffffff;
  --dark-background-color: #000000;
}

这些变量将在整个应用程序中使用以控制主题的外观。

创建主题组件

在 src 目录中创建一个新的组件，将其命名为 ThemeToggler.js。此组件将允许用户切换主题：

import React, { useState } from "react";
import { Switch, Icon } from "antd";

const ThemeToggler = () => {
  const [darkMode, setDarkMode] = useState(false);

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
  };

  return (
    <Switch
      checked={darkMode}
      onChange={toggleDarkMode}
      icon={
        darkMode ? (
          <Icon type="sun" />
        ) : (
          <Icon type="moon" />
        )
      }
    />
  );
};

export default ThemeToggler;

此组件使用 Ant Design 的 Switch 组件，当用户单击它时，它会切换 darkMode 状态。

整合到应用程序中

在 App.js 中，我们将在应用程序中添加 ThemeToggler 组件和主题提供者：

import React, { useState } from "react";
import { ThemeProvider } from "styled-components";
import ThemeToggler from "./ThemeToggler";

const App = () => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    <ThemeProvider theme={theme}>
      <ThemeToggler onClick={toggleTheme} />
      {/* 应用程序的内容 */}
    </ThemeProvider>
  );
};

export default App;

ThemeProvider 组件用于向应用程序的子组件提供主题上下文。当用户切换主题时，toggleTheme 函数会更新 theme 状态，从而导致应用程序的主题动态更新。

使用 CSS 变量和媒体查询

为了使主题切换生效，我们需要在我们的 CSS 中使用 CSS 变量和媒体查询。在 src 目录中创建名为 App.css 的新文件：

body {
  background-color: var(--background-color);
  color: var(--light-text-color);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--dark-background-color);
    color: var(--dark-text-color);
  }
}