/* ============================================================= dark-mode.css — MMedikal Dark Mode & Theme Toggle Kept separate so it can be independently maintained. Applied via [data-theme="dark"] on element. ============================================================= */ /* ── Light (varsayılan) değişkenler ── */ :root { --mm-bg-page: #f8fafc; --mm-bg-surface: #ffffff; --mm-bg-surface2: #f1f5f9; --mm-text-primary: #0f172a; --mm-text-muted: #475569; --mm-text-subtle: #94a3b8; --mm-border-color: rgba(15, 23, 42, 0.08); --mm-shadow: 0 4px 24px rgba(0,0,0,.06); --mm-topbar-bg: #0f172a; --mm-topbar-text: #e2e8f0; --mm-header-bg: rgba(255,255,255,.92); --mm-footer-bg: #ffffff; --mm-input-bg: #ffffff; --mm-input-border: #e2e8f0; --mm-card-bg: #ffffff; } /* ── Dark değişkenler ── */ [data-theme="dark"] { --mm-bg-page: #0b1120; --mm-bg-surface: #111827; --mm-bg-surface2: #1e293b; --mm-text-primary: #f1f5f9; --mm-text-muted: #94a3b8; --mm-text-subtle: #64748b; --mm-border-color: rgba(255,255,255,.08); --mm-shadow: 0 4px 24px rgba(0,0,0,.3); --mm-topbar-bg: #060d1a; --mm-topbar-text: #94a3b8; --mm-header-bg: rgba(11,17,32,.92); --mm-footer-bg: #0f172a; --mm-input-bg: #1e293b; --mm-input-border: #334155; --mm-card-bg: #111827; } /* ── Uygulama ── */ body { background-color: var(--mm-bg-page); color: var(--mm-text-primary); } .mm-topbar { background: var(--mm-topbar-bg) !important; color: var(--mm-topbar-text) !important; } .mm-header { background: var(--mm-header-bg) !important; } .surface-card, .card { background: var(--mm-card-bg) !important; border-color: var(--mm-border-color) !important; } .mm-muted, .text-muted { color: var(--mm-text-muted) !important; } /* ── Dark mode toggle button ── */ #mmThemeToggle { border-color: var(--mm-border-color) !important; color: var(--mm-text-primary) !important; } [data-theme="dark"] #mmThemeToggle { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.15) !important; } /* ── Logo swap based on [data-theme] (NOT OS preference) ── Light theme: show light logo, hide dark logo. Dark theme: show dark logo, hide light logo. If only one logo is uploaded, it always shows. ── */ .mm-logo-dark { display: none; } .mm-logo-light { display: block; } [data-theme="dark"] .mm-logo-light { display: none; } [data-theme="dark"] .mm-logo-dark { display: block; } /* ── Dark inputs / forms ── */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--mm-input-bg) !important; border-color: var(--mm-input-border) !important; color: var(--mm-text-primary) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #94a3b8 !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--mm-input-bg) !important; border-color: var(--mm-input-border) !important; color: var(--mm-text-primary) !important; } [data-theme="dark"] .form-text { color: var(--mm-text-muted) !important; } [data-theme="dark"] .modal-content { background-color: var(--mm-bg-surface) !important; color: var(--mm-text-primary) !important; border-color: var(--mm-border-color) !important; } [data-theme="dark"] .badge.text-bg-light, [data-theme="dark"] .bg-body, [data-theme="dark"] .bg-body-tertiary { background-color: var(--mm-bg-surface2) !important; color: var(--mm-text-primary) !important; border-color: var(--mm-border-color) !important; } [data-theme="dark"] .bg-success-subtle, [data-theme="dark"] .text-bg-success-subtle { background-color: rgba(15, 118, 110, 0.18) !important; color: #d2faf2 !important; border-color: rgba(45, 212, 191, 0.25) !important; } [data-theme="dark"] .bg-primary-subtle, [data-theme="dark"] .text-bg-primary-subtle { background-color: rgba(59, 130, 246, 0.18) !important; color: #dbeafe !important; border-color: rgba(96, 165, 250, 0.26) !important; } [data-theme="dark"] .text-success-emphasis, [data-theme="dark"] .text-primary-emphasis { color: var(--mm-text-primary) !important; } [data-theme="dark"] .accordion-button { background-color: var(--mm-bg-surface2) !important; color: var(--mm-text-primary) !important; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(15, 118, 110, 0.16) !important; color: #d2faf2 !important; } [data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(1); } [data-theme="dark"] .accordion-body { background-color: var(--mm-bg-surface) !important; color: var(--mm-text-muted) !important; } /* ── Dark footer ── */ [data-theme="dark"] footer { background: var(--mm-footer-bg) !important; border-color: rgba(255,255,255,.06) !important; } [data-theme="dark"] .mm-footer a { color: var(--mm-text-muted) !important; } [data-theme="dark"] .mm-footer a:hover { color: var(--mm-brand) !important; } [data-theme="dark"] .mm-footer-muted { color: var(--mm-text-subtle) !important; } [data-theme="dark"] .mm-footer p.text-muted { color: var(--mm-text-subtle) !important; } /* ── Dark home sections ── */ [data-theme="dark"] .hm-section--blog, [data-theme="dark"] .hm-section--products { background: var(--mm-bg-surface) !important; } [data-theme="dark"] .hm-section--categories { background: var(--mm-bg-surface2) !important; } [data-theme="dark"] .hm-cat-card, [data-theme="dark"] .hm-product-card, [data-theme="dark"] .hm-blog-card, [data-theme="dark"] .hm-testimonial-card { background: var(--mm-card-bg) !important; border-color: var(--mm-border-color) !important; } [data-theme="dark"] .hm-section-title { color: var(--mm-text-primary) !important; } [data-theme="dark"] .hm-section-sub { color: var(--mm-text-muted) !important; } [data-theme="dark"] .hm-cat-card__title { color: var(--mm-text-primary) !important; } [data-theme="dark"] .hm-blog-card__title { color: var(--mm-text-primary) !important; } [data-theme="dark"] .hm-testimonial-name { color: var(--mm-text-primary) !important; } [data-theme="dark"] .hm-testimonial-text { color: var(--mm-text-muted) !important; } [data-theme="dark"] .hm-swiper-btn { background: var(--mm-bg-surface2) !important; border-color: var(--mm-border-color) !important; color: var(--mm-text-muted) !important; } [data-theme="dark"] .hm-hero-swiper { background: linear-gradient(135deg, #020b18, #061120, #0a1a2e) !important; } /* ── Dark CTA section ── */ [data-theme="dark"] .hm-section--cta { background: linear-gradient(135deg, #020b18, #061120, #0d1f38) !important; } /* ── Smooth theme transition ── Scoped: only layout/content elements, NOT *, to avoid fighting Swiper transforms and hover micro-animations. ────────────────────────────────────── */ body, header, footer, .mm-topbar, .mm-header, .card, .stat-card, .hm-product-card, .hm-cat-card, .hm-blog-card, .hm-testimonial-card, .hm-trust-card, .hm-section--cta, nav, aside, main, .sidebar-item, .admin-topbar { transition: background-color .25s ease, border-color .25s ease, color .15s ease !important; } /* On first load: suppress transitions to prevent white → dark flash */ html.no-transitions, html.no-transitions * { transition: none !important; }