MediaWiki:Common.css/dark

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.

/* CSS placed here will be applied to all skins */
/* ===== Infobox dark-mode overrides ===== */

.mediawiki-ui-color-scheme-dark table.infobox,
.mediawiki-ui-color-scheme-dark table.infobox-subbox {
  background-color: var(--surface-secondary) !important;
}

/* Dark-mode theme for all Infobox modules */
.mediawiki-ui-color-scheme-dark .infobox-title,
.mediawiki-ui-color-scheme-dark .infobox-image,
.mediawiki-ui-color-scheme-dark .infobox-caption,
.mediawiki-ui-color-scheme-dark .infobox-header,
.mediawiki-ui-color-scheme-dark .infobox-label,
.mediawiki-ui-color-scheme-dark .infobox-data,
.mediawiki-ui-color-scheme-dark .infobox-full-data,
.mediawiki-ui-color-scheme-dark .infobox-below,
.mediawiki-ui-color-scheme-dark .infobox-navbar {
  background-color: var(--surface-secondary) !important;
  color:            var(--text-primary)      !important;
}

table.infobox .infobox-header {
  background: #003B6F;
  color:      #ffffff;
}

/* Serverbuild infobox: dark mode */
.mediawiki-ui-color-scheme-dark table.infobox.serverbuild {
  background-color: var(--surface-secondary) !important;
}
.mediawiki-ui-color-scheme-dark table.infobox.serverbuild .infobox-header,
.mediawiki-ui-color-scheme-dark table.infobox.serverbuild .infobox-data,
.mediawiki-ui-color-scheme-dark table.infobox.serverbuild .infobox-label {
  background-color: var(--surface-secondary) !important;
  color:            var(--text-primary)      !important;
}

/* Dark theme: [[William_Wragg]], [[Coral_Castle]] */

@media screen {
    html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
	    background: #1f1f23 !important;
	      /* switch with var( --color-base ) when supported. */
	      color: #f8f9fa;
	}
}


@media screen and ( prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) div:not(.notheme) {
      background: #1f1f23 !important;
      /* switch with var( --color-base ) when supported. */
      color: #f8f9fa;
    }
}