Laravel Question posted in
The official Laravel Documentation can be found here.

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

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",
};
Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search