/* Dark theme overrides.
* Applied when has class "dark" (set by the pre-paint inline script in
* the page heads: localStorage 'theme' wins, otherwise follows the OS
* prefers-color-scheme). Specificity: html.dark + class beats the Tailwind
* utility classes; !important is only used against inline styles. */
html.dark {
color-scheme: dark;
}
/* Page canvas (the layout sets an inline grid-paper background) */
html.dark body {
background-color: #131417 !important;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
}
/* ---------- Neutral surfaces ---------- */
html.dark .bg-white { background-color: #1d1e23; }
html.dark .bg-gray-50 { background-color: #191a1f; }
html.dark .bg-gray-100 { background-color: #24252b; }
html.dark .bg-gray-200 { background-color: #303138; }
html.dark .bg-gray-300 { background-color: #3a3b43; }
/* ---------- Borders ---------- */
html.dark .border-gray-50 { border-color: #24252b; }
html.dark .border-gray-100 { border-color: #2a2b32; }
html.dark .border-gray-200 { border-color: #33343c; }
html.dark .border-gray-300 { border-color: #3d3e47; }
html.dark .border-black { border-color: #e8e9ec; }
/* ---------- Text ---------- */
html.dark .text-black { color: #e8e9ec; }
html.dark .text-gray-400 { color: #9d9ea7; }
html.dark .text-gray-500 { color: #8f909a; }
html.dark .text-gray-600 { color: #a8a9b2; }
html.dark .text-gray-700 { color: #bcbdc6; }
html.dark .text-gray-800 { color: #d0d1d8; }
html.dark .text-gray-900 { color: #e2e3e8; }
html.dark a.hover\:text-black:hover { color: #ffffff; }
html.dark button.hover\:text-black:hover { color: #ffffff; }
html.dark .hover\:text-black:hover { color: #ffffff; }
/* ---------- Hover / focus states ---------- */
html.dark .hover\:bg-gray-50:hover { background-color: #24252b; }
html.dark .hover\:bg-gray-100:hover { background-color: #2a2b32; }
html.dark .hover\:bg-gray-200:hover { background-color: #33343c; }
html.dark .focus\:border-black:focus { border-color: #9d9ea7; }
html.dark .item-hover:hover { background: #24252b; }
/* ---------- Inputs ---------- */
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6a6b73; }
/* ---------- Links and status text ---------- */
html.dark .text-blue-600 { color: #8ab4f8; }
html.dark .text-blue-700 { color: #a5c8fa; }
html.dark .hover\:text-blue-700:hover { color: #a5c8fa; }
html.dark .hover\:text-blue-800:hover { color: #a5c8fa; }
html.dark .text-green-600 { color: #4ade80; }
html.dark .text-green-700 { color: #6ee7a0; }
html.dark .text-red-600 { color: #f87171; }
html.dark .text-red-700 { color: #fca5a5; }
html.dark .text-orange-600 { color: #fb923c; }
html.dark .text-yellow-600 { color: #facc15; }
html.dark .text-yellow-700 { color: #fde047; }
/* ---------- Tinted badges ---------- */
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1); }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.16); }
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1); }
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.16); }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1); }
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.16); }
html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.1); }
html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.16); }
html.dark .bg-yellow-100 { background-color: rgba(250, 204, 21, 0.14); }
html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.35); }
html.dark .border-yellow-200 { border-color: rgba(250, 204, 21, 0.35); }
/* ---------- Editor toolbar / notifications (custom classes in layout) ---------- */
html.dark .toolbar-btn { color: #9d9ea7; }
html.dark .toolbar-btn:hover { background: #2a2b32; color: #e2e3e8; }
html.dark .notif-item { border-bottom-color: #2a2b32; color: #e2e3e8; }
html.dark .notif-item:hover { background: #24252b; }
html.dark .notif-item.unread { background: rgba(251, 191, 36, 0.1); }
html.dark .notif-item.unread:hover { background: rgba(251, 191, 36, 0.16); }
/* ---------- Markdown content ---------- */
html.dark .markdown-body code { background: #2a2b32; }
html.dark .markdown-body blockquote {
border-left-color: #3d3e47;
color: #9d9ea7;
background: #191a1f;
}
html.dark .markdown-body a { color: #8ab4f8; }
html.dark .markdown-body a:hover { color: #a5c8fa; }
html.dark .markdown-body hr { border-top-color: #33343c; }
html.dark .markdown-body th,
html.dark .markdown-body td { border-color: #33343c; }
html.dark .markdown-body th { background: #191a1f; }
html.dark .markdown-body del { color: #8f909a; }
/* ---------- Theme toggle button ---------- */
#themeToggle { cursor: pointer; background: transparent; border: none; padding: 0; }