Im Fokus

Bewusstsein für gesunden Schlaf fördern

In unserer ständig vernetzten Welt leiden immer mehr Menschen unter Schlaflosigkeit. Ein signifikanter Faktor dafür ist das erhöhte nächtliche Surfverhalten, bei dem wir bis spät in die Nacht vor Bildschirmen verweilen. Bildschirme von Computern, Smartphones und Fernsehern emittieren eine hohe Menge an blauem Licht, welches die Produktion von Melatonin, dem Schlafhormon, hemmt. Dies verzögert unseren natürlichen Schlafrhythmus und erschwert das Einschlafen.
Technologie-Giganten wie Apple und Microsoft haben die Notwendigkeit erkannt, uns vor den negativen Auswirkungen von blauem Licht zu schützen und führen daher in ihren Betriebssystemen einen Nachtmodus ein. Dieser Modus stellt die Bildschirmfarben auf wärmere Gelbtöne um, was von Studien als augenfreundlicher und schlaffördernder bewertet wird.
Inspiriert von dieser wichtigen Funktion haben wir ein innovatives npm-Paket entwickelt. Dieses Modul aktiviert automatisch den Nachtmodus auf Webseiten, sobald die Sonne untergeht, basierend auf dem Standort des Nutzers. Dies sorgt für eine zeitgemäße Anpassung an die örtliche Zeitzone und fördert somit ein gesünderes digitales Umfeld.
Mit bereits über 750 Downloads zeigt sich, dass immer mehr Website-Betreiber die Bedeutung eines gesunden Schlafzyklus erkennen und entsprechende Funktionen in ihre Seiten integrieren. Unser Modul, VToggleTheme, ist kostenlos verfügbar und kann über den folgenden Link heruntergeladen werden: npm VToggleTheme
Nutzen Sie die Gelegenheit, die digitale Gesundheit Ihrer Nutzer zu verbessern und tragen Sie zu einem bewussteren Umgang mit Technologie bei.

VToggleTheme: Theme Switcher Komponente

Diese Vue-Komponente wechselt automatisch zwischen Themes basierend auf den Sonnenauf- und -untergangszeiten am Standort des Benutzers und nutzt das Theming-System von Vuetify. Benutzer können das Theme auch manuell umschalten, was das automatische Wechseln deaktiviert.

Funktionen

Automatisches Theme-Wechseln
Aktualisiert das Theme basierend auf den Echtzeit-Sonnenauf- und -untergangszeiten.
Manuelle Überschreibung
Ermöglicht es Benutzern, Themes manuell zu wechseln und deaktiviert das automatische Wechseln.
Vuetify-Integration
Integriert sich nahtlos in das Theming-System von Vuetify.
Geo-Lokalisierung Unterstützung
Nutzt die Geolokalisierungs-API des Browsers, um die aktuellen Koordinaten des Benutzers zu bestimmen.
SSR-Kompatibilität
Stellt sicher, dass es sowohl in Client- als auch in Server-seitigen Umgebungen korrekt funktioniert.

Anforderungen

Vue 3.x
Vuetify 3.x
@mdi/js
Erforderlich für die Unterstützung von Symbolen.

Installation

Installieren Sie die Komponente über npm:
npm install v-toggle-theme sunrise-sunset-js @mdi/js --save
Stellen Sie sicher, dass Vue 3.x, Vuetify 3.x und @mdi/js in Ihrem Projekt eingerichtet sind:
npm install vue@next vuetify@next @mdi/js

Verwendung (Properties)

themeNameLight
(String): Name des hellen Themes. Standard: 'light'. Beispiel: :themeNameLight="'myLightTheme'"
themeNameDark
(String): Name des dunklen Themes. Standard: 'dark'. Beispiel: :themeNameDark="'myDarkTheme'"
fallbackLocation
(Object): Standardkoordinaten, falls die Geolokalisierung fehlschlägt. Standard: { lat: 47.36667, lng: 8.55 } (Zürich). Beispiel: :fallbackLocation="{ lat: 40.7128, lng: -74.0060 }" (New York)
tooltip
(Boolean): Aktiviert Tooltips. Standard: false. Beispiel: :tooltip="true"
tipLight
(String): Tooltip-Text für den Hellmodus. Standard: 'Hellmodus'. Beispiel: :tipLight="'Hellmodus aktivieren'"
tipDark
(String): Tooltip-Text für den Dunkelmodus. Standard: 'Dunkelmodus'. Beispiel: :tipDark="'Dunkelmodus aktivieren'"
automatic
(Boolean): Aktiviert das automatische Theme-Wechseln. Standard: true. Beispiel: :automatic="false"

Integration

Options API

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

<script>
  import VToggleTheme from 'v-toggle-theme';

  export default {
    components: {
      VToggleTheme
    }
  }
</script>

Composition API

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

<script>
  import VToggleTheme from 'v-toggle-theme';

  export default {
    components: {
      VToggleTheme
    }
  }
</script>

Ereignisse

switchManually: Schaltet das Theme manuell um und stoppt das automatische Wechseln.

Anpassung

Passen Sie das Aussehen des Switches an, indem Sie Vuetifys Button- oder Switch-Eigenschaften verwenden. Ändern Sie `themeNameLight` und `themeNameDark` entsprechend Ihrer Vuetify-Theme-Konfiguration für eine tiefere Integration.

Lizenz

Lizenziert unter der GNU Lesser General Public License, wie sie von der Free Software Foundation veröffentlicht wurde, entweder Version 2.1 der Lizenz oder (nach Ihrer Wahl) jede spätere Version.

Danksagungen

Ein besonderer Dank geht an Matt Kane (@ascorbic) für die Erstellung des sunrise-sunset-js Pakets, ein entscheidendes Werkzeug für dieses Projekt.
OpenText WSM Plug-ins
Entdecken Sie die Elite unserer Plug-ins, die Ihre Effizienz steigern
13 sec
OpenText WSM Plug-ins
Auf unserer speziellen Plug-ins-Seite haben wir eine exklusive Auswahl unserer effektivsten und innovativsten Plug-ins für OpenText WSM zusammengestellt. Diese sorgfältig kuratierte Sammlung repräsentiert das Beste aus unserem umfangreichen Angebot und ist darauf ausgerichtet, die Effizienz und Benutzerfreundlichkeit für Administratoren und Redakteure maßgeblich zu verbessern.
Ereignis- & Feiertage
St. Gallen2024
In dem angegebenen Zeitraum sind leider keine Ereignisse vorhanden.