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.