W3CoreUI

Theme View.

Bootstrap handles theme-based styling, while custom utility classes control content visibility.

Overview

A seamless approach to toggling light and dark mode views using Bootstrap's theme attributes.

How It Works

When the light theme is active (data-bs-theme="light"), elements with the .view-dark class are hidden (display: none;).

When the dark theme is active (data-bs-theme="dark"), elements with the .view-light class are hidden (display: none;).

Use Case

This technique ensures that:

Light-themed content is shown only in light mode.

Dark-themed content is shown only in dark mode.

Theme view with images

Display theme-specific images effortlessly by toggling between light and dark modes.

<img class="view-light" src="..." alt="">
<img class="view-dark" src="..." alt="">

Theme view with text

Dynamically switch between light and dark theme views for a tailored user experience.

This content is visible only in the light theme, ensuring a seamless user experience.

This content is visible only in the dark theme, ensuring a seamless user experience.

<div class="view-light">
	<h2 class="bg-light py-2 px-3">This content is visible only in the light theme, ensuring a seamless user experience.</h2>
</div>
<div class="view-dark">
	<h2 class="bg-success py-2 px-3">This content is visible only in the dark theme, ensuring a seamless user experience.</h2>
</div>