Un tema, dos modos
Un contenido sigue usando un solo tema. Lo que configuras de siempre es el modo claro; el modo oscuro es una variante del mismo tema que guarda solo lo que cambia en oscuro, en cualquier campo: colores, imágenes del tema (como el logotipo de la portada o la imagen de la cabecera de lección), sombras, bordes… Todo lo que la variante no dice, lo toma del modo claro, así que un cambio en el claro llega también al oscuro mientras ese campo no tenga valor propio en oscuro.
Si el tema no tiene variante oscura, en oscuro se ve igual que en claro.
Elegir el modo
En Tema > Modo claro y oscuro:
| Opción | Qué hace |
|---|---|
| Modo del curso | Qué modo ve quien hace el curso: Claro (el de siempre, y el que traen todos los temas), Oscuro o El del sistema, que sigue el ajuste claro u oscuro de su dispositivo y cambia en vivo si ese ajuste cambia |
| Conmutador de modo en el reproductor | Añade al reproductor un botón con un icono de sol o de luna para cambiar entre claro y oscuro. La elección se recuerda en el navegador de quien aprende, curso por curso, y manda sobre el modo del sistema |
Mientras el modo sea Claro y el conmutador esté apagado, el reproductor no cambia en nada. Con el modo Oscuro y sin conmutador, el curso es «solo oscuro».
Generar la variante oscura
Generar variante oscura crea un punto de partida. Invierte el fondo y el texto, pasa cada color de la paleta que usa el tema a su pareja de luminosidad invertida (salvo los velos de las imágenes y lo que va sobre un relleno de color, como los botones) y comprueba el contraste.
Al terminar, el editor pasa a Oscuro para que la retoques y un aviso, Contraste en oscuro, dice si todo llega al contraste mínimo (4,5:1 para el texto y 3:1 para lo demás) o qué campos no llegan y con qué contraste.
Si el tema ya tiene variante oscura, antes de generar se te pide confirmación: la variante nueva sustituye a la anterior y lo que retocaste en oscuro se pierde.
Editar el modo oscuro
El selector Modo que se ve (Claro / Oscuro) de la cabecera del editor del tema dice qué modo estás editando y cuál enseña la vista previa. En Oscuro, el editor avisa de que estás editando el modo oscuro y lo que cambies solo vale en oscuro.
- Cada campo de cada pestaña dice Igual que en claro o Propio en oscuro. Si es propio, puedes volver al claro con Volver a igual que en claro.
- Cada sección tiene Toda la sección igual que en claro y cuenta cuántos campos son propios en oscuro.
- Los colores de la paleta se pueden retocar en oscuro, pero la variante no añade ni quita colores de la paleta.
- En el editor de contenido, el mismo selector (Claro / Oscuro) aparece cuando el tema tiene modos o ya tiene variante oscura. Solo cambia cómo ves la lección mientras editas; no cambia el tema.
CSS propio y modo oscuro
El CSS propio no tiene variante oscura: lo que escribas vale en los dos modos. Para lo que solo deba verse en oscuro, usa el selector [data-color-scheme="dark"]:
[data-color-scheme="dark"] .mi-clase {
box-shadow: none;
}El reproductor pone data-color-scheme («light» o «dark», el modo que se está viendo) en su raíz cuando el tema tiene modos: cuando el modo no es Claro o el conmutador está encendido. Sin modos, no lleva el atributo.
Dónde se ve
El modo se aplica igual en la vista previa, en el enlace para compartir y en las exportaciones web y SCORM. Los controles nativos de vídeo y audio también siguen el modo que se está viendo.
El PDF sale siempre en claro.
Accesibilidad
El panel Comprobaciones mide el contraste en los dos modos; lo que solo falla en oscuro lleva la etiqueta En modo oscuro. Con un tema «solo oscuro» (modo Oscuro y sin conmutador), solo se mide el oscuro y sus problemas son los principales. Consulta Comprobador de accesibilidad.
Exportar e importar
«Modo claro y oscuro» es una de las secciones al exportar e importar un tema: lleva el modo del curso y el conmutador. La variante oscura no tiene casilla propia: viaja con cada sección que marques.