Les thèmes en CSS

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 12 sur 35.

La création de thèmes en CSS signifie créer une apparence cohérente pour un site web en utilisant des couleurs, des polices et des styles réutilisables. Au lieu de répéter le même code partout, vous définissez votre thème une seule fois (par exemple, en définissant une couleur principale et une couleur d'accentuation) et vous l'appliquez à l'ensemble du site. Cela donne au design un aspect professionnel et unifié.

Comment ça fonctionne :
L'approche la plus courante consiste à utiliser des variables CSS pour définir les valeurs du thème :

:root {
  --primary-color: #4a90e2;
  --secondary-color: #f5a623;
  --font-family: 'Arial, sans-serif';
}

body {
  font-family: var(--font-family);
  color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
  color: white;
}

Défi

Facile

On vous donne un fichier HTML et CSS pour une petite page sur les montagnes et la randonnée. Les variables CSS --primary-color et --secondary-color sont déjà utilisées dans tout le code, un thème est donc déjà en place.

Votre tâche :
Définissez les valeurs de ces variables dans le :root et choisissez de jolies couleurs principales et d'accentuation qui s'harmonisent bien sur cette page.

Aide-mémoire

Le thémage CSS crée un design cohérent en utilisant des couleurs, des polices et des styles réutilisables définis une seule fois et appliqués sur l'ensemble du site.

Utilisez des variables CSS dans le sélecteur :root pour définir les valeurs du thème :

:root {
  --primary-color: #4a90e2;
  --secondary-color: #f5a623;
  --font-family: 'Arial, sans-serif';
}

Appliquez les variables de thème en utilisant var() :

body {
  font-family: var(--font-family);
  color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
  color: white;
}

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Theming in CSS</title>
  <style>
    /* Theming with CSS Variables */
    :root {
     
      --bg-color: #f0c4f8;
      --text-color: #333333;
      --font-family: 'Arial, sans-serif';
    }

    body {
      margin: 0;
      font-family: var(--font-family);
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    header {
      background-color: var(--primary-color);
      color: white;
      padding: 2rem;
      text-align: center;
    }

    header h1 {
      margin: 0;
      font-size: 2rem;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 1rem;
      font-weight: bold;
    }

    main {
      padding: 2rem;
    }

    section {
      margin-bottom: 2rem;
    }

    h2 {
      color: var(--primary-color);
    }

    p {
      line-height: 1.6;
    }

    .highlight {
      color: var(--secondary-color);
      font-weight: bold;
    }

    .button {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background-color: var(--secondary-color);
      color: white;
      text-decoration: none;
      border-radius: 5px;
      margin-top: 1rem;
    }

    footer {
      background-color: var(--primary-color);
      color: white;
      text-align: center;
      padding: 1rem;
    }
  </style>
</head>
<body>

  <header>
    <h1>Mountain Hiking Adventures</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">Trails</a>
      <a href="#">Gear</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Explore the Mountains</h2>
      <p>Discover breathtaking trails, enjoy nature, and challenge yourself with our curated hiking routes. Whether you're a beginner or an expert, there is a path for everyone. <span class="highlight">Adventure awaits!</span></p>
      <a href="#" class="button">Learn More</a>
    </section>

    <section>
      <h2>Essential Gear</h2>
      <p>Prepare for your hikes with the right gear. From backpacks to boots, we provide tips on choosing items that will keep you safe and comfortable. <span class="highlight">Stay prepared!</span></p>
      <a href="#" class="button">Shop Gear</a>
    </section>

    <section>
      <h2>Join Our Community</h2>
      <p>Connect with fellow hikers, share your experiences, and participate in group hikes. Our community is welcoming and supportive for all skill levels. <span class="highlight">Join us today!</span></p>
      <a href="#" class="button">Sign Up</a>
    </section>
  </main>

  <footer>
    &copy; 2025 Mountain Hiking Adventures. All rights reserved.
  </footer>

</body>
</html>