VToggleTheme

Intelligenter Theme-Wechsel für Vue und Vuetify.

Unsere veröffentlichte Komponente verbindet Sonnenzeiten, Systempräferenz und manuelle Auswahl in einer flexiblen Lösung für Vuetify-Anwendungen.

Projekt besprechen

v3.2.0Vue 3Vuetify 3Nuxt 3SSR

Veröffentlichtes npm-Paket

VToggleTheme

Eine Vue-Komponente für intelligentes Theme-Switching in Vuetify-Anwendungen. Sie wechselt automatisch nach Sonnenauf- und -untergang, berücksichtigt optional die Systempräferenz oder erlaubt eine manuelle Auswahl.

Paket auf npm Quellcode auf GitLab

Entscheidungslogik

Automatisch und übersteuerbar

Systempräferenz

Mit usePreference folgt die Komponente der Einstellung von prefers-color-scheme.

Sonnenauf- und -untergang

Andernfalls wird anhand einer festgelegten Position und der lokalen Tageszeit automatisch gewechselt.

Manuelle Auswahl

Eine manuelle Umschaltung hat Vorrang und beendet die automatische Steuerung.

Funktionsumfang

Für reale Vue- und Vuetify-Projekte entwickelt

VToggleTheme verbindet automatische Theme-Steuerung mit einer bewussten Nutzerentscheidung und lässt sich in bestehende Vuetify-Themes integrieren.

Automatische Umschaltung

Berechnet Sonnenauf- und -untergang in Echtzeit und setzt das passende Theme.

Manuelle Übersteuerung

Nutzer können jederzeit selbst umschalten und damit die Automatik deaktivieren.

Systempräferenz

Unterstützt prefers-color-scheme für die im Betriebssystem gewählte Darstellung.

Vuetify-Integration

Verwendet das Vuetify-Theming und akzeptiert Eigenschaften von v-btn zur Anpassung.

Feste Referenzposition

Nutzt konfigurierbare Koordinaten, ohne standardmäßig die Browser-Geolocation abzufragen.

SSR und Nuxt 3

Ist für client- und serverseitige Umgebungen sowie Nuxt 3 ausgelegt.

Installation und Verwendung

Mit wenigen Zeilen eingebunden

Das Paket benötigt Vue 3.5.13 oder neuer und Vuetify 3.7.5 oder neuer. sunrise-sunset-js wird automatisch als Abhängigkeit installiert.

Installation

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

Composition-API-Beispiel

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

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

Standardmäßig wird keine tatsächliche Nutzerposition abgefragt. Die Berechnung verwendet die vom Entwickler festgelegte fallbackLocation; ohne Angabe gelten die Koordinaten von Zürich.

Konfiguration

Die wichtigsten Eigenschaften

Theme-Namen, Automatik, Referenzposition, Tooltips und Icon-Variante lassen sich über Props an das Projekt anpassen.

themeNameLight

Name des hellen Vuetify-Themes. Standard: light.

themeNameDark

Name des dunklen Vuetify-Themes. Standard: dark.

fallbackLocation

Koordinaten für die Sonnenzeiten. Standard: Zürich mit 47.36667 / 8.55.

tooltip

Aktiviert Tooltips. Standard: false.

tipDark

Tooltip-Text für den Dunkelmodus. Standard: Dark mode.

tipLight

Tooltip-Text für den Hellmodus. Standard: Light mode.

automatic

Aktiviert die zeitabhängige Automatik. Standard: true.

usePreference

Berücksichtigt die Systempräferenz über prefers-color-scheme. Standard: false.

mdiJsIcons

Verwendet Inline-SVG-Icons aus dem MDI-JavaScript-Paket anstelle der MDI-Schrift. Standard: false.

Ereignis: switchManually

Die manuelle Umschaltung wechselt das Theme und beendet die automatische Steuerung.