MediaWiki:Gadget-darkmode.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * RemiliaWiki Dark Mode Styles
 * Add to: MediaWiki:Gadget-darkmode.css
 * Skin: Vector Legacy
 */

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
    /* Light mode (default) */
    --bg-body: #f6f6f6;
    --bg-content: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #eaecf0;

    --text-primary: #202122;
    --text-secondary: #54595d;
    --text-muted: #72777d;

    --border-color: #a2a9b1;
    --border-subtle: #c8ccd1;
    --border-faint: #eaecf0;

    --link-color: #0645ad;
    --link-visited: #0b0080;
    --link-new: #d33;
    --link-external: #36b;

    --accent-primary: #36c;
    --accent-progressive: #36c;
    --accent-destructive: #d33;

    /* Tables */
    --table-header-bg: #eaecf0;
    --table-row-alt: #f8f9fa;

    /* Infobox */
    --infobox-bg: #f8f9fa;
    --infobox-header: #c8ccd1;

    /* TOC */
    --toc-bg: #f8f9fa;

    /* Code */
    --code-bg: #f8f9fa;
    --code-border: #eaecf0;

    /* Diffs */
    --diff-added-bg: #d8ecde;
    --diff-added-border: #a3d3b3;
    --diff-deleted-bg: #feeaea;
    --diff-deleted-border: #f8b4b4;
    --diff-context-bg: #f8f9fa;

    /* Notices */
    --notice-bg: #eaf3ff;
    --notice-border: #36c;
    --warning-bg: #fef6e7;
    --warning-border: #fc3;

    /* Headings */
    --heading-color: #202122;
}

[data-theme="dark"] {
    /* Dark mode overrides - edith.reisen inspired high-contrast */
    --bg-body: #000000;
    --bg-content: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;

    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;

    --border-color: #333333;
    --border-subtle: #252525;
    --border-faint: #1a1a1a;

    /* Orange accent links (edith.reisen style) */
    --link-color: #ff6600;
    --link-visited: #cc5500;
    --link-new: #ff4444;
    --link-external: #ff8833;

    --accent-primary: #ff6600;
    --accent-progressive: #ff6600;
    --accent-destructive: #ff6b6b;

    /* Tables */
    --table-header-bg: #1a1a1a;
    --table-row-alt: #111111;

    /* Infobox */
    --infobox-bg: #111111;
    --infobox-header: #1a1a1a;

    /* TOC */
    --toc-bg: #111111;

    /* Code - blue background like edith.reisen */
    --code-bg: #000066;
    --code-border: #0000aa;

    /* Diffs */
    --diff-added-bg: #0a1f0a;
    --diff-added-border: #1a4020;
    --diff-deleted-bg: #1f0a0a;
    --diff-deleted-border: #401a1a;
    --diff-context-bg: #111111;

    /* Notices */
    --notice-bg: #0a1a2a;
    --notice-border: #ff6600;
    --warning-bg: #2a1a0a;
    --warning-border: #ff6600;

    /* Orange headings (edith.reisen style) */
    --heading-color: #ff6600;
}

/* ==========================================================================
   DARK MODE TOGGLE
   ========================================================================== */

#pt-darkmode a {
    font-family: "Segoe UI Symbol", "Noto Sans Symbols", "Apple Symbols", sans-serif;
    font-size: 1.1em;
}

/* ==========================================================================
   CORE LAYOUT - VECTOR LEGACY
   ========================================================================== */

[data-theme="dark"] body {
    background: var(--bg-body);
    color: var(--text-primary);
}

[data-theme="dark"] #content {
    background: var(--bg-content);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] #mw-page-base {
    background: linear-gradient(to bottom, var(--bg-content) 50%, var(--bg-body) 100%);
    background-image: linear-gradient(to bottom, var(--bg-content) 50%, var(--bg-body) 100%);
    background-position: bottom left;
    height: 5em;
}

[data-theme="dark"] #mw-head-base {
    background: linear-gradient(to bottom, var(--bg-content) 50%, var(--bg-body) 100%);
    background-image: linear-gradient(to bottom, var(--bg-content) 50%, var(--bg-body) 100%);
    border-bottom: 1px solid var(--accent-primary);
}

[data-theme="dark"] #mw-panel {
    background: var(--bg-body);
}

[data-theme="dark"] #mw-panel .vector-menu-portal {
    background: transparent;
}

[data-theme="dark"] .vector-legacy-sidebar {
    background: var(--bg-body);
}

[data-theme="dark"] .vector-legacy-sidebar .vector-menu-portal {
    background: transparent;
}

[data-theme="dark"] .vector-legacy-sidebar .vector-menu-content {
    background: transparent;
}

[data-theme="dark"] #mw-panel .vector-menu-content {
    background: transparent;
}

[data-theme="dark"] #mw-navigation {
    background: var(--bg-body);
}

[data-theme="dark"] #footer {
    background: var(--bg-body);
    border-top-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] #footer ul li {
    color: var(--text-muted);
}

[data-theme="dark"] #footer ul li a {
    color: var(--text-secondary);
}

[data-theme="dark"] #footer-info-viewcount {
    color: var(--accent-primary);
}

[data-theme="dark"] #left-navigation,
[data-theme="dark"] #right-navigation {
    background: transparent;
}

/* Tabs - Vector Legacy Style (Dark Translation) */
/* Using exact measurements from vector-legacy-skin.css reference */

/* Tab container */
[data-theme="dark"] .vector-menu-tabs-legacy,
[data-theme="dark"] .vector-menu-tabs {
    background-position: left bottom;
    float: left;
    height: 2.5em;
    padding-left: 1px;
}

[data-theme="dark"] .vector-menu-tabs-legacy ul,
[data-theme="dark"] .vector-menu-tabs ul {
    float: left;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual tab - gradient from orange line at bottom to dark at top */
[data-theme="dark"] .vector-menu-tabs-legacy li,
[data-theme="dark"] .vector-menu-tabs li {
    background-image: linear-gradient(to top, var(--accent-primary) 0, #1a1a1a 1px, var(--bg-content) 100%);
    background-position: left bottom;
    background-repeat: repeat-x;
    float: left;
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.125em;
    white-space: nowrap;
}

/* Tab links */
[data-theme="dark"] .vector-menu-tabs-legacy li a,
[data-theme="dark"] .vector-menu-tabs li a {
    background-position: right bottom;
    color: var(--text-muted);
    box-sizing: border-box;
    display: block;
    float: left;
    height: 3.07692308em;
    position: relative;
    padding-top: 1.25em;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.8125em;
    cursor: pointer;
}

/* Selected tab - solid content background */
[data-theme="dark"] .vector-menu-tabs-legacy .selected,
[data-theme="dark"] .vector-menu-tabs .selected {
    background: var(--bg-content);
}

[data-theme="dark"] .vector-menu-tabs-legacy .selected a,
[data-theme="dark"] .vector-menu-tabs-legacy .selected a:visited,
[data-theme="dark"] .vector-menu-tabs .selected a,
[data-theme="dark"] .vector-menu-tabs .selected a:visited {
    color: var(--accent-primary);
    text-decoration: none;
}

/* Orange underline gradient on tabs */
[data-theme="dark"] .vector-menu-tabs,
[data-theme="dark"] .vector-menu-tabs a,
[data-theme="dark"] #mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: linear-gradient(to bottom, rgba(255, 102, 0, 0) 0, var(--accent-primary) 100%);
    background-repeat: no-repeat;
    background-size: 1px 100%;
}

/* New (red) links in tabs */
[data-theme="dark"] .vector-menu-tabs li.new a,
[data-theme="dark"] .vector-menu-tabs-legacy li.new a {
    color: var(--link-new);
}

/* Dropdown menu heading gradient */
[data-theme="dark"] #mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: linear-gradient(to bottom, rgba(255, 102, 0, 0) 0, var(--accent-primary) 100%);
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: right bottom;
}

/* ==========================================================================
   NAVIGATION & MENUS
   ========================================================================== */

[data-theme="dark"] .vector-menu-portal .vector-menu-heading {
    color: var(--text-secondary);
    /* Match Vector Legacy gradient underline - translated to dark */
    background-image: linear-gradient(to right, rgba(51, 51, 51, 0) 0, #333 33%, #333 66%, rgba(51, 51, 51, 0) 100%);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

[data-theme="dark"] .vector-menu-portal .vector-menu-content li a {
    color: var(--link-color);
}

[data-theme="dark"] .vector-menu-portal .vector-menu-content li a:visited {
    color: var(--link-visited);
}

/* Hide watchlist text (show only star icon) */
[data-theme="dark"] #ca-unwatch span,
[data-theme="dark"] #ca-watch span {
    color: transparent;
    font-size: 0;
    line-height: 0;
}

[data-theme="dark"] #simpleSearch {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    border-radius: 0;
}

[data-theme="dark"] #simpleSearch input {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] #simpleSearch #searchButton,
[data-theme="dark"] #simpleSearch #mw-searchButton {
    filter: invert(1);
    opacity: 0.7;
}

/* Suggestions / Search Results */
[data-theme="dark"] .suggestions {
    background-color: var(--bg-content);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .suggestions-results {
    background-color: var(--bg-content);
}

[data-theme="dark"] .suggestions-result {
    color: var(--text-secondary);
}

[data-theme="dark"] .suggestions-result-current {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary);
}

[data-theme="dark"] .suggestions-special {
    background-color: var(--bg-secondary);
    color: var(--accent-primary);
    border-top-color: var(--border-color);
}

/* Personal menu */
[data-theme="dark"] #p-personal li a {
    color: var(--link-color);
}

/* Dropdown menus */
[data-theme="dark"] .vector-menu-content {
    background: var(--bg-content);
    border-color: var(--border-color);
}

[data-theme="dark"] .vector-menu-content li a {
    color: var(--link-color);
}

[data-theme="dark"] .vector-menu-content li a:hover {
    background: var(--bg-secondary);
}

/* ==========================================================================
   LINKS
   ========================================================================== */

[data-theme="dark"] a {
    color: var(--link-color);
}

[data-theme="dark"] a:visited {
    color: var(--link-visited);
}

[data-theme="dark"] a.new {
    color: var(--link-new);
}

[data-theme="dark"] a.external {
    color: var(--link-external);
}

[data-theme="dark"] #mw-content-text a.external {
    color: var(--link-external);
}

/* ==========================================================================
   HEADINGS
   ========================================================================== */

[data-theme="dark"] #firstHeading,
[data-theme="dark"] .firstHeading,
[data-theme="dark"] .mw-headline,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: var(--heading-color);
}

[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    border-color: var(--border-color);
}

/* Heading underlines - matches Vector Legacy border-bottom on h1/h2 */
[data-theme="dark"] .mw-body-content h1,
[data-theme="dark"] .mw-body-content h2,
[data-theme="dark"] .mw-body-content .mw-heading1,
[data-theme="dark"] .mw-body-content .mw-heading2 {
    border-bottom-color: var(--border-color);
}

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */

[data-theme="dark"] #toc,
[data-theme="dark"] .toc {
    background: var(--toc-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] #toc h2,
[data-theme="dark"] .toc h2 {
    color: var(--text-primary);
}

[data-theme="dark"] #toc ul li a,
[data-theme="dark"] .toc ul li a {
    color: var(--link-color);
}

[data-theme="dark"] .tocnumber {
    color: var(--text-secondary);
}

/* ==========================================================================
   TABLES
   ========================================================================== */

[data-theme="dark"] table {
    color: var(--text-primary);
}

[data-theme="dark"] table.wikitable {
    background: var(--bg-content);
    border-color: var(--border-color);
}

[data-theme="dark"] table.wikitable>tr>th,
[data-theme="dark"] table.wikitable>*>tr>th {
    background: var(--table-header-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] table.wikitable>tr>td,
[data-theme="dark"] table.wikitable>*>tr>td {
    border-color: var(--border-color);
}

[data-theme="dark"] table.wikitable>tr:nth-child(even)>td,
[data-theme="dark"] table.wikitable>*>tr:nth-child(even)>td {
    background: var(--table-row-alt);
}

/* Sortable tables */
[data-theme="dark"] table.sortable th {
    background: var(--table-header-bg);
}

/* ==========================================================================
   INFOBOXES
   ========================================================================== */

[data-theme="dark"] .infobox {
    background: var(--infobox-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .infobox th {
    background: var(--infobox-header);
    color: var(--text-primary);
}

[data-theme="dark"] .infobox td {
    border-color: var(--border-subtle);
}

[data-theme="dark"] .infobox-header,
[data-theme="dark"] .infobox-above {
    background: #ff6600;
    color: #000;
}

/* ==========================================================================
   NAVBOXES
   ========================================================================== */

[data-theme="dark"] .navbox {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .navbox-title {
    background-color: #3a3a3a;
    color: var(--text-primary);
}

[data-theme="dark"] .navbox-above,
[data-theme="dark"] .navbox-below {
    background-color: #2d2d2d;
    color: var(--text-primary);
}

[data-theme="dark"] .navbox-group {
    background-color: #2d2d2d;
    color: var(--text-primary);
}

[data-theme="dark"] .navbox-subheader {
    background-color: #333;
    color: var(--text-primary);
}

[data-theme="dark"] .navbox-list {
    border-left-color: var(--bg-secondary);
    color: var(--text-secondary);
}

[data-theme="dark"] .navbox tr:nth-child(even) .navbox-list {
    background-color: #1a1a1a;
}

[data-theme="dark"] .navbox tr:nth-child(odd) .navbox-list {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .navbox a {
    color: var(--link-color);
}

[data-theme="dark"] .navbox a:visited {
    color: var(--link-visited);
}

/* ==========================================================================
   CODE & PREFORMATTED TEXT
   ========================================================================== */

[data-theme="dark"] pre,
[data-theme="dark"] code,
[data-theme="dark"] .mw-code {
    background: var(--code-bg);
    border-color: var(--code-border);
    color: var(--text-primary);
}

[data-theme="dark"] pre {
    border: 1px solid var(--code-border);
}

/* ==========================================================================
   SYNTAXHIGHLIGHT EXTENSION
   ========================================================================== */

[data-theme="dark"] .mw-highlight {
    background: var(--code-bg);
    border-color: var(--code-border);
}

[data-theme="dark"] .mw-highlight pre {
    background: var(--code-bg);
    color: var(--text-primary);
}

/* Pygments dark theme overrides */
[data-theme="dark"] .mw-highlight .c,
[data-theme="dark"] .mw-highlight .ch,
[data-theme="dark"] .mw-highlight .cm,
[data-theme="dark"] .mw-highlight .cpf,
[data-theme="dark"] .mw-highlight .c1,
[data-theme="dark"] .mw-highlight .cs {
    color: #6a9955;
}

/* Comments */

[data-theme="dark"] .mw-highlight .k,
[data-theme="dark"] .mw-highlight .kc,
[data-theme="dark"] .mw-highlight .kd,
[data-theme="dark"] .mw-highlight .kn,
[data-theme="dark"] .mw-highlight .kp,
[data-theme="dark"] .mw-highlight .kr,
[data-theme="dark"] .mw-highlight .kt {
    color: #569cd6;
}

/* Keywords */

[data-theme="dark"] .mw-highlight .s,
[data-theme="dark"] .mw-highlight .sa,
[data-theme="dark"] .mw-highlight .sb,
[data-theme="dark"] .mw-highlight .sc,
[data-theme="dark"] .mw-highlight .dl,
[data-theme="dark"] .mw-highlight .sd,
[data-theme="dark"] .mw-highlight .s2,
[data-theme="dark"] .mw-highlight .se,
[data-theme="dark"] .mw-highlight .sh,
[data-theme="dark"] .mw-highlight .si,
[data-theme="dark"] .mw-highlight .sx,
[data-theme="dark"] .mw-highlight .sr,
[data-theme="dark"] .mw-highlight .s1,
[data-theme="dark"] .mw-highlight .ss {
    color: #ce9178;
}

/* Strings */

[data-theme="dark"] .mw-highlight .m,
[data-theme="dark"] .mw-highlight .mb,
[data-theme="dark"] .mw-highlight .mf,
[data-theme="dark"] .mw-highlight .mh,
[data-theme="dark"] .mw-highlight .mi,
[data-theme="dark"] .mw-highlight .mo,
[data-theme="dark"] .mw-highlight .il {
    color: #b5cea8;
}

/* Numbers */

[data-theme="dark"] .mw-highlight .n {
    color: #dcdcaa;
}

/* Names */
[data-theme="dark"] .mw-highlight .na {
    color: #9cdcfe;
}

/* Name.Attribute */
[data-theme="dark"] .mw-highlight .nb {
    color: #dcdcaa;
}

/* Name.Builtin */
[data-theme="dark"] .mw-highlight .nc {
    color: #4ec9b0;
}

/* Name.Class */
[data-theme="dark"] .mw-highlight .nf {
    color: #dcdcaa;
}

/* Name.Function */
[data-theme="dark"] .mw-highlight .nn {
    color: #4ec9b0;
}

/* Name.Namespace */
[data-theme="dark"] .mw-highlight .nv {
    color: #9cdcfe;
}

/* Name.Variable */

[data-theme="dark"] .mw-highlight .o,
[data-theme="dark"] .mw-highlight .ow {
    color: #d4d4d4;
}

/* Operators */

[data-theme="dark"] .mw-highlight .p {
    color: #d4d4d4;
}

/* Punctuation */

[data-theme="dark"] .mw-highlight .cp {
    color: #c586c0;
}

/* Comment.Preproc */
[data-theme="dark"] .mw-highlight .err {
    color: #f44747;
}

/* Error */

/* Line numbers */
[data-theme="dark"] .mw-highlight .linenos {
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-right-color: var(--border-subtle);
}

/* ==========================================================================
   DIFF VIEWS
   ========================================================================== */

[data-theme="dark"] table.diff {
    background: var(--bg-content);
    color: var(--text-primary);
}

[data-theme="dark"] td.diff-context {
    background: var(--diff-context-bg);
    color: var(--text-primary);
}

[data-theme="dark"] td.diff-addedline {
    background: var(--diff-added-bg);
    border-color: var(--diff-added-border);
}

[data-theme="dark"] td.diff-addedline .diffchange {
    background: #1a5028;
}

[data-theme="dark"] td.diff-deletedline {
    background: var(--diff-deleted-bg);
    border-color: var(--diff-deleted-border);
}

[data-theme="dark"] td.diff-deletedline .diffchange {
    background: #5c1f24;
}

[data-theme="dark"] td.diff-marker {
    color: var(--text-secondary);
}

[data-theme="dark"] .diff-ntitle,
[data-theme="dark"] .diff-otitle {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ==========================================================================
   VISUALEDITOR
   ========================================================================== */

[data-theme="dark"] .ve-ui-surface {
    background: var(--bg-content);
    color: var(--text-primary);
}

[data-theme="dark"] .ve-ce-documentNode {
    background: var(--bg-content);
}

[data-theme="dark"] .ve-ui-toolbar {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .ve-ui-toolbar-bar {
    background: var(--bg-secondary);
}

[data-theme="dark"] .oo-ui-toolbar-tools {
    background: var(--bg-secondary);
}

[data-theme="dark"] .oo-ui-toolbar-bar {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* OOUI Widgets */
[data-theme="dark"] .oo-ui-widget {
    color: var(--text-primary);
}

[data-theme="dark"] .oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button {
    background: var(--accent-progressive);
    border-color: var(--accent-progressive);
}

[data-theme="dark"] .oo-ui-textInputWidget input,
[data-theme="dark"] .oo-ui-textInputWidget textarea {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .oo-ui-menuSelectWidget {
    background: var(--bg-content);
    border-color: var(--border-color);
}

[data-theme="dark"] .oo-ui-menuOptionWidget {
    color: var(--text-primary);
}

[data-theme="dark"] .oo-ui-menuOptionWidget:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
    background: var(--bg-tertiary);
}

/* Dialog windows */
[data-theme="dark"] .oo-ui-window-frame {
    background: var(--bg-content);
}

[data-theme="dark"] .oo-ui-dialog-content {
    background: var(--bg-content);
}

[data-theme="dark"] .oo-ui-processDialog-navigation {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .oo-ui-processDialog-title {
    color: var(--text-primary);
}

/* VE panels and inspectors */
[data-theme="dark"] .ve-ui-mwSaveDialog-summary textarea {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .ve-ui-mwSaveDialog-options {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--accent-primary);
}

[data-theme="dark"] input[type="submit"],
[data-theme="dark"] button {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] input[type="submit"]:hover,
[data-theme="dark"] button:hover {
    background: var(--border-color);
}

[data-theme="dark"] fieldset {
    border-color: var(--border-color);
}

[data-theme="dark"] legend {
    color: var(--text-primary);
}

/* ==========================================================================
   NOTICES & MESSAGE BOXES
   ========================================================================== */

[data-theme="dark"] .mw-message-box {
    background: var(--notice-bg);
    border-color: var(--notice-border);
    color: var(--text-primary);
}

[data-theme="dark"] .mw-message-box-warning {
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

[data-theme="dark"] .warningbox {
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

[data-theme="dark"] .errorbox {
    background: var(--diff-deleted-bg);
    border-color: var(--diff-deleted-border);
}

[data-theme="dark"] .successbox {
    background: var(--diff-added-bg);
    border-color: var(--diff-added-border);
}

/* Site notices */
[data-theme="dark"] #siteNotice {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Category links */
[data-theme="dark"] #catlinks {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* ==========================================================================
   IMAGES
   ========================================================================== */

/* Subtle treatment for images on dark backgrounds */
[data-theme="dark"] #mw-content-text img {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

/* Remove shadow from interface images */
/* === IMAGES & THUMBNAILS === */
[data-theme="dark"] img {
    opacity: 0.9;
    transition: opacity 0.2s;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

[data-theme="dark"] .thumbinner {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .thumbcaption {
    color: var(--text-muted);
}

[data-theme="dark"] .magnify a {
    filter: invert(1);
    opacity: 0.7;
}

/* Remove shadow from interface images & Invert Icons */
[data-theme="dark"] #mw-head img,
[data-theme="dark"] #mw-panel img {
    box-shadow: none;
}

/* Invert standard icons (CheckUser, Echo, Edit toolbar) to white */
[data-theme="dark"] .oo-ui-iconElement-icon,
[data-theme="dark"] .mw-ui-icon,
[data-theme="dark"] .tool-button .icon {
    filter: invert(1) hue-rotate(180deg);
}

/* Re-invert icons that were already correct or part of specific widgets that handle them */
/* [data-theme="dark"] .oo-ui-icon-check,
[data-theme="dark"] .mw-ui-icon-flush-left {
     
} */

/* Notification Bell Specifics */
[data-theme="dark"] #pt-notifications-alert .mw-echo-notifications-badge,
[data-theme="dark"] #pt-notifications-notice .mw-echo-notifications-badge {
    filter: invert(1);
    opacity: 0.8;
}

[data-theme="dark"] #pt-notifications-alert .mw-echo-notifications-badge:hover,
[data-theme="dark"] #pt-notifications-notice .mw-echo-notifications-badge:hover {
    opacity: 1;
}

/* Thumbnails */
[data-theme="dark"] .thumb {
    border-color: var(--border-subtle);
    background: var(--bg-secondary);
}

[data-theme="dark"] .thumbinner {
    background: var(--bg-secondary);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .thumbcaption {
    color: var(--text-secondary);
}

/* Galleries */
[data-theme="dark"] .gallery .gallerybox {
    background: var(--bg-secondary);
}

[data-theme="dark"] .gallery .gallerytext {
    color: var(--text-secondary);
}

/* Math - invert black formulas */
[data-theme="dark"] img.mwe-math-fallback-image-inline,
[data-theme="dark"] img.mwe-math-fallback-image-display {
    filter: invert(0.88) hue-rotate(180deg);
}

/* Optional class for diagrams that should be inverted */
[data-theme="dark"] .dark-invert {
    filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   SPECIAL PAGES
   ========================================================================== */

/* Recent changes */
[data-theme="dark"] .mw-changeslist-line-inner {
    color: var(--text-primary);
}

[data-theme="dark"] .mw-plusminus-pos {
    color: #4ade80;
}

[data-theme="dark"] .mw-plusminus-neg {
    color: #f87171;
}

[data-theme="dark"] .mw-plusminus-null {
    color: var(--text-muted);
}

/* Watchlist */
[data-theme="dark"] .mw-changeslist-watchlist {
    background: var(--bg-content);
}

/* History */
[data-theme="dark"] #pagehistory li {
    border-color: var(--border-faint);
}

[data-theme="dark"] #pagehistory li.selected {
    background: var(--bg-secondary);
}

/* Preferences */
[data-theme="dark"] .mw-prefs-buttons {
    background: var(--bg-secondary);
}

[data-theme="dark"] .oo-ui-panelLayout-framed {
    background: var(--bg-content);
    border-color: var(--border-color);
}

/* ==========================================================================
   MISC ELEMENTS
   ========================================================================== */

[data-theme="dark"] hr {
    border-color: var(--border-subtle);
}

[data-theme="dark"] blockquote {
    border-left-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] dt {
    color: var(--text-primary);
}

[data-theme="dark"] dd {
    color: var(--text-secondary);
}

/* Edit section links */
[data-theme="dark"] .mw-editsection a {
    color: var(--link-color);
}

/* Hatnotes */
[data-theme="dark"] .hatnote {
    color: var(--text-secondary);
}

/* Scroll shadows for overflowing content */
[data-theme="dark"] .mw-parser-output .scrollable-table {
    background: linear-gradient(to right,
            var(--bg-content) 30%,
            transparent);
}

/* ==========================================================================
   CITATION TEMPLATES (REMILIAWIKI SPECIFIC)
   ========================================================================== */

[data-theme="dark"] .reference {
    color: var(--text-secondary);
}

[data-theme="dark"] .references {
    color: var(--text-primary);
}

[data-theme="dark"] .citation {
    color: var(--text-primary);
}

/* ==========================================================================
   TABBERNEUE EXTENSION
   ========================================================================== */

[data-theme="dark"] .tabber {
    background: var(--bg-content);
}

[data-theme="dark"] .tabber__header {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tabber__tabs {
    background: var(--bg-secondary);
}

[data-theme="dark"] .tabber__tab {
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .tabber__tab:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .tabber__tab[aria-selected="true"],
[data-theme="dark"] .tabber__tab--active {
    color: var(--heading-color);
    background: var(--bg-content);
}

[data-theme="dark"] .tabber__indicator {
    background: var(--heading-color);
}

[data-theme="dark"] .tabber__panel {
    background: var(--bg-content);
    color: var(--text-primary);
}

/* Tabber navigation arrows */
[data-theme="dark"] .tabber__header__prev,
[data-theme="dark"] .tabber__header__next {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .tabber__header__prev:hover,
[data-theme="dark"] .tabber__header__next:hover {
    background: var(--bg-tertiary);
}

/* ==========================================================================
   CARGO EXTENSION
   ========================================================================== */

/* Cargo tables */
[data-theme="dark"] .cargoDynamicTable {
    background: var(--bg-content);
    color: var(--text-primary);
}

[data-theme="dark"] .cargoDynamicTable th {
    background: var(--table-header-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .cargoDynamicTable td {
    border-color: var(--border-color);
}

[data-theme="dark"] .cargoDynamicTable tr:nth-child(even) td {
    background: var(--table-row-alt);
}

/* Cargo drilldown */
[data-theme="dark"] .drilldown-filters {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .drilldown-filter {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .drilldown-filter a {
    color: var(--link-color);
}

[data-theme="dark"] .drilldown-filter-values {
    background: var(--bg-content);
}

[data-theme="dark"] .drilldown-parent-tables {
    background: var(--bg-secondary);
}

/* Cargo query results */
[data-theme="dark"] .cargoQueryResults {
    background: var(--bg-content);
    color: var(--text-primary);
}

/* ==========================================================================
   ECHO NOTIFICATIONS
   ========================================================================== */

[data-theme="dark"] .mw-echo-ui-notificationItemWidget {
    background: var(--bg-content);
    border-color: var(--border-color);
}

[data-theme="dark"] .mw-echo-ui-notificationItemWidget:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .mw-echo-ui-notificationItemWidget-content-message-header {
    color: var(--text-primary);
}

[data-theme="dark"] .mw-echo-ui-notificationItemWidget-content-message-body {
    color: var(--text-secondary);
}

[data-theme="dark"] .oo-ui-popupWidget-popup {
    background: var(--bg-content);
    border-color: var(--border-color);
}

[data-theme="dark"] .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
    background: var(--bg-content);
}

[data-theme="dark"] .mw-echo-ui-notificationsWidget {
    background: var(--bg-content);
}

/* ==========================================================================
   LOADING INDICATOR
   ========================================================================== */

[data-theme="dark"] .mw-spinner {
    filter: invert(1);
}

/* ==========================================================================
   PRINT SAFETY
   ========================================================================== */

@media print {
    :root {
        --bg-body: #fff !important;
        --bg-content: #fff !important;
        --text-primary: #000 !important;
        --text-secondary: #333 !important;
        --link-color: #000 !important;
        --heading-color: #000 !important;
    }

    #pt-darkmode {
        display: none;
    }

    img {
        filter: none !important;
        box-shadow: none !important;
    }
}


/* Transitions only after page load (class added by JS) */
.darkmode-transitions,
.darkmode-transitions #content,
.darkmode-transitions #mw-panel,
.darkmode-transitions a {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ==========================================================================
   RECENT CHANGES FILTERS (ADVANCED UI)
   ========================================================================== */

/* Main Container */
[data-theme="dark"] .mw-rcfilters-ui-filterWrapperWidget-top {
    background: var(--bg-content);
}

[data-theme="dark"] .mw-rcfilters-ui-table-placeholder {
    background: var(--bg-content);
    color: var(--text-secondary);
}

/* Search/Tag Input Widget */
[data-theme="dark"] .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
    color: var(--text-primary);
}

[data-theme="dark"] .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget-enabled {
    background: transparent;
}

/* Tokens/Tags */
[data-theme="dark"] .oo-ui-tagItemWidget-fixed {
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

[data-theme="dark"] .oo-ui-tagItemWidget-fixed:hover {
    background: var(--bg-content);
    border-color: var(--accent-primary);
}

/* Dropdown Menus */
[data-theme="dark"] .mw-rcfilters-ui-filterMenuHeaderWidget-header {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .mw-rcfilters-ui-itemMenuOptionWidget {
    color: var(--text-primary);
}

[data-theme="dark"] .mw-rcfilters-ui-itemMenuOptionWidget:hover {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .mw-rcfilters-ui-itemMenuOptionWidget-label-title {
    color: var(--text-primary);
}

[data-theme="dark"] .mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
    color: var(--text-secondary);
}

/* Highlights */
[data-theme="dark"] .mw-rcfilters-ui-cell {
    border-color: var(--border-subtle);
}

/* Saved Queries & Limits Buttons */
[data-theme="dark"] .mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-buttonElement-button {
    color: var(--link-color);
}

/* RC Legend */
[data-theme="dark"] .mw-changeslist-legend {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .mw-changeslist-legend dt {
    color: var(--text-primary);
}

[data-theme="dark"] .mw-changeslist-legend dd {
    color: var(--text-secondary);
}

/* ==========================================================================
   EXTENSION: POPUPS (HOVERCARDS)
   ========================================================================== */

[data-theme="dark"] .mwe-popups {
    background: var(--bg-content);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Arrow (tricky usually, using pseudo-elements) */
[data-theme="dark"] .mwe-popups.mwe-popups-image-tri::after,
[data-theme="dark"] .mwe-popups.mwe-popups-no-image-tri::after {
    border-bottom-color: var(--bg-content);
    /* Identify direction and adjust if needed */
}

[data-theme="dark"] .mwe-popups .mwe-popups-extract {
    color: var(--text-primary);
}

[data-theme="dark"] .mwe-popups .mwe-popups-container {
    background: var(--bg-content);
}

[data-theme="dark"] .mwe-popups svg {
    filter: invert(1);
    opacity: 0.7;
}

/* ==========================================================================
   GENERIC EXTENSION SUPPORT
   ========================================================================== */

/* CheckUser */
[data-theme="dark"] .checkuser-show {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* PageForms */
[data-theme="dark"] .spf-form {
    background: var(--bg-content);
}

/* Generic UI overrides for unstyled extensions */
[data-theme="dark"] .ui-widget-content {
    background: var(--bg-content);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* ==========================================================================
   EDITOR & CODEMIRROR
   ========================================================================== */

/* Standard Textarea (Fallback) */
[data-theme="dark"] #wpTextbox1,
[data-theme="dark"] .mw-editfont-monospace {
    background-color: var(--code-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* CodeMirror Container */
[data-theme="dark"] .CodeMirror {
    background-color: var(--code-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .CodeMirror-gutters {
    background-color: var(--bg-tertiary);
    border-right: 1px solid var(--border-subtle);
}

[data-theme="dark"] .CodeMirror-linenumber {
    color: var(--text-muted);
}

[data-theme="dark"] .CodeMirror-cursor {
    border-left: 1px solid var(--text-primary);
}

[data-theme="dark"] .CodeMirror-selected {
    background: #264f78 !important;
    /* VS Code visual selection */
}

/* CodeMirror Syntax Highlighting (Matches Pygments/VS Code Dark+) */
[data-theme="dark"] span.cm-comment {
    color: #6a9955;
}

[data-theme="dark"] span.cm-keyword,
[data-theme="dark"] span.cm-variable-2,
/* MW Templates */
[data-theme="dark"] span.cm-variable-3 {
    color: #569cd6;
}

[data-theme="dark"] span.cm-string {
    color: #ce9178;
}

[data-theme="dark"] span.cm-tag {
    color: #569cd6;
}

[data-theme="dark"] span.cm-attribute {
    color: #9cdcfe;
}

[data-theme="dark"] span.cm-link {
    color: #ce9178;
    text-decoration: none;
}

[data-theme="dark"] span.cm-error {
    color: #f44747;
}

[data-theme="dark"] span.cm-url {
    color: #ce9178;
}

[data-theme="dark"] span.cm-table-row,
[data-theme="dark"] span.cm-table-cell {
    color: #dcdcaa;
}

/* WikiEditor Toolbar */
[data-theme="dark"] .wikiEditor-ui-toolbar {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .wikiEditor-ui-toolbar .group .tool-select .label {
    color: var(--text-primary);
}

[data-theme="dark"] .wikiEditor-ui-toolbar .group .tool-select .options {
    background-color: var(--bg-content);
    border-color: var(--border-color);
}

/* Edit Options Area */
[data-theme="dark"] .editOptions {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    padding: 10px;
}

[data-theme="dark"] .mw-editTools {
    background-color: var(--bg-content);
    border-color: var(--border-color);
}