🎨 Add Glass Theme Collection (Dark & Light)

Overview

This PR introduces a complete Glass theme collection featuring both dark and light variants that provide a modern, translucent glass morphism aesthetic with sophisticated backdrop blur effects and cyan/teal accent colors.

✨ Features

🌙 Glass Dark Theme

• Dark glass morphism with semi-transparent black backgrounds
• Bright cyan accents (rgba(0,255,255,0.75)) for primary elements
• High contrast dark theme optimized for low-light environments
• Custom background image for enhanced visual depth

☀️ Glass Light Theme

• Light glass morphism with semi-transparent white backgrounds
• Deep blue primary (rgba(0,86,142,1)) with cyan accents
• Optimized for daylight use with proper contrast ratios
• Matching background image for visual consistency

🔧 Shared Features

• Complete glass morphism aesthetic with backdrop blur effects
• Comprehensive button variants (default, outline, destructive, ghost, link)
• Table styling with glass effects and hover states
• Dialog components with backdrop blur and glass borders
• Switch components with theme-consistent colors
• Rounded button style with smooth transitions

📁 Files Added

• src/themes/glass-dark/theme.json - Dark theme configuration (221 lines)
• src/themes/glass-dark/background.jpg - Dark theme background image
• src/themes/glass-light/theme.json - Light theme configuration (219 lines)
• src/themes/glass-light/background.jpg - Light theme background image

🎨 Color Palettes

Glass Dark

• Primary: rgba(0,255,255,0.75) - Bright cyan
• Background: rgba(0, 0, 0, 0.85) - Semi-transparent black
• Accent: rgba(210,255,255,0.35) - Soft cyan
• Foreground: rgba(0,255,255,0.75) - Cyan text

Glass Light

• Primary: rgba(0,86,142,1) - Deep blue
• Background: rgba(255, 255, 255, 0.85) - Semi-transparent white
• Accent: rgba(210,255,255,0.35) - Soft cyan
• Foreground: rgba(0,86,142,1) - Blue text

🔍 Technical Details

• Inherits from base themes (dark/light) for consistent styling
• Backdrop filter support with both standard and webkit prefixes
• Custom shadows with multiple layers for depth
• Responsive design with proper hover and active states
• Schema version 1 compliance
• Cross-browser compatibility with webkit prefixes

🧪 Testing Checklist

• Both themes load correctly in theme selector
• All button variants display with proper styling
• Hover and active states work as expected
• Background images display properly
• Backdrop blur effects render correctly
• Table components use theme colors
• Dialog overlays have proper glass effect
• Switch components match theme colors
• Proper contrast ratios for accessibility

📸 Screensho

🚀 Usage

Both themes will be automatically available in the theme selector once merged. Users can select:

• "Glass Dark" for a dark glass morphism aesthetic
• "Glass Light" for a light glass morphism aesthetic

🔄 Recent Updates

• Theme refinements for improved visual consistency
• Enhanced button styling with better hover effects
• Optimized color contrasts for better accessibility
• Refined backdrop blur effects for smoother glass appearance

Type: Feature
Breaking Changes: None
Dependencies: None
Theme Collection: Glass (Dark + Light)