Bootstrap
React
Tailwind
Angular
VueOverview
W3CoreUI supports dynamic theme switching between Light and Dark modes, storing user preferences in local storage or a server-side database. It leverages Bootstrap’s color mode support, allowing easy customization for a seamless experience.
Enable dark mode
Enable the built in dark color mode across your entire project by adding the data-bs-theme="dark" attribute to the <body> element. This will apply the dark color mode to all components and elements, other than those with a specific data-bs-theme attribute applied.
<body data-bs-theme="dark">
....
</body>
Example
For example, to change the color mode of a dropdown menu, add data-bs-theme="light" or data-bs-theme="dark" to the parent .dropdown. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
<div class="dropdown" data-bs-theme="light">
</div>
<div class="dropdown" data-bs-theme="dark">
</div>