/* ============================================================ Canadong — Dark (night) theme. Applied when (set by /js/theme.js, which reads the visitor's saved preference: auto-by-clock / light / dark). Only neutral surfaces, text and borders flip; brand accents (red, category swatches, status badges, vote greens) are left untouched. Selector map derived from style.css + canadong.css. ============================================================ */ :root[data-theme="dark"] { /* Remap the brand tokens so every var(--canadong-ink) text and var(--canadong-soft) surface flips automatically. */ --canadong-ink: #e8edf3; --canadong-soft: #3a2420; /* Neutral palette — layered near-black surfaces (GitHub/Material style), off-white body text at ~AA contrast. Base is a dark grey, not pure black. */ --d-bg: #0f1216; --d-surface: #171b21; --d-surface-2: #20252d; --d-surface-3: #2a3039; --d-border: #2c333c; --d-border-in: #3b434d; --d-text: #e8edf3; --d-muted: #9aa4af; --d-faint: #737c86; color-scheme: dark; } /* ---------- base ---------- */ [data-theme="dark"] body { background-color: var(--d-bg); color: var(--d-text); } [data-theme="dark"] a, [data-theme="dark"] a:visited, [data-theme="dark"] a:active, [data-theme="dark"] a:link { color: #b9c0c8; } [data-theme="dark"] a:hover { color: #ffffff; } [data-theme="dark"] [class^="icon-"], [data-theme="dark"] [class*=" icon-"] { color: #98a0a9; } /* ---------- primary surfaces (cards / panels / bars) ---------- */ [data-theme="dark"] .header, [data-theme="dark"] .footer, [data-theme="dark"] .dropdown, [data-theme="dark"] .dropdown__user, [data-theme="dark"] .posts__item, [data-theme="dark"] .topic, [data-theme="dark"] .create, [data-theme="dark"] .create__preview, [data-theme="dark"] .signup__form, [data-theme="dark"] .rpost, [data-theme="dark"] .rcomments, [data-theme="dark"] .rlocked, [data-theme="dark"] .reply-form, [data-theme="dark"] .reply-signin, [data-theme="dark"] .notif-page, [data-theme="dark"] .wz, [data-theme="dark"] .emoji-pick, [data-theme="dark"] .emopanel, [data-theme="dark"] .profile__card, [data-theme="dark"] .legal, [data-theme="dark"] .maintenance, [data-theme="dark"] .admin__nav, [data-theme="dark"] .admin__panel, [data-theme="dark"] .admin-card, [data-theme="dark"] .admin-table-wrap, [data-theme="dark"] .admin-btn, [data-theme="dark"] .settings__card, [data-theme="dark"] .page-edit, [data-theme="dark"] .ad-card, [data-theme="dark"] .cat-admin, [data-theme="dark"] .admin-newcat, [data-theme="dark"] .poll, [data-theme="dark"] .install-sheet__card, [data-theme="dark"] .health-badge { background-color: var(--d-surface); border-color: var(--d-border); } /* card / structural borders that were near-white greys */ [data-theme="dark"] .posts__body, [data-theme="dark"] .rcomment, [data-theme="dark"] .header, [data-theme="dark"] .header__logo, [data-theme="dark"] .header__search, [data-theme="dark"] .footer__bline, [data-theme="dark"] .footer__menu, [data-theme="dark"] .nav, [data-theme="dark"] .topics__control, [data-theme="dark"] .topic__title, [data-theme="dark"] .topic__footer, [data-theme="dark"] .signup__section, [data-theme="dark"] .create__head, [data-theme="dark"] .create__textarea-head, [data-theme="dark"] .create__advanced, [data-theme="dark"] .notif-head, [data-theme="dark"] .notif-seeall, [data-theme="dark"] .notif-item, [data-theme="dark"] .notif-page__head, [data-theme="dark"] .admin-table th, [data-theme="dark"] .admin-table td, [data-theme="dark"] .admin-table tr, [data-theme="dark"] .cat-row, [data-theme="dark"] .poll__choice, [data-theme="dark"] .poll__peek li, [data-theme="dark"] .pollc, [data-theme="dark"] .pollc__rm { border-color: var(--d-border); } /* subtle grey fills → slightly raised dark */ [data-theme="dark"] .wz__toolbar, [data-theme="dark"] .emoji-pick__preview, [data-theme="dark"] .emoji-pick__tabs, [data-theme="dark"] .emopanel__tabs, [data-theme="dark"] .admin-table th, [data-theme="dark"] .adv, [data-theme="dark"] .admin-bulkbar, [data-theme="dark"] .dropdown__user-label, [data-theme="dark"] .posts__item--bg-gradient, [data-theme="dark"] .topic--answer, [data-theme="dark"] .statbar__track, [data-theme="dark"] .poll__bar, [data-theme="dark"] .role-member, [data-theme="dark"] .create__preview code, [data-theme="dark"] .topic__text code, [data-theme="dark"] .wz__editor blockquote { background-color: var(--d-surface-2); } /* hover fills */ [data-theme="dark"] .ractions__btn:hover, [data-theme="dark"] .rcollapse:hover, [data-theme="dark"] .notif-item > a:hover, [data-theme="dark"] .notif-seeall:hover, [data-theme="dark"] .admin__nav a:hover, [data-theme="dark"] .wz__btn:hover, [data-theme="dark"] .emoji-pick__tab:hover, [data-theme="dark"] .emopanel__tab:hover, [data-theme="dark"] .header__notify-btn:hover, [data-theme="dark"] .reaction-pick:hover, [data-theme="dark"] .theme-opts .js-theme-opt:hover { background-color: var(--d-surface-3); } /* ---------- text ---------- */ [data-theme="dark"] .topic__text > p, [data-theme="dark"] .rpost__title, [data-theme="dark"] .rmeta__author, [data-theme="dark"] .rpost__sub, [data-theme="dark"] .rcomments__head, [data-theme="dark"] .notif-text, [data-theme="dark"] .statbar__label, [data-theme="dark"] .ractions .js-score, [data-theme="dark"] .header__auth-link, [data-theme="dark"] .posts__content h3, [data-theme="dark"] .topic__name a, [data-theme="dark"] .topic__name a:hover, [data-theme="dark"] .topic__user-name, [data-theme="dark"] a:hover.topic__name { color: var(--d-text); } /* muted text */ [data-theme="dark"] .posts__views, [data-theme="dark"] .posts__activity, [data-theme="dark"] .posts__content p, [data-theme="dark"] .topic__date, [data-theme="dark"] .topic__info-title, [data-theme="dark"] .topic__title p, [data-theme="dark"] .rpost__meta, [data-theme="dark"] .rcomment__meta, [data-theme="dark"] .rtime, [data-theme="dark"] .ractions__btn, [data-theme="dark"] .rcomments__empty, [data-theme="dark"] .notif-meta, [data-theme="dark"] .notif-empty, [data-theme="dark"] .poll__flag, [data-theme="dark"] .poll__count, [data-theme="dark"] .poll__foot, [data-theme="dark"] .welcome__text p, [data-theme="dark"] .listing-head p, [data-theme="dark"] .header__user-btn, [data-theme="dark"] .footer__copyright span, [data-theme="dark"] .footer__version, [data-theme="dark"] .footer__language-btn, [data-theme="dark"] .footer__language-btn-m, [data-theme="dark"] .footer__theme-btn, [data-theme="dark"] .signup__head p, [data-theme="dark"] .signup__label, [data-theme="dark"] .create__head > span, [data-theme="dark"] .empty, [data-theme="dark"] .pagination__info { color: var(--d-muted); } /* faint text / placeholders */ [data-theme="dark"] .create__preview-empty, [data-theme="dark"] .ractions__stat, [data-theme="dark"] .admin-table__user small, [data-theme="dark"] .settings__note, [data-theme="dark"] .topic__edited, [data-theme="dark"] .rclose { color: var(--d-faint); } /* ---------- form controls ---------- */ [data-theme="dark"] select, [data-theme="dark"] .btn-select, [data-theme="dark"] .form-control, [data-theme="dark"] textarea, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="url"], [data-theme="dark"] input[type="number"], [data-theme="dark"] .create input.form-control, [data-theme="dark"] .create textarea.form-control, [data-theme="dark"] .create .custom-select select, [data-theme="dark"] .wz__editor { background-color: var(--d-surface-2); color: var(--d-text); border-color: var(--d-border-in); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--d-faint); } [data-theme="dark"] .wz__editor:empty:before { color: var(--d-faint); } /* default grey button + check/radio pills */ [data-theme="dark"] .btn, [data-theme="dark"] .btn:link, [data-theme="dark"] .btn:visited, [data-theme="dark"] .btn:active, [data-theme="dark"] label.custom-checkbox, [data-theme="dark"] label.custom-radio { background-color: var(--d-surface-3); color: var(--d-text); } [data-theme="dark"] .btn i, [data-theme="dark"] .btn-select i { color: var(--d-muted); } /* ---------- component odds & ends ---------- */ /* blockquotes */ [data-theme="dark"] .topic__text blockquote, [data-theme="dark"] .wz__editor blockquote, [data-theme="dark"] .create__preview blockquote { border-left-color: var(--d-border-in); background-color: var(--d-surface-2); color: var(--d-muted); } /* code chips readable */ [data-theme="dark"] .topic__text code, [data-theme="dark"] .create__preview code { color: #e6e8ea; } /* poll: chosen option + hover keep the red accent */ [data-theme="dark"] .poll__choice:hover { background-color: var(--d-surface-3); border-color: var(--canadong-red); } /* answer / selected topic tints */ [data-theme="dark"] .topic--answer { background-color: var(--d-surface-2); } [data-theme="dark"] .topic--selected { background-color: #2a2320; } /* unread notification tint */ [data-theme="dark"] .notif-item.is-unread > a { background-color: #241d1c; } /* toast stays a solid dark chip with light text */ [data-theme="dark"] .toast { background: #0f1114; color: #ffffff; } /* thin scrollbars on dark */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a424d; } /* ---------- readability fixes for light-only sections ---------- */ /* Welcome hero: was linear-gradient(#ffffff → soft) with faint text — invisible on dark. Give it a dark gradient; its h2 already uses the (remapped) ink var. */ [data-theme="dark"] .welcome { background: linear-gradient(120deg, var(--d-surface) 0%, #241a16 100%); border-color: var(--d-border); } [data-theme="dark"] .welcome__text p { color: var(--d-muted); } /* Pinned thread row carries .bg-fef2e0 (cream) with `!important` from the category palette, so we must beat it with `!important` too. */ [data-theme="dark"] .posts__item.bg-fef2e0 { background-color: var(--d-surface-2) !important; box-shadow: inset 3px 0 0 var(--canadong-red); } /* Zebra-striped alternate rows carry .bg-f2f4f6 (#f2f4f6 !important) — in dark mode that left the title (now light) on a near-white row, i.e. invisible. Flip it to a subtly-raised dark surface so the stripe still reads. */ [data-theme="dark"] .posts__item.bg-f2f4f6 { background-color: var(--d-surface-2) !important; } /* Keep flash messages legible on the dark-tinted soft surface. */ [data-theme="dark"] .flash--error { color: #ff9f95; border-color: #5a2b26; } [data-theme="dark"] .flash--success { color: #7ee2a8; } /* ---------- footer day/night toggle switch ---------- */ .footer__theme-switch { background: none; border: 0; padding: 0; margin-left: 18px; cursor: pointer; display: inline-flex; align-items: center; } .theme-switch { position: relative; width: 48px; height: 24px; border-radius: 999px; background: #d7dce1; transition: background .2s ease; flex: 0 0 auto; } .theme-switch__ic { position: absolute; top: 0; height: 24px; display: flex; align-items: center; font-size: 11px; line-height: 1; z-index: 1; } .theme-switch__ic--sun { left: 6px; } .theme-switch__ic--moon { right: 6px; } .theme-switch__knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s ease; } :root[data-theme="dark"] .theme-switch { background: #3b434d; } :root[data-theme="dark"] .theme-switch__knob { transform: translateX(24px); background: #cfd6dd; }