VToggleTheme

Changement de thème intelligent pour Vue et Vuetify.

Notre composant publié associe horaires solaires, préférence système et sélection manuelle dans une solution flexible pour les applications Vuetify.

Discuter d’un projet

v3.2.0Vue 3Vuetify 3Nuxt 3SSR

Paquet npm publié

VToggleTheme

Un composant Vue pour un changement de thème intelligent dans les applications Vuetify. Il change automatiquement selon le lever et le coucher du soleil, respecte facultativement la préférence système ou permet une sélection manuelle.

Paquet sur npm Code source sur GitLab

Logique de décision

Automatique et modifiable

Préférence système

Avec usePreference, le composant suit le réglage prefers-color-scheme.

Lever et coucher du soleil

Sinon, il change automatiquement à partir d’une position fixe et de l’heure locale.

Sélection manuelle

Un changement manuel est prioritaire et arrête le contrôle automatique.

Fonctionnalités

Conçu pour de vrais projets Vue et Vuetify

VToggleTheme associe le contrôle automatique des thèmes au choix conscient de l’utilisateur et s’intègre aux thèmes Vuetify existants.

Changement automatique

Calcule en temps réel le lever et le coucher du soleil et applique le thème adapté.

Priorité manuelle

Les utilisateurs peuvent changer à tout moment et désactiver ainsi l’automatisme.

Préférence système

Prend en charge prefers-color-scheme pour l’affichage choisi dans le système d’exploitation.

Intégration Vuetify

Utilise le système de thèmes Vuetify et accepte les propriétés de v-btn pour la personnalisation.

Position de référence fixe

Utilise des coordonnées configurables sans demander par défaut la géolocalisation du navigateur.

SSR et Nuxt 3

Conçu pour les environnements client et serveur ainsi que pour Nuxt 3.

Installation et utilisation

Intégré en quelques lignes

Le paquet nécessite Vue 3.5.13 ou plus récent et Vuetify 3.7.5 ou plus récent. sunrise-sunset-js est installé automatiquement.

Installation

npm install v-toggle-theme @mdi/js
npm install vue@^3.5.13 vuetify@^3.7.5

Exemple Composition API

<script setup>
import VToggleTheme from 'v-toggle-theme'
</script>

<template>
  <v-toggle-theme
    color="primary"
    :tooltip="true"
    :use-preference="true"
  />
</template>

La position réelle de l’utilisateur n’est pas demandée par défaut. Le calcul utilise la fallbackLocation définie par le développeur ; sans indication, les coordonnées de Zurich sont utilisées.

Configuration

Les propriétés essentielles

Les noms de thèmes, l’automatisme, la position de référence, les infobulles et la variante d’icônes s’adaptent au projet via les props.

themeNameLight

Nom du thème Vuetify clair. Par défaut : light.

themeNameDark

Nom du thème Vuetify sombre. Par défaut : dark.

fallbackLocation

Coordonnées pour les horaires solaires. Par défaut : Zurich, 47.36667 / 8.55.

tooltip

Active les infobulles. Par défaut : false.

tipDark

Texte de l’infobulle du mode sombre. Par défaut : Dark mode.

tipLight

Texte de l’infobulle du mode clair. Par défaut : Light mode.

automatic

Active le changement automatique selon l’heure. Par défaut : true.

usePreference

Respecte la préférence système via prefers-color-scheme. Par défaut : false.

mdiJsIcons

Utilise les icônes SVG du paquet JavaScript MDI au lieu de la police MDI. Par défaut : false.

Événement : switchManually

Le changement manuel modifie le thème et arrête le contrôle automatique.