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;
}

body.mw-dark-mode,
body.mw-dark-mode .mw-page-container,
body.mw-dark-mode .vector-body,
body.mw-dark-mode .mw-body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.mw-dark-mode .vector-header,
body.mw-dark-mode .vector-column-start,
body.mw-dark-mode .vector-sticky-header,
body.mw-dark-mode .mw-header {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !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 {
    color: var(--text-secondary) !important;
}

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; }

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 .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;
}

body.mw-dark-mode .mw-body-content,
body.mw-dark-mode #bodyContent,
body.mw-dark-mode #content {
    color: var(--text-primary) !important;
}

body.mw-dark-mode .catlinks {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.mw-dark-mode #mw-navigation,
body.mw-dark-mode .vector-menu-content {
    background-color: var(--bg-secondary) !important;
}

body.mw-dark-mode input, body.mw-dark-mode textarea, body.mw-dark-mode select {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.mw-dark-mode .mw-search-input input,
body.mw-dark-mode .cdx-text-input__input {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

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

body.mw-dark-mode .toc {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

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

body.mw-dark-mode .vector-pinnable-header,
body.mw-dark-mode .vector-main-menu,
body.mw-dark-mode .vector-toc {
    background-color: var(--bg-secondary) !important;
}

body.mw-dark-mode .mw-footer {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-top-color: var(--border-color) !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);
}