Skip to content

Palettes et fonds ​

Les neuf palettes ​

Les noms restent numériques pour que d’autres thèmes puissent réutiliser les mêmes classes avec leurs propres couleurs. Chaque palette définit un fond, une couleur de texte, un accent et les couleurs des cartes.

ClasseRôleTexte principalFond des cartes
color-1Neutre claire, défautMarinePapier chaud
color-2Sombre avec accent orangeBlancBleu sombre
color-3Couleur orange dominanteMarinePapier chaud
color-4Claire teintéeMarineBlanc
color-5Sombre monochromeBlancBleu sombre
color-6Positive claireMarineBlanc
color-7Alerte claireMarineBlanc
color-8Positive sombreBlancVert sombre
color-9Alerte sombreBlancPrune sombre

Une seule palette par slide. Les couleurs ci-dessous sont celles du thème DWA ; un thème d’organisation les remplace par sa propre charte.

Les fonds sont choisis par le layout ​

Vous ne choisissez pas de fond : le layout et la composition le font pour vous.

Layout ou compositionFond
title, calloutintro
closingcloser
toc, chart-wideintermediate
chapterheader1, header2 ou header3 selon la palette
content simplecontent ou content-inverted
content cols-2content-2col
content cols-3 à cols-6content-right
image-text[-N]content-right ou content-inverted-right
text-image[-N]content-left ou content-inverted-left
gallery, timeline, timeline-verticallowerband
gallery-bento, image-fit, image-fullrightband

Le nom des fonds est un détail interne du thème. Les anciennes classes bg-1 à bg-15 ne font plus partie du langage.

Les chapitres selon la palette ​

Les palettes 1 et 4 utilisent header1 (bleu) ; 2, 5, 6 et 8 utilisent header2 (beige/gris) ; 3, 7 et 9 utilisent header3 (violet). La teinte de la palette est appliquée ensuite.

Limite connue : les teintes superposées ​

Le thème DWA actuel applique le fond en deux couches :

css
background-image:
  linear-gradient(var(--wash), var(--wash)),
  var(--layout-art);

--wash est transparent par défaut, mais plusieurs palettes le redéfinissent. Une teinte orange sur header3 rend visuellement le violet saumon ; une teinte rouge pâle peut le rendre rose. Vous pouvez le constater sur les chapitres ci-dessus.

Le comportement souhaité est de conserver les couleurs originales des fonds de chapitre. Supprimer seulement la teinte ne suffit pas : les palettes sombres ont un texte blanc, alors que certains fonds originaux sont clairs. La correction doit traiter ensemble le fond et la lisibilité ; elle n’est pas encore livrée.

Documentation du langage DWA Core v1, de l’extension VS Code, du CLI et du portail des thèmes.