Comment : Changer le mode sombre à l'aide de TailwindCSS + Vue3 + Vite
Je suis débutant dans Vite/Vue3 et actuellement je suis confronté à un problème où j'ai besoin des connaissances combinées de la communauté.
J'ai créé une application Vite/Vue3 et installé TailwindCSS :
npm create vite@latest my-vite-vue-app -- --template vue cd my-vite-vue-app npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
Ensuite, j'ai suivi les instructions sur la page d'accueil de Tailwind :
Ajoutez les chemins de tous les fichiers modèles dans le fichier tailwind.config.js.
Importez le fichier ./src/index.css nouvellement créé dans le fichier ./src/main.js.
Créez un fichier ./src/index.css et ajoutez la couche Tailwind de la directive @tailwind à chaque fichier.
Maintenant, j'ai une application Vite/Vue3/TailwindCSS en cours d'exécution et je souhaite ajouter la possibilité de basculer en mode sombre.
La documentationTailwind indique que cela peut être fait en le marquant avec darkMode: 'class' 添加到 tailwind.config.js 来存档，然后将类 dark 切换为 <html>.
J'ai fait le travail en utilisant le code suivant :
- Interneindex.html
<html lang="en" id="html-root">
(...)
<body class="antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
- About.vue interne
<template>
<div>
<h1>This is an about page</h1>
<button @click="toggleDarkMode">Toggle</botton>
</div>
</template>
<script>
export default {
methods: {
toggleDarkMode() {
const element = document.getElementById('html-root')
if (element.classList.contains('dark')) {
element.classList.remove('dark')
} else {
element.classList.add('dark')
}
},
},
};
</script>
Oui, je sais que ce n'est pas du code de style Vue3. Et oui, je sais que c'est possible d'utiliser element.classList.toggle() 而不是 .remove() 和 .add() . Mais peut-être que d'autres débutants comme moi verront cela à l'avenir et apprécieront un code simple pour commencer. Alors s'il vous plaît, ayez pitié...
Maintenant, j'ai enfin une question à poser à la communauté :
Je sais que manipuler le DOM comme ça n'est pas la façon de faire de Vue. Bien sûr, je veux atteindre mes objectifs de la bonne manière. Mais que dois-je faire ?
Croyez-moi, j'ai cherché sur Google pendant des heures et je n'ai pas trouvé de solution qui fonctionne sans installer this et this et this modules npm supplémentaires.
Mais je voulais une approche minimaliste. Compter sur le moins possible pour ne pas me submerger ni submerger les autres qui souhaitent commencer à apprendre.
Avec ceci en toile de fond, avez-vous une solution qui fonctionnerait pour moi et pour d'autres débutants ? :-)
