MediaWiki:Vector.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.

/* All CSS here will be loaded for users of the Vector skin */

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

/* ---- Base Page ---- */
body {
    background-color: #282a36 !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: #8be9fd !important; /* optional lighter link */
    text-decoration: none;
}

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

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

/* ---- Navigation & Sidebar ---- */
#mw-panel, .vector-menu-content, .sidebar, .mw-sidebar, .minerva-header {
    background-color: #20222b !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: #20222b !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: #282a36 !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;
}

tr:nth-child(even) {
    background-color: #30323e !important;
}

tr:nth-child(odd) {
    background-color: #2c2e3a !important;
}

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

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

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

.successbox, .mw-message-box-success {
    background-color: #1f3b1f !important;
    border: 1px solid #50fa7b !important;
    color: #50fa7b !important;
}

/* ---- Edit / 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: #282a36 !important;
}

/* ---- Footer ---- */
#footer, .mw-footer {
    background-color: #20222b !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: #2c2e3a !important;
}

/* ---- Optional: highlight selected text ---- */
::selection {
    background: #ff79c6;
    color: #282a36;
}