Light, Dark & Auto Theme

UrbanHub includes a theme switcher using Bootstrap 5.3+’s native data-bs-theme attribute. Switch between Light, Dark, and Auto (system) modes using the top-right toggle for a personalized dashboard experience.

How It Works

The dropdown menu contains buttons with data-bs-theme-value set to light, dark, or auto.
Clicking a button updates the data-bs-theme attribute on the <html> element.
The selected theme is saved in localStorage so your preference persists on page reload.

HTML Markup

Place the theme toggle dropdown in your navbar or toolbar:


<a href="javascript:void(0);" class="btn btn-md btn-icon btn-action-gray theme-btn">
  <i class="icon-sun-medium icon-light"></i>
  <i class="icon-moon icon-dark"></i>
</a>

JavaScript Functionality

Bootstrap automatically handles data-bs-theme-value if the helper script is included. Otherwise, you can use custom JS:


document.querySelectorAll('[data-bs-theme-value]').forEach(button => {
  button.addEventListener('click', () => {
	const theme = button.getAttribute('data-bs-theme-value');
	document.documentElement.setAttribute('data-bs-theme', theme);
	localStorage.setItem('theme', theme);
  });
});

// Apply saved theme on page load
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.documentElement.setAttribute('data-bs-theme', savedTheme);
}

Auto Mode

When set to auto, UrbanHub automatically detects the user’s system preference via prefers-color-scheme and applies the corresponding Light or Dark theme for a seamless experience.

Custom Icons

Icons like fi fi-rr-brightness and fi fi-rr-moon visually indicate the active theme. You can replace or customize icons based on your branding.

For advanced customization, override SCSS variables inside /scss/_variables.scss to adjust colors, background, or component styles across themes.