🌙 Dark Mode Test Lab
Comprehensive testing ground for light and dark theme components
🔍 Theme Debug Info
Current theme: light
HTML has 'dark' class: ❌ No
Expected behavior: Both should match!
🚨 INSTANT VISUAL TEST
This box should be YELLOW in light mode and RED in dark mode. If you can see this change when toggling themes, dark mode is working!
📝 Typography
H1 Heading - Main Title
H2 Heading - Section Title
H3 Heading - Subsection
Subheading - Supporting text
Regular paragraph text with proper contrast
Secondary text with medium contrast
Muted text with lower contrast
Error text that adapts to theme
Success text that adapts to theme
Info text that adapts to theme
🔘 Buttons
📋 Form Controls
Switch is OFF
🏷️ Badges & Avatars
Default BadgeError BadgeSuccess BadgeInfo BadgeWarning Badge
📊 Table
| Component | Status | Theme Support | Action |
|---|---|---|---|
| Buttons | Working | Full | |
| Forms | Working | Full | |
| Tables | Testing | Partial |
🎴 Card Variations
Basic Card
Simple card with neutral colors that adapt to theme changes.
Blue Card
Themed card with blue gradient background.
Success Card
Success themed card with green tones.
Error Card
Error themed card with red warning colors.
Warning Card
Warning themed card with yellow attention colors.
Purple Card
Creative themed card with purple gradients.
Testing Instructions
How to test:
- Click your avatar in the top-right corner
- Click "다크 모드" to switch to dark theme
- Watch the instant visual test box change from yellow to red
- Scroll through each section and observe the theme changes
- Click "라이트 모드" to switch back to light theme
- Refresh the page to test persistence
- Try interacting with form controls in both themes
What to look for:
- Background colors changing appropriately
- Text maintaining good contrast in both themes
- Borders and shadows adapting to the theme
- Interactive elements responding properly
- All components remaining readable and accessible