VToggleTheme

Cambio tema intelligente per Vue e Vuetify.

Il nostro componente pubblicato combina orari solari, preferenza di sistema e selezione manuale in una soluzione flessibile per applicazioni Vuetify.

Parliamo del progetto

v3.2.0Vue 3Vuetify 3Nuxt 3SSR

Pacchetto npm pubblicato

VToggleTheme

Un componente Vue per il cambio intelligente del tema nelle applicazioni Vuetify. Cambia automaticamente in base ad alba e tramonto, rispetta facoltativamente la preferenza di sistema o consente una selezione manuale.

Pacchetto su npm Codice sorgente su GitLab

Logica decisionale

Automatico e modificabile

Preferenza di sistema

Con usePreference, il componente segue l’impostazione prefers-color-scheme.

Alba e tramonto

Altrimenti cambia automaticamente usando una posizione fissa e l’ora locale.

Selezione manuale

Il cambio manuale ha la priorità e interrompe il controllo automatico.

Funzionalità

Sviluppato per veri progetti Vue e Vuetify

VToggleTheme combina il controllo automatico del tema con una scelta consapevole dell’utente e si integra nei temi Vuetify esistenti.

Cambio automatico

Calcola alba e tramonto in tempo reale e applica il tema appropriato.

Priorità manuale

Gli utenti possono cambiare in qualsiasi momento, disattivando l’automatismo.

Preferenza di sistema

Supporta prefers-color-scheme per l’aspetto scelto nel sistema operativo.

Integrazione Vuetify

Utilizza i temi Vuetify e accetta le proprietà di v-btn per la personalizzazione.

Posizione di riferimento fissa

Usa coordinate configurabili senza richiedere per impostazione predefinita la geolocalizzazione del browser.

SSR e Nuxt 3

Progettato per ambienti client e server e per Nuxt 3.

Installazione e utilizzo

Integrato in poche righe

Il pacchetto richiede Vue 3.5.13 o successivo e Vuetify 3.7.5 o successivo. sunrise-sunset-js viene installato automaticamente.

Installazione

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

Esempio Composition API

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

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

La posizione reale dell’utente non viene richiesta per impostazione predefinita. Il calcolo usa la fallbackLocation definita dallo sviluppatore; in assenza di indicazioni vengono usate le coordinate di Zurigo.

Configurazione

Le proprietà principali

Nomi dei temi, automatismo, posizione di riferimento, tooltip e variante delle icone possono essere adattati tramite props.

themeNameLight

Nome del tema Vuetify chiaro. Predefinito: light.

themeNameDark

Nome del tema Vuetify scuro. Predefinito: dark.

fallbackLocation

Coordinate per gli orari solari. Predefinito: Zurigo, 47.36667 / 8.55.

tooltip

Attiva i tooltip. Predefinito: false.

tipDark

Testo del tooltip per la modalità scura. Predefinito: Dark mode.

tipLight

Testo del tooltip per la modalità chiara. Predefinito: Light mode.

automatic

Attiva il cambio automatico in base all’ora. Predefinito: true.

usePreference

Rispetta la preferenza di sistema tramite prefers-color-scheme. Predefinito: false.

mdiJsIcons

Usa icone SVG inline dal pacchetto JavaScript MDI invece del font MDI. Predefinito: false.

Evento: switchManually

Il cambio manuale modifica il tema e interrompe il controllo automatico.