How can I Switch Laravel Breeze from Dark Mode to Light Mode without reinstalling laravel Breeze?

235 Views Asked by At

I using Laravel Framework 10.43.0. and installing Laravel Breeze and answer yes when support Dark Mode. How can I change to light mode?

I have try to put darkMode: 'class' in tailwind.config.js but it didn't work. This is my tailwind.config.js

export default {
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ["Figtree", ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
    darkMode: "class",
};
2

There are 2 best solutions below

1
Coconut On

Change darkMode: "class" to darkMode: 'false'. It worked for me.

1
SeyT On

ensure that the class name dark is not applied earlier in the html ( in any parent element).

darkMode: "class", should make your app light mode unless dark class is applied .

You may also want to remove anything which contains the following like @media (prefers-color-scheme: dark) {...} e.g. in defaule welcome.blade.php file you may remove

   @media (prefers-color-scheme: dark) {
            .dark\:bg-gray-900 {
                --tw-bg-opacity: 1;
                background-color: rgb(17 24 39 / var(--tw-bg-opacity))
            }

            .dark\:bg-gray-800\/50 {
                background-color: rgb(31 41 55 / 0.5)
            }

           # ...continue

}