Créer une fonctionnalité de mode sombre avec la bibliothèque Vue.js

Lorsqu’on travaille sur des applications web complexes, il est souvent nécessaire d’offrir à l’utilisateur la possibilité de choisir entre un thème clair et sombre. Dans cet article, nous allons explorer comment créer une fonctionnalité de mode sombre avec la bibliothèque Vue.js.

Pourquoi le mode sombre ?

Le mode sombre peut être utile pour les utilisateurs qui préfèrent une interface utilisateur plus calme ou qui travaillent dans des environnements où la lumière est limitée. De plus, il peut également aider à réduire la consommation d’énergie de l’appareil.

Créer la fonctionnalité de mode sombre

Pour créer la fonctionnalité de mode sombre, nous allons utiliser la bibliothèque Vue.js et ses composants. Nous allons commencer par créer un hook nommé useDarkMode qui sera responsable de gérer l’état du mode sombre.

import { ref } from "vue";

const darkModeActive = ref(false);

const useDarkMode = () => {
  const toggleDarkMode = () => {
    darkModeActive.value = !darkModeActive.value;
  };

  return {
    darkMode: darkModeActive,
    toggleDarkMode,
  };
};

Dans le code ci-dessus, nous créons un hook nommé useDarkMode qui prend en compte l’état du mode sombre. Nous utilisons la fonction ref pour créer une variable de référence nommée darkModeActive et nous la définissons sur false. Ensuite, nous créons une fonction nommée toggleDarkMode qui inverse la valeur de darkModeActive.

Utiliser le hook dans notre application

Pour utiliser le hook useDarkMode, nous allons l’appeler dans notre composant principal.

import { useDarkMode } from './hooks/useDarkMode';

export default {
  name: 'App',
  setup() {
    const { darkMode, toggleDarkMode } = useDarkMode();

    // ...
  },
};

Dans le code ci-dessus, nous appelerons le hook useDarkMode et nous récupérerons les propriétés darkMode et toggleDarkMode.

Intégrer la fonctionnalité de mode sombre dans notre application

Pour intégrer la fonctionnalité de mode sombre dans notre application, nous allons ajouter un bouton qui permettra à l’utilisateur de toggle le mode sombre.

<template>
  <div class="app" :class="{ 'has-background-black': darkMode }">
    <!-- ...
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import ListingsList from './components/ListingsList';

export default {
  name: 'App',
  setup() {
    const store = useStore();
    const { darkMode, toggleDarkMode } = useDarkMode();

    // ...
  },
};
</script>

Dans le code ci-dessus, nous ajoutons un bouton qui permettra à l’utilisateur de toggle le mode sombre.

Conclusion

Dans cet article, nous avons vu comment créer une fonctionnalité de mode sombre avec la bibliothèque Vue.js. Nous avons créé un hook nommé useDarkMode qui était responsable de gérer l’état du mode sombre et nous l’avons intégré dans notre application.

Exercice

Essayez d’ajouter une fonctionnalité de notification pour avertir l’utilisateur lorsque le mode sombre est activé ou désactivé.

Exemples de code

Voici quelques exemples de code qui illustrent les concepts abordés dans cet article.

// Hook useDarkMode.js
import { ref } from "vue";

const darkModeActive = ref(false);

const useDarkMode = () => {
  const toggleDarkMode = () => {
    darkModeActive.value = !darkModeActive.value;
  };

  return {
    darkMode: darkModeActive,
    toggleDarkMode,
  };
};

<!-- Composant App.vue -->
<template>
  <div class="app" :class="{ 'has-background-black': darkMode }">
    <!-- ...
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import ListingsList from './components/ListingsList';

export default {
  name: 'App',
  setup() {
    const store = useStore();
    const { darkMode, toggleDarkMode } = useDarkMode();

    // ...
  },
};
</script>

Je souhaite que cet article vous ait été utile ! Si vous avez des questions ou si vous souhaitez partager vos propres expériences avec la bibliothèque Vue.js, n’hésitez pas à me contacter.