Personalizando o modo escuro com variáveis ​​CSS e JavaScript

Implementar um modo escuro para seu aplicativo ou site é crucial para fornecer uma experiência de usuário perfeita. As regras de mídia CSS nativas oferecem uma opção para os navegadores detectarem modos escuros definidos pelo sistema, mas os usuários podem preferir um tema diferente para sites ou navegadores específicos que ainda não oferecem suporte, como o Microsoft Edge.

Para abordar Para isso, podemos utilizar variáveis ​​CSS e JavaScript para gerenciar as configurações do tema.

Personalização CSS com variáveis ​​e temas

Defina variáveis ​​CSS no nível raiz ou padrão e especifique um tema sombrio:

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}

Chame as variáveis ​​quando necessário para ajustar estilos dinamicamente.

JavaScript para detecção e alternância de temas

Na seção de cabeçalho do seu HTML, adicione JavaScript para detectar o tema preferido do usuário:

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

Use JavaScript para alternar entre temas claros e escuros:

const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

HTML para alternância de temas

Crie uma caixa de seleção HTML para alternância de temas controlada pelo usuário:

Com essa abordagem, você pode detectar automaticamente o tema do usuário, permitir que ele o substitua e fornecer uma experiência personalizada em navegadores e plataformas.