Theme Mode System

OnigiriJS includes a powerful theme mode system that makes it easy to implement light and dark modes in your application.

💡 Try it now! Click the theme toggle button in the header to see the theme change in action.

Features

Automatic Detection - Syncs with system preferences
Persistent Storage - Remembers user's choice
Smooth Transitions - Beautiful animations
Dynamic Content - Works with PJAX-loaded pages
Customizable - Easy to configure and extend

Quick Start

1. Include the Module

<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/mode/onigiri-mode.js"></script>

2. Initialize

// Initialize theme mode
Onigiri.mode.init({
    defaultMode: 'light',
    autoDetect: true,
    syncWithSystem: true,
    transitions: true
});

3. Add Toggle Button

<button data-theme-toggle>Toggle Theme</button>

API Reference

Initialization Options

Option	Type	Default	Description
`defaultMode`	String	'light'	Default theme mode
`autoDetect`	Boolean	true	Auto-detect from system
`syncWithSystem`	Boolean	true	Sync with system changes
`transitions`	Boolean	true	Enable smooth transitions
`storageKey`	String	'onigiri_theme_mode'	Storage key name

Methods

Onigiri.mode.get()

Get the current theme mode.

const currentTheme = Onigiri.mode.get();
console.log(currentTheme); // 'light' or 'dark'

Onigiri.mode.set(mode)

Set a specific theme mode.

// Set to dark mode
Onigiri.mode.set('dark');

// Set to light mode
Onigiri.mode.set('light');

Onigiri.mode.toggle()

Toggle between light and dark modes.

// Toggle theme
Onigiri.mode.toggle();

Onigiri.mode.isDark()

Check if current mode is dark.

if (Onigiri.mode.isDark()) {
    console.log('Dark mode is active');
}

Onigiri.mode.isLight()

Check if current mode is light.

if (Onigiri.mode.isLight()) {
    console.log('Light mode is active');
}

Events

Listen for theme changes:

document.addEventListener('onigiri:mode:change', function(e) {
    console.log('Theme changed to:', e.detail.mode);
    console.log('Previous theme:', e.detail.oldMode);
    
    // Update your UI accordingly
    updateMyCustomElements(e.detail.mode);
});

Custom Styling

Use CSS custom properties for easy theming:

:root {
    --bg-primary: #ffffff;
    --text-primary: #111827;
}

.theme-dark {
    --bg-primary: #111827;
    --text-primary: #f9fafb;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

HTML Attributes

The module uses several data attributes:

Attribute	Description
`data-theme`	Applied to root element with current theme
`data-theme-container`	Marks elements that should receive theme styling
`data-theme-toggle`	Marks buttons that toggle the theme
`data-theme-indicator`	Elements that display current theme name

Complete Example

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <title>Theme Mode Example</title>
    <style>
        :root {
            --bg: #ffffff;
            --text: #111827;
        }
        
        .theme-dark {
            --bg: #111827;
            --text: #f9fafb;
        }
        
        body {
            background: var(--bg);
            color: var(--text);
            transition: all 0.3s ease;
        }
    </style>
</head>
<body>
    <button data-theme-toggle>
        Toggle Theme
    </button>
    
    <div data-theme-container>
        <h1>Theme Mode Demo</h1>
        <p>Current theme: <span data-theme-indicator></span></p>
    </div>
    
    <script src="onigiri-core.js"></script>
    <script src="onigiri-storage.js"></script>
    <script src="onigiri-mode.js"></script>
    <script>
        Onigiri.mode.init();
    </script>
</body>
</html>

✅ That's it! Your theme mode system is now fully functional.