Implementar el modo oscuro respetando los estándares web es viable combinando dos mecanismos: la meta etiqueta en el y la propiedad CSS color-scheme en el elemento html. La meta etiqueta es la opción recomendada, ya que se aplica antes de que cargue el CSS y evita el parpadeo típico en conexiones lentas. Su valor puede ser "light", "dark" o "light dark" para seguir el ajuste del sistema operativo. Un pequeño script en JavaScript permite al usuario anular la preferencia del sistema con un botón y persistir la elección en localStorage.
La propiedad color-scheme afecta a colores, degradados e imágenes declarados con la función CSS light-dark(), a colores del sistema como Canvas, a las barras de desplazamiento, a los estilos por defecto de elementos HTML, a iframes y a SVG que usen light-dark() o prefers-color-scheme. Sin embargo, no influye en el resultado de la media query prefers-color-scheme en el documento principal, por lo que las imágenes servidas con no cambian con el toggle. Las excepciones son los iframes y los SVG: en ellos, el color-scheme del documento padre sí condiciona la media query.
La función light-dark() puede emplearse desde las versiones 150 de Chrome/Edge y Firefox y desde Safari Technology Preview con degradados, imágenes e incluso combinando un color sólido con un degradado. Para ir más allá del color, el artículo propone usar style queries junto con la variable personalizada --usedScheme, lo que permite cambiar bordes, sombras u otras propiedades según el esquema activo. Aunque el W3C planea una forma nativa de detectar el esquema y existe un prototipo en Chrome Canary para sobrescribir prefers-color-scheme desde JavaScript, ningún navegador lo ha implementado aún y Safari se opone.