/* Light/Dark Theme System Applies via [data-theme="dark"|"light"] on Default is dark. */ :root { color-scheme: dark light; } /* Light override tokens (map to existing kb-theme.css variables) */ html[data-theme="light"] { --bg: #f7f8fb; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #f1f3f7; --border: #dfe3ec; --elev-1: 0 1px 2px rgba(15,23,42,.05); --elev-2: 0 10px 30px rgba(15,23,42,.08); --text: #0b0d10; /* <- true black-on-light for body text */ --text-inv: #e7e9ef; --muted: #556070; } /* Floating toggle styles */ .kb-theme-toggle:hover { transform: translateX(-50%) translateY(-2px); } .kb-theme-toggle__thumb { width: 28px; height: 28px; border-radius: 999px; display: inline-grid; place-items: center; background: linear-gradient(180deg, var(--accent, #5cabff), #2f79ff); box-shadow: inset 0 0 10px rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.25); } .kb-theme-toggle__icon { width: 18px; height: 18px; fill: white; display: block; } .kb-theme-toggle__label { opacity: .8; } .kb-theme-toggle[aria-checked="true"] .kb-theme-toggle__label::after { content: "Light"; } .kb-theme-toggle[aria-checked="false"] .kb-theme-toggle__label::after { content: "Dark"; } @media (max-width: 640px){ .kb-theme-toggle__thumb { width: 26px; height: 26px; } } /* body token normalization */ html { background: var(--bg); } body { background: var(--bg); color: var(--text); } .kb-card, .results .result, .entry-body, .kb-panel { background: var(--panel); } @media (max-width: 767px){ /* (reserved) */ } /* header light override */ html[data-theme="light"] .kb-header{ background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65)); border-bottom: 1px solid var(--border); } /* Toggle placement: desktop bottom-right; mobile bottom-center */ .kb-theme-toggle { position: fixed !important; right: 24px !important; bottom: 24px !important; left: auto !important; transform: none !important; z-index: 9999 !important; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: var(--panel, #fff); box-shadow: var(--elev-2, 0 10px 30px rgba(0,0,0,.08)); border: 1px solid var(--border, #dfe3ec); cursor: pointer; user-select: none; font: 600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: var(--text, #0b0d10); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } @media (max-width: 767px){ .kb-theme-toggle{ left:50% !important; right:auto !important; bottom:18px !important; transform:translateX(-50%) !important; } } /* Light mode header & button overrides */ html[data-theme="light"] .kb-header{ background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75)) !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="light"] .btn{ background: var(--panel-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } /* header base via tokens */ .kb-header{ background: linear-gradient(180deg, rgba(9,12,18,.92), rgba(9,12,18,.75)); border-bottom: 1px solid var(--border); } html[data-theme="light"] .kb-header{ background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78)) !important; border-bottom: 1px solid var(--border) !important; } /* --- NEW: Force entry body to true black in light mode (without touching dark) --- */ html[data-theme="light"] .kb-entry { color: #000 !important; } /* Beat Tailwind Typography `.prose` color rules inside entries */ html[data-theme="light"] .kb-entry.prose, html[data-theme="light"] .kb-entry .prose { color: #000 !important; } html[data-theme="light"] .kb-entry :where(p, li, blockquote, code, pre, strong, em, td, th) { color: inherit !important; } /* --- Force entry text to true black ONLY in light mode and harmonize creds --- */ html[data-theme="light"] .kb-entry { color: #000 !important; } html[data-theme="light"] .kb-entry.prose, html[data-theme="light"] .kb-entry .prose { color: #000 !important; } html[data-theme="light"] .kb-entry :where(p, li, blockquote, code, pre, strong, em, td, th) { color: inherit !important; } /* Credentials area value color in light mode (safety pin) */ html[data-theme="light"] .kb-entry .secretval { color: #000 !important; }