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.

/* CSS placed here will be applied to all skins */

/* ==== Chrono Odyssey dark palette =============== */
:root {
  /* whenever Vector isn't in dark mode yet    */
  color-scheme: light dark;                  /* enables light-dark() helper */
}
html.skin-theme-clientpref-night,
@media (prefers-color-scheme: dark) {        /* fall back to OS preference */
  :root {
    /* Core background & text */
    --background-color-base: #131820;        /* matches front-page banner  */
    --background-color-subtle: #161b22;
    --color-base:            #f2f2f2;
    --color-subtle:          #dcdcde;

    /* Borders & separators */
    --border-color-base:     #2e3741;

    /* Accent & link colours */
    --color-link:            #5fd4ff;
    --color-link--visited:   #c178ff;
    --color-link--hover:     #91eaff;
  }
}

/* ==== Opportunistic clean-ups =================== */
body.skin-vector,
body.skin-vector-2022 {
  background: var(--background-color-base);
  color:      var(--color-base);
}

/* Content frame */
#content, .mw-body, .mw-body-content {
  background: transparent;                   /* we already themed <body>   */
}

/* Sidebar & portlets */
#mw-panel, .vector-sidebar {
  background: var(--background-color-subtle);
  color: var(--color-base);
}
.vector-menu-heading {                       /* portlet headers            */
  background: #1f2937;
  color: var(--color-subtle);
}

/* Tables & infoboxes */
table.wikitable,
.mw-page-container table.infobox {
  background: #1a2029;
  color: var(--color-base);
  border-color: var(--border-color-base);
}
table.wikitable th {
  background: #36414d;
}

/* Links (extra belt-and-braces) */
a, a:link      { color: var(--color-link); }
a:visited       { color: var(--color-link--visited); }
a:hover,
a:active        { color: var(--color-link--hover); }