feat: add dark/light mode toggle demo

[Vaibhaav-Tiwari]

Overview

Adds a self-contained dark/light mode toggle demo as a single HTML file.

Features

• Single HTML file with embedded CSS and JavaScript (no external dependencies)
• CSS variables for light/dark color themes
• Pill-shaped toggle switch with smooth sliding animation
• LocalStorage persistence for user preference
• Smooth 0.3s transitions on all color changes
• Centered card design with demo content
• Keyboard accessible (Enter/Space keys)
• Sun/moon icons for visual clarity

How to Test

Open index.html directly in any browser — no server needed. Click the toggle to switch between light and dark modes. Refresh to verify localStorage persistence.

---

🤖 Generated with Claude Code

[Vaibhaav-Tiwari]

Review Summary

This PR adds a standalone dark/light mode toggle demo as a single HTML file. The implementation is clean and well-structured for a demo file.

Verdict: Ready with optional improvement

Strengths

• Self-contained with no external dependencies
• Good use of CSS variables for theming
• Smooth transitions (0.3s) on color changes
• Proper accessibility features (role, aria-label, tabindex, keyboard support)
• LocalStorage persistence for user preference
• Clean, readable code structure

Optional Improvement

Missing error handling for localStorage operations

localStorage operations can throw exceptions in certain environments:

• Safari private browsing mode when quota is exceeded
• When storage is completely disabled
• When storage quota is full

Currently, if localStorage.setItem throws, the toggle will still function but the preference won't persist silently. Consider wrapping the localStorage operations in a try-catch:

try {
    localStorage.setItem(STORAGE_KEY, isDark ? 'dark' : 'light');
} catch (e) {
    console.warn('Failed to persist theme preference:', e);
}

This is a minor issue for a demo file, but handling it gracefully would make the component more robust.

[Vaibhaav-Tiwari]

Consider wrapping this in a try-catch. localStorage.setItem can throw in Safari private browsing mode, when storage is disabled, or when quota is exceeded. The toggle will still function without persistence, but the exception will be uncaught.

[Vaibhaav-Tiwari]

Same consideration here for localStorage.getItem — though less likely to throw, it could fail in some edge cases.