Como alternar entre o modo escuro e claro no Drupal 8 (ou 9) com base na preferência do usuário

Seria incrível dar aos usuários a liberdade de personalizar a interface de acordo com sua preferência? Enquanto muitos usuários preferem uma interface clara (fundo claro com texto escuro), alguns usuários escolhem uma interface escura (fundo escuro com texto claro). Interfaces mais escuras são percebidas como legais e na moda, enquanto alguns também acreditam que reduzem o esforço visual, especialmente para desenvolvedores que passam muito tempo na frente da tela. Acredito que oferecer uma opção aos seus usuários é uma grande vitória em termos de acessibilidade e experiência do usuário. Existem algumas maneiras de fazer isso. Neste artigo, discutiremos como alternar entre os modos de design web escuro / claro e implementar isso no Drupal 8 ou Drupal 9.

Estaremos nos concentrando em dois métodos para implementar isso -
1. Usando apenas CSS.
2. Implementando a chave seletora CSS e JS

Usando apenas CSS

Para atingir o modo escuro em qualquer site com apenas CSS, é preciso ter em mente alguns dos requisitos do sistema. Um desses requisitos importantes é o modo escuro em todo o sistema . Se um usuário preferir usar o modo escuro em seu PC, ele verá um site que mostra um fundo de cor escura com texto claro. O esquema de cores preferenciais (consulta de mídia) é usado para identificar se o usuário solicitou que o sistema use um tema de cores claras ou escuras.

Implementação:

1. Declare as variáveis ​​CSS.
2. Use as variáveis ​​onde for necessário.

O resultado:

Nota: Para emular o resultado em alguns dispositivos não suportados, basta entrar no DevTool pressionando F12. Em seguida, pressione CTRL + SHIFT + P, em seguida, pesquise por prefere-esquema de cores: escuro e pressione Enter.

Implementando a chave seletora CSS e JS

Se optarmos por essa abordagem, não precisamos nos preocupar com os requisitos do sistema. Basta escrever algumas linhas de CSS e JS e você estará pronto. Depois de inicializar as variáveis, podemos fazer referência a essas variáveis ​​em nossas folhas de estilo. Esta será a estrutura HTML para alternar entre os modos claro e escuro.

E algumas linhas de CSS devem resultar nessa mudança.

A parte final é adicionar um pouco de JavaScript para amarrar tudo junto.
● Armazene a preferência do usuário para visitas futuras
● Verifique as preferências do usuário salvas, se houver, no carregamento do site

É isso! Confira a demonstração completa abaixo.

Ou clique aqui para ver a demonstração.

Implementando a chave Dark / Light no Drupal 8 (ou Drupal 9)

Para começar a criar um tema personalizado do Drupal 8, consulte o artigo incrível aqui. Vamos agora começar a criar um tema para mostrar como usar o tema escuro / tema claro no Drupal 8 ou Drupal 9.

A estrutura do arquivo será semelhante a esta:

Agora, atualize a seção do cabeçalho dentro de page.html.twig com o código a seguir.

 <header aria-label="Site header" role="banner"> <div class="container"> <div class="header"> {{ page.branding }} {{ page.navigation }} <div class="switch-wrapper"> <label class="switch" for="checkbox"> <input type="checkbox"/> <div class="slider round"></div> </label> </div> </div> </div> </header>

O resto da estrutura HTML dependerá do seu design ou requisitos.
Depois de concluir a estrutura HTML, é hora de torná-los mais bonitos, estilizando os elementos em CSS.
Primeiro, você deve criar todas as variáveis ​​padrão que serão responsáveis ​​pelas cores no modo Claro / Escuro.

 style.css :root { --color-background: #f0f0f0; --color-header: rgb(14, 33, 141); --color-header-text: #aecafa; --color-text: #2c0000; --color-card-bg: #fff; --color-link: rgb(255, 0, 0); } /* Variable decleration for dark mode */ [data-theme="dark"] { --color-background: #1a1a1a; --color-header: #aecafa; --color-header-text: 0e218d; --color-text: #d3d3d3; --color-card-bg: #435561; --color-link: #24ce24; }

Agora que você definiu as variáveis, é hora de adicionar estilo à seção Cabeçalho para obter o resultado necessário.

 style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

Observe que o estilo pode variar de acordo com seus requisitos. Depois de todo o estilo, agora é hora de escrever algumas funcionalidades no código Jquery. O código Jquery será parecido com isto (script.js em nosso caso)

 script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);
script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);

E não se esqueça de incluir seus arquivos JS e CSS dentro do arquivo theme_name.libraries.yml.

 global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal
global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal

Agora limpe o cache do site para ver o resultado. Seu resultado final deve ser assim: