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.

/* ============================
   🌙 DARK MODE THEME — Untenables Wiki Style
   Colors:
   - Dark Grey: #101418
   - Cream (text): #f8f8f2
   - Pink (accent): #ff79c6
   - Blue Grey (secondary): #6272a4
   - Red (alert): #ff5555
   ============================ */

/* --- Vector 2022 outer background overrides --- */
body.skin-vector-2022,
body.skin-vector-2022 #mw-page-base,
body.skin-vector-2022 #mw-header-container,
body.skin-vector-2022 #mw-content-container,
body.skin-vector-2022 .mw-body {
    background-color: #101418 !important;
    color: #f8f8f2 !important;
}

/* ---- Base Page ---- */
body {
    background-color: #101418 !important;
    color: #f8f8f2 !important;
}

/* Page content */
.mw-body, .mw-body-content, #content, .mw-parser-output {
    background-color: transparent !important;
    color: #f8f8f2 !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #ff79c6 !important;
    border-color: #6272a4 !important;
}

/* Links */
a,
a:link,
.mw-body a {
    color: #ff79c6 !important;
    text-decoration: none;
}

a:visited {
    color: #6272a4 !important;
}

a:hover,
a:focus {
    color: #ff5555 !important;
    text-decoration: underline;
}

/* ---- Navigation & Sidebar ---- */
#mw-panel, .vector-menu-content, .sidebar, .mw-sidebar, .minerva-header {
    background-color: #101418 !important;
    color: #f8f8f2 !important;
}

#mw-panel a,
.vector-menu-content a {
    color: #f8f8f2 !important;
}

#mw-panel a:hover,
.vector-menu-content a:hover {
    color: #ff79c6 !important;
}

/* ---- Header / Toolbar ---- */
#mw-head, #mw-head-base, .vector-header, .header {
    background-color: #101418 !important;
    border-bottom: 1px solid #6272a4 !important;
}

#p-personal li a,
.vector-user-menu a {
    color: #f8f8f2 !important;
}

#p-personal li a:hover {
    color: #ff79c6 !important;
}

/* ---- Search box ---- */
#p-search input,
.mw-ui-input,
input[type="search"] {
    background-color: #101418 !important;
    color: #f8f8f2 !important;
    border: 1px solid #6272a4 !important;
}

#p-search input:focus {
    border-color: #ff79c6 !important;
}

/* ---- Tables ---- */
table, th, td {
    border-color: #6272a4 !important;
    background-color: #101418 !important;
    color: #f8f8f2 !important;
}

th {
    background-color: #101418 !important;
    color: #ff79c6 !important;
}

/* ---- Code blocks & preformatted text ---- */
pre, code, .mw-code {
    background-color: #101418 !important;
    color: #f8f8f2 !important;
    border: 1px solid #6272a4 !important;
}

/* ---- Notifications, warnings, errors ---- */
.mw-warning, .warning, .errorbox {
    background-color: #101418 !important;
    border: 1px solid #ff5555 !important;
    color: #ff5555 !important;
}

/* ---- Buttons ---- */
button, .mw-ui-button, input[type="submit"], input[type="button"], .oo-ui-buttonElement-button {
    background-color: #6272a4 !important;
    color: #f8f8f2 !important;
    border: none !important;
    border-radius: 4px;
}

button:hover, .mw-ui-button:hover, .oo-ui-buttonElement-button:hover {
    background-color: #ff79c6 !important;
    color: #101418 !important;
}

/* ---- Footer ---- */
#footer, .mw-footer {
    background-color: #101418 !important;
    color: #f8f8f2 !important;
    border-top: 1px solid #6272a4 !important;
}

#footer a {
    color: #ff79c6 !important;
}

/* ---- Misc readability ---- */
hr {
    border-color: #6272a4 !important;
}

blockquote {
    border-left: 3px solid #6272a4 !important;
    color: #f8f8f2 !important;
    background-color: #101418 !important;
}

/* ---- Selection highlight ---- */
::selection {
    background: #ff79c6;
    color: #101418;
}