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:

localStorage.clear();

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" />