CSS-Only Theme Toggle

CSS

✓

                :root {
                  color-scheme: light dark;
                }
                
                body {
                  background-color: light-dark(white, #1a1a1a);
                  color: light-dark(black, white);
                }
            

💡 How It Works

This demo uses the new CSS light-dark() function which switches values based on the color-scheme property.

No JavaScript needed! The browser automatically applies the correct theme based on the user's system preference or the select dropdown.

🎨 CSS-Only Theme Toggle

💡 How It Works