W3CoreUI

Overview

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>