Yalnızca CSS kullanarak koyu/açık veya çoklu tema renkleri nasıl eklenir?

Twitter'ın sunduğu gibi Koyu/Açık tema veya çoklu tema özelliği uygulaması, bu günlerde her küçük/orta/büyük web/mobil uygulamanın temel özelliklerinden biridir çünkü bu uygulamaları kullanan kişilerin büyük çoğunluğunun sahip olma olasılığı yüksektir. renk tercihleri ​​ve web veya mobil cihazlardan uygulamanız boyunca daha iyi bir kullanıcı deneyimi yaratmak için uygulamanızı onların ihtiyaçlarına cevap verebilecek şekilde geliştirmelisiniz.

TLDR;

Daha fazla uzatmadan, bu özelliği bir React uygulaması içinde uygulamaya başlayalım, ancak bu özelliğin yalnızca CSS özelliklerini ve DOM manipülasyonunu kullanacağına dikkat edin, böylece onu herhangi bir çerçevede/kütüphanede veya saf HTML/CSS uygulamasında kullanabilirsiniz.

1- Global stil direktiflerinizi veya tasarım sisteminizi kontrol eden ve temsil eden global bir CSS/SCSS/Styled-Component/CSS-In-JS dosyası tanımlayın.

Yukarıda, görebileceğiniz gibi, SCSS son ekini kullanarak bir global stiller dosyası oluşturdum ve içinde renklerimi ve yazı tiplerimi tanımlayan bir kök kural tanımladım, kök temel olarak renkler, boyutlar, yazı tipleri gibi değişkenlerinizi merkezileştirmenize yardımcı olmak için orada. , kenar boşlukları, dolgular vb.

2- Geçiş teması işlevinizi aşağıdaki gibi işlemek için bir Tema bileşeni oluşturun:

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;

Buradaki en önemli kısım, HTML belgenizin gövdesine bir özellik ayarlamaktır, örneğin burada bir tema özelliği ekliyorum ve CSS dosyamda hedefleyebilmek için değerini tema değerime ayarlıyorum.

Not: Bunun, uygulamanızın tamamını React'te yeniden oluşturmadığını, ancak yaptığınız şeyin doğrudan bir React olay işleyicisinde DOM manipülasyonu olduğunu unutmayın; bu nedenle, uygulamanızın tamamındaki tema değerine erişmek istiyorsanız, onu bileşenlerinizde kullanın. küresel bir bağlam ve uygulamanızı temanız için içine sarın, ancak işimizin tek amacı olan CSS'yi yok ettiği için burada yapmayacağız.

3- HTML gövde koyu özelliğinize göre koyu tema değişkenleri ve hedef tema ekleyin.

Şimdi HTML gövde özelliğinize göre bir CSS seçici tanımlayın, bu durumda buna "onlar" adını verdiğim için burada [theme="dark"] seçeceğim ve değişkenlerim için yeni renkler tanımlayacağım.

Kolay kolay değil mi?

4- Çoklu tema ve değişken değerleri nasıl değiştirilir?

Yukarıdaki yaklaşımla, birden fazla tema değeri kullanabilir veya hatta onu dinamik hale getirebilirsiniz, böylece yalnızca karanlık ve aydınlık modlara sahip olmakla kalmaz, mavi veya kırmızı vb.

Temel olarak, bu yaklaşım şu şekilde çalışır, kök seçicinizde değişkenlerinizi ve renklerinizi tanımlarsınız, ardından HTML gövde teması değerini hedeflersiniz ve tanımladığınız aynı değişkenlerin rengini değiştirirsiniz, CSS otomatik olarak uygulamanızın içindeki yeni renklerin yerini alacaktır. .

Bonus: Uygulamanızdaki tema değerini korumak istiyorsanız, onu veritabanınızdaki kullanıcı profili verilerine kaydedebilirsiniz, ancak buradaki en kolay yaklaşım, değeri yerel depolamada depolamaktır.

Tema öğesini yerel depolama alanımda ayarlıyorum ve uygulamamın her yenilenmesinde veya oturumu (sekmeyi) kapatıp tekrar geri döndüğümde, tema verilerini yerel depolamadan okuyorum.

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;