Quiz 15 — Color modes & dark mode
⏱️ TL;DR — 50 questions sur
data-bs-theme, les couleurs adaptatives, les thèmes custom et le pilotage JS (Partie 9). Réponds de tête, puis déplie.
1. Attribut qui active le dark mode ?
Réponse
data-bs-theme="dark".
2. Valeurs de data-bs-theme ?
Réponse
light (défaut) ou dark (ou un thème custom).
3. Peut-on l’appliquer à une seule partie ?
Réponse
Oui, il cascade aux enfants.
4. Remplacer text-muted par… ?
Réponse
text-body-secondary.
5. Remplacer bg-light par… ?
Réponse
bg-body-tertiary.
6. Remplacer text-dark par… ?
Réponse
text-body.
7. Remplacer bg-white par… ?
Réponse
bg-body.
8. Navbar sombre en 5.3 ?
Réponse
data-bs-theme="dark".
9. Un encart succès lisible dans les deux modes ?
Réponse
bg-success-subtle text-success-emphasis.
10. Les composants sont-ils adaptatifs par défaut ?
Réponse
Oui (ils lisent les variables du thème).
11. Bloc blanc/illisible en dark : cause ?
Réponse
Couleurs figées (bg-white, text-dark).
12. Sur quoi poser data-bs-theme globalement ?
Réponse
<html>.
13. Nouveauté 5.3 phare ?
Réponse
Les color modes (dark mode natif).
14. Créer un thème nommé en CSS ?
Réponse
Sous [data-bs-theme="nom"], redéfinir les --bs-*.
15. Variable Sass du mode sombre, suffixe ?
Réponse
-dark (ex. $body-bg-dark).
16. Fichier Sass du dark mode ?
Réponse
variables-dark.
17. Ce qu’il faut vérifier dans chaque thème ?
Réponse
Le contraste (WCAG AA).
18. Recompiler pour un thème CSS custom : nécessaire ?
Réponse
Non (un bloc [data-bs-theme] suffit).
19. Surcharger --bs-primary sans --bs-primary-rgb : problème ?
Réponse
Les transparences tombent sur l’ancienne couleur.
20. Changer le thème en JS ?
Réponse
documentElement.setAttribute('data-bs-theme', …).
21. Persister le choix ?
Réponse
localStorage.
22. Media query de préférence système ?
Réponse
prefers-color-scheme: dark.
23. Éviter le flash de thème ?
Réponse
Script inline synchrone dans le <head>.
24. Pourquoi le script anti-flash doit être synchrone ?
Réponse
Appliquer le thème avant le premier rendu.
25. Lib Next.js pour le dark mode ?
Réponse
next-themes.
26. Prop de next-themes pour Bootstrap 5.3 ?
Réponse
attribute="data-bs-theme".
27. Choix initial du thème : ordre ?
Réponse
Stocké > préférence système > clair.
28. Suivre la préférence système en direct ?
Réponse
Écouter l’événement change de la matchMedia.
29. Ne pas écraser le choix utilisateur : condition ?
Réponse
Ne suivre le système que si rien n’est stocké.
30. Attribut à ajouter sur <html> (Next) pour éviter un warning ?
Réponse
suppressHydrationWarning.
31. Un thème « high-contrast », comment ?
Réponse
[data-bs-theme="high-contrast"] + variables.
32. Une section sombre dans une page claire ?
Réponse
<section data-bs-theme="dark">.
33. Les couleurs -subtle/-emphasis s’adaptent-elles ?
Réponse
Oui, au mode courant.
34. navbar-dark en 5.3 : recommandé ?
Réponse
Non, obsolète — data-bs-theme.
35. Une carte avec en-tête violet clair localement ?
Réponse
style="--bs-card-cap-bg:#f3effa".
36. Maps du mode sombre, exemple ?
Réponse
$theme-colors-text-dark, etc.
37. text-bg-* s’adapte-t-il au dark ?
Réponse
Oui (fond + texte contrasté).
38. Un thème custom en CSS recompile-t-il Bootstrap ?
Réponse
Non.
39. bg-body-tertiary vs bg-light en dark ?
Réponse
bg-body-tertiary s’adapte, bg-light non.
40. Où placer le toggle de thème ?
Réponse
Souvent dans la navbar.
41. Le dark mode nécessite-t-il du Sass ?
Réponse
Non, natif via l’attribut.
42. Les variables --bs-* changent au runtime : avantage dark ?
Réponse
Bascule instantanée sans rebuild.
43. Contraste insuffisant en dark : que faire ?
Réponse
Ajuster les variables -dark / -emphasis.
44. next-themes gère quoi automatiquement ?
Réponse
Persistance, préférence système, anti-flash.
45. Le mode par défaut ?
Réponse
light.
46. Peut-on avoir plus de deux thèmes ?
Réponse
Oui (thèmes nommés).
47. Où lire la préférence système ?
Réponse
window.matchMedia('(prefers-color-scheme: dark)').
48. Le dark mode s’applique-t-il aux tableaux ?
Réponse
Oui (composants adaptatifs).
49. Un thème de marque multi-thèmes en React : moyen simple ?
Réponse
Changer la valeur de data-bs-theme selon l’état.
50. Résumé : color modes = ?
Réponse
Un système de thèmes clair/sombre/custom piloté par data-bs-theme + variables CSS.
Quiz suivant : Quiz 16 — Le JavaScript de Bootstrap.