Gestion d'un thème clair/sombre avec des variables CSS [css40]

Cet exercice consiste à modifier un thème fourni afin de pouvoir gérer une version sombre et une version claire à l’aide de variables CSS.

Créez un dossier racine intitulé exo-css40.

Téléchargez les fichiers de travail en cliquant sur le bouton ci-dessous et placez-les dans votre dossier racine.

Fichiers de travail

Aide pour télécharger un fichier :
– Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
– Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.

Listez les couleurs utilisées et remplacez-les par des variables CSS équivalentes.

:root {
  --color-background: #fff;
  --color-text: #333;
  --color-primary: #2ca84d;
  --color-secondary: #0c6624;
  --color-grey: #ccc;
}

body {
  font-family: Roboto, sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
}

Déclarez un thème sombre au corps de la page en lui ajoutant une classe ou un attribut de donnée. Cela n’a pour le moment aucun effet visible.

<body data-theme="dark">

ou

<body class="theme-dark">

Créez une copie des variables et associez-les au thème sombre via la classe ou l’attribut de donnée que vous lui avez appliqué.

:root, [data-theme="light"] {
  --color-background: #fff;
  --color-text: #333;
  --color-primary: #2ca84d;
  --color-secondary: #0c6624;
  --color-grey: #ccc;
}
[data-theme="dark"] {
  --color-background: #fff;
  --color-text: #333;
  --color-primary: #2ca84d;
  --color-secondary: #0c6624;
  --color-grey: #ccc;
}

Modifiez les variables du thème sombre pour obtenir un résultat correspondant à l’illustration suivante :

[data-theme="dark"] {
  --color-background: #333;
  --color-text: #eee;
  --color-primary: #bd2130;
  --color-secondary: #660811;
  --color-grey: #111;
}

Essayez d’appliquer votre thème sombre sur le premier article plutôt que sur la page complète. Si cela ne fonctionne pas correctement, corrigez votre code CSS pour que cela marche.

<article data-theme="dark">

article {
  display: flex;
  gap: 2rem;
  max-width: 1200px;
  padding: 2rem;
  margin: 4rem auto;
  background-color: var(--color-background);
  color: var(--color-text);
}