Tarea

¡Hola Angel!

Guardar el estado del tema en el local storage es una tarea común en muchas aplicaciones. Para hacerlo en React, puedes utilizar el hook useEffect() para guardar el estado del tema en el local storage cada vez que cambie.

Aquí te dejo un ejemplo de cómo podrías hacerlo:

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

function App() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    localStorage.setItem('theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
  };

  return (
    <div className={theme}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <p>Current theme: {theme}</p>
    </div>
  );
}

export default App;

En este ejemplo, el estado del tema se guarda en el local storage cada vez que cambia el estado. Cuando se carga la página, el estado del tema se recupera del local storage (si existe) y se utiliza para establecer el tema inicial.

Espero que esta respuesta te sea útil. ¡Buenos estudios!

Hola! Seguí los pasos descriptos en el ejemplo sobre como usar el hook useEffect dentro de localStorage pero no logro que funcione. Comparto mi código:

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

import Header from "./Components/Header";
import Container from "./Components/Container";
import GlobalStyle from "./GlobalStyle";
import { ThemeProvider } from "styled-components";
import { temaClaro, temaOscuro } from "./Components/UI/Temas";
import { BtnTema } from "./Components/UI/Index";
import SwitcherTema from "./Components/SwtichetTema";

function App() {
  const [tema, setTema] = useState (true);

  useEffect(() => {
    localStorage.setItem ("tema", tema);
  }, [tema]);

  const toggleTema = () => {
    setTema((tema) => !tema)
  }
  return (
    <ThemeProvider theme={tema ? temaClaro : temaOscuro}>
      <GlobalStyle />
      <BtnTema onClick={toggleTema}>
        <SwitcherTema tema = {tema} />
      </BtnTema>
      <Header />
      <Container />
    </ThemeProvider>
  );
}

export default App;

Hola! Comparto un código que me sirvió

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

import GlobalStyles from "./GlobalStyles";
import Header from "./Components/Header";
import Container from "./Components/Container";
import { temaClaro, temaOscuro } from "./UI/Temas";
import { ThemeProvider } from "styled-components";
import { BtnTema } from "./UI";
import Switcher from "./Components/Switcher";

function App() {
  const [theme, setTheme] = useState(getInitialTheme);

  useEffect(() => {
    localStorage.setItem("theme", JSON.stringify(theme));
  }, [theme]);

  function getInitialTheme() {
    const savedTheme = localStorage.getItem("theme");
    return savedTheme ? JSON.parse(savedTheme) : temaClaro;
  }

  const themeToggle = () => {
    setTheme((theme) => !theme);
  };

  return (
    <ThemeProvider theme={theme ? temaClaro : temaOscuro}>
      <GlobalStyles />

      <BtnTema onClick={themeToggle}>
        <Switcher theme={theme} />
      </BtnTema>

      <Header />

      <Container />
    </ThemeProvider>
  );
}

export default App;