Toggle for Mode Dark .js, é um script que adiciona um botão de alternância para uso do Mode Dark em seu projeto com todas as configurações necessária.
-
Inclua o código CSS no início do seu arquivo css:
Obs: Para usar o css abaixo, você deve construir seu projeto com variavéis CSS.
:root{
/*Coloque aqui as variáveis de cor do tema Padrão/Light*/
--background:#eee;
--text:#222;
}
[data-theme=dark]{
/*Coloque aqui as variáveis de cor do tema Dark*/
--background:#161625;
--text:#eee;
}- Adicione a Marcação HTML:
<div id="toggleButton"></div>- Adicione o JavaScript antes da tag </body>:
<script src="togglemodedark.js"></script> - Inicialize o ToggleButton:
<script>toggleModeDark();</script>ou
toggleModeDark();| Opçoes | Tipo | Padrão | Descrição |
|---|---|---|---|
| id: | Text | "#toggleButton" | Altera o id do ToggleButton |
| toggleSize: | Number | 30 | Altera o tamanho do ToggleButton |
| dotColor: | Text | "#fff" | Altera a cor do dot do ToggleButton |
| activatedBackground: | Text | "#192351" | Altera a cor de fundo quando ativado |
| disabledBackground: | Text | "#f6ca69" | Altera a cor de fundo quando desativado |
| textLightDark: | Boolean | false | Adiciona o texto Light e Dark no ToggleButton |
Exemplos:
//Alterando o Tamanho do ToggleButton
toggleModeDark({
toggleSize:40
});
//Alterando o tamanho e as cores de fundo do ToggleButton
toggleModeDark({
toggleSize:40,
activatedBackground:"#eee",
disabledBackground:"#333",
});