Làm cách nào để thêm màu tối/sáng hoặc đa chủ đề chỉ bằng cách sử dụng CSS?

Chủ đề Tối/Sáng hoặc triển khai tính năng đa chủ đề như những gì Twitter cung cấp là một trong những tính năng cơ bản của mọi ứng dụng web/di động nhỏ/trung bình/lớn ngày nay vì đại đa số những người đang sử dụng các ứng dụng đó rất có khả năng sẽ có tùy chọn màu sắc và bạn nên phát triển ứng dụng của mình theo cách có thể đáp ứng nhu cầu của họ nhằm tạo trải nghiệm người dùng tốt hơn trong suốt ứng dụng của bạn bất kể trên web hay thiết bị di động.

TLDR;

Không có gì khó chịu, hãy bắt đầu triển khai tính năng này bên trong ứng dụng React nhưng lưu ý rằng tính năng này sẽ sử dụng các tính năng chỉ dành cho CSS và thao tác DOM để bạn có thể sử dụng nó trong bất kỳ khung/thư viện hoặc ứng dụng HTML/CSS thuần túy nào.

1- Xác định tệp CSS/SCSS/Styled-Component/CSS-In-JS toàn cầu kiểm soát và thể hiện các chỉ thị kiểu dáng toàn cầu hoặc hệ thống thiết kế của bạn.

Ở phần trên, như bạn có thể thấy, tôi đã tạo một tệp kiểu toàn cầu bằng cách sử dụng hậu tố SCSS và xác định một quy tắc gốc bên trong nó xác định màu sắc và phông chữ của tôi, về cơ bản, gốc ở đó để giúp bạn tập trung các biến của mình như màu sắc, kích thước, phông chữ , lề, phần đệm và v.v.

2- Tạo một thành phần Chủ đề để xử lý chức năng chuyển đổi chủ đề của bạn như sau:

import { useState } from "react";

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

  const toggleTheme = () => {
    setTheme((prev) => {
      const newThemeValue = prev === "light" ? "dark" : "light";

      // Add theme attribute with respective them value of the state
      document.body.setAttribute("theme", newThemeValue);

      return newThemeValue;
    });
  };

  return (
    <div>
      <button onClick={toggleTheme}>
        {theme === "light" ? "dark" : "light"}
      </button>
    </div>
  );
};

export default Theme;

Phần quan trọng nhất ở đây là đặt một thuộc tính cho phần nội dung của tài liệu HTML của bạn, ví dụ ở đây tôi thêm một thuộc tính chủ đề và đặt giá trị của nó thành giá trị chủ đề của tôi để có thể nhắm mục tiêu nó trong tệp CSS của tôi.

Lưu ý: hãy nhớ rằng điều này không kết xuất lại toàn bộ ứng dụng của bạn trong React mà những gì bạn đang làm là thao tác DOM trực tiếp trong trình xử lý sự kiện React, vì vậy nếu bạn muốn truy cập giá trị chủ đề trong toàn bộ ứng dụng của mình, hãy sử dụng giá trị đó trong các thành phần của bạn, bạn có thể sử dụng một bối cảnh toàn cầu và bọc ứng dụng của bạn bên trong nó cho chủ đề của bạn nhưng vì nó phá hủy mục đích duy nhất của CSS trong công việc của chúng tôi nên chúng tôi sẽ không làm điều đó ở đây.

3- Thêm các biến chủ đề tối và chủ đề đích theo thuộc tính tối của nội dung HTML của bạn.

Bây giờ, hãy xác định bộ chọn CSS dựa trên thuộc tính nội dung HTML của bạn, trong trường hợp này vì tôi gọi nó là “chúng” nên tôi sẽ chọn [theme=”dark”] ở đây và xác định màu mới cho các biến của mình.

Dễ lắm phải không?

4- Đa chủ đề và cách thay đổi giá trị biến?

Bằng cách tiếp cận trên, bạn có thể sử dụng nhiều giá trị chủ đề hoặc thậm chí làm cho nó động để không chỉ bạn có thể có chế độ tối và sáng, bạn có thể tạo các loại khác như xanh lam hoặc đỏ, v.v.

Về cơ bản, cách tiếp cận này hoạt động như thế này, bạn xác định các biến và màu trong bộ chọn gốc, sau đó bạn nhắm mục tiêu giá trị chủ đề nội dung HTML và thay đổi màu của các biến giống như bạn đã xác định, CSS sẽ tự động thay thế các màu mới bên trong ứng dụng của bạn .

Phần thưởng: Nếu bạn muốn duy trì giá trị chủ đề trong ứng dụng của mình, bạn có thể lưu nó trong dữ liệu hồ sơ người dùng trên cơ sở dữ liệu của mình nhưng cách tiếp cận dễ dàng nhất ở đây là lưu trữ giá trị trên bộ nhớ cục bộ.

Tôi đặt mục chủ đề trong bộ nhớ cục bộ của mình và mỗi khi ứng dụng của tôi làm mới cứng hoặc nếu tôi đóng phiên (tab) và quay lại lần nữa, tôi sẽ đọc dữ liệu chủ đề từ bộ nhớ cục bộ.

import { useEffect, useState } from "react";

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

  useEffect(() => {
    const currentTheme = localStorage.getItem("theme");
    if (currentTheme) {
      setTheme(currentTheme);
      document.body.setAttribute("theme", currentTheme);
    }
  }, []);

  const toggleTheme = () => {
    setTheme((prev) => {
      const newThemeValue = prev === "light" ? "dark" : "light";

      // Add theme attribute with respective them value of the state
      document.body.setAttribute("theme", newThemeValue);
      // Persist the current theme value in localStorage
      localStorage.setItem("theme", newThemeValue);

      return newThemeValue;
    });
  };

  return (
    <div>
      <button onClick={toggleTheme}>
        {theme === "light" ? "dark" : "light"}
      </button>
    </div>
  );
};

export default Theme;