Major Features:
• Centralized theme system across SecuBox and System Hub
• Three theme modes: dark (default), light, and system (auto-detect)
• Single theme setting in SecuBox controls both plugins
• Real-time theme switching with OS preference detection
SecuBox Changes:
• Added theme.js manager for centralized theme control
• Implemented CSS variables for dark/light mode (secubox.css)
• Fixed hardcoded colors in dashboard.css, alerts.css, monitoring.css
• Integrated theme.js in all 7 views (dashboard, modules, alerts, monitoring, settings, etc.)
• Added get_theme RPC method to luci.secubox backend
• Updated ACL permissions to include get_theme (read access)
• Version updated to 0.1.1
System Hub Changes:
• Added theme.js manager using SecuBox theme API
• Implemented CSS variables for dark/light mode (dashboard.css)
• Integrated theme.js in all 9 views (overview, health, services, logs, backup, components, remote, settings, diagnostics)
• Version updated to 0.1.1
• README updated with maintainer info
Theme System Architecture:
• Configuration: /etc/config/secubox (option theme: dark|light|system)
• RPCD Backend: luci.secubox/get_theme method
• Frontend: theme.js modules (secubox/theme.js, system-hub/theme.js)
• CSS Variables: --sb-bg, --sb-bg-card, --sb-border, --sb-text, --sb-text-muted, --sb-shadow
• Auto-detection: prefers-color-scheme media query for system mode
Documentation:
• Added LUCI_DEVELOPMENT_REFERENCE.md with comprehensive LuCI development patterns
• Documented ubus/RPC types, baseclass.extend() patterns, ACL structure
• Common errors and solutions from implementation experience
Bug Fixes:
• Fixed SecuBox theme not applying visually (CSS variables now used)
• Fixed missing secubox.css in view imports
• Fixed ACL access denied for get_theme method
• Fixed hardcoded colors preventing theme switching
Testing:
• Verified theme switching works in all SecuBox tabs
• Verified theme switching works in all System Hub tabs
• Verified dark/light/system modes function correctly
• Verified single setting controls both plugins
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Root Cause:
- baseclass.extend() in LuCI only preserves RPC methods (rpc.declare)
- Non-RPC functions passed to baseclass.extend() are filtered out
- This caused TypeError: api.callGetComponents is not a function
Solution:
- Simplified api.js to contain ONLY RPC methods (10 methods)
- Moved all stub functions and helpers directly into the views that use them
- Each view now defines its own local functions for planned features
API Changes (api.js):
- Removed all stub functions (callGetComponents, callManageComponent, etc.)
- Removed all helper functions (formatUptime, formatBytes, getComponentIcon, getHealthStatus)
- Kept only RPC methods: getStatus, getSystemInfo, getHealth, listServices,
serviceAction, getLogs, backupConfig, restoreConfig, reboot, getStorage
View Changes:
- components.js: Added local getComponents(), getComponentIcon(), manageComponent()
- health.js: Added local getHealthStatus(), formatBytes(), inline report stub
- remote.js: Added local getRemoteConfig(), inline session stub
- settings.js: Fixed to use api.getStatus() instead of api.callStatus()
All 9 views now functional with proper stub data for planned features.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
