MediaWiki:DarkTheme.css

/* Color adjust for dark theme */
:root {
    --color-base: white;
    --background-color-interactive-subtle: #371111cf;
    --background-color-neutral-subtle: #371111cf;
    --background-color-base: #181313cf;
    --background-color-neutral: #37373785;
    --background-color-interactive: #37373785;
    --background-color-progressive-subtle: #37373785;
    --color-base--hover: white;
    --color-progressive: white;
    --border-color-base: #37131399;
    --border-color-subtle: #37131399;
    --border-color-muted: #37131399;
    --background-color-warning-subtle: #6f2d2d7a;
    --border-color-warning: #982727a8;
    --color-notice: #f09f9f;
    --background-color-error-subtle: #470b00;
    --border-color-error: #971f0e;
    --background-color-disabled: #410606;
    --border-color-disabled: #363637;
    --color-emphasized: white;
    --background-color-backdrop-light: rgba(0,0,0,0.65);
    --pi-background: #610808;
    --pi-secondary-background: #4b0b0b;
    --pi-border-color: #550909;
    --color-subtle: #8dc3ed;
    --background-color-disabled-subtle: #2b0000;
    --color-disabled: #818181;
    --color-inverted: #000000;
}

/* Community Made Items */
.portable-infobox .pi-header[data-item-name=community_item] {
    padding-top: 4px;
    text-align: center;
    background: #00cfd58f;
}

/* See also note */
.hatnote {
    border-left: 4px solid #8f0404;
    background-image: linear-gradient(to left, #00000000 50%, #3d0000 100%);
    padding-left: 5px;
}

.mw-highlight {
    background: #2b141442;
}

.mw-destfile-warning {
	border: 1px solid #ffc11f5e;
    color: #ffb0b0;
    background-color: #bbcd551f;
}

/* Editor button */
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {
	background-color: var(--theme-success-color);
}

.oo-ui-menuToolGroup {
    border-left: 1px solid #330b0b;
    border-right: 1px solid #330b0b;
}

.oo-ui-toolbar-position-top .ve-ui-toolbarDialog-position-above {
    border-top: 1px solid #330b0b;
}

.ve-ui-symbolListPage-symbol {
	border: 1px solid #330b0b;
}

.block-header,
.mw-parser-output table.block-header, .mw-parser-output .article-table-wrapper table.block-header {
	color: white;
	font-weight: 100;
	background: #89110042;
}

/* Icon fix (black > white) */
.vector-menu-dropdown .vector-menu-heading::after,
.wikiEditor-ui-toolbar .group .tool-select .label::after,
.oo-ui-icon-edit, .mw-ui-icon-edit:before,
.oo-ui-indicator-down,
.oo-ui-icon-eye, .mw-ui-icon-eye:before,
.oo-ui-icon-wikiText, .mw-ui-icon-wikiText:before,
.oo-ui-icon-undo, .mw-ui-icon-undo:before,
.oo-ui-icon-redo, .mw-ui-icon-redo:before,
.oo-ui-icon-textStyle, .mw-ui-icon-textStyle:before,
.oo-ui-icon-bold, .mw-ui-icon-bold:before,
.oo-ui-icon-italic, .mw-ui-icon-italic:before,
.oo-ui-icon-cancel, .mw-ui-icon-cancel:before,
.oo-ui-icon-expand, .mw-ui-icon-expand:before,
.oo-ui-icon-link, .mw-ui-icon-link:before,
.oo-ui-image-progressive.oo-ui-icon-listBullet, .mw-ui-icon-listBullet-progressive:before,
.oo-ui-icon-listBullet, .mw-ui-icon-listBullet:before,
.oo-ui-icon-listNumbered, .mw-ui-icon-listNumbered:before,
.oo-ui-icon-outdent, .mw-ui-icon-outdent:before,
.oo-ui-icon-indent, .mw-ui-icon-indent:before,
.oo-ui-icon-image, .mw-ui-icon-image:before,
.oo-ui-icon-puzzle, .mw-ui-icon-puzzle:before,
.oo-ui-icon-table, .mw-ui-icon-table:before,
.oo-ui-icon-collapse, .mw-ui-icon-collapse:before,
.oo-ui-icon-reference, .mw-ui-icon-reference:before,
.oo-ui-icon-referenceExisting, .mw-ui-icon-referenceExisting:before,
.oo-ui-icon-speechBubbleNotice,
.oo-ui-icon-imageGallery, .mw-ui-icon-imageGallery:before,
.oo-ui-icon-markup, .mw-ui-icon-markup:before,
.oo-ui-icon-tabber,
.oo-ui-icon-article, .mw-ui-icon-article:before,
.oo-ui-icon-menu, .mw-ui-icon-menu:before,
.oo-ui-icon-signature, .mw-ui-icon-signature:before,
.oo-ui-icon-references, .mw-ui-icon-references:before,
.oo-ui-icon-specialCharacter, .mw-ui-icon-specialCharacter:before,
.oo-ui-icon-help, .mw-ui-icon-help:before,
.oo-ui-icon-alert, .mw-ui-icon-alert:before,
.oo-ui-icon-keyboard, .mw-ui-icon-keyboard:before,
.oo-ui-icon-search, .mw-ui-icon-search:before,
.oo-ui-icon-speechBubble, .mw-ui-icon-speechBubble:before,
.oo-ui-icon-close, .mw-ui-icon-close:before,
.oo-ui-image-progressive.oo-ui-icon-menu, .mw-ui-icon-menu-progressive:before,
.oo-ui-icon-window, .mw-ui-icon-window:before,
.oo-ui-icon-tag, .mw-ui-icon-tag:before,
.oo-ui-icon-pageSettings, .mw-ui-icon-pageSettings:before,
.oo-ui-icon-settings, .mw-ui-icon-settings:before,
.oo-ui-icon-textLanguage, .mw-ui-icon-textLanguage:before,
.oo-ui-icon-textDirRTL, .mw-ui-icon-textDirRTL:before,
.oo-ui-icon-articleSearch, .mw-ui-icon-articleSearch:before,
.oo-ui-icon-superscript, .mw-ui-icon-superscript:before,
.oo-ui-icon-subscript, .mw-ui-icon-subscript:before,
.oo-ui-icon-code, .mw-ui-icon-code:before,
.oo-ui-icon-strikethrough, .mw-ui-icon-strikethrough:before,
.oo-ui-icon-underline, .mw-ui-icon-underline:before,
.oo-ui-icon-bigger, .mw-ui-icon-bigger:before,
.oo-ui-icon-smaller, .mw-ui-icon-smaller:before,
.oo-ui-icon-language, .mw-ui-icon-language:before,
.oo-ui-indicator-required,
body .ui-dialog .ui-icon-closethick,
.searchButton[name='go'] {
    filter: contrast(0) brightness(10);
}

/* Popups */
.oo-ui-windowManager-modal:not(.oo-ui-windowManager-size-full) > .oo-ui-dialog > .oo-ui-window-frame {
	color: white;
}
.oo-ui-popupWidget {
    color: var(--color-base);
}

.ui-widget-overlay {
	background: rgb(0 0 0 / 50%);
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border: 1px solid #7f1818;
    background: #550a0a;
    font-weight: normal;
    color: #ffffff;
}

.ui-dialog {
    border: 1px solid #630e0e;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
    background: #1212129e;
    backdrop-filter: blur(10px);
}

.wikiEditor-toolbar-dialog .ui-dialog-buttonpane {
    border-top: 1px solid #550a0a !important;
}

.ui-widget-content {
    border: 1px solid #3f0707;
    background: #1a070794;
    color: #ffffff !important;
}

body .ui-dialog .ui-widget-header {
	background: #450b0b9e !important;
	border: 1px solid #651717;
	color: white;
}

body .ui-button {
	border: 1px solid #750505 !important;
	background: linear-gradient(to bottom, #ff97977d 0%, #590707 90%) !important;
	color: white !important;
}

body .ui-button:hover {
	border: 1px solid #dd1f1f !important;
	background: linear-gradient(to bottom, #ffbdbd7d 0%, #991a1a 90%) !important;
}

/* Text Area */
.wikiEditor-ui-toolbar {
    background-color: #3b2222cf;
    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1);
}

.tool-button, .tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button {
    filter: contrast(0) brightness(10);
}

.wikiEditor-ui-toolbar .tabs span.tab a::before {
    filter: contrast(0) brightness(10);
}

textarea, input, select, option {
    background-color: #37373785;
    color: white;
    border: 1px solid var(--border-color-base,#a2a9b1);
}

/* Header */
#mw-page-base {
    background-color: #252525;
    background-image: linear-gradient(to bottom, var(--background-color-base, #211a1a) 50%, #252525 100%);
    background-position: bottom left;
    height: 5em;
}

/* Side Panel */
body {
    background-color: #252525;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
    color: #d93c3c;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
    color: #e76b6b;
}

/* Searchbar */
.vector-search-box-input {
    background-color: rgb(57 56 56 / 50%);
    color: #dfe0e1;
    border: 1px solid #891b1b;
}



/* Main Body */
.mw-body, .parsoid-body {
    background-color: var(--background-color-base, #252525);
    color: var(--color-base, #d1d1d1);
    direction: ltr;
    padding: 1em;
}

.mw-body {
    border: 1px solid #790f0f;
}

/* Header Text */
.mw-heading, h1, h2, h3, h4, h5, h6 {
    color: var(--color-emphasized, #b90009);
    font-weight: bold;
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    display: flow-root;
    word-break: break-word;
}

/* New Links */
a.new {
    color: #48b8db;
}
a.new:after {
    content: '';
    background-image: url(/resources/assets/link_new.png);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.67em;
    padding-right: 1em;
    background-position-x: 2px;
    background-position-y: 0px;
}

/* Gallery Item */
li.gallerybox div.thumb {
    background-color: #510d0d57;
    border: 1px solid #4d1c1c;
}

/* Header Nav */
.vector-menu-tabs-legacy li {
    background-image: linear-gradient(to top, #9f4242 0, #4b060638 1px, #e5777714 100%);
}

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: linear-gradient(to bottom, rgb(167 215 249 / 0%) 0, #9f4242 100%);
}

.vector-menu-tabs-legacy .selected {
	background: none;
    background-image: linear-gradient(to top, #ff0505 0, #9b1c1c94 1px, #fbe6e614 100%);
}

.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited {
    color: #ffffff;
    text-decoration: none;
}

.vector-menu-tabs-legacy li a {
    color: #7badff;
}

.vector-menu-dropdown .vector-menu-heading {
    color: #acc7dd;
}

.vector-menu-dropdown .vector-menu-content {
    background-color: var(--background-color-base, #373434cf);
    border: 1px solid var(--border-color-base, #37131399);
    backdrop-filter: blur(10px);
}

.suggestions-results {
    background-color: #37343475;
    border: 1px solid var(--border-color-base, #37131399);
    backdrop-filter: blur(10px);
}

.suggestions-result {
	color: #d5d5d5;
}

.vector-menu-dropdown .mw-list-item a {
    color: #99bfff;
}

.suggestions-special {
    border: 1px solid #5d2424;
    backdrop-filter: blur(10px);
    background-color: var(--background-color-base, #373434cf);
}

.suggestions-special .special-label {
    color: #b97d7d;
    text-align: left;
}

.suggestions-special .special-query {
    color: #ffffff;
    font-style: italic;
    text-align: left;
}

/* <pre> */
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
    box-shadow: inset 2.75em 0 0 #391b1b;
    background-color: rgb(75 75 75);
    color: #ade8ff;
}

pre, code, .mw-code {
    background-color: #1a1a1a;
    color: #8fbae5;
    border: 1px solid var(--border-color-muted, #8f2f2f);
}

/* TOC */
.toctogglelabel {
    color: #60b3ef;
    cursor: pointer;
}

/* Footer links */
.catlinks {
    background-color: #1a1a1a;
}

/* Infobox link color */
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
    color: #79d9ff;
}

/* List item adjustments */
li {
	list-style: square;
}