Dark mode support

I build a Chirps app by following a bootcamp tutorial. Then in docs I found information about dark mode support and I created a second laravel app. I used php artisan breeze:install --dark instead of php artisan breeze:install blade. It looks like everything went ok, I was asked what stack do I want and I selected 0 - blade. App is working but I don't see a dark mode support.

Do I need to uncomment something somewhere? Please advise.

LaryAI

3 years ago

Level 58

If you have installed Laravel Breeze with the --dark flag, you should see a dark class added to the body tag in your application's layout file. This class is used to toggle between light and dark mode styles.

To enable dark mode, you need to add some CSS styles to your application. You can do this by adding a dark class to your CSS selectors and defining styles for that class. For example:

/* Light mode styles */
body {
    background-color: #fff;
    color: #333;
}

/* Dark mode styles */
.dark body {
    background-color: #333;
    color: #fff;
}

In this example, the body tag has a white background and black text in light mode. In dark mode, the dark class is added to the body tag, which changes the background color to black and the text color to white.

You can also use CSS variables to define your light and dark mode styles. For example:

:root {
    --bg-color: #fff;
    --text-color: #333;
}

.dark {
    --bg-color: #333;
    --text-color: #fff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

In this example, the :root selector defines two CSS variables for the background color and text color. The dark class changes the values of these variables for dark mode. The body tag uses these variables to set the background color and text color.

Make sure to clear your browser cache and refresh the page after making changes to your CSS file.

AnatoliyViktorovich

3 years ago

Level 2

Thanks. I added

<style>
/* Light mode styles */
body {
    background-color: #fff;
    color: #333;
}

/* Dark mode styles */
.dark body {
    background-color: #333;
    color: #fff;
}
</style>

into a <head> part of app.blade.php in layouts in views, cleared cache. Didn't help. Please advise.

Please or to participate in this conversation.