จะเพิ่มสีเข้ม/อ่อนหรือหลายสีโดยใช้ CSS ได้อย่างไร

การใช้งานฟีเจอร์ธีมมืด/สว่างหรือหลายธีมอย่างที่ Twitter เสนอเป็นหนึ่งในฟีเจอร์พื้นฐานของเว็บ/แอปพลิเคชั่นมือถือขนาดเล็ก/กลาง/ใหญ่ทุกวันนี้ เพราะคนส่วนใหญ่ที่ใช้แอปเหล่านั้นมีแนวโน้มที่จะมี การตั้งค่าสี และคุณควรพัฒนาแอปของคุณในลักษณะที่สามารถตอบสนองความต้องการของพวกเขา เพื่อสร้างประสบการณ์การใช้งานที่ดีขึ้นทั่วทั้งแอปพลิเคชันของคุณไม่ว่าจะบนเว็บหรืออุปกรณ์พกพา

TLDR;

เรามาเริ่มใช้งานฟีเจอร์นี้ภายในแอป React โดยไม่ต้องกังวลใจอีกต่อไป แต่โปรดสังเกตว่าฟีเจอร์นี้จะใช้ฟีเจอร์ CSS เท่านั้นและการจัดการ DOM ดังนั้นคุณจึงสามารถใช้ฟีเจอร์นี้ในเฟรมเวิร์ก/ไลบรารีหรือแอปพลิเคชัน HTML/CSS ล้วน

1-กำหนดไฟล์ CSS/SCSS/Styled-Component/CSS-In-JS ส่วนกลางที่ควบคุมและแสดงคำสั่งการจัดรูปแบบส่วนกลางหรือระบบการออกแบบของคุณ

อย่างที่คุณเห็นข้างต้น ฉันได้สร้างไฟล์สไตล์สากลโดยใช้ส่วนต่อท้าย SCSS และกำหนดกฎรูทภายในนั้นเพื่อกำหนดสีและฟอนต์ของฉัน โดยพื้นฐานแล้วรูทจะอยู่ที่นั่นเพื่อช่วยคุณรวมศูนย์ตัวแปรของคุณ เช่น สี ขนาด ฟอนต์ ระยะขอบ ระยะขอบ และอื่นๆ

2-สร้างคอมโพเนนต์ธีมเพื่อจัดการฟังก์ชันสลับธีมของคุณดังต่อไปนี้:

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;

ส่วนที่สำคัญที่สุดในที่นี้คือการตั้งค่าแอตทริบิวต์ให้กับเนื้อหาของเอกสาร HTML ของคุณ ตัวอย่างเช่น ที่นี่ฉันเพิ่มแอตทริบิวต์ธีมและตั้งค่าเป็นค่าธีมของฉัน เพื่อให้สามารถกำหนดเป้าหมายในไฟล์ CSS ของฉันได้

หมายเหตุ:โปรดจำไว้ว่าสิ่งนี้ไม่ได้เรนเดอร์แอปทั้งหมดของคุณใหม่ใน React แต่สิ่งที่คุณกำลังทำคือการจัดการ DOM โดยตรงในตัวจัดการเหตุการณ์ React ดังนั้นหากคุณต้องการเข้าถึงค่าธีมในแอปทั้งหมดของคุณ ให้ใช้ค่านั้นในส่วนประกอบที่คุณสามารถใช้ได้ บริบทส่วนกลางและรวมแอปของคุณไว้ในธีมของคุณ แต่เนื่องจากมันทำลายจุดประสงค์เดียวของ CSS ในการทำงานของเรา เราจึงไม่ทำที่นี่

3-เพิ่มตัวแปรธีมสีเข้มและธีมเป้าหมายตามแอตทริบิวต์เนื้อหา HTML สีเข้มของคุณ

ตอนนี้กำหนดตัวเลือก CSS ตามแอตทริบิวต์เนื้อหา HTML ของคุณ ในกรณีนี้เนื่องจากฉันเรียกมันว่า "พวกเขา" ฉันจะเลือก [ธีม="มืด"] ที่นี่และกำหนดสีใหม่สำหรับตัวแปรของฉัน

ง่าย peasy ใช่มั้ย?

4-หลายธีมและค่าตัวแปรมีการเปลี่ยนแปลงอย่างไร

ด้วยวิธีการข้างต้น คุณสามารถใช้ค่าธีมได้หลายค่าหรือแม้กระทั่งทำให้เป็นไดนามิกเพื่อให้ไม่เพียงแค่คุณมีโหมดมืดและสว่างเท่านั้น คุณยังสามารถสร้างประเภทอื่นๆ เช่น สีน้ำเงินหรือสีแดงหรืออื่นๆ

โดยทั่วไป วิธีการนี้ทำงานในลักษณะนี้ คุณกำหนดตัวแปรและสีของคุณในตัวเลือกรูท จากนั้นคุณกำหนดเป้าหมายค่าธีมเนื้อหา HTML และเปลี่ยนสีของตัวแปรเดียวกันกับที่คุณกำหนด CSS จะแทนที่สีใหม่ในแอปพลิเคชันของคุณโดยอัตโนมัติ .

โบนัส: หากคุณต้องการคงค่าธีมไว้ในแอปพลิเคชันของคุณ คุณสามารถบันทึกค่าดังกล่าวในข้อมูลโปรไฟล์ผู้ใช้ในฐานข้อมูลของคุณ แต่วิธีที่ง่ายที่สุดที่นี่คือการจัดเก็บค่าในที่จัดเก็บในตัวเครื่อง

ฉันตั้งค่ารายการธีมในที่จัดเก็บในตัวเครื่อง และทุกครั้งที่แอปของฉันรีเฟรชอย่างหนักหรือหากฉันปิดเซสชัน (แท็บ) และกลับมาอีกครั้ง ฉันจะอ่านข้อมูลธีมจากที่จัดเก็บในตัวเครื่อง

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;