/* ═══════════════════════════════════════════════════════════════ ERPAMA Framework - Theme System Supports: dark, light, kurumsal, midnight, ocean, forest Usage: or ═══════════════════════════════════════════════════════════════ */ /* ── DARK THEME (default) ──────────────────────────────────── */ [data-theme="dark"], :root { --bg-primary: #0f0f1a; --bg-secondary: #1a1a2e; --bg-tertiary: #252540; --bg-card: #1e1e32; --bg-hover: #2a2a48; --text-primary: #ffffff; --text-secondary: #c4c4d4; --text-muted: #8b8b9e; --text-inverse: #0f0f1a; --border: #2d2d45; --border-light: #3a3a55; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.3); --shadow-lg: 0 10px 30px rgba(0,0,0,0.4); --sidebar-bg: var(--bg-secondary); --sidebar-text: rgba(255,255,255,0.7); --sidebar-text-active: #ffffff; --sidebar-active-bg: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --sidebar-border: var(--border); --header-bg: rgba(15, 15, 26, 0.9); --header-blur: blur(12px); --input-bg: var(--bg-tertiary); --modal-bg: var(--bg-card); --table-hover: var(--bg-tertiary); --scrollbar-track: var(--bg-secondary); --scrollbar-thumb: var(--border); } /* ── LIGHT THEME ───────────────────────────────────────────── */ [data-theme="light"] { --bg-primary: #f5f7fa; --bg-secondary: #ffffff; --bg-tertiary: #eef1f6; --bg-card: #ffffff; --bg-hover: #e8ecf2; --text-primary: #1a202c; --text-secondary: #4a5568; --text-muted: #718096; --text-inverse: #ffffff; --border: #e2e8f0; --border-light: #cbd5e0; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 10px 30px rgba(0,0,0,0.12); --sidebar-bg: #ffffff; --sidebar-text: #4a5568; --sidebar-text-active: #1a202c; --sidebar-active-bg: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --sidebar-border: var(--border); --header-bg: rgba(255, 255, 255, 0.92); --header-blur: blur(12px); --input-bg: #f7f9fc; --modal-bg: #ffffff; --table-hover: #f7f9fc; --scrollbar-track: #f0f0f0; --scrollbar-thumb: #ccc; } [data-theme="light"] .card { box-shadow: var(--shadow-sm); } [data-theme="light"] .sidebar { box-shadow: 2px 0 10px rgba(0,0,0,0.05); } /* ── KURUMSAL (Corporate) THEME ────────────────────────────── */ [data-theme="kurumsal"] { --bg-primary: #f4f6f9; --bg-secondary: #ffffff; --bg-tertiary: #eaeef3; --bg-card: #ffffff; --bg-hover: #e1e7ee; --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --text-inverse: #ffffff; --border: #d1d9e6; --border-light: #b8c4d4; --shadow-sm: 0 1px 4px rgba(30,58,95,0.08); --shadow-md: 0 4px 16px rgba(30,58,95,0.1); --shadow-lg: 0 10px 30px rgba(30,58,95,0.14); --accent: #1e3a5f; --accent-hover: #152a45; --accent-light: rgba(30,58,95,0.12); --accent-secondary: #2563eb; --sidebar-bg: linear-gradient(180deg, #1e3a5f 0%, #0f172a 100%); --sidebar-text: rgba(255,255,255,0.7); --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(255,255,255,0.15); --sidebar-border: rgba(255,255,255,0.1); --header-bg: rgba(255,255,255,0.95); --header-blur: blur(12px); --input-bg: #f1f5f9; --modal-bg: #ffffff; --table-hover: #f1f5f9; --scrollbar-track: #f0f0f0; --scrollbar-thumb: #bbb; } [data-theme="kurumsal"] .card { box-shadow: 0 2px 6px rgba(0,0,0,0.06); border: none; } [data-theme="kurumsal"] .sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.12); } [data-theme="kurumsal"] .btn-primary { background: var(--accent-secondary); border-color: var(--accent-secondary); } [data-theme="kurumsal"] .btn-primary:hover { background: #1d4ed8; box-shadow: 0 4px 12px rgba(37,99,235,0.35); } [data-theme="kurumsal"] .badge-success { background: #d1fae5; color: #065f46; } [data-theme="kurumsal"] .badge-warning { background: #fef3c7; color: #92400e; } [data-theme="kurumsal"] .badge-danger { background: #fee2e2; color: #991b1b; } [data-theme="kurumsal"] .badge-info { background: #dbeafe; color: #1e40af; } /* ── MIDNIGHT THEME ────────────────────────────────────────── */ [data-theme="midnight"] { --bg-primary: #0a0a14; --bg-secondary: #12121f; --bg-tertiary: #1c1c30; --bg-card: #15152a; --bg-hover: #22223a; --text-primary: #e8e8f0; --text-secondary: #a0a0b8; --text-muted: #6a6a82; --text-inverse: #0a0a14; --border: #252540; --border-light: #30304a; --shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 10px 30px rgba(0,0,0,0.6); --accent: #8b5cf6; --accent-hover: #7c3aed; --accent-light: rgba(139,92,246,0.15); --accent-secondary: #a78bfa; --sidebar-bg: #0e0e1c; --sidebar-text: rgba(255,255,255,0.6); --sidebar-text-active: #ffffff; --sidebar-active-bg: linear-gradient(135deg, #8b5cf6, #a78bfa); --sidebar-border: #252540; --header-bg: rgba(10, 10, 20, 0.92); --header-blur: blur(12px); --input-bg: var(--bg-tertiary); --modal-bg: var(--bg-card); --table-hover: var(--bg-tertiary); --scrollbar-track: #0e0e1c; --scrollbar-thumb: #2a2a44; } /* ── OCEAN THEME ───────────────────────────────────────────── */ [data-theme="ocean"] { --bg-primary: #0c1929; --bg-secondary: #122136; --bg-tertiary: #1a2d44; --bg-card: #152638; --bg-hover: #203850; --text-primary: #e2eaf2; --text-secondary: #94b4cc; --text-muted: #5e8aa8; --text-inverse: #0c1929; --border: #1e3550; --border-light: #284560; --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); --shadow-lg: 0 10px 30px rgba(0,0,0,0.45); --accent: #0ea5e9; --accent-hover: #0284c7; --accent-light: rgba(14,165,233,0.15); --accent-secondary: #38bdf8; --sidebar-bg: #0e1d30; --sidebar-text: rgba(255,255,255,0.65); --sidebar-text-active: #ffffff; --sidebar-active-bg: linear-gradient(135deg, #0ea5e9, #38bdf8); --sidebar-border: #1e3550; --header-bg: rgba(12, 25, 41, 0.92); --header-blur: blur(12px); --input-bg: var(--bg-tertiary); --modal-bg: var(--bg-card); --table-hover: var(--bg-tertiary); --scrollbar-track: #0e1d30; --scrollbar-thumb: #1e3550; } /* ── FOREST THEME ──────────────────────────────────────────── */ [data-theme="forest"] { --bg-primary: #0c1a0f; --bg-secondary: #132218; --bg-tertiary: #1c3022; --bg-card: #16271b; --bg-hover: #213a28; --text-primary: #e2f0e5; --text-secondary: #94c49e; --text-muted: #5e9868; --text-inverse: #0c1a0f; --border: #1e3d25; --border-light: #285032; --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); --shadow-lg: 0 10px 30px rgba(0,0,0,0.45); --accent: #22c55e; --accent-hover: #16a34a; --accent-light: rgba(34,197,94,0.15); --accent-secondary: #4ade80; --sidebar-bg: #0f1f14; --sidebar-text: rgba(255,255,255,0.65); --sidebar-text-active: #ffffff; --sidebar-active-bg: linear-gradient(135deg, #22c55e, #4ade80); --sidebar-border: #1e3d25; --header-bg: rgba(12, 26, 15, 0.92); --header-blur: blur(12px); --input-bg: var(--bg-tertiary); --modal-bg: var(--bg-card); --table-hover: var(--bg-tertiary); --scrollbar-track: #0f1f14; --scrollbar-thumb: #1e3d25; } /* ── THEME TRANSITIONS ─────────────────────────────────────── */ body, .sidebar, .header, .card, .modal, .input, .btn, .toast, .badge, .nav-item, table, .pagination-btn { transition: background-color var(--transition-slow), border-color var(--transition-slow), color var(--transition-slow), box-shadow var(--transition-slow); } /* ── AUTO THEME (follows system preference) ────────────────── */ @media (prefers-color-scheme: light) { [data-theme="auto"] { --bg-primary: #f5f7fa; --bg-secondary: #ffffff; --bg-tertiary: #eef1f6; --bg-card: #ffffff; --bg-hover: #e8ecf2; --text-primary: #1a202c; --text-secondary: #4a5568; --text-muted: #718096; --text-inverse: #ffffff; --border: #e2e8f0; --border-light: #cbd5e0; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 10px 30px rgba(0,0,0,0.12); --sidebar-bg: #ffffff; --sidebar-text: #4a5568; --sidebar-text-active: #1a202c; --sidebar-active-bg: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --sidebar-border: var(--border); --header-bg: rgba(255,255,255,0.92); --header-blur: blur(12px); --input-bg: #f7f9fc; --modal-bg: #ffffff; --table-hover: #f7f9fc; --scrollbar-track: #f0f0f0; --scrollbar-thumb: #ccc; } } @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg-primary: #0f0f1a; --bg-secondary: #1a1a2e; --bg-tertiary: #252540; --bg-card: #1e1e32; --bg-hover: #2a2a48; --text-primary: #ffffff; --text-secondary: #c4c4d4; --text-muted: #8b8b9e; --text-inverse: #0f0f1a; --border: #2d2d45; --border-light: #3a3a55; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.3); --shadow-lg: 0 10px 30px rgba(0,0,0,0.4); --sidebar-bg: var(--bg-secondary); --sidebar-text: rgba(255,255,255,0.7); --sidebar-text-active: #ffffff; --sidebar-active-bg: linear-gradient(135deg, var(--accent), var(--accent-secondary)); --sidebar-border: var(--border); --header-bg: rgba(15, 15, 26, 0.9); --header-blur: blur(12px); --input-bg: var(--bg-tertiary); --modal-bg: var(--bg-card); --table-hover: var(--bg-tertiary); --scrollbar-track: var(--bg-secondary); --scrollbar-thumb: var(--border); } } /* ── HIGH CONTRAST ─────────────────────────────────────────── */ @media (prefers-contrast: high) { [data-theme="light"], [data-theme="kurumsal"] { --text-primary: #000000; --text-secondary: #222222; --border: #000000; } [data-theme="dark"], [data-theme="midnight"], [data-theme="ocean"], [data-theme="forest"] { --text-primary: #ffffff; --text-secondary: #dddddd; --border: #ffffff; } }