Cómo alternar entre el modo oscuro y claro en Drupal 8 (o 9) según las preferencias del usuario

¿Qué tan maravilloso sería darles a sus usuarios la libertad de personalizar su interfaz según sus preferencias? Si bien muchos usuarios prefieren una interfaz clara (fondo claro con texto oscuro), algunos usuarios eligen una interfaz oscura (fondo oscuro con texto claro). Las interfaces más oscuras se perciben como geniales y modernas, mientras que algunos también creen que reduce la tensión en la vista, especialmente para los desarrolladores que pasan mucho tiempo frente a la pantalla. Creo que brindar una opción a sus usuarios es una gran ventaja en términos de accesibilidad y experiencia de usuario. Hay un par de formas en las que se puede lograr esto. En este artículo, discutiremos cómo alternar entre los modos de diseño web oscuro / claro e implementarlo en Drupal 8 o Drupal 9.

Nos centraremos en dos métodos para implementar esto:
1. Utilizando solo CSS.
2. Implementación del conmutador de palanca CSS y JS

Usando solo CSS

Para lograr el modo oscuro en cualquier sitio web con solo CSS, se deben tener en cuenta algunos de los requisitos del sistema. Uno de esos requisitos importantes es el modo oscuro en todo el sistema . Si un usuario prefiere usar el modo oscuro en su PC, entonces el usuario recibe un sitio web que muestra un fondo de color oscuro con texto claro. El esquema de preferencias de color (consulta de medios) se utiliza para identificar si el usuario ha solicitado al sistema que utilice un tema de color claro u oscuro.

Implementación:

1. Declare las variables CSS.
2. Utilice las variables donde sea necesario.

El resultado:

Nota: Para emular el resultado en algunos dispositivos no compatibles, ingrese DevTool presionando F12. A continuación, presione CTRL + MAYÚS + P, luego busque el esquema de color preferido: oscuro y presione Intro.

Implementación del conmutador de palanca CSS y JS

Si optamos por este enfoque, entonces no tenemos que preocuparnos por los requisitos del sistema. Simplemente escriba un par de líneas de CSS y JS y debería estar listo. Una vez que hayamos inicializado las variables, podemos hacer referencia a estas variables en nuestras hojas de estilo. Esta será la estructura HTML para alternar entre el modo oscuro y el claro.

Y algunas líneas de CSS deberían dar como resultado este cambio.

La parte final es agregar un poco de JavaScript para unirlo todo.
● Almacenar la preferencia del usuario para futuras visitas.
● Verifique las preferencias de usuario guardadas, si las hubiera, al cargar el sitio web.

¡Eso es! Vea la demostración completa a continuación.

O haga clic aquí para ver la demostración.

Implementación de la alternancia entre oscuridad y luz en Drupal 8 (o Drupal 9)

Para comenzar a crear un tema personalizado de Drupal 8, consulte el increíble artículo aquí. Comencemos ahora a crear un tema para mostrar cómo usar el tema oscuro / tema claro en Drupal 8 o Drupal 9.

La estructura del archivo se verá así:

Ahora, actualice la sección de encabezado dentro de page.html.twig con el siguiente código.

 <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>

El resto de la estructura HTML dependerá de su diseño o requisitos.
Una vez que haya terminado con la estructura HTML, es hora de hacer que se vean bien diseñando los elementos en CSS.
Primero, debe crear todas las variables predeterminadas que serán responsables de los colores en el modo Claro / Oscuro.

 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; }

Ahora que ha terminado de definir las variables, es hora de agregar estilo a la sección Encabezado para obtener el resultado requerido.

 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%; }

Tenga en cuenta que el estilo puede variar según sus requisitos. Después de todo el estilo, ahora es el momento de escribir algunas funciones en el código Jquery. El código de Jquery se verá así (script.js en nuestro 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);

Y no olvide incluir sus archivos JS y CSS dentro de su archivo 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

Ahora borre la memoria caché del sitio para ver el resultado. Su resultado final debería verse así: