MediaWiki:Common.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.

/* --- UNIVERSAL DARK MODE SELECTORS --- */
:root[class*="theme-dark"],
html.skin-theme-clientpref-night,
html.skin-invert,
html.theme--dark,
html[data-theme="dark"] {
    --dark-bg: #101418;
    --dark-surface: #181d23;
    --dark-header: #222831;
    --dark-border: #272d35;
    --dark-text: #ffffff;
    --dark-text-muted: #c8ccd1;
    --dark-link: #6daafb;
}

/* 1. Force Title / Wordmark to White */
:root[class*="theme-dark"] .mw-logo-wordmark,
:root[class*="theme-dark"] .mw-logo-wordmark *,
html.skin-theme-clientpref-night .mw-logo-wordmark,
html.skin-theme-clientpref-night .mw-logo-wordmark *,
html.skin-invert .mw-logo-wordmark,
html.skin-invert .mw-logo-wordmark *,
html.theme--dark .mw-logo-wordmark,
html.theme--dark .mw-logo-wordmark * {
    color: #ffffff !important;
}

/* 2. Force PortableInfobox Styling */
:root[class*="theme-dark"] aside.portable-infobox,
html.skin-theme-clientpref-night aside.portable-infobox,
html.skin-invert aside.portable-infobox,
html.theme--dark aside.portable-infobox {
    background-color: #181d23 !important;
    border-color: #272d35 !important;
    color: #ffffff !important;
}

/* Infobox Headers, Titles, and Category Strips */
:root[class*="theme-dark"] aside.portable-infobox .pi-header,
:root[class*="theme-dark"] aside.portable-infobox .pi-title,
html.skin-theme-clientpref-night aside.portable-infobox .pi-header,
html.skin-theme-clientpref-night aside.portable-infobox .pi-title,
html.skin-invert aside.portable-infobox .pi-header,
html.skin-invert aside.portable-infobox .pi-title {
    background-color: #222831 !important;
    color: #ffffff !important;
    border-color: #272d35 !important;
}

/* Infobox Labels, Values, and Nested Cells */
:root[class*="theme-dark"] aside.portable-infobox .pi-item,
:root[class*="theme-dark"] aside.portable-infobox .pi-data,
:root[class*="theme-dark"] aside.portable-infobox .pi-data-label,
:root[class*="theme-dark"] aside.portable-infobox .pi-data-value,
html.skin-theme-clientpref-night aside.portable-infobox .pi-item,
html.skin-theme-clientpref-night aside.portable-infobox .pi-data,
html.skin-theme-clientpref-night aside.portable-infobox .pi-data-label,
html.skin-theme-clientpref-night aside.portable-infobox .pi-data-value,
html.skin-invert aside.portable-infobox .pi-item,
html.skin-invert aside.portable-infobox .pi-data,
html.skin-invert aside.portable-infobox .pi-data-label,
html.skin-invert aside.portable-infobox .pi-data-value {
    background-color: transparent !important;
    color: #c8ccd1 !important;
    border-color: #272d35 !important;
}

/* Infobox Links */
:root[class*="theme-dark"] aside.portable-infobox a,
html.skin-theme-clientpref-night aside.portable-infobox a,
html.skin-invert aside.portable-infobox a {
    color: #6daafb !important;
}