Aller au contenu principal

7-4 Dark mode (optionnel)

Cette étape est purement optionnelle, mais le style de l'application, avec le bouton jaune, m'apparait comme étant un bon candidat au dark mode!

Il est facile d'activer le dark mode dans Bootstrap à l'aide d'un attribut data ajouté à la balise <html> du site.

Pour ce faire, ajoutez simplement data-bs-theme="dark" à la balise <html> dans le fichier index.html.

src/index.html
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
  <meta charset="utf-8">
  <title>Houdini</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
attention

Vous devrez possiblement redémarrer le serveur pour que ce changement soit visible.

Redémarrer le serveur et valider dans votre navigateur​

Une fois le serveur redémarré, si nécessaire, vous devriez voir les changements dans votre navigateur!

http://localhost:4200

img

Level Up