كيف يمكن تغيير الثيم باستخدام تفضيلات المستخدم وكيف يمكن حفظ التفضيل المحدد عند تحميل الصفحة في React؟

يمكن عمل dark mode في العموم بأكثر نمن حل و الفكرة دائما تقوم على تخزين ملف يحتوي على المتغيرات التي تحتوي على الوان او متغيرات الخاصة بالtheme 
و هذة المتغيرات اما يتم تخزينها في ملف في الكود نفسة أو في الcss variables  و يمكن تخزينها في context او استعمال redux 
مثال على استعمال الcss variable :
 

:root {
  --background-color: #ffffff; /* اللون العادي */
  --text-color: #000000; /* لون النص في الوضع العادي */
}

.dark-mode {
  --background-color: #121212; /* اللون في وضع الظلام */
  --text-color: #ffffff; /* لون النص في وضع الظلام */
}

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

_________________
مثال على استعمال context :
 

import React, { useState, useEffect } from 'react';

const ThemeContext = React.createContext();

const ThemeProvider = ({ children }) => {
  const [isDarkMode, setDarkMode] = useState(false);

  useEffect(() => {
    const savedDarkMode = localStorage.getItem('darkMode');
    if (savedDarkMode) {
      setDarkMode(savedDarkMode === 'true');
    }
  }, []);

  const toggleDarkMode = () => {
    setDarkMode((prevMode) => {
      const newMode = !prevMode;
      localStorage.setItem('darkMode', newMode.toString());
      return newMode;
    });
  };

  return (
    <ThemeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

const useTheme = () => {
  const context = React.useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

export { ThemeProvider, useTheme };

_________________________
أما بالنسبة لسؤال كيف يمكن تخزين الحالة حتا تكون نفسها عند عودة المستخدم مرة أخرى فللقيام بذلك نستعمل الlocal storage و نقوم بفحصها كل مرة يقوم المستخدم بذيارة الموقع 
 

استخدم localStorage لتخزين حالة الثيم بين جلسات التصفح.
 

useEffect(() => {
  localStorage.setItem('darkMode', isDarkMode.toString());
}, [isDarkMode]);

عند تحميل الصفحة، قم بقراءة حالة الثيم من localStorage وقم بتعيينها لـ isDarkMode في التأثير الجانبي.
 

useEffect(() => {
  const savedDarkMode = localStorage.getItem('darkMode');
  if (savedDarkMode) {
    setDarkMode(savedDarkMode === 'true');
  }
}, []);