/* ============================ Kos Bu Cheri — Dark Theme ============================ When is set, all themed elements automatically switch to dark variants via these overrides. Include this file in all HTML pages. */ /* ---- Light mode defaults (already in Tailwind config, repeated for CSS-level control) ---- */ :root { --kos-bg: #f8f9fa; --kos-surface: #ffffff; --kos-surface-container: #edeeef; --kos-surface-container-low: #f3f4f5; --kos-surface-container-high: #e7e8e9; --kos-surface-variant: #e1e3e4; --kos-on-surface: #191c1d; --kos-on-surface-variant: #3e4943; --kos-outline: #6e7a73; --kos-outline-variant: #bdc9c1; --kos-primary: #005c42; --kos-primary-container: #047756; --kos-on-primary-container: #9efbd2; --kos-header-bg: rgba(255, 255, 255, 0.85); --kos-sidebar-bg: #ffffff; --kos-card-bg: #ffffff; --kos-card-border: #bdc9c1; --kos-input-bg: #ffffff; --kos-input-border: #bdc9c1; --kos-text-primary: #191c1d; --kos-text-secondary: #3e4943; --kos-text-muted: #6e7a73; --kos-footer-bg: #f9fafb; --kos-hover-bg: #f3f4f5; --kos-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --kos-border: #e5e7eb; --kos-teal-accent: #005c42; --kos-teal-light: #f0fdfa; --kos-error-soft: #fef2f2; } /* ---- Dark mode overrides ---- */ html.dark { --kos-bg: #0f1214; --kos-surface: #1a1e22; --kos-surface-container: #1e2328; --kos-surface-container-low: #161a1e; --kos-surface-container-high: #252a30; --kos-surface-variant: #2a2f35; --kos-on-surface: #3ab07b; --kos-on-surface-variant: #a8b0b4; --kos-outline: #5a6268; --kos-outline-variant: #3a4248; --kos-primary: #4fd8a5; --kos-primary-container: #0d8c64; --kos-on-primary-container: #b2f5d8; --kos-header-bg: rgba(15, 18, 20, 0.92); --kos-sidebar-bg: #141820; --kos-card-bg: #1a1e22; --kos-card-border: #2a3038; --kos-input-bg: #1e2328; --kos-input-border: #3a4248; --kos-text-primary: #3ab07b; --kos-text-secondary: #a8b0b4; --kos-text-muted: #6c757d; --kos-footer-bg: #0c0f12; --kos-hover-bg: #252a30; --kos-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --kos-border: #2a3038; --kos-teal-accent: #4fd8a5; --kos-teal-light: rgba(79, 216, 165, 0.08); --kos-error-soft: rgba(239, 68, 68, 0.1); color-scheme: dark; } /* ========= Global element overrides ========= */ html.dark body { background-color: var(--kos-bg) !important; color: var(--kos-text-primary) !important; } /* Header */ html.dark header, html.dark .fixed.top-0 { background: var(--kos-header-bg) !important; border-color: var(--kos-border) !important; backdrop-filter: blur(12px); } html.dark header a, html.dark header button { color: var(--kos-text-secondary); } html.dark header a:first-child, html.dark header .text-teal-800, html.dark header .text-xl { color: var(--kos-teal-accent) !important; } /* Sidebar */ html.dark nav, html.dark aside, html.dark #sidebar-menu { background-color: var(--kos-sidebar-bg) !important; border-color: var(--kos-border) !important; } html.dark nav a, html.dark aside a, html.dark #sidebar-menu a { color: var(--kos-text-secondary) !important; } html.dark nav a:hover, html.dark aside a:hover, html.dark #sidebar-menu a:hover { background-color: var(--kos-hover-bg) !important; } /* Active sidebar item */ html.dark nav a.bg-teal-50, html.dark aside a.bg-teal-50, html.dark #sidebar-menu a.bg-teal-50, html.dark nav a[class*="border-teal-600"], html.dark aside a[class*="border-teal-600"] { background-color: var(--kos-teal-light) !important; color: var(--kos-teal-accent) !important; } html.dark .text-teal-700, html.dark .text-teal-800 { color: var(--kos-teal-accent) !important; } /* Main content area */ html.dark main { background-color: var(--kos-bg) !important; } /* Cards */ html.dark .bg-surface, html.dark .bg-surface-container-lowest, html.dark .bg-surface-bright, html.dark .bg-white, html.dark [class*="bg-surface-container-lowest"], html.dark [class*="bg-surface-bright"], html.dark [class*="rounded-xl"][class*="border"] { background-color: var(--kos-card-bg) !important; border-color: var(--kos-card-border) !important; } /* Text overrides */ html.dark .text-on-surface, html.dark .text-on-background, html.dark .text-gray-800, html.dark .text-gray-900, html.dark h1, html.dark h2, html.dark h3 { color: var(--kos-text-primary) !important; } html.dark .text-on-surface-variant, html.dark .text-gray-600, html.dark .text-gray-500 { color: var(--kos-text-secondary) !important; } html.dark .text-outline, html.dark .text-gray-400 { color: var(--kos-text-muted) !important; } /* Inputs */ html.dark input, html.dark select, html.dark textarea { background-color: var(--kos-input-bg) !important; border-color: var(--kos-input-border) !important; color: var(--kos-text-primary) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--kos-text-muted) !important; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: var(--kos-teal-accent) !important; box-shadow: 0 0 0 2px rgba(79, 216, 165, 0.2) !important; } /* Tables */ html.dark table { color: var(--kos-text-primary); } html.dark thead tr, html.dark .bg-surface-container-low { background-color: var(--kos-surface-container) !important; } html.dark tbody tr { border-color: var(--kos-border) !important; } html.dark tbody tr:hover { background-color: var(--kos-hover-bg) !important; } /* Modals */ html.dark [id*="modal"] { background-color: var(--kos-card-bg) !important; border-color: var(--kos-card-border) !important; } html.dark [id*="modal"] .bg-gray-50 { background-color: var(--kos-surface-container) !important; } /* Footer */ html.dark footer, html.dark .bg-gray-50 { background-color: var(--kos-footer-bg) !important; border-color: var(--kos-border) !important; } html.dark footer span, html.dark footer p { color: var(--kos-text-secondary) !important; } html.dark footer a { color: var(--kos-text-muted) !important; } /* Buttons — keep primary green buttons visible */ html.dark .bg-primary-container { background-color: var(--kos-primary-container) !important; } /* Hero overlay on beranda */ html.dark .relative.w-full img { opacity: 0.7; } /* Badge overrides */ html.dark .bg-surface-variant { background-color: var(--kos-surface-variant) !important; } /* Scrollbar */ html.dark ::-webkit-scrollbar { width: 8px; } html.dark ::-webkit-scrollbar-track { background: var(--kos-bg); } html.dark ::-webkit-scrollbar-thumb { background: var(--kos-outline); border-radius: 4px; } /* Notification modal fixes */ html.dark .bg-gray-100 { background-color: var(--kos-hover-bg) !important; } /* Border overrides for dividers */ html.dark .border-gray-200, html.dark .border-gray-100, html.dark .border-outline-variant, html.dark [class*="border-surface"] { border-color: var(--kos-border) !important; }