MediaWiki:ColorSchemeDark.css
From Elwiki
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 */
.dark-mode {
--accent-color: #41afcc;
--accent-color-tone-2: #40aac8;
--accent-color-tone-3: #3a9fbc;
--border-color: #444444;
--border-color-tone-2: #838383;
--theme-tone-1: #171717;
--theme-tone-2: #242424;
--theme-tone-3: #3b3b3b;
--theme-tone-4: #2b2b2b;
--theme-tone-5: #282828;
--theme-tone-6: #1f1f1f;
--theme-tone-7: #323435;
--theme-tone-8: #4c4f53;
--theme-tone-9: var(--theme-tone-8);
--text-color: #e8e8e8;
--text-color-invert: black;
--inactive-color: #c4c4c4;
}
#dark-mode-switch {
height: 40px;
width: 40px;
position: fixed;
border-radius: 50%;
background: var(--theme-tone-1);
z-index: 6666;
bottom: 10px;
left: 10px;
cursor: pointer;
display: flex;
align-items: center;
place-content: center;
transition: background-color 0.3s;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
#dark-mode-switch:hover {
animation: wobble 1s;
background-color: var(--accent-color);
}
#dark-mode-switch:hover::before {
filter: brightness(2);
}
#dark-mode-switch.new::after {
content: "NEW!";
position: absolute;
top: -15px;
right: -23px;
font-weight: 500;
color: #fff;
background: #dc3545;
padding: 0.125rem 0.25rem;
border-radius: 0.2rem;
font-size: 0.8rem;
}
#dark-mode-switch::before {
content: "";
width: 20px;
height: 20px;
display: block;
background-image: url("/svg/sun.svg");
background-size: contain;
color: red;
transition: filter 0.3s;
}
.dark-mode #dark-mode-switch::before {
background-image: url("/svg/moon.svg");
}
@keyframes wobble {
0% {
transform: translateX(0%);
}
15% {
transform: translate(-4%) rotate(-5deg);
}
30% {
transform: translate(4%) rotate(3deg);
}
45% {
transform: translate(-2.5%) rotate(-3deg);
}
60% {
transform: translate(1.25%) rotate(2deg);
}
75% {
transform: translate(-2.5%) rotate(-1deg);
}
100% {
transform: translateX(0%);
}
}
.dark-mode #mw-content-container {
background-color: var(--theme-tone-4);
}
.dark-mode #personal .dropdown:before {
border-bottom-color: var(--border-color);
}
.dark-mode #personal .dropdown:after {
border-bottom-color: var(--theme-tone-6);
}
.dark-mode #p-logo-text a {
color: var(--border-color-tone-2);
}
.dark-mode #personal-extra,
.dark-mode .server-time-image-wrap,
.dark-mode .tools-inline li a,
.dark-mode .tools-inline li a span,
.dark-mode #mw-data-after-content img,
.dark-mode .mw-editsection,
.dark-mode .mw-editsection a,
.dark-mode span.oo-ui-iconElement-icon:not(.oo-ui-checkboxInputWidget-checkIcon, .oo-ui-image-destructive, .oo-ui-icon-success, .oo-ui-image-success),
.dark-mode span.oo-ui-fieldLayout-field span:not(#movepage span, .tdg-templateDataDialog-panels span),
.dark-mode .postedit:after,
.dark-mode #mw-indicator-mw-helplink a,
.dark-mode
.oo-ui-buttonElement.oo-ui-widget-enabled
> .oo-ui-buttonElement-button
> .oo-ui-iconElement-icon:not(.oo-ui-image-invert, .oo-ui-image-destructive),
.dark-mode
.oo-ui-buttonElement.oo-ui-widget-enabled
> .oo-ui-buttonElement-button
> .oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert),
.dark-mode .flow-component .mw-ui-icon::before,
.dark-mode
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-textInputWidget-type-search
> .oo-ui-indicatorElement-indicator,
.dark-mode div.magnify a,
.dark-mode #pt-notifications-alert .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen:after,
.dark-mode #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-unseen-notifications:after,
.dark-mode #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications:after,
.dark-mode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle .oo-ui-iconElement-icon,
.dark-mode .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator,
.dark-mode .flow-ui-tooltip .mw-ui-icon.mw-ui-icon-element:before,
.dark-mode .ui-widget-header .ui-icon,
.dark-mode .oo-ui-indicator-down:not(select),
.dark-mode .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
.dark-mode .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator,
.dark-mode .ve-ui-mwTemplateDialog .oo-ui-indicatorElement-indicator.oo-ui-indicator-required,
.dark-mode .mw-content-ltr .redirectText li:first-child a,
.dark-mode .mw-content-ltr .redirectText li:first-child,
.dark-mode .mwe-math-element img,
.dark-mode .mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,
.dark-mode .mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
filter: invert(1);
}
.client-js .dark-mode .mw-echo-special-nojs {
filter: invert(1) brightness(4);
}
.dark-mode .warningbox,
.dark-mode .postedit.mw-notification {
background-color: var(--theme-tone-7);
border-color: var(--border-color);
color: var(--text-color);
}
.dark-mode .mw-body .mw-parser-output h2:not(.toctitle h2) {
background-image: url("https://elwiki.net/wiki/images/c/cc/Asset_-_Header_%28Dark%29.png");
}
.dark-mode .oo-ui-icon-stop,
.dark-mode .mw-ui-icon-stop:before,
.dark-mode div#mw-input-wpecho-subscriptions .oo-ui-checkboxInputWidget-checkIcon,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-last.oo-ui-image-progressive,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-next.oo-ui-image-progressive,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-previous.oo-ui-image-progressive,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-first.oo-ui-image-progressive,
.dark-mode
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button,
.dark-mode
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
> .oo-ui-buttonElement-button
span.oo-ui-labelElement-label,
.dark-mode .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field,
.dark-mode
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-buttonElement.oo-ui-buttonElement-framed.oo-ui-labelElement.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonInputWidget,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-icon-check.oo-ui-image-success,
.dark-mode span.oo-ui-iconElement-icon.oo-ui-image-invert.oo-ui-icon-pushPin {
filter: invert(0) !important;
}
.dark-mode #mw-indicator-mw-helplink a {
color: black;
font-weight: 500;
}
.dark-mode .mw-plusminus-pos {
color: #abff8e;
}
.dark-mode .mw-plusminus-neg {
color: #ff6565;
}
.dark-mode .autocomment,
.dark-mode .autocomment a,
.dark-mode .autocomment a:visited {
color: #b6bdc4;
}
.dark-mode code {
background-color: var(--theme-tone-4);
color: #a4ff4f;
border-color: var(--border-color-tone-2);
}
.client-js .dark-mode .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
.dark-mode .jquery-tablesorter th.headerSort {
background-image: url("/svg/sort-white.svg");
}
.dark-mode .jquery-tablesorter th.headerSortDown {
background-image: url("/svg/sort-white-down.svg");
}
.dark-mode .jquery-tablesorter th.headerSortUp {
background-image: url("/svg/sort-white-up.svg");
}
.dark-mode .oo-ui-pendingElement-pending {
background-color: var(--theme-tone-6);
background-image: linear-gradient(
135deg,
var(--theme-tone-8) 25%,
transparent 25%,
transparent 50%,
var(--theme-tone-8) 50%,
var(--theme-tone-8) 75%,
transparent 75%,
transparent
);
}
.dark-mode .mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.1);
}
.dark-mode #mw-createaccount-join {
background-color: var(--theme-tone-4);
color: var(--text-color);
border-color: var(--border-color-tone-2);
}
.dark-mode #mw-createaccount-join:hover {
background-color: var(--theme-tone-7);
border-color: var(--border-color-tone-2);
}
.dark-mode #searchInput {
background-color: var(--theme-tone-4);
}
.dark-mode #pt-notifications-alert .mw-echo-notifications-badge:focus:after,
#pt-notifications-notice .mw-echo-notifications-badge:focus:after {
border-color: #fff;
}
.dark-mode .wikiEditor-ui ::-webkit-resizer,
.dark-mode textarea::-webkit-resizer {
border-width: 8px;
border-style: solid;
border-color: var(--theme-tone-6) var(--border-color-tone-2) var(--border-color-tone-2) var(--theme-tone-6);
}
.dark-mode .wikiEditor-ui .sections ::-webkit-resizer {
border-color: var(--theme-tone-7) var(--border-color-tone-2) var(--border-color-tone-2) var(--theme-tone-7);
}
.dark-mode .filehistory a img,
.dark-mode #file img:hover {
background: var(--theme-tone-7)
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKklEQVQokWPU09NjwAYsLS2xijNhFcUDRjUQA1hwhffx48epY8OoBmIAADF+BFc0Ips+AAAAAElFTkSuQmCC");
}
