Como introduzir adequadamente um modo de luz / escuridão no Bootstrap?
Eu uso Bootstrap 4. 5 e uso bg-dark no meu modelo HTML. Gostaria de implementar um interruptor "luz/escuridão".
Então, o Bootstrap tem uma classe css {[[1]}, mas não sei qual é a abordagem actual para a usar. Deixe-me esclarecer a minha confusão:
-
É suposto eu substituir todas as ocorrências de {[[0]} por
bg-lightAssim que o "interruptor" estiver ligado? -
Se eu quiser modificar ligeiramente as cores de
bg-lightebg-dark, é "tema" a abordagem certa? Não consigo encontrar nenhum exemplo para sobrepor estas variáveis (via SASS), excepto se as sobrepor manualmente no meu CSS como.bg-dark { ... }
2 answers
Aqui estão algumas respostas para a sua pergunta no modo de Bootstrap luz ou modo escuro:
"Devo substituir todas as ocorrências de bg-dark por bg-light assim que o "interruptor" estiver ligado?"Sim, mas provavelmente também quererias mudar todas as classes
-lighte -dark tais como:text-dark, navbar-dark, btn-dark, etc..
Se eu quiser modificar ligeiramente as cores da bg-luz e da bg-escuridão.. I não consigo encontrar nenhum exemplo para sobrepor estas variáveis (via SASS), excepto de manual sobrepô-los no meu CSS como. bg-dark ...
Estas são derivadas das variáveis $light e $dark SASS para que possa alterá-las assim...
$light: #dddddd;
$dark: #011100;
@import "bootstrap";
Demonstração Interruptor De Modo Escuro-Claro Do Bootstrap
Também ver:
personalizar o modelo CSS de Bootstrap
Como estender / modificar (personalizar) o Bootstrap 4 com o SAS
Vê isto.: https://getbootstrap.com/docs/4.5/getting-started/theming
"personalizar o Bootstrap 4 com as nossas novas variáveis SAS embutidas para o global preferências de estilo para mudanças de tema e componentes fáceis."
Uma vez que queira aplicar as alterações pela Sass, este parece ser o caminho certo
E pela sua documentação as variáveis para a mudança isto está em " SCSS / _variáveis.scss " file
Aqui está outro tópico com algumas informações adicionais como conseguir: personalizar o modelo CSS do Bootstrap