Laravel 10 light mode

Hi, I just installed a fresh laravel 10, and it come with a default dark theme, i am searching in how to switch to light mode, but all i can find is that i have to add darkMode: 'class', in tailwind.config.js file, but it doesnt have any effect, tried modified the app.blade.php adding classes to html and body tag, but cant find a straight way. Not sure if it is a different way depending of the js library installed, like vue or alpine. Can anyone helpe meto a straight way to figure this out? thank you in advance

martinbean

2 years ago

Level 80

@crodgt The welcome page picks up the theme colour preference from your system. You’re seeing “dark mode” because you have your OS colour preference set to a dark mode equivalent.

gych

2 years ago

Level 29

By default this follows your browser preference.

If you want to be able to change this with for example a button you can set a color-theme in localStorage.

localStorage.setItem('color-theme', 'light'); // Use light theme
localStorage.setItem('color-theme', 'dark'); // Use dark theme

Add this to your blade file to apply the desired color theme

        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark')
        }
``

1 like

Please or to participate in this conversation.