Theme Toggle Examples

Default Floating Button

The default theme toggle appears as a floating button in the bottom-right corner. Look at the actual button on this page!

.rsl-theme-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #a855f7);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(110, 123, 255, 0.25);
    z-index: 1000;
}

Custom Position: Top-Right

Move the theme toggle to the top-right corner of the screen:

The toggle button is positioned in the top-right corner.

.rsl-theme-toggle {
    top: 2rem;
    right: 2rem;
    bottom: auto; /* Remove default bottom positioning */
}

Inline Toggle

Place the theme toggle inline with content, such as in a settings panel:

Theme: Current theme


    Theme:

Switch Style Toggle

A toggle switch style theme switcher:

.switch-toggle {
    width: 64px;
    height: 32px;
    background: #cbd5e0;
    border-radius: 32px;
    position: relative;
    transition: background 0.3s;
}

.switch-toggle::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

/* Dark mode active */
[data-theme="dark"] .switch-toggle {
    background: #6E7BFF;
}

[data-theme="dark"] .switch-toggle::before {
    transform: translateX(32px);
}

Text Button Style

A text-based theme toggle button:

Navbar Integrated

Integrate the theme toggle into your navigation bar:


    My Site
    
        Home
        About

Custom Toggle Function

Create your own theme toggle function:

function toggleTheme() {
    // Get current theme
    const currentTheme = document.documentElement.getAttribute('data-theme');

    // Toggle to opposite theme
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

    // Apply new theme
    document.documentElement.setAttribute('data-theme', newTheme);

    // Save preference to localStorage
    localStorage.setItem('rsl-theme', newTheme);

    // Update button text/icon (optional)
    updateThemeUI(newTheme);
}

function updateThemeUI(theme) {
    const icon = document.querySelector('.theme-toggle i');
    if (theme === 'dark') {
        icon.className = 'fas fa-sun';
    } else {
        icon.className = 'fas fa-moon';
    }
}