Nos documentos de bootstrap, eles implementaram uma alternância do modo de cor suspensa que pode funcionar como ponto de partida para quem quer algo semelhante. Mas não existe um componente de comutador real incluído no bootstrap.
E se quisermos construir nosso próprio comutador de modo de cor personalizado, respeitando os estilos de modo escuro embutido do Bootstrap? Isso é absolutamente possível. Recentemente, construímos um comutador de temas, então vamos fazê -lo funcionar com o Bootstrap.
O que construímos no passado
Como lembrete, aqui está o componente do comutador de alternância claro/escuro que construímos no tutorial anterior:
Switcher de modo de cor de bootstrap
Para transformá-lo em uma alternância baseada em bootstrap, faremos as seguintes modificações:
- Primeiro, aplicaremos o modo escuro usando o
data-bs-theme="dark"Atributo html em vez dotheme-darkaula.
- Em seguida, vamos remover todos os nossos Variáveis CSS de modo escuro Como Bootstrap possui estilos de modo escuro embutidos.
1 |
/*No need for them*/
|
2 |
|
3 |
:root { |
4 |
--white: #fff; |
5 |
--black: black; |
6 |
--text-color: var(--black); |
7 |
--bg-color: var(--white); |
8 |
}
|
9 |
|
10 |
.theme-dark { |
11 |
color-scheme: dark; |
12 |
--text-color: var(--white); |
13 |
--bg-color: var(--black); |
14 |
}
|
- Finalmente, para evitar conflitos com a demonstração anterior, adicionaremos o
bsPrefixo antes de todos os nossos itens de armazenamento local. Por exemplo, substituiremos odark-modechave com obs-dark-modeum.
JavaScript atualizado
Aqui está o novo código JavaScript necessário:
1 |
const html = document.documentElement; |
2 |
const switches = document.querySelector(".switches"); |
3 |
const inputs = switches.querySelectorAll("input"); |
4 |
|
5 |
if (localStorage.getItem("bs-dark-mode")) { |
6 |
html.setAttribute("data-bs-theme", "dark"); |
7 |
}
|
8 |
|
9 |
if (localStorage.getItem("bs-selected-radio")) { |
10 |
switches.querySelector( |
11 |
`#${localStorage.getItem("bs-selected-radio")}` |
12 |
).checked = "true"; |
13 |
}
|
14 |
|
15 |
const setTheme = (theme) => { |
16 |
if (theme === "dark") { |
17 |
html.setAttribute("data-bs-theme", "dark"); |
18 |
localStorage.setItem("bs-dark-mode", "true"); |
19 |
} else { |
20 |
html.removeAttribute("data-bs-theme"); |
21 |
localStorage.removeItem("bs-dark-mode"); |
22 |
}
|
23 |
};
|
24 |
|
25 |
const handleMediaChange = (e) => { |
26 |
if (switches.querySelector('[type="radio"]:checked').id === "auto") { |
27 |
setTheme(e.matches ? "dark" : "light"); |
28 |
}
|
29 |
};
|
30 |
|
31 |
const handleInputChange = (e) => { |
32 |
const themeMode = e.target.id; |
33 |
if ( |
34 |
themeMode === "dark" || |
35 |
(themeMode === "auto" && |
36 |
window.matchMedia("(prefers-color-scheme: dark)").matches) |
37 |
) { |
38 |
setTheme("dark"); |
39 |
} else { |
40 |
setTheme("light"); |
41 |
}
|
42 |
localStorage.setItem("bs-selected-radio", themeMode); |
43 |
};
|
44 |
|
45 |
window
|
46 |
.matchMedia("(prefers-color-scheme: dark)") |
47 |
.addEventListener("change", handleMediaChange); |
48 |
|
49 |
inputs.forEach((input) => input.addEventListener("input", handleInputChange)); |
E a demonstração resultante:
Substituir as variáveis do modo escuro do Bootstrap
O modo escuro embutido de bootstrap é ótimo, mas seria melhor se soubéssemos como personalizar esses estilos.
Para esta demonstração, criei um novo projeto de bootstrap no GitHub. Desta vez, eu instalei e o incluí via NPM. Além disso, usei o aplicativo PrePros para facilitar a compilação de arquivos SASS.
Como outro lembrete, alguns anos atrás, passei como personalizar os arquivos SASS da Bootstrap. O conceito permanece o mesmo.
Por padrão, Bootstrap armazena todas as suas variáveis SASS específicas do modo escuro _variables-dark.scss arquivo.
No nosso caso, vamos personalizar as cores de página de primeiro plano e plano padrão que o Bootstrap usa no modo escuro. Para fazer isso, navegaremos para nosso costume main.scss Arquivo SASS, segmente as variáveis associadas e modifique seus valores, como este:
Isso resulta em uma aparência como esta:
Também podemos usar o bootstrap’s color-mode Misture para aplicar estilos adicionais no modo escuro assim:
1 |
@include color-mode(dark) { |
2 |
body { |
3 |
border: 1px solid red; |
4 |
}
|
5 |
}
|
Isso sai para:
1 |
[data-bs-theme=dark] body { |
2 |
border: 1px solid red; |
3 |
}
|
Conclusão
Isso é tudo, pessoal! Logo, o Bootstrap pode fornecer um componente oficial da chave de alternância para a substituição de esquemas de cores. Mas, por enquanto, você pode aproveitar o que construímos aqui!
Relacionado
