iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add comprehensive light theme and theme switcher

Browse Source 
✨ Features:
- Complete light theme with improved color palette
- Theme switcher in header with sun/moon icons
- Theme persistence using localStorage
- Smooth transitions between themes

🎨 Theme Improvements:
- Softer, easier-on-eyes light theme colors
- Fixed text contrast issues across all components
- Enhanced member card and tab text readability
- Fixed hover effects that made text disappear
- Improved member overlay header and body styling

🔧 Technical Implementation:
- CSS variables system for easy theme management
- JavaScript ThemeManager class for theme switching
- Responsive design for mobile devices
- Comprehensive hover state fixes
- Z-index solutions for text visibility

📱 Components Fixed:
- Member cards (hostname, IP, latency, details)
- Navigation tabs and content
- Task summaries and progress items
- Capability forms and API endpoints
- Member overlay popup
- Form inputs and dropdowns
- Status indicators and label chips

🎯 Accessibility:
- WCAG AA contrast compliance
- Proper color hierarchy
- Clear visual feedback
- Mobile-responsive design

Files added:
- public/styles/theme.css - Theme system and variables
- public/scripts/theme-manager.js - Theme management logic
- THEME_README.md - Comprehensive documentation
- THEME_IMPROVEMENTS.md - Improvement details

Files modified:
- public/index.html - Added theme switcher and script includes
- public/styles/main.css - Updated to use CSS variables
This commit is contained in:
0x1d
2025-09-04 20:48:29 +02:00
parent 6ff9f8dce9
commit 4b1011ce5e
8 changed files with 5270 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPORE UI</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/theme.css">
</head>
<body>
@@ -22,6 +23,15 @@
<button class="nav-tab" data-view="firmware">📦 Firmware</button>
</div>
<div class="nav-right">
<div class="theme-switcher">
<span class="theme-label">Theme:</span>
<button class="theme-toggle" id="theme-toggle" title="Toggle theme">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"/>
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
</button>
</div>
<div class="cluster-status">🚀 Cluster Online</div>
</div>
</div>
@@ -147,6 +157,7 @@
<script src="./scripts/components/ClusterStatusComponent.js"></script>
<script src="./scripts/components/TopologyGraphComponent.js"></script>
<script src="./scripts/components/ComponentsLoader.js"></script>
<script src="./scripts/theme-manager.js"></script>
<script src="./scripts/app.js"></script>
</body>