/* ========================= Theme system (Light / Dark) Usage: or "dark" ========================= */ /* Light (default) */ :root, html[data-theme="light"] { --bg: #f0f2f5; --surface: #ffffff; --surface-2: #e7e3e3; --text: #1d1d1d; --text-muted: #666666; --border: #e4e4e4; --border-2: #eeeeee; --brand: #000000; /* header/footer background */ --brand-2: #ffffff; /* sidebar background */ --brand-hover: #333333; --brand-accent: #2457d6; --brand-accent-soft: #edf3ff; --text-on-brand: #ffffff; --logo-color: #0f172a; --link: #000000; --link-hover: #2457d6; --link-footer: #9fd4ff; --shadow-1: 0 0 18px rgba(0, 0, 0, 0.12); --shadow-2: 0 0 12px rgba(0, 0, 0, 0.06); --shadow-3: 0 3px 8px rgba(0, 0, 0, 0.30); --success: #27ae60; --danger: #e74c3c; --sidebar-w: 260px; --sidebar-w-mobile: 240px; --header-h: 64px; /* Home aliases (اختیاری، برای بخش home که گفتی) */ --brand-bg: var(--bg); --brand-primary: var(--brand); --brand-muted: var(--text-muted); --brand-card-bg: var(--surface); --brand-border: var(--border); } /* Dark */ html[data-theme="dark"] { --bg: #0f1115; --surface: #151922; --surface-2: #0f131b; --text: #e9eef7; --text-muted: #aab3c2; --border: #2a3040; --border-2: #232a38; --brand: #0b0d12; --brand-2: #0b0d12; --brand-hover: #171b26; --brand-accent: #8fb5ff; --brand-accent-soft: #172033; --text-on-brand: #ffffff; --logo-color: #e5e7eb; --link: #e9eef7; --link-hover: #8fb5ff; --link-footer: #9fd4ff; --shadow-1: 0 0 18px rgba(0, 0, 0, 0.35); --shadow-2: 0 0 12px rgba(0, 0, 0, 0.30); --shadow-3: 0 3px 8px rgba(0, 0, 0, 0.45); --success: #39d98a; /* کمی روشن‌تر برای dark */ --danger: #ff6b6b; /* کمی روشن‌تر برای dark */ --sidebar-w: 260px; --sidebar-w-mobile: 240px; --header-h: 64px; /* Home aliases */ --brand-bg: var(--bg); --brand-primary: var(--brand); --brand-muted: var(--text-muted); --brand-card-bg: var(--surface); --brand-border: var(--border); } /* اگر user انتخاب نکرده بود، از سیستم تبعیت کن */ @media (prefers-color-scheme: light) { html:not([data-theme]) { --bg: #f0f2f5; --surface: #ffffff; --surface-2: #e7e3e3; --text: #1d1d1d; --text-muted: #666666; --border: #e4e4e4; --border-2: #eeeeee; --brand: #000000; /* header/footer background */ --brand-2: #ffffff; /* sidebar background */ --brand-hover: #333333; --brand-accent: #2457d6; --brand-accent-soft: #edf3ff; --text-on-brand: #ffffff; --logo-color: #0f172a; --link: #000000; --link-hover: #2457d6; --link-footer: #9fd4ff; --shadow-1: 0 0 18px rgba(0, 0, 0, 0.12); --shadow-2: 0 0 12px rgba(0, 0, 0, 0.06); --shadow-3: 0 3px 8px rgba(0, 0, 0, 0.30); --success: #27ae60; --danger: #e74c3c; --sidebar-w: 260px; --sidebar-w-mobile: 240px; --header-h: 64px; /* Home aliases (اختیاری، برای بخش home که گفتی) */ --brand-bg: var(--bg); --brand-primary: var(--brand); --brand-muted: var(--text-muted); --brand-card-bg: var(--surface); --brand-border: var(--border); } } /* ========================================================= Bridge: home.css brand tokens -> theme tokens (بدون تغییر در ظاهر home.css) ========================================================= */ /* Home aliases */ :root { --brand-bg: var(--bg); --brand-card: var(--surface); --brand-border: var(--border-2); /* critical fix */ --brand-primary: var(--brand); --brand-muted: var(--text-muted); --brand-text: var(--text); } html[data-theme="dark"] { --brand-bg: var(--bg); --brand-primary: var(--text); --brand-muted: var(--text-muted); --brand-card-bg: var(--surface); --brand-border: var(--border-2); } /* ========================================================= Bootstrap color classes -> theme tokens (برای دکمه‌ها/متن‌هایی که هنوز فیکس هستند) ========================================================= */ /* لینک‌ها و btn-link (Bootstrap) */ a, .btn-link { color: var(--link) !important; } a:hover, .btn-link:hover { color: var(--link) !important; opacity: .9; } /* متن‌های muted (Bootstrap) */ .text-muted, .small.text-muted { color: var(--text-muted) !important; } /* btn-outline-dark (Bootstrap) */ .btn-outline-dark { color: var(--text) !important; border-color: var(--border) !important; background: transparent !important; } .btn-outline-dark:hover, .btn-outline-dark:focus { color: var(--text) !important; background: var(--surface-2) !important; border-color: var(--border) !important; } /* bg-dark / text-bg-dark / badge bg-dark (Bootstrap) */ .bg-dark { background-color: var(--brand) !important; } .text-bg-dark { background-color: var(--brand) !important; color: #fff !important; } .badge.bg-dark { background-color: var(--brand) !important; color: #fff !important; } /* Accordion (Bootstrap) -> theme */ .accordion { --bs-accordion-bg: var(--surface); --bs-accordion-color: var(--text); --bs-accordion-border-color: var(--border-2); --bs-accordion-btn-bg: var(--surface); --bs-accordion-btn-color: var(--text); --bs-accordion-active-bg: var(--surface-2); --bs-accordion-active-color: var(--text); } .accordion-button::after { filter: invert(0); } html[data-theme="dark"] .accordion-button::after { filter: invert(1); /* آیکن فلش در دارک واضح می‌شود */ } html[data-theme="dark"], html[data-theme="dark"] body { background: var(--bg); } html[dir="rtl"] body { font-family: Vazirmatn, sans-serif; } html[dir="ltr"] body { font-family: Inter, Arial, sans-serif; } html[dir="rtl"] .header-title { text-align: right; } html[dir="ltr"] .header-title { text-align: left; }