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

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);
}

: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">

<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;
}

: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;
}

[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 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);
}

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

Sauf mention contraire*, l’article Gestion d’un thème clair/sombre avec des variables CSS css40 et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Gestion d’un thème clair/sombre avec des variables CSS css40

Commentaires