使用上下文来应用主题,但不具有功能。
Quero pegar a div root e aplicar a classe or removal, para definir o tema a ser usado. Criei 2 arquivos de tema, um claro e outro escuro。 Ja vi que o Problema não é no botão e nem na hora de adicionar a classe.
import { createContext, useState } from "react";
// Criação do contexto
const MeuContexto = createContext();
// Componente provedor do contexto
function MeuContextoProvider(props) {
// Definindo o estado para armazenar os dados
const [dados, setDados] = useState({});
const [theme, setTheme] = useState("theme-light");
// Função para atualizar os dados no contexto
const atualizarDados = (novosDados) => {
setDados(novosDados);
};
// Função para alternar entre os temas
const toggleTema = () => {
setTheme((prevTema) => {
if (prevTema === "theme-light") {
document.getElementById("root").classList.add("dark-theme");
return "theme-dark";
} else {
document.getElementById("root").classList.remove("dark-theme");
return "theme-light";
}
});
console.log(document.getElementById("root"));
};
return (
<MeuContexto.Provider value={{ dados, atualizarDados, theme, toggleTema }}>
{props.children}
</MeuContexto.Provider>
);
}
export { MeuContextoProvider, MeuContexto };
@import "theme-dark";
@import "theme-light";
// Aplicando o tema escolhido
#root.dark-theme {
@import "theme-dark";
background: $background-main;
position: relative;
min-height: 100vh;
margin: 0;
overflow-x: hidden;
}
#root {
background: $background-main;
position: relative;
min-height: 100vh;
margin: 0;
overflow-x: hidden;
}
// Bootstrap
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
// Botões
.btn-primary {
$btn-color: #ffffff !important;
color: #ffffff !important;
&:hover {
$hover-color: $blue-secondary;
background-color: $hover-color !important;
}
}
Tentei outras abordagens,mas não foi
Eu tive de fazer uma coisa parecida e acabei por fazer um bocado differenterente de comotens.
Eu Tinha um
TemplateManager.jsx
que tratava de importar o template certo
const TemplateViolet = lazy(() => import('./TemplateViolet'));
<Suspense fallback={<></>}>
{template_id == 1 && (
<TemplateViolet />
)}
</Suspense>
E dentro da
TemplateViolet
carrego o ficheiro certo
import { useEffect } from 'react';
export default function TemplateViolet() {
useEffect(() => {
(async () => {
await import('../../../sass/template-violet.scss');
})();
}, []);
return null;
}
E na app.js chamo o
TemplateManager
<Suspense fallback={<></>}>
<TemplateManager />
</Suspense>
不能使用任何模板,也不能使用任何模板。 Tambem Podes ter um ficheiro light/dark que muda apenas variáveis e depoistens um ficheiro com os estilos todos que é importado pelo ficheiro light/dark
费切罗深色
$primary-color: #000;
@import "all-styles.scss";
Espero que te ajude。