It's like having a magic wand for your website's vibe. With the Theme Selector, users can switch between a cool dark theme or a bright light theme, depending on their mood or preference. It's like having the power to change the ambiance of your digital space with just a click!
Before start using the theme selectors you would need to include this script to be able to switch the theme globally
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>php artisan spur:add interactives/theme-toggle forms/toggle
If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.
"components": [
'interactives/theme-toggle',
'forms/toggle',
]If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component
<x-spur.theme-toggle />php artisan spur:add interactives/theme-button essentials/button
If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.
"components": [
'interactives/theme-button',
'essentials/button',
]If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component
<x-spur.theme-button lightClasses="text-brand-yellow" darkClasses="text-indigo-400" />php artisan spur:add interactives/theme-selector interactives/dropdown interactives/dropdown-option essentials/button
If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.
"components": [
'interactives/theme-selector',
'interactives/dropdown',
'interactives/dropdown-option',
'essentials/button',
]If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component
<x-spur.theme-button lightClasses="text-brand-yellow" darkClasses="text-indigo-400" />