MediaWiki:Gadget-dark-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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/*==================================================
  DARK MODE
==================================================*/
/*
colors:
border:#577100
text-nav:#008b00
content-text:#dddddd
highlight:#00c000
*/

body {
    background-color:#000
}

/* Text color */
* {
    color:#dddddd;
}
#ruserboxx *, .navbox :not(a) > :not(a), .widget * {
    color:black !important; /* Userboxes, NavBox and Welcome fix */
}
td b{
    color:unset !important;
}
h1, h2, h3, h4, h5, h6{
    color:#dddddd !important;
}
.tocnumber, .toctext, .toctext *{
    color:#008b00 !important;
}
a, a *, a:link, .toctogglelabel{
    color: #00dc00;
}
a:visited, a:visited *{
    color: #00af00;
}
.new a, a.new, .new a > *, a.new > * {
    color: #8b0000;
}
ul {
    list-style-image:unset !important;
}
/*==================================================
  NAVIGATION
==================================================*/
/* Top bar */
#p-personal{
    background-color: #27262C !important;
    border-color:#577100 !important;
}
#p-personal a{
    color:#008b00 !important;
}
#pt-notifications-notice .mw-echo-notifications-badge:before, .oo-ui-icon-tray{
    background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 style=%22fill:white%22%3E %3Ctitle%3E tray %3C/title%3E %3Cpath d=%22M17 1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 12h-4l-1 2H8l-1-2H3V3h14z%22/%3E %3C/svg%3E") !important;
}
#pt-notifications-alert .mw-echo-notifications-badge:before, .oo-ui-icon-bell{
    background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 style=%22fill:white%22%3E %3Ctitle%3E bell %3C/title%3E %3Cpath d=%22M16 7a5.38 5.38 0 0 0-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 0 0 4 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 0 0 3-3H7a3 3 0 0 0 3 3z%22/%3E %3C/svg%3E") !important;
}
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, .oo-ui-icon-tray, .oo-ui-icon-bell{
    opacity:0.7 !important;
}
.oo-ui-popupWidget-head, .oo-ui-buttonWidget .oo-ui-buttonElement-button, .mw-echo-ui-notificationItemWidget{
    background:#202020 !important;
}
.mw-echo-ui-notificationItemWidget-content-message-header{
    color:#008b00 !important;
}
img[src="/w/extensions/Echo/modules/icons/notice.svg"]{
    background: #dddddd !important;
    border-color: #dddddd !important;
}
/* Side bar */
#mw-panel{
    border-color:#577100 !important;
    background-color: #27262C !important;
    color:#008b00 !important;
}
#mw-panel a{
    color:#008b00 !important;
}
.portal h3{
    color:#dddddd !important;
}
/* Navigation */
.vectorTabs li{
    background: #27262C !important;
    border-style:none !important;
}
.vectorTabs li.selected{
    background: #2b2b2b !important;
    border-style:none !important;
}
.vectorMenu h3, .vectorMenu div{
    background: #27262C !important;
    border-style:solid !important;
    border-color:transparent !important;
}
.vector-menu-dropdown .vector-menu-content-list{
    background: #27262C !important;
}
.vectorTabs #ca-unwatch.icon a {
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 style=%22fill:white%22%3E %3Cdefs%3E %3ClinearGradient id=%22a%22%3E %3Cstop offset=%220%22 stop-color=%22%23378B00%22/%3E %3Cstop offset=%22.5%22 stop-color=%22%23378B00%22/%3E %3Cstop offset=%221%22 stop-color=%22%23378B00%22/%3E %3C/linearGradient%3E %3ClinearGradient id=%22b%22 x1=%2213.47%22 x2=%224.596%22 y1=%2214.363%22 y2=%223.397%22 xlink:href=%22%23a%22 gradientUnits=%22userSpaceOnUse%22/%3E %3C/defs%3E %3Cpath fill=%22url%28%23b%29%22 stroke=%22%23378B00%22 stroke-width=%22.99992%22 d=%22M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z%22/%3E %3C/svg%3E") !important;
}

.vectorTabs #ca-watch.icon a {
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E %3Cpath fill=%22%23101010%22 stroke=%22%23378B00%22 stroke-width=%22.99992%22 d=%22M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z%22/%3E %3C/svg%3E") !important;
}

.vectorTabs #ca-unwatch.icon a:hover,.vectorTabs #ca-unwatch.icon a:focus {
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22%3E %3Cdefs%3E %3ClinearGradient id=%22a%22%3E %3Cstop offset=%220%22 stop-color=%22%23378B00%22/%3E %3Cstop offset=%22.5%22 stop-color=%22%23378B00%22/%3E %3Cstop offset=%221%22 stop-color=%22%23378B00%22/%3E %3C/linearGradient%3E %3ClinearGradient id=%22b%22 x1=%2213.47%22 x2=%224.596%22 y1=%2214.363%22 y2=%223.397%22 xlink:href=%22%23a%22 gradientUnits=%22userSpaceOnUse%22/%3E %3C/defs%3E %3Cpath fill=%22url%28%23b%29%22 stroke=%22%23378B00%22 stroke-width=%22.99992%22 d=%22M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z%22/%3E %3C/svg%3E") !important;
}

.vectorTabs #ca-watch.icon a:hover,.vectorTabs #ca-watch.icon a:focus {
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E %3Cpath fill=%22%23101010%22 stroke=%22%23378B00%22 stroke-width=%22.99992%22 d=%22M8.103 1.146l2.175 4.408 4.864.707-3.52 3.431.831 4.845-4.351-2.287-4.351 2.287.831-4.845-3.52-3.431 4.864-.707z%22/%3E %3C/svg%3E") !important;
}
#simpleSearch{
    background:#27262C !important;
    border-top-color: #27262C !important; 
    border-bottom-color: #27262C !important;
    border-left-color: #27262C !important; 
    border-right-color: #27262C !important;
}
#simpleSearch:hover{
    border-color:#27262C !important;
}
#searchInput, #searchInput::placeholder, #searchInput:-ms-input-placeholder, #searchInput::-ms-input-placeholder {
    color:#008b00 !important;
    background-color: rgba(0,0,0,0) !important;
}
.suggestions-results, .suggestions-result, :not(.suggestions-result-current) .special-query, :not(.suggestions-result-current) .special-label, .suggestions-special, .oo-ui-menuSelectWidget{
    background-color:#27262C !important;
    color:#008b00 !important;
    border-color:#27262C !important;
}
.suggestions-result-current, .suggestions-result-current .special-query, .suggestions-result-current .special-label{
    color:#00c000 !important;
}
/*==================================================
  EDITING
==================================================*/
.editOptions{
    background: #303030 !important;
    border-color:#303030 !important;
}
.mw-code, .diff-context{
    color:#dddddd !important;
    background: #202020 !important;
    border-color:#577100 !important;
}
textarea, input[type="text"], input[type="button"]{
    background:#202020 !important;
    border-color:#577100 !important;
    color:#dddddd !important;
}
.oo-ui-checkboxInputWidget [type='checkbox'] + span{
    background-color:#202020 !important;
}
.oo-ui-inputWidget.oo-ui-buttonElement:not(.oo-ui-flaggedElement-primary) input[type="submit"]{
    background-color: #27262C !important;
    border-color:#151515 !important;
    color:#dddddd !important;
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle{
    background-color:unset !important;
}
input, select, button {
    background-color: #272727 !important;
    border-color: #505050 #565656 !important;
    color: #ddd !important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    background-color: #008B2A !important;
    border-color: #008B2A !important;
}
#pagehistory li.selected {
    background: #333;
}
#pagehistory li {
    border: unset;
}
.diff-addedline .diffchange {
    background: #4e565f;
}
.diff-deletedline .diffchange {
    background: #696355;
}
/*==================================================
  CONTENT
==================================================*/
/* Main Page fixes */
.mw-parser-output .bubbleboxbg {
    background-image:none !important; /* Has to have !important or else won't take effect */
    box-shadow: none !important;
}
.bubbleboxbg-lighter {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color:#aaa !important;
}
.bubbleboxbg-darker {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color:#999 !important;
}

/* Other */
#footer{
    background-image:url(//cdn.wikimg.net/en/splatoonwiki/images/3/3b/DarkMode-Footer.png) !important;
}
.mw-footer li {
    color: #dddddd;
}
.toc, pre{
    color: white;
    background:#202020;
}
#content{
    background:#27262C;
    border-color:#577100;
}
.wikitable {
    background-color:#202020 !important;
}
.wikitable th{
    color:#dddddd !important;
}
#catlinks, div.thumbinner, code, 
div.oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget.oo-ui-selectWidget-depressed.oo-ui-clippableElement-clippable.oo-ui-floatableElement-floatable.oo-ui-menuSelectWidget,
.mw-notification, .thumb, table.sortable, table.unsortable, .pds-box{
    background:#333;
}
.warningbox {
    background-color:#31302e;
}