Nous publions la deuxième partie d'une série d'articles sur la création d'un blog moderne avec Nuxt.js. Aujourd'hui, nous allons implémenter le thème sombre dans l'application que nous avons écrite avec vous dans la première partie .
Veuillez noter que le code de chaque partie se trouve dans son propre fil de discussion sur Github et que la
master
version de l'application du dernier article publié est disponible.
Qu'est-ce que le thème sombre?
Un thème sombre est un jeu de couleurs pour toute interface qui affiche du texte clair et des éléments d'interface sur un fond sombre, ce qui facilite l'affichage de l'écran sur les téléphones mobiles, les tablettes et les ordinateurs dans des conditions de faible luminosité. Le thème sombre réduit la lumière émise par l'écran tout en conservant le rapport de contraste de couleur minimum nécessaire à la lisibilité.
Le thème sombre améliore l'ergonomie visuelle en réduisant la fatigue oculaire en ajustant l'écran en fonction des conditions d'éclairage actuelles et en offrant une facilité d'utilisation la nuit ou dans l'obscurité.
Gardez également à l'esprit que l'utilisation du thème sombre dans les applications Web et mobiles peut prolonger la durée de vie de la batterie de votre appareil. Google a confirmé que le thème sombre sur les écrans OLED est très utile pour prolonger la durée de vie de la batterie.
@ nuxtjs / mode couleur
Pour implémenter le thème sombre, nous utiliserons le module @ nuxtjs / color-mode , qui offre les fonctionnalités suivantes:
- Ajoute une classe
.${color}-mode
à la balise<html>
pour faciliter la gestion des thèmes CSS - fonctionne dans n'importe quel mode
Nuxt
(static
,ssr
ouspa
); - détecte automatiquement le mode couleur du système sur l'appareil de l'utilisateur et peut définir le thème approprié en fonction de ces données;
- vous permet de synchroniser le thème sélectionné entre les onglets et les fenêtres;
- vous permet d'utiliser les thèmes implémentés pour des pages individuelles plutôt que pour l'ensemble de l'application (idéal pour le développement incrémental);
- le module prend également en charge IE9 + (je ne suis pas sûr que cela soit toujours pertinent dans le développement moderne, mais cela pourrait être utile à quelqu'un).
Tout d'abord, installons le module:
npm i --save-dev @nuxtjs/color-mode
Et puis ajoutez des informations sur ce module à la section
buildModules
du fichier
nuxt.config.js
:
{
buildModules: [
'@nuxtjs/color-mode'
]
}
Bien! Maintenant, si nous exécutons notre application et ouvrons un onglet
Elements
dans la console développeur, nous verrons qu'une
html
classe a été ajoutée à la balise qui correspond au thème du système d'exploitation, par exemple, dans notre cas
class="light-mode"
.
Sélecteur de thème
Dans l'étape suivante, implémentons un commutateur qui changera le thème sombre en thème clair et vice versa.
Si nous regardons la conception de notre application dans Figma, nous pouvons voir qu'à côté du sélecteur de thème se trouve également un sélecteur de langue, que nous implémenterons dans l'un des prochains articles de cette série.
Écrivons immédiatement un composant wrapper qui encapsulera ces commutateurs et sera responsable des marges avant les autres composants.
Pour ce faire, créez un composant
AppOptions
avec le contenu suivant:
<template lang="pug">
section.section
.content
.app-options
switcher-color-mode
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'AppOptions',
})
</script>
<style lang="scss" scoped>
.app-options {
display: flex;
margin-top: 24px;
}
</style>
Component sur Github .
Comme nous pouvons le voir, il n'y a pas de logique dans ce composant, il définit simplement des marges pour les composants imbriqués. Maintenant, nous n'avons qu'un seul composant imbriqué
switcher-color-mode
, implémentons-le.
Jetons un coup d'œil à la section de
script
ce composant:
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'SwitcherColorMode',
computed: {
icon() {
return (this as any).$colorMode.value === 'light'
? 'assets/icons/sun.svg'
: 'assets/icons/moon.svg'
},
},
methods: {
changeColorMode() {
;(this as any).$colorMode.preference =
(this as any).$colorMode.value === 'light' ? 'dark' : 'light'
},
},
})
</script>
Nous implémentons ici une méthode
changeColorMode
qui change de thème dans l'objet fourni par le module
@nuxtjs/color-mode
.
Lorsque la valeur est modifiée
$colorMode.preference
, la classe correspondante de la balise sera également définie
html
:
class="light-mode"
ou
class="dark-mode"
.
De plus, il existe une propriété calculée
icon
qui renvoie l'icône dont nous avons besoin, en fonction du thème sélectionné. Veuillez noter que pour fonctionner correctement, vous devez ajouter des icônes
sun.svg
et un
moon.svg
répertoire
assets/icons
.
Le modèle de composant ressemblera à ceci:
<template lang="pug">
button(@click="changeColorMode")
img(
alt="theme-icon"
:src="getDynamicFile(icon)"
)
</template>
Tout est assez simple ici! Nous avons un bouton, lorsque nous cliquons sur lequel nous appelons une méthode
changeColorMode
et changeons notre thème. À l'intérieur du bouton, nous montrons une image du thème sélectionné.
Component sur Github .
Il ne reste plus qu'à ajouter ce composant à la page principale de notre application. Après cela, le modèle de page devrait ressembler à ceci:
<template lang="pug">
.page
section-header(
title="Nuxt blog"
subtitle="The best blog you can find on the global internet"
)
app-options
post-list
</template>
Gestion des variables
Comme vous vous en souvenez peut-être dans la première partie, nous avons utilisé des
scss
variables pour définir toutes les couleurs de l'application , et il ne nous reste plus qu'à changer les valeurs de ces variables en fonction du thème choisi.
Mais le problème est que les
scss
variables sont définies une fois lors de la construction de l'application, et à l'avenir, nous ne pouvons pas les redéfinir lors du changement de thème.
Cette limitation peut être contournée avec l'aide
js
, mais il existe une solution beaucoup plus simple: nous pouvons utiliser des
css
variables natives .
Maintenant dans notre fichier avec des variables, la
assets/styles/variables.scss
section avec des couleurs ressemble à ceci:
// colors
$text-primary: rgb(22, 22, 23);
$text-secondary: rgb(110, 109, 122);
$line-color: rgb(231, 231, 233);
$background-color: rgb(243, 243, 244);
$html-background-color: rgb(255, 255, 255);
Définissons d'abord deux schémas de couleurs dans le même fichier - clair et foncé - à l'aide de
css
variables:
:root {
// light theme
--text-primary: rgb(22, 22, 23);
--text-secondary: rgb(110, 109, 122);
--line-color: rgb(231, 231, 233);
--background-color: rgb(243, 243, 244);
--html-background-color: rgb(255, 255, 255);
// dark theme
&.dark-mode {
--text-primary: rgb(250, 250, 250);
--text-secondary: rgb(188, 187, 201);
--line-color: rgb(45, 55, 72);
--background-color: rgb(45, 55, 72);
--html-background-color: rgb(26, 32, 44);
}
}
Nous avons défini les
css
variables dans le sélecteur
:root
. Par défaut, une
css
variable est spécifiée et utilisée avec un préfixe
--
. En savoir plus
sur la
css
pseudo- classe
:root
sur MDN et W3Schools . Citation de
MDN
: La
css
pseudo-classe
:root
trouve l'élément racine de l'arborescence du document. S'applique au HTML,
:root
trouve une balise
html
et est identique au sélecteur de balises html, mais sa spécificité est plus élevée.
Comme nous pouvons le voir, ces couleurs qui étaient auparavant écrites directement dans
scss
les variables sont maintenant spécifiées dans les
css
variables comme valeurs par défaut, et si une classe est présente,
.dark-mode
ces valeurs sont remplacées.
Maintenant, nos
scss
variables de couleur ressembleront à ceci:
$text-primary: var(--text-primary);
$text-secondary: var(--text-secondary);
$line-color: var(--line-color);
$background-color: var(--background-color);
$html-background-color: var(--html-background-color);
Lors du changement de thème, le jeu de couleurs changera en fonction des valeurs données et nous n'avons pas besoin de changer quoi que ce soit dans les composants déjà implémentés.
Conclusion
Grâce à cet article, nous avons appris à implémenter un thème sombre pour une application Nuxt.js.
Avez-vous réussi à terminer toutes les étapes? Pensez-vous que le thème sombre n'est qu'un battage médiatique ou est-ce une nécessité? Partagez votre opinion dans les commentaires.
Liens vers les matériaux requis: