Fixed Theme Switch Demo

About This Demo

This page demonstrates the fixed/floating theme switch variant. Look at the bottom-right corner of your screen to see the floating theme toggle button.

The button:

Stays fixed in the bottom-right corner
Remains visible when scrolling
Shows a sun icon in light mode, moon icon in dark mode
Scales up on hover for better feedback
Has a subtle entrance animation

Implementation

<!-- Add this anywhere in your HTML -->
<div class="pm7-theme-switch--fixed-icon" data-pm7-theme-switch></div>

For a smaller version:

<div class="pm7-theme-switch--fixed-icon pm7-theme-switch--sm" data-pm7-theme-switch></div>

Keep Scrolling...

Scroll down to see that the theme switch button stays in place.

↓

Notice how the button remains in the bottom-right corner!

💡 Tip: The fixed theme switch is perfect for applications where users might want to toggle the theme from anywhere on the page, without having to scroll back to a header or settings panel.