[REPO REFACTOR]: changed to a better git repository structure with branches

src/contexts/ThemeContext.jsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+/**
+ * ThemeContext.jsx
+ * 
+ * Este archivo define el contexto de tema para la aplicación, permitiendo cambiar entre temas claro y oscuro.
+ * 
+ * Importaciones:
+ * - createContext, useContext, useEffect, useState: Funciones de React para crear y utilizar contextos, manejar efectos secundarios y estados.
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * 
+ * Funcionalidad:
+ * - ThemeContext: Contexto que almacena el tema actual y la función para cambiarlo.
+ * - ThemeProvider: Proveedor de contexto que maneja el estado del tema y proporciona la función para alternar entre temas.
+ *   - Utiliza `localStorage` para persistir el tema seleccionado.
+ *   - Aplica la clase correspondiente al `body` del documento para reflejar el tema actual.
+ * - useTheme: Hook personalizado para acceder al contexto del tema.
+ * 
+ * PropTypes:
+ * - ThemeProvider espera un único hijo (`children`) que es requerido y debe ser un nodo de React.
+ * 
+ */
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+    const [theme, setTheme] = useState(() => {
+        return localStorage.getItem("theme") || "light";
+    });
+
+    useEffect(() => {
+        document.body.classList.remove("light", "dark");
+        document.body.classList.add(theme);
+        localStorage.setItem("theme", theme);
+    }, [theme]);
+
+    const toggleTheme = () => {
+        setTheme(prevTheme => (prevTheme === "light" ? "dark" : "light"));
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+ThemeProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
+export function useTheme() {
+    return useContext(ThemeContext);
+}