-1

Estou em dúvida em como alternar de tema claro para escuro em um projeto que estou desenvolvendo. Eu estou utilizando um sistema de rotas para navegar entre as telas do meu site. Segue o código do arquivo routes do meu projeto:

function Rotas() {
  const [theme, setTheme] = useState('dark')
  const themeToggler = () => {
    theme === 'light' ? setTheme('dark') : setTheme('light')
  }
  return (
    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
      
      <BrowserRouter>
      <GlobalStyle />
        <Routes>
          <Route path='/' element={<Inicio />}></Route>
          <Route path='/home' element={<Home />}></Route>
          <Route path='/login' element={<Login />}></Route>
          <Route path='*' element={<Erro404 />}></Route>
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
    
  );
}

O botão que muda o tema está em um outro arquivo jsx do meu projeto (Home). Eu sei como fazer um botão que altera o tema quando ele está na mesma função em que se encontra o ThemeProvider, porém não sei como posso enviar este ThemeProvider para outra tela e alterar pelo botão existente lá. Alguém pode me ajudar?

Caso precisem de mais algum trecho de código, me avisem que faço o envio dele.

Eu tentei fazer isto diretamente na função react em que o botão se encontra, porém não consegui trocar a cor de fundo e acredito que isso não seria o melhor a se fazer já que eu teria que repetir o mesmo código em outras telas caso eu fosse precisar.

1
  • Podes passar a função themeToggler() como um prop do componente Home. 18/09 às 13:49

1 Resposta 1

-2

Pode fazer isso usando a Context API do React para compartilhar o estado do tema entre diferentes componentes, incluindo o botão de troca de tema em diferentes telas.

Crie um novo contexto para gerenciar o tema em um arquivo, "ThemeContext.js" por exemlo:

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function useTheme() {
  return useContext(ThemeContext);
}

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('dark');

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

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

agora pode usar o ThemeProvider em torno de toda a aplicação:

function Rotas() {
  return (
    <ThemeProvider>
      <BrowserRouter>
        <GlobalStyle />
        <Routes>
          <Route path='/' element={<Inicio />}></Route>
          <Route path='/home' element={<Home />}></Route>
          <Route path='/login' element={<Login />}></Route>
          <Route path='*' element={<Erro404 />}></Route>
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
}

Feito isso, você pode usa-lo em qualquer componente em que você deseja acessar o tema e permitir a troca de tema, usando o hook useTheme() para acessar o contexto do tema, vamos supor que queria usar no teu componente Home:

import React from 'react';
import { useTheme } from './ThemeContext';

function Home() {
  const { theme, toggleTheme } = useTheme();

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

export default Home;

Espero que tenha ajudado!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .