Destello de tema de color inexacto (FART)

Hay mucho en qué pensar al implementar un tema de modo oscuro en un sitio web. Tenemos una gran guía al respecto. Hay algunas victorias rápidas muy inteligentes , pero también hay algunas cosas bastante difíciles de lograr. Una de esas cosas complicadas es que no se trata de un modo oscuro para “alternar” entre oscuro y claro, sino que en realidad hay tres modos que debes admitir: oscuro , claro y usar preferencia del sistema . Esto es similar a cómo funcionan las preferencias de audio en muchas aplicaciones, que le permiten elegir de manera muy específica qué entrada o salida de audio desea, o utilizar de forma predeterminada la preferencia del sistema.

CSS y JavaScript pueden manejar el ángulo de preferencia del sistema, a través de la prefers-color-schemeAPI, pero si la preferencia del usuario ha cambiado y esa preferencia ahora es diferente a la preferencia del usuario, estás en el territorio de “Flash of inAccurate coloR Theme” o FART. Vale, vale, es un acrónimo irónico, pero potencialmente es un problema bastante desagradable visualmente, así que lo conservaré. Está en la misma línea que FOUT (Flash of Unstyled Text) sirve para cargar fuentes.

Almacenar una preferencia de usuario significa algo así como una cookie, localStorageo algún tipo de base de datos. Si el acceso a esos datos significa ejecutar JavaScript, por ejemplo localStorage.getItem('color-mode-preference');, entonces estás en territorio FART, porque es muy probable que tu JavaScript se esté ejecutando después del primer procesamiento de una página, para que no retrases innecesariamente el procesamiento de la página.

Puede acceder a una cookie con un lenguaje del lado del servidor antes de la presentación de la página, lo que significa que puede usarla para generar algo similar htmly diseñarlo en consecuencia, lo que evita hábilmente FART, pero eso significa un sitio que incluso tiene acceso a un lenguaje del lado del servidor ( Los sitios Jamstack no lo hacen, por ejemplo).

Todo esto quiere decir que aprecié el artículo de Rob Morieson sobre el modo oscuro porque no aborda este importante tema. Se trata de hacer esto de manera muy específica en Next.js y usa localStorage, pero debido a que Next.js está renderizado en JavaScript, puedes forzarlo a verificar la preferencia guardada por el usuario como lo primero que hace. Eso significa que se renderizará correctamente la primera vez (sin flash). Tienes que desactivar el renderizado del lado del servidor para que esto funcione, lo cual, sin embargo, es una compensación complicada.

No estoy convencido de que exista una buena manera de evitar FART sin un lenguaje del lado del servidor o una representación de página retrasada por la fuerza.