Jump to content

MediaWiki:Common.css/dark

From BadWolfMC Wiki
Revision as of 01:15, 6 May 2025 by Merc (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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.
/* ===== Dark‐mode overrides for all infoboxes ===== */

/* In “night” mode (Vector > Appearance > Dark), flip the infobox background */
html.skin-theme-clientpref-night table.infobox,
html.skin-theme-clientpref-night table.infobox-subbox {
  background-color: var(--surface-secondary) !important;
}

/* In dark mode, invert all text and borders inside infoboxes */
html.skin-theme-clientpref-night table.infobox,
html.skin-theme-clientpref-night table.infobox th,
html.skin-theme-clientpref-night table.infobox td {
  color: var(--text-primary) !important;
  border-color: var(--border-color-base) !important;
}

/* Ensure the infobox title and header keep your brand color */
html.skin-theme-clientpref-night table.infobox caption.infobox-title,
html.skin-theme-clientpref-night table.infobox .infobox-header {
  background-color: #003B6F !important;
  color:            #ffffff !important;
}

/* If you have a specialized “serverbuild” variant: */
html.skin-theme-clientpref-night table.infobox.serverbuild {
  background-color: var(--surface-secondary) !important;
}
html.skin-theme-clientpref-night table.infobox.serverbuild .infobox-header,
html.skin-theme-clientpref-night table.infobox.serverbuild .infobox-label {
  background-color: #003B6F !important;
  color:            #ffffff !important;
}

@media screen {
  /* catch Vector’s “night” theme */
  html.skin-theme-clientpref-night table.infobox,
  html.skin-theme-clientpref-os table.infobox {
    background-color: var(--surface-secondary) !important;
  }
  /* carry your deep-blue header through dark mode */
  html.skin-theme-clientpref-night table.infobox .infobox-header,
  html.skin-theme-clientpref-os      table.infobox .infobox-header {
    background-color: #003B6F !important;
    color:            #ffffff  !important;
  }
  /* brighten the title at the top */
  html.skin-theme-clientpref-night table.infobox caption.infobox-title,
  html.skin-theme-clientpref-os      table.infobox caption.infobox-title {
    color: #f8f9fa !important;
  }
}

/* End of dark overrides */