🌓 Light, Dark & Auto Theme

GXON includes a theme switcher using Bootstrap 5.3+’s native data-bs-theme attribute. You can switch between Light, Dark, and Auto (system) modes using the top-right dropdown toggle.

🎛 How It Works

The dropdown menu has buttons with data-bs-theme-value set to light, dark, or auto.
Clicking one of them updates the data-bs-theme on the <html> element.
The current selection is saved in localStorage so the theme persists on reload.

🔧 HTML Markup

Place this dropdown in your navbar or toolbar:

<div class="dropdown">
  <button class="btn btn-icon" data-bs-toggle="dropdown">
    <i class="fi fi-rr-brightness theme-icon-active"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" data-bs-theme-value="light">Light</button></li>
    <li><button class="dropdown-item" data-bs-theme-value="dark">Dark</button></li>
    <li><button class="dropdown-item" data-bs-theme-value="auto">Auto</button></li>
  </ul>
</div>

⚙️ JavaScript Functionality

Bootstrap provides a helper script that handles data-bs-theme-value automatically if included. If not, use custom JS like below:

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, Bootstrap detects the user's system preference using prefers-color-scheme and applies the theme accordingly.

🎨 Custom Icons

You are using icon classes like fi fi-rr-brightness and fi fi-rr-moon to enhance the visual UI. These icons are updated based on theme.

For advanced theming, you can also override SCSS variables inside /scss/_variables.scss.