This Vue component automatically switches themes based on the sunrise and sunset times of the user's location, utilizing Vuetify's theming system. Users can also manually toggle the theme, which disables the automatic switching.

• Automatic Theme Switching: Updates the theme based on real-time sunrise/sunset times.
• Manual Override: Allows users to manually switch themes, disabling automatic switching.
• Vuetify Integration: Seamlessly integrates with Vuetify's theming system.
• Geo-location Support: Uses the browser's geolocation API to determine the user's current coordinates.
• SSR Compatibility: Ensures correct operation in both client and server-side environments.

• Vue 3.x
• Vuetify 3.x
• @mdi/js: Required for icon support.

Install the component via npm:

npm install v-toggle-theme sunrise-sunset-js @mdi/js --save

Ensure Vue 3.x, Vuetify 3.x, and @mdi/js are set up in your project:

npm install vue@next vuetify@next @mdi/js

• themeNameLight (String): Name of the light theme. Default: 'light'.
  • Example: :themeNameLight="'myLightTheme'"
• themeNameDark (String): Name of the dark theme. Default: 'dark'.
  • Example: :themeNameDark="'myDarkTheme'"
• fallbackLocation (Object): Default coordinates if geolocation fails. Default: { lat: 47.36667, lng: 8.55 } (Zurich).
  • Example: :fallbackLocation="{ lat: 40.7128, lng: -74.0060 }" (New York)
• tooltip (Boolean): Enables tooltips. Default: false.
  • Example: :tooltip="true"
• tipDark (String): Tooltip text for dark mode. Default: 'Dark mode'.
  • Example: :tipDark="'Activate dark mode'"
• tipLight (String): Tooltip text for light mode. Default: 'Light mode'.
  • Example: :tipLight="'Activate light mode'"
• automatic (Boolean): Enables automatic theme switching. Default: true.
  • Example: :automatic="false"

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

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

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

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

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

• switchManually: Toggles the theme manually and stops automatic switching.

Customize the switch appearance using Vuetify's button or switch properties. Modify themeNameLight and themeNameDark according to your Vuetify theme settings for deeper integration.

Licensed under the GNU Lesser General Public License as published by the Free Software Foundation, either version 2.1 of the License, or (at your option) any later version.

Thanks to Matt Kane (@ascorbic) for creating the sunrise-sunset-js package, a crucial tool for this project.