app-settingslisted
Install: claude install-skill Nioris/project-forge
# App Settings & Theming
## Step 1: Theme System (dark/light/auto)
```javascript
/**
* Theme system — CSS variables + auto-detection + toggle
* Applies to entire app via data-theme attribute on <html>
*/
const Theme = {
STORAGE_KEY: 'app_theme',
colors: {
light: {
'--bg-primary': '#ffffff',
'--bg-secondary': '#f5f5f5',
'--bg-card': '#ffffff',
'--text-primary': '#1a1a1a',
'--text-secondary': '#666666',
'--text-tertiary': '#999999',
'--border': '#e5e5e5',
'--accent': '#3b82f6',
'--accent-bg': '#eff6ff',
'--danger': '#ef4444',
'--success': '#22c55e',
'--warning': '#f59e0b',
'--shadow': 'rgba(0,0,0,0.08)',
'--toast-bg': '#1a1a1a',
'--skeleton-base': '#e5e5e5',
'--skeleton-shine': '#f5f5f5',
},
dark: {
'--bg-primary': '#0f0f0f',
'--bg-secondary': '#1a1a1a',
'--bg-card': '#1e1e1e',
'--text-primary': '#e5e5e5',
'--text-secondary': '#999999',
'--text-tertiary': '#666666',
'--border': '#2a2a2a',
'--accent': '#60a5fa',
'--accent-bg': '#1e3a5f',
'--danger': '#f87171',
'--success': '#4ade80',
'--warning': '#fbbf24',
'--shadow': 'rgba(0,0,0,0.3)',
'--toast-bg': '#2a2a2a',
'--skeleton-base': '#2a2a2a',
'--skeleton-shine': '#333333',
}
},
init() {
const saved = localStorage.getItem(this.STORAGE_KEY) || 'auto';
this.set(saved);
// Watch for system changes when