MediaWiki:Common.css

/* ===== DARK MODE ===== */
body.mw-dark-mode {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-heading: #ffffff;
    --link-color: #64b5f6;
    --link-visited: #9575cd;
    --link-new: #ef5350;
    --border-color: #333355;
    --table-header-bg: #1a1a3e;
    --table-row-alt: #16213e;
    --code-bg: #0d1117;
}

/* === Base containers === */
body.mw-dark-mode,
body.mw-dark-mode .mw-page-container,
body.mw-dark-mode .vector-body,
body.mw-dark-mode .mw-body,
body.mw-dark-mode .mw-body-content,
body.mw-dark-mode #bodyContent,
body.mw-dark-mode #content,
body.mw-dark-mode .mw-content-ltr {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* === Header === */
body.mw-dark-mode .vector-header,
body.mw-dark-mode .vector-sticky-header,
body.mw-dark-mode .mw-header,
body.mw-dark-mode .vector-header-container {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* === Search bar (critical fix) === */
body.mw-dark-mode .cdx-text-input__input,
body.mw-dark-mode .cdx-search-input__input,
body.mw-dark-mode .vector-search-box-input,
body.mw-dark-mode input[type="search"],
body.mw-dark-mode .cdx-text-input,
body.mw-dark-mode .cdx-search-input,
body.mw-dark-mode .vector-search-box,
body.mw-dark-mode .vector-search-box-vue .vector-search-box-input,
body.mw-dark-mode .cdx-search-input--has-end-button .cdx-text-input,
body.mw-dark-mode .cdx-text-input__input:focus {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Search button */
body.mw-dark-mode .cdx-button,
body.mw-dark-mode .searchButton,
body.mw-dark-mode button.cdx-button {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Search suggestions dropdown */
body.mw-dark-mode .cdx-menu,
body.mw-dark-mode .cdx-menu__listbox,
body.mw-dark-mode .cdx-menu-item,
body.mw-dark-mode .vector-search-box-vue .cdx-menu,
body.mw-dark-mode .cdx-typeahead-search__search-footer {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.mw-dark-mode .cdx-menu-item:hover,
body.mw-dark-mode .cdx-menu-item--highlighted {
    background-color: var(--bg-tertiary) !important;
}

/* === Sidebar / Left column === */
body.mw-dark-mode .vector-column-start,
body.mw-dark-mode .vector-main-menu,
body.mw-dark-mode .vector-main-menu-container,
body.mw-dark-mode .vector-pinnable-header,
body.mw-dark-mode .vector-toc,
body.mw-dark-mode .vector-toc-landmark,
body.mw-dark-mode #mw-panel,
body.mw-dark-mode .vector-menu-portal,
body.mw-dark-mode .sidebar-toc {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

body.mw-dark-mode .vector-menu-tabs li a,
body.mw-dark-mode .vector-menu-portal .vector-menu-heading,
body.mw-dark-mode .vector-menu-portal li a,
body.mw-dark-mode .mw-sidebar-action-link,
body.mw-dark-mode #mw-panel .vector-menu-portal .vector-menu-heading,
body.mw-dark-mode .vector-toc .vector-toc-link,
body.mw-dark-mode .sidebar-toc-link {
    color: var(--text-secondary) !important;
}

/* === Right sidebar / Tools === */
body.mw-dark-mode .vector-column-end,
body.mw-dark-mode .vector-page-tools,
body.mw-dark-mode .vector-page-tools-landmark,
body.mw-dark-mode #mw-panel-toc,
body.mw-dark-mode .vector-settings,
body.mw-dark-mode .vector-page-toolbar-container {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

/* Any remaining white panels or containers */
body.mw-dark-mode div[class*="vector-"],
body.mw-dark-mode .mw-portlet,
body.mw-dark-mode .mw-portlet-body {
    background-color: transparent !important;
}

/* === Links === */
body.mw-dark-mode a { color: var(--link-color) !important; }
body.mw-dark-mode a:visited { color: var(--link-visited) !important; }
body.mw-dark-mode a.new { color: var(--link-new) !important; }

/* === Headings & borders === */
body.mw-dark-mode h1, body.mw-dark-mode h2, body.mw-dark-mode h3,
body.mw-dark-mode h4, body.mw-dark-mode h5, body.mw-dark-mode h6,
body.mw-dark-mode .mw-headline {
    color: var(--text-heading) !important;
    border-bottom-color: var(--border-color) !important;
}

body.mw-dark-mode hr,
body.mw-dark-mode .mw-heading::after,
body.mw-dark-mode h2,
body.mw-dark-mode .mw-heading2 {
    border-bottom-color: var(--border-color) !important;
}

/* === Tables === */
body.mw-dark-mode .wikitable,
body.mw-dark-mode table.wikitable {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.mw-dark-mode .wikitable th {
    background-color: var(--table-header-bg) !important;
    color: var(--text-heading) !important;
    border-color: var(--border-color) !important;
}

body.mw-dark-mode .wikitable td {
    border-color: var(--border-color) !important;
}

body.mw-dark-mode .wikitable tr:nth-child(even) {
    background-color: var(--table-row-alt) !important;
}

/* === Category links bar === */
body.mw-dark-mode .catlinks,
body.mw-dark-mode #catlinks {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* === Edit/action tabs === */
body.mw-dark-mode .vector-menu-tabs,
body.mw-dark-mode .vector-menu-tabs .mw-list-item,
body.mw-dark-mode .vector-menu-tabs .mw-list-item a,
body.mw-dark-mode #p-views li a,
body.mw-dark-mode #p-namespaces li a {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
}

body.mw-dark-mode .vector-menu-tabs .mw-list-item.selected a,
body.mw-dark-mode .vector-menu-tabs .mw-list-item a:hover {
    color: var(--text-heading) !important;
}

/* === Inputs & forms (global) === */
body.mw-dark-mode input,
body.mw-dark-mode textarea,
body.mw-dark-mode select,
body.mw-dark-mode .oo-ui-inputWidget-input,
body.mw-dark-mode .oo-ui-textInputWidget input,
body.mw-dark-mode .oo-ui-widget {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* === TOC === */
body.mw-dark-mode .toc,
body.mw-dark-mode #toc {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* === Code blocks === */
body.mw-dark-mode code, body.mw-dark-mode pre {
    background-color: var(--code-bg) !important;
    color: var(--text-primary) !important;
}

/* === Notification badge === */
body.mw-dark-mode .mw-echo-notifications-badge,
body.mw-dark-mode .mw-echo-notification-badge-nojs {
    background-color: var(--bg-tertiary) !important;
}

/* === User menu / personal tools === */
body.mw-dark-mode #p-personal,
body.mw-dark-mode .vector-user-links,
body.mw-dark-mode .vector-user-menu,
body.mw-dark-mode .vector-menu-content,
body.mw-dark-mode .vector-dropdown-content,
body.mw-dark-mode .vector-menu--hide {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dropdown menus */
body.mw-dark-mode .vector-dropdown .vector-dropdown-content {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* === Logo wordmark === */
body.mw-dark-mode .mw-logo-wordmark {
    color: var(--text-heading) !important;
}

/* === Footer === */
body.mw-dark-mode .mw-footer,
body.mw-dark-mode #footer {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-top-color: var(--border-color) !important;
}

/* === Scrollbars (Webkit) === */
body.mw-dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.mw-dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
body.mw-dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

/* === Misc patches === */
body.mw-dark-mode .mw-editsection a {
    color: var(--text-secondary) !important;
}

body.mw-dark-mode .mw-indicators,
body.mw-dark-mode .mw-indicator {
    background-color: transparent !important;
}

body.mw-dark-mode img {
    opacity: 0.92;
}

/* === Dark mode toggle button === */
#mw-dark-toggle {
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 13px;
    background: transparent;
    color: inherit;
    margin-left: 8px;
}

#mw-dark-toggle:hover {
    background-color: rgba(128,128,128,0.2);
}

/* === Nuclear option: catch any remaining white backgrounds === */
body.mw-dark-mode *:not(img):not(video):not(canvas):not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon) {
    scrollbar-color: var(--border-color) var(--bg-primary);
}