Universal Theme System

Automatically sync your website with your users' system theme preferences

🚀 Try Live Demo 📖 Learn More

🎮 Quick Theme Test

Change your system theme to see this page adapt in real-time!

Current Preference
0
Theme Switches
✅
Browser Support

✨ Key Features

⚡

Real-time Sync

Instantly responds to system theme changes without page refresh

🎨

Universal Design

Comprehensive CSS system that works across all your pages

â™ŋ

Accessibility First

Supports high contrast, reduced motion, and screen readers

📱

Mobile Optimized

Updates mobile browser chrome and works on all devices

🔧

Developer Friendly

Simple API, modular files, extensive customization

🚀

High Performance

Lightweight, optimized, and minimal performance impact

🛠ī¸ How It Works

The Universal Theme System uses modern web standards to automatically synchronize with your users' system preferences:

CSS Foundation

  • Custom Properties: Semantic color variables
  • Media Queries: prefers-color-scheme detection
  • Utility Classes: Comprehensive design system
  • Components: Pre-built, theme-aware elements

JavaScript Features

  • Theme Manager: Centralized theme control
  • Event System: Real-time change detection
  • Preferences: Remember user choices
  • Accessibility: Keyboard shortcuts & ARIA support
📚 Learn More 🎮 Interactive Demo

🚀 Get Started

Include these files in your project to enable universal theme synchronization:

Step 1: Include the CSS file in your HTML head:
<link rel="stylesheet" href="css/theme-system.css">
Step 2: Include the JavaScript file before closing body:
<script src="js/theme-manager.js"></script>
Step 3: Use the provided classes and CSS variables in your components!
📖 View Documentation