resources/js/Components/ThemeToggle.vue
comes with configured light and dark modes.
Default mode is set to auto
which will respect user’s browser preferences.
If you want to set default mode to light or dark, set VITE_THEME_MODE
in your .env
file to light
or dark
.
When you change the THEME_MODE, clear the local storage to apply the changes
for your browser.
To clear your local storage, open your Console and type this:
Theme toggler is already included in main menu, but you can update the default style to dropdown:
withDefaults(
defineProps<{
display?: "toggle" | "dropdown";
}>(),
{
display: "dropdown", // Change default value from toggle to dropdown
},
);
Or for specific component, while keeping toggle as default:
<ThemeToggle display="dropdown" />