Dans Thème > Mode clair et sombre : | Option | Ce qu'elle fait | |--------|-----------------| | Mode du cours | Le mode que voit l'apprenant : Clair (le mode habituel, celui de tous les thèmes au départ), Sombre ou Celui du système, qui suit le réglage clair ou sombre de son appareil et change en direct si ce réglage change | | Bouton de mode dans le lecteur | Ajoute au lecteur un bouton avec une icône de soleil ou de lune pour passer du clair au sombre. Le choix est mémorisé dans le navigateur de l'apprenant, cours par cours, et prime sur le mode du système | Tant que le mode est Clair et que le bouton est désactivé, le lecteur ne change en rien. Avec le mode Sombre et sans bouton, le cours est « uniquement sombre ».

Mode clair et sombre — Creator

Q: Générer la variante sombre

Générer la variante sombre crée un point de départ. Elle inverse l'arrière-plan et le texte, remplace chaque couleur de la palette utilisée par le thème par son équivalent de luminosité inversée (sauf les voiles des images et ce qui se trouve sur un aplat de couleur, comme les boutons) et vérifie le contraste. Une fois terminée, l'éditeur passe en Sombre pour que vous l'affiniez, et un avis, Contraste en mode sombre, indique si tout atteint le contraste minimal (4,5:1 pour le texte et 3:1 pour le reste) ou quels champs n'y arrivent pas et avec quel contraste. Si le thème a déjà une variante sombre, une confirmation vous est demandée avant : la nouvelle variante remplace la précédente et ce que vous aviez affiné en sombre est perdu.

Q: Modifier le mode sombre

Le sélecteur Mode affiché (Clair / Sombre) de l'en-tête de l'éditeur de thème indique quel mode vous modifiez et lequel montre l'aperçu. En Sombre, l'éditeur vous signale que vous modifiez le mode sombre, et ce que vous changez ne vaut qu'en sombre. Chaque champ de chaque onglet indique Comme en clair ou Valeur sombre propre. S'il a une valeur propre, vous pouvez le ramener au clair avec Revenir à comme en clair. Chaque section propose Toute la section comme en clair et compte combien de ses champs ont une valeur sombre propre. Les couleurs de la palette peuvent être affinées en sombre, mais la variante n'ajoute ni ne retire jamais de couleurs de la palette. Dans l'éditeur de contenu, le même sélecteur (Clair / Sombre) apparaît quand le thème a des modes ou possède déjà une variante sombre. Il change seulement la façon dont vous voyez la leçon pendant que vous éditez ; il ne change pas le thème.

Q: CSS personnalisé et mode sombre

Le CSS personnalisé n'a pas de variante sombre : ce que vous écrivez vaut dans les deux modes. Pour ce qui ne doit s'afficher qu'en sombre, utilisez le sélecteur [data-color-scheme="dark"] : Le lecteur place data-color-scheme (« light » ou « dark », le mode affiché) sur sa racine quand le thème a des modes : quand le mode n'est pas Clair ou que le bouton est activé. Sans modes, l'attribut n'est pas là.

Q: Accessibilité

Le panneau Vérifications mesure le contraste dans les deux modes ; ce qui n'échoue qu'en sombre porte l'étiquette En mode sombre. Avec un thème « uniquement sombre » (mode Sombre et sans bouton), seul le sombre est mesuré et ses problèmes sont les principaux. Consultez Vérificateur d'accessibilité.

Un thème, deux modes

Un contenu continue d'utiliser un seul thème. Ce que vous configurez comme d'habitude est le mode clair ; le mode sombre est une variante du même thème qui ne conserve que ce qui change en sombre, dans n'importe quel champ : couleurs, images du thème (comme le logo de la couverture ou l'image de l'en-tête de leçon), ombres, bordures… Tout ce que la variante ne dit pas, elle le reprend du mode clair : un changement en clair arrive donc aussi en sombre tant que ce champ n'a pas de valeur propre en sombre.

Si le thème n'a pas de variante sombre, le sombre s'affiche comme le clair.

Choisir le mode

Dans Thème > Mode clair et sombre :

Option	Ce qu'elle fait
Mode du cours	Le mode que voit l'apprenant : Clair (le mode habituel, celui de tous les thèmes au départ), Sombre ou Celui du système, qui suit le réglage clair ou sombre de son appareil et change en direct si ce réglage change
Bouton de mode dans le lecteur	Ajoute au lecteur un bouton avec une icône de soleil ou de lune pour passer du clair au sombre. Le choix est mémorisé dans le navigateur de l'apprenant, cours par cours, et prime sur le mode du système

Tant que le mode est Clair et que le bouton est désactivé, le lecteur ne change en rien. Avec le mode Sombre et sans bouton, le cours est « uniquement sombre ».

Générer la variante sombre

Générer la variante sombre crée un point de départ. Elle inverse l'arrière-plan et le texte, remplace chaque couleur de la palette utilisée par le thème par son équivalent de luminosité inversée (sauf les voiles des images et ce qui se trouve sur un aplat de couleur, comme les boutons) et vérifie le contraste.

Une fois terminée, l'éditeur passe en Sombre pour que vous l'affiniez, et un avis, Contraste en mode sombre, indique si tout atteint le contraste minimal (4,5:1 pour le texte et 3:1 pour le reste) ou quels champs n'y arrivent pas et avec quel contraste.

Si le thème a déjà une variante sombre, une confirmation vous est demandée avant : la nouvelle variante remplace la précédente et ce que vous aviez affiné en sombre est perdu.

Modifier le mode sombre

Le sélecteur Mode affiché (Clair / Sombre) de l'en-tête de l'éditeur de thème indique quel mode vous modifiez et lequel montre l'aperçu. En Sombre, l'éditeur vous signale que vous modifiez le mode sombre, et ce que vous changez ne vaut qu'en sombre.

Chaque champ de chaque onglet indique Comme en clair ou Valeur sombre propre. S'il a une valeur propre, vous pouvez le ramener au clair avec Revenir à comme en clair.
Chaque section propose Toute la section comme en clair et compte combien de ses champs ont une valeur sombre propre.
Les couleurs de la palette peuvent être affinées en sombre, mais la variante n'ajoute ni ne retire jamais de couleurs de la palette.
Dans l'éditeur de contenu, le même sélecteur (Clair / Sombre) apparaît quand le thème a des modes ou possède déjà une variante sombre. Il change seulement la façon dont vous voyez la leçon pendant que vous éditez ; il ne change pas le thème.

CSS personnalisé et mode sombre

Le CSS personnalisé n'a pas de variante sombre : ce que vous écrivez vaut dans les deux modes. Pour ce qui ne doit s'afficher qu'en sombre, utilisez le sélecteur [data-color-scheme="dark"] :

[data-color-scheme="dark"] .ma-classe {
  box-shadow: none;
}

Le lecteur place data-color-scheme (« light » ou « dark », le mode affiché) sur sa racine quand le thème a des modes : quand le mode n'est pas Clair ou que le bouton est activé. Sans modes, l'attribut n'est pas là.

Où ça s'affiche

Le mode s'applique de la même façon dans l'aperçu, dans le lien de partage et dans les exports web et SCORM. Les commandes natives de vidéo et d'audio suivent aussi le mode affiché.

Le PDF est toujours en clair.

Accessibilité

Le panneau Vérifications mesure le contraste dans les deux modes ; ce qui n'échoue qu'en sombre porte l'étiquette En mode sombre. Avec un thème « uniquement sombre » (mode Sombre et sans bouton), seul le sombre est mesuré et ses problèmes sont les principaux. Consultez Vérificateur d'accessibilité.

Exporter et importer

« Mode clair et sombre » est l'une des sections lorsque vous exportez et importez un thème : elle contient le mode du cours et le bouton. La variante sombre n'a pas de case à elle : elle voyage avec chaque section que vous cochez.