MediaWiki:Common.css/dark: Difference between revisions

/* ===== 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 */