Meydan okuma: Tema sağlayıcı

Context + useReducer ile koyu/açık tema sağlayıcı yazarsın.

Meydan okuma: Tema sağlayıcı

Bu meydan okumada bir tema context'i ve ThemeProvider bileşeni yazacaksın. theme state'i "light" veya "dark" tutar; toggleTheme onları değiştirir.

Context değer olarak { theme, toggleTheme } verir. Tüketen bileşenler useContext ile okur.

Bu yapı, karanlık/aydınlık tema geçişi için standart bir kalıptır.

Uygulama ThemeProvider yaz

ThemeContext oluştur (createContext). ThemeProvider bileşeni yaz: useState("light") ile theme tut, toggleTheme fonksiyonu tanımla (light ise dark, dark ise light). ThemeContext.Provider ile value={{ theme, toggleTheme }} ver ve children bas. export ile ThemeProvider ve ThemeContext'i dışa aktar.

Örnek çözümü göster

import { createContext, useState } from "react";

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

Kendini test et

Context'in değer olarak vermesi gereken?
- Yalnızca tema rengi
- Yalnızca toggleTheme
- Tema ve toggleTheme fonksiyonu
- Tüm CSS stilleri
Cevabı göster

Tema ve toggleTheme fonksiyonu — { theme, toggleTheme } hem durumu hem değiştirici verir.

toggleTheme

function toggleTheme() {
  setTheme(theme === "light" ? "dark" : ____);
}

Cevabı göster

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

Sıradaki ders: Meydan okuma: Memo'lu liste

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler