¿Modo oscuro para el tema Twenty Twenty-One de WordPress?

Por si no te has enterado aún, la próxima versión de WordPress, la 5.6, vendrá con un nuevo tema por defecto: el tema Twenty Twenty-One. A mí personalmente me gusta mucho la apariencia que tiene de momento, con colores pastel y un diseño sencillo y elegante. Sinceramente, creo que es un tema que envejecerá muy bien… aunque eso es algo que sólo el tiempo nos dirá.

Pues bien, el caso es que el otro día estaba repasando el blog de make.wordpress.org para enterarme de los temas de actualidad en WordPress y vi que Mel Choyce había compartido una discusión que hubo en el canal de Slack donde se contempló la posibilidad de que Twenty Twenty-One incluyera un modo oscuro. Y como esto de los modos oscuros en la web es un tema del que hablamos recientemente en el blog, he pensado que sería interesante compartir la discusión aquí, contigo.

Pero antes de nada, veamos la pinta que tendría una versión clara y otra oscura del tema (puedes mover el separador vertical a lado y lado):

Según nos resume Mel en la entrada del blog de WordPress que te comentaba antes, el funcionamiento inicial que plantearon para implementar esta funcionalidad es el siguiente:

Hemos preparado un parámetro de ajuste para el Personalizador para que los propietarios de una web puedan decidir si quieren que su web soporte o no el modo oscuro. Además, también hemos pensado en permitir que sea el propio visitante de una web el que active o desactive el modo oscuro según le interese, de forma independiente a los ajustes que tenga en su sistema operativo o navegador y suponiendo que el propietario de la web ha activado el soporte para el modo oscuro.

Mel Choyce en WordPress.org

Es decir, su intención era dar la máxima capacidad de personalización del tema tanto al propietario de la web como al visitante de la misma. El problema es que, una vez planteada esta solución, empiezan a aparecer un montón de dudas e interrogantes.

Por un lado, hay quien opina que «añadir ajustes visuales en la web entorpece la experiencia de usuario», si bien es cierto que «permite que el visitante adapte el contenido a sus necesidades». Por otro lado, hay quien opina que «ni siquiera el propietario de la web debería poder modificar este ajuste», ya que se trata de una funcionalidad propia del tema que permite que se adapte a la configuración del visitante, aunque luego «podría haber problemas con los logos y otros elementos visuales», que se subieron pensando en que se usarían con un modo claro y no uno oscuro.

De momento, como no tienen las cosas claras en absoluto, han optado por una solución salomónica y han decidido quitar el modo oscuro del tema y meterlo como un plugin aparte. Lo interesante del tema es que este nuevo plugin puede convertirse en la base para que WordPress integre de forma nativa la capacidad de un modo oscuro en los temas que creemos en el futuro, quién sabe.

Si quieres ver cómo evoluciona el tema o quieres aportar tu opinión, pásate por el blog y deja tu opinión. Yo personalmente seguiré de cerca la evolución de este plugin, porque la verdad es que tiene cosas muy interesantes y me parece que puede ser una gran fuente de ideas para integrar correctamente un modo oscuro a los temas que implementemos en el futuro.

Por ejemplo, en el fichero functions.php de este plugin puedes ver cómo usan algunas de las novedades que tenemos disponibles en el mundillo CSS y que nosotros ya te contamos. Entre ellas tenemos el uso de query selectors especiales para detectar las preferencias del usuario:

@media (prefers-color-scheme: dark) { ... }

o cómo se define la paleta de colores usando variables CSS:

html.respect-color-scheme-preference .editor-styles-wrapper {
  --global--color-background: var(--global--color-dark-gray);
  --global--color-primary: var(--global--color-light-gray);
  --global--color-secondary: var(--global--color-light-gray);
}

Por otro lado vemos también que se usan funciones auxiliares como get_relative_luminance_from_hex:

/**
 * Determine if we want to print the dark-mode switch or not.
 *
 * @since 1.0.0
 *
 * @return void
 */
function tt1_dark_mode_switch_should_render() {
  return (
    get_theme_mod( 'respect_user_color_preference', true ) &&
    127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex(
      get_theme_mod( 'background_color', 'D1E4DD' )
    )
  );
}

la cual está definida en el propio tema Twenty Twenty-One (junto a otras funciones auxiliares para trabajar con colores) y la cual nos indica si un cierto color es claro u oscuro. Pequeñas virguerías que, sin ser especialmente relevantes, merece la pena que veas y entiendas para inspirarte y mejorar. Vaya, ya te digo que yo voy a pensar cómo integrar estas cosas en mis proyectos 😉

En fin, ¿tú qué opinas? ¿Te gusta el rollo de los modos oscuros? ¿Lo usas, o quieres usarlo, en tu web? ¡Déjanos tu opinión en los comentarios!

Imagen destacada de Efe Yağız Soysal en Unsplash.