VToggleTheme

Intelligent theme switching for Vue and Vuetify.

Our published component combines solar times, system preference and manual selection in a flexible solution for Vuetify applications.

Discuss a project

v3.2.0Vue 3Vuetify 3Nuxt 3SSR

Published npm package

VToggleTheme

A Vue component for intelligent theme switching in Vuetify applications. It switches automatically according to sunrise and sunset, optionally respects the system preference, or allows a manual selection.

Package on npm Source code on GitLab

Decision logic

Automatic and overridable

System preference

With usePreference, the component follows the prefers-color-scheme setting.

Sunrise and sunset

Otherwise it switches automatically using a fixed location and the local time of day.

Manual selection

A manual switch takes priority and stops automatic control.

Features

Built for real Vue and Vuetify projects

VToggleTheme combines automatic theme control with conscious user choice and integrates into existing Vuetify themes.

Automatic switching

Calculates sunrise and sunset in real time and applies the appropriate theme.

Manual override

Users can switch at any time and thereby disable automatic control.

System preference

Supports prefers-color-scheme for the appearance selected in the operating system.

Vuetify integration

Uses Vuetify theming and accepts v-btn properties for customization.

Fixed reference location

Uses configurable coordinates without requesting browser geolocation by default.

SSR and Nuxt 3

Designed for client- and server-side environments as well as Nuxt 3.

Installation and usage

Integrated in a few lines

The package requires Vue 3.5.13 or newer and Vuetify 3.7.5 or newer. sunrise-sunset-js is installed automatically as a dependency.

Installation

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

Composition API example

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

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

The actual user location is not requested by default. The calculation uses the developer-defined fallbackLocation; without one, the coordinates of Zurich are used.

Configuration

The most important properties

Theme names, automatic behavior, reference location, tooltips and icon variant can be adapted to the project through props.

themeNameLight

Name of the light Vuetify theme. Default: light.

themeNameDark

Name of the dark Vuetify theme. Default: dark.

fallbackLocation

Coordinates for solar times. Default: Zurich at 47.36667 / 8.55.

tooltip

Enables tooltips. Default: false.

tipDark

Tooltip text for dark mode. Default: Dark mode.

tipLight

Tooltip text for light mode. Default: Light mode.

automatic

Enables time-based automatic switching. Default: true.

usePreference

Respects the system preference through prefers-color-scheme. Default: false.

mdiJsIcons

Uses inline SVG icons from the MDI JavaScript package instead of the MDI font. Default: false.

Event: switchManually

Manual switching changes the theme and stops automatic control.