Dark Mode Example

This example demonstrates the dark mode capabilities of the Flyout Menu library. Use the theme buttons in the top-right corner to switch between light, dark, and auto modes.

Current Theme: Loading...
Your preference is automatically saved and will be restored on next visit.

Theme API

Quick Commands

// Initialize
FlyoutTheme.init();

// Set theme
FlyoutTheme.setTheme('dark');
FlyoutTheme.setTheme('light');
FlyoutTheme.setTheme('auto');

// Toggle
FlyoutTheme.toggle();

// Get current
FlyoutTheme.getTheme();

// Watch system
FlyoutTheme.watchSystemTheme();

Features

localStorage persistence
System preference detection
Bootstrap 5 integration
Smooth transitions
Legacy support

Customizable CSS Variables

Light Mode Variables

:root {
  --flyout-bg: #ffffff;
  --flyout-border-color: #dee2e6;
  --flyout-text-color: #212529;
  --flyout-hover-bg: #f8f9fa;
  --flyout-hover-text: #212529;
  --flyout-active-bg: #e9ecef;
  --flyout-focus-outline: #0d6efd;
  --flyout-shadow: rgba(0, 0, 0, 0.15);
}

Dark Mode Variables

[data-bs-theme="dark"] {
  --flyout-bg: #212529;
  --flyout-border-color: #495057;
  --flyout-text-color: #dee2e6;
  --flyout-hover-bg: #343a40;
  --flyout-hover-text: #ffffff;
  --flyout-active-bg: #495057;
  --flyout-focus-outline: #0d6efd;
  --flyout-shadow: rgba(0, 0, 0, 0.5);
}

Tip: Override these variables in your custom CSS to create your own color schemes!