History

CyberMind-FR e7c53cec1d feat(theme): Add global SecuBox theming with app-specific accents (Phase 3) - Create app-themes.css with accent colors for all SecuBox apps: * CrowdSec: Security green (#00d4aa) * Bandwidth Manager: Blue (#3b82f6) * Client Guardian: Purple (#8b5cf6) * Media Flow: Pink (#ec4899) * Network Tools: Cyan (#06b6d4) * System Hub: Orange (#f97316) * Netdata: Green (#22c55e) * WireGuard: Red (#ef4444) * AppStore: Indigo (#6366f1) * CDN Cache: Teal (#14b8a6) * SecuBox Portal: Primary gradient (#667eea) - Enhance theme.js with shared UI components: * setApp() - Set app context for dynamic theming * renderNavTabs() - Create unified navigation tabs * createStatCard() - Stat cards with trend indicators * createMiniChart() - SVG sparkline charts * showToast() - Toast notification system - Add app-aware component styling in CSS: * Navigation tabs, buttons, cards use app accent * Form focus states, toggles, progress bars * Table headers, badges, tooltips * Loading spinners, chart colors Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>		2026-01-09 13:59:23 +01:00
..
docs	feat: v0.8.3 - Complete theming, responsive & dynamic features	2026-01-05 08:43:26 +01:00
htdocs/luci-static/resources/secubox-theme	feat(theme): Add global SecuBox theming with app-specific accents (Phase 3)	2026-01-09 13:59:23 +01:00
Makefile	feat: cascade navigation and zigbee presets	2025-12-29 14:40:22 +01:00
README.md	feat: Implement luci-theme-secubox global CyberMood design system	2025-12-28 17:08:07 +01:00
USAGE.md	feat: Implement luci-theme-secubox global CyberMood design system	2025-12-28 17:08:07 +01:00

README.md

luci-theme-secubox

SecuBox's CyberMood design system packaged as a LuCI theme. Ships shared CSS variables, reusable components, responsive layouts, translations, and the browser-side theme controller used by every SecuBox module ('require secubox-theme/theme as Theme'). Install alongside SecuBox modules to ensure consistent styling, language switching, and light/dark/cyberpunk variants.

./feeds/luci/luci-theme-secubox/
├── Makefile
└── htdocs/luci-static/resources/secubox-theme/
    ├── core/           # Variables, reset, typography, animations, utilities
    ├── components/     # Buttons, cards, forms, tables, badges, alerts, etc.
    ├── layouts/        # Dashboard/grid/responsive helpers
    ├── themes/         # Dark (default), light, cyberpunk variants
    ├── i18n/           # en/fr/de/es JSON dictionaries
    ├── secubox-theme.css
    ├── secubox-theme.min.css
    └── theme.js        # Theme controller (init/apply/t/Theme.create*)

Usage

'use strict';
'require secubox-theme/theme as Theme';

return view.extend({
    load: function() {
        return Theme.init();
    },
    render: function() {
        Theme.apply('dark');          // dark, light, cyberpunk
        Theme.setLanguage('en');      // en, fr, de, es

        return Theme.createPage({
            title: Theme.t('dashboard.title'),
            cards: [
                Theme.createCard({
                    title: Theme.t('dashboard.overview'),
                    icon: '🚀',
                    content: this.renderOverview()
                })
            ]
        });
    }
});

See DOCS/GLOBAL_THEME_SYSTEM.md for the full design reference. This package only contains the shared assets; each module is still responsible for importing secubox-theme.css (or .min.css) and using the exported helper methods.