De retour sur la terre ferme. Passez votre blog du jour à la nuit, aucune île nécessaire !

Maintenant que vous savez comment créer des îles Astro pour des éléments interactifs, n’oubliez pas que vous pouvez aller assez loin avec seulement du JavaScript et du CSS !

Construisons une icône cliquable pour permettre à vos utilisateurs de basculer entre le mode clair ou sombre en utilisant une autre balise <script> pour l’interactivité… sans envoyer de JavaScript de framework au navigateur.

Préparez-vous à…

• Créez un interrupteur de thème interactif avec seulement JavaScript et CSS
• Envoyez le moins de JavaScript possible au navigateur !

Ajoutez et stylisez une icône de bascule de thème

Titre de la section Ajoutez et stylisez une icône de bascule de thème

1. Créez un nouveau fichier à src/components/ThemeIcon.astro et collez le code suivant dedans :

   src/components/ThemeIcon.astro

   ---
   ---
   <button id="themeToggle">
     <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
       <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
       <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
     </svg>
   </button>
   
   <style>
     #themeToggle {
       border: 0;
       background: none;
     }
     .sun { fill: black; }
     .moon { fill: transparent; }
   
     :global(.dark) .sun { fill: transparent; }
     :global(.dark) .moon { fill: white; }
   </style>

2. Ajoutez l’icône à Header.astro de manière à ce qu’elle soit affichée sur toutes les pages. N’oubliez pas d’importer le composant.

   src/components/Header.astro

   ---
   import Hamburger from './Hamburger.astro';
   import Navigation from './Navigation.astro';
   import ThemeIcon from './ThemeIcon.astro';
   ---
   <header>
     <nav>
       <Hamburger />
       <ThemeIcon />
       <Navigation />
     </nav>
   </header>

3. Visitez votre aperçu dans le navigateur à l’adresse http://localhost:4321 pour voir l’icône désormais sur toutes vos pages. Vous pouvez essayer de cliquer dessus, mais vous n’avez pas encore écrit de script pour la rendre interactive.

Ajoutez des styles CSS pour un thème sombre

Titre de la section Ajoutez des styles CSS pour un thème sombre

Choisissez quelques couleurs alternatives à utiliser en mode sombre.

1. Dans global.css, définissez quelques styles sombres. Vous pouvez choisir les vôtres ou copier-coller :

   src/styles/global.css

   html.dark {
     background-color: #0d0950;
     color: #fff;
   }
   
   .dark .nav-links a {
     color: #fff;
   }

Ajoutez de l’interactivité côté client

Titre de la section Ajoutez de l’interactivité côté client

Pour ajouter de l’interactivité à un composant Astro, vous pouvez utiliser une balise <script>. Ce script peut vérifier et définir le thème actuel à partir de localStorage et basculer le thème lorsque l’icône est cliquée.

1. Ajoutez la balise <script> suivante dans src/components/ThemeIcon.astro après votre balise <style> :

   src/components/ThemeIcon.astro

   <style>
     .sun { fill: black; }
     .moon { fill: transparent; }
   
     :global(.dark) .sun { fill: transparent; }
     :global(.dark) .moon { fill: white; }
   </style>
   
   <script is:inline>
     const theme = (() => {
       if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
         return localStorage.getItem('theme');
       }
       if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         return 'dark';
       }
         return 'light';
     })();
   
     if (theme === 'light') {
       document.documentElement.classList.remove('dark');
     } else {
       document.documentElement.classList.add('dark');
     }
   
     window.localStorage.setItem('theme', theme);
   
     const handleToggleClick = () => {
       const element = document.documentElement;
       element.classList.toggle("dark");
   
       const isDark = element.classList.contains("dark");
       localStorage.setItem("theme", isDark ? "dark" : "light");
     }
   
     document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
   </script>

2. Vérifiez votre aperçu dans le navigateur à http://localhost:4321 et cliquez sur l’icône du thème. Vérifiez que vous pouvez basculer entre les modes clair et sombre.

Testez vos connaissances

Titre de la section Testez vos connaissances

Choisissez si chacune des affirmations suivantes décrit des balises <script> Astro, des composants de framework UI, ou les deux.

1. Ils vous permettent d’inclure des éléments d’interface utilisateur interactifs sur votre site web.

   1. Balises <script> Astro

   2. Composants de framework UI

   3. les deux

   Envoyer

2. Ils créeront des éléments statiques sur votre site sauf si vous incluez un client: pour envoyer leur JavaScript au client et le faire s’exécuter dans le navigateur.

   1. Balises <script> Astro

   2. Composants de framework UI

   3. les deux

   Envoyer

3. Ils vous permettent de “tester” un nouveau framework sans vous obliger à démarrer un tout nouveau projet utilisant cette pile technologique.

   1. Balises <script> Astro

   2. Composants de framework UI

   3. les deux

   Envoyer

4. Ils vous permettent de réutiliser du code que vous avez écrit dans d’autres frameworks et vous pouvez souvent les intégrer directement dans votre site.

   1. Balises <script> Astro

   2. Composants de framework UI

   3. les deux

   Envoyer

5. Ils vous permettent d’ajouter de l’interactivité sans avoir besoin de connaître ou d’apprendre d’autres frameworks JavaScript.

   1. Balises <script> Astro

   2. Composants de framework UI

   3. les deux

   Envoyer

Liste de contrôle

Titre de la section Liste de contrôle

• Je peux utiliser JavaScript pour l’interactivité lorsque je ne veux pas ajouter de framework.

Ressources

Titre de la section Ressources

• Balises <script> côté client dans Astro