[PR #182] [MERGED] feat: implement light/dark mode theme system #237

Closed
opened 2025-11-20 04:13:41 -05:00 by saavagebueno · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/182
Author: @michelroegl-brunner
Created: 10/17/2025
Status: Merged
Merged: 10/17/2025
Merged by: @michelroegl-brunner

Base: mainHead: feat/theme_toggle


📝 Commits (10+)

  • e313029 feat: implement light/dark mode theme system
  • 33ee496 fix: resolve ESLint warnings
  • 1b9873e fix: improve toggle component styling for better visibility
  • 84652d3 fix: improve toggle visual states for better UX
  • f5a0e5e fix: improve toggle contrast in dark mode
  • fcc7836 fix: resolve dependency loop and improve dropdown styling
  • 404a90a fix: restore proper button colors and eliminate dependency loop
  • ae03f35 feat: add missing hover utility classes for semantic colors
  • adc631c feat: improve status cards with useful LXC container information
  • 90c44b0 style: center content in status cards

📊 Changes

223 files changed (+1370 additions, -987 deletions)

View changed files

📝 scripts/json/configarr.json (+1 -1)
📝 scripts/json/docmost.json (+1 -1)
scripts/json/guardian.json (+35 -0)
📝 scripts/json/komga.json (+1 -1)
📝 scripts/json/lazylibrarian.json (+1 -1)
📝 scripts/json/leantime.json (+1 -1)
📝 scripts/json/librespeed-rust.json (+1 -1)
📝 scripts/json/libretranslate.json (+1 -1)
📝 scripts/json/lidarr.json (+1 -1)
scripts/json/limesurvey.json (+40 -0)
📝 scripts/json/linkstack.json (+1 -1)
📝 scripts/json/listmonk.json (+1 -1)
📝 scripts/json/lldap.json (+1 -1)
📝 scripts/json/lubelogger.json (+1 -1)
📝 scripts/json/lyrionmusicserver.json (+1 -1)
📝 scripts/json/mafl.json (+1 -1)
📝 scripts/json/magicmirror.json (+1 -1)
📝 scripts/json/managemydamnlife.json (+1 -1)
📝 scripts/json/mariadb.json (+1 -1)
📝 scripts/json/matterbridge.json (+1 -1)

...and 80 more files

📄 Description

🌙☀️ Light/Dark Mode Implementation

Features Added

  • Complete theme system with light and dark mode support
  • Theme persistence using localStorage
  • Two theme switchers: Header toggle + Settings modal
  • Semantic color system with CSS variables for both themes
  • 200+ hardcoded colors replaced across 30+ components

🎨 UI Improvements

  • Toggle switches with proper visual states and contrast
  • Dropdown menus with consistent grey styling and hover effects
  • Start/Stop/Destroy buttons with proper color coding and hover states
  • Status indicators using semantic colors throughout the app

🔧 Technical Improvements

  • Fixed dependency loops in status checking functionality
  • Added missing CSS utility classes for hover states
  • Build optimizations and ESLint fixes
  • Theme-aware components that adapt to light/dark modes

🎯 Components Updated

  • High-priority: InstalledScriptsTab, ScriptInstallationCard, LXCSettingsModal, ScriptsGrid
  • All modal components: ErrorModal, ConfirmationModal, AuthModal, SetupModal
  • Form components: ServerForm, FilterBar, CategorySidebar
  • Display components: ScriptCard, ScriptCardList, DiffViewer, TextViewer
  • UI components: button variants, toggle, badge components

🧪 Testing

  • Build completes successfully without warnings
  • All ESLint issues resolved
  • No circular dependencies
  • Both light and dark modes work seamlessly
  • Theme persistence across page reloads

📱 User Experience

  • Intuitive theme switching with sun/moon icons
  • Consistent visual feedback across all interactive elements
  • Accessible color contrast in both themes
  • Smooth transitions between theme changes

Ready for review and testing! 🚀


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/182 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/17/2025 **Status:** ✅ Merged **Merged:** 10/17/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `feat/theme_toggle` --- ### 📝 Commits (10+) - [`e313029`](https://github.com/community-scripts/ProxmoxVE-Local/commit/e313029db8a632cda4681810f29d396b425424fc) feat: implement light/dark mode theme system - [`33ee496`](https://github.com/community-scripts/ProxmoxVE-Local/commit/33ee49604aeceb7470176c9f62469792b0de6429) fix: resolve ESLint warnings - [`1b9873e`](https://github.com/community-scripts/ProxmoxVE-Local/commit/1b9873e36103b74586fb6409f5edd6b38dcbe6b6) fix: improve toggle component styling for better visibility - [`84652d3`](https://github.com/community-scripts/ProxmoxVE-Local/commit/84652d3ce98a0198d7a7978ac6e3741225bf9c5b) fix: improve toggle visual states for better UX - [`f5a0e5e`](https://github.com/community-scripts/ProxmoxVE-Local/commit/f5a0e5e494e20484451f464231b9303b2c5eb449) fix: improve toggle contrast in dark mode - [`fcc7836`](https://github.com/community-scripts/ProxmoxVE-Local/commit/fcc7836b951dffe67c0f93c373641fa8e57cd660) fix: resolve dependency loop and improve dropdown styling - [`404a90a`](https://github.com/community-scripts/ProxmoxVE-Local/commit/404a90aa74bedc800738f3fb8646f5df6377ded6) fix: restore proper button colors and eliminate dependency loop - [`ae03f35`](https://github.com/community-scripts/ProxmoxVE-Local/commit/ae03f35a05fe6f73095d476784e0c0d78feb3b91) feat: add missing hover utility classes for semantic colors - [`adc631c`](https://github.com/community-scripts/ProxmoxVE-Local/commit/adc631c6d5ab6aabb391251ade8a1007e32c81da) feat: improve status cards with useful LXC container information - [`90c44b0`](https://github.com/community-scripts/ProxmoxVE-Local/commit/90c44b0b85aa07f467353888741592831f7c70a6) style: center content in status cards ### 📊 Changes **223 files changed** (+1370 additions, -987 deletions) <details> <summary>View changed files</summary> 📝 `scripts/json/configarr.json` (+1 -1) 📝 `scripts/json/docmost.json` (+1 -1) ➕ `scripts/json/guardian.json` (+35 -0) 📝 `scripts/json/komga.json` (+1 -1) 📝 `scripts/json/lazylibrarian.json` (+1 -1) 📝 `scripts/json/leantime.json` (+1 -1) 📝 `scripts/json/librespeed-rust.json` (+1 -1) 📝 `scripts/json/libretranslate.json` (+1 -1) 📝 `scripts/json/lidarr.json` (+1 -1) ➕ `scripts/json/limesurvey.json` (+40 -0) 📝 `scripts/json/linkstack.json` (+1 -1) 📝 `scripts/json/listmonk.json` (+1 -1) 📝 `scripts/json/lldap.json` (+1 -1) 📝 `scripts/json/lubelogger.json` (+1 -1) 📝 `scripts/json/lyrionmusicserver.json` (+1 -1) 📝 `scripts/json/mafl.json` (+1 -1) 📝 `scripts/json/magicmirror.json` (+1 -1) 📝 `scripts/json/managemydamnlife.json` (+1 -1) 📝 `scripts/json/mariadb.json` (+1 -1) 📝 `scripts/json/matterbridge.json` (+1 -1) _...and 80 more files_ </details> ### 📄 Description ## 🌙☀️ Light/Dark Mode Implementation ### ✨ Features Added - **Complete theme system** with light and dark mode support - **Theme persistence** using localStorage - **Two theme switchers**: Header toggle + Settings modal - **Semantic color system** with CSS variables for both themes - **200+ hardcoded colors replaced** across 30+ components ### 🎨 UI Improvements - **Toggle switches** with proper visual states and contrast - **Dropdown menus** with consistent grey styling and hover effects - **Start/Stop/Destroy buttons** with proper color coding and hover states - **Status indicators** using semantic colors throughout the app ### 🔧 Technical Improvements - **Fixed dependency loops** in status checking functionality - **Added missing CSS utility classes** for hover states - **Build optimizations** and ESLint fixes - **Theme-aware components** that adapt to light/dark modes ### 🎯 Components Updated - High-priority: InstalledScriptsTab, ScriptInstallationCard, LXCSettingsModal, ScriptsGrid - All modal components: ErrorModal, ConfirmationModal, AuthModal, SetupModal - Form components: ServerForm, FilterBar, CategorySidebar - Display components: ScriptCard, ScriptCardList, DiffViewer, TextViewer - UI components: button variants, toggle, badge components ### 🧪 Testing - ✅ Build completes successfully without warnings - ✅ All ESLint issues resolved - ✅ No circular dependencies - ✅ Both light and dark modes work seamlessly - ✅ Theme persistence across page reloads ### 📱 User Experience - **Intuitive theme switching** with sun/moon icons - **Consistent visual feedback** across all interactive elements - **Accessible color contrast** in both themes - **Smooth transitions** between theme changes Ready for review and testing! 🚀 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
saavagebueno added the pull-request label 2025-11-20 04:13:41 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: SVI/ProxmoxVE-Local#237