MediaWiki:Gadget-dark-timeless.css


 * root .skin-timeless {

/** Current impl */ --article       : #222222; /* Article table */ --body-1        : #111111; /* Page background stripe 1 */ --body-2        : #181818; /* Page background stripe 2 */ --border        : #999999; /* Layout border */ --divider       : orangered; /* Layout divider */ --footer-1      : #191919; /* Page footer 1 */ --footer-2      : #111111; /* Page footer 2 */ --input         : #000000; /* Data input background */ --input-text    : #e4e4e4; /* Data input text */ --link-admin    : #009400; /* Admin user link */ --link-bureaucrat: #daa520; /* Bureaucrat user link */ --link-external : #4b7bce; /* External link */ --link-internal : #3b9400; /* Internal link */ --link-missing  : #e15151; /* Link destination does not exist */ --link-niwa     : #319471; /* NIWA affiliate link */ --link-visited  : #B969AE; /* Visited link */ --mark          : #484800; /* background */ --page          : #111111; /* Main content background */ --page-b        : #000000; /* Secondary content background */ --page-text     : #e4e4e4; /* Main content text */ --page-text-b   : #ababab; /* Secondary content text */ --reference     : #001024; /* Selected reference background */ --reply-highlight: #855d00; /* Briefly displayed after reply */ --selected      : #3366cc; /* Selection background */ --selected-text : #ffffff; /* Selection text */ --shadow        : #000000; /* Layout shadow */ --diff-add	  : #0064C2; /* Diff added contents box border */ --diff-add-word: #0063C7; /* Diff added word background */ --diff-context : #616670; /* Diff context box border */ --diff-del	  : #805e00; /* Diff deleted contents box border */ --diff-del-word: #7e5901; /* Diff deleted word background */ --diff-history : #181818; /* Selected diff in history */

--ui-error     : #df434399; --ui-grey      : #ffffff54; --ui-invert    : #00000099; --ui-main-theme : #00B800;  /* The main UI theme including some components */ --ui-main-theme-b : rgba(0, 184, 0, 0.25);  /* Above with background highlight opacity */ --ui-normal    : #ffffff99; --ui-progressive: #507bd399; --ui-warning   : #ffcc3399;

/** Overrides on site colors for better dark mode */ --site-color-text-default			: white; --site-color-text-generic			: white; --site-color-text-niwa				: white; --site-color-text-oe				: white; --site-color-text-so				: white; --site-color-text-sr				: white; --site-color-text-s 				: white; --site-color-text-s2				: white; --site-color-text-s3				: white;

/** CSS on this page */ --translucent-background: rgba(75, 75, 75, 0.8); --infobox-background: rgba(75, 75, 75, 0.8); --menu-background: rgba(75, 75, 75, 0.96); --hatnote-background: rgba(75, 75, 75, 0.5); --body-background: #111; /* was 000 */ --text-color: var(--page-text); /* was fff */ --filter: brightness(0) invert(1); --caption: #e4e4e4; /* was fff */ --image-border: 2px solid #e4e4e4; }

@media screen and (min-width: 768px) { .skin-timeless .header-container.header-chrome { background: var(--menu-background); }	.skin-timeless .content figcaption, .content .thumbcaption { color: var(--caption); }	.skin-timeless .page-actions-menu__list-item > a { color: var(--grey-text-color); } } @media screen and (min-width: 1025px) { .skin-timeless .pre-content h1 { color: var(--text-color); } } .skin-timeless #mw-mf-page-left ul.hlist li a { color: var(--link-color); } .skin-timeless .overlay-header-container, .overlay-footer-container { background: var(--translucent-background); } .skin-timeless #mw-mf-page-left { background: var(--translucent-background); } .skin-timeless .mw-searchresults-has-iw .iw-resultset { background: var(--infobox-background); }

/* Dark Mode */ .skin-timeless #content, #mw-mf-page-center { background: var(--body-background); color: var(--text-color); } .skin-timeless .toggle-list__list { background: var(--translucent-background); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .skin-timeless .toggle-list-item:hover { background: var(--body-background); } .skin-timeless .toggle-list-item__label { color: var(--text-color); } .skin-timeless .mw-highlight { background: var(--translucent-background); } .skin-timeless .page-summary h2, .page-summary h3, .overlay.search-overlay li.page-summary .wikidata-description { color: var(--text-color); } .skin-timeless .unicode, .haudio { filter: var(--filter); } .skin-timeless .branding-box img { filter: var(--filter); } .skin-timeless .mw-ui-icon-element, .mw-ui-icon-before:before { filter: var(--filter); } .skin-timeless .client-js .toc { background-color: var(--body-background); } .skin-timeless #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 { opacity: 1; filter: var(--filter); } .skin-timeless .minerva__tab-container .minerva__tab:visited, .minerva__tab-container .minerva__tab:hover, .minerva__tab-container .minerva__tab:active, .minerva__tab-container .minerva__tab.new, .minerva__tab-container .minerva__tab.new:visited, .minerva__tab-container .minerva__tab.new:active, .minerva__tab-container .minerva__tab.new:hover { color: var(--text-color); } .skin-timeless #mw-mf-page-left ul li a { color: var(--text-color); } .skin-timeless .content figure .thumbinner, .content .thumb .thumbinner { background: var(--infobox-background); } .skin-timeless .overlay { background: var(--translucent-background); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .skin-timeless .hatnote { background: var(--translucent-background); color: var(--caption); border-radius: 10px; }

/* Banner */ .skin-timeless #mw-mf-page-left ul li a { color: var(--text-color); } .skin-timeless .header-container.header-chrome { background: var(--menu-background); box-shadow: 3px 3px 6px rgba(0,0,0,0.20); } /* Targeting Safari for Backdrop Filter and Font size bug*/ @media not all and (min-resolution:.001dpcm) { @media { .header-container.header-chrome { background: var(--translucent-background) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } 		@media screen and (min-width: 768px) { body, p { font-size: 1.1em !important; }			.pre-content h1 { font-size: 3em; } 		}    } } @media screen and (max-width: 767px) { .skin-timeless .content figcaption, .content .thumbcaption { color: var(--text-color); } } /* Fonts */ .skin-timeless .pre-content h1 { color: var(--text-color); } .skin-timeless h2 .mw-headline { color: var(--text-color); } .skin-timeless h3 .mw-headline{ color: var(--text-color); } .skin-timeless h4 .mw-headline{ color: var(--text-color); } .skin-timeless .content table.infobox { background: var(--infobox-background); color: var(--text-color); } /* Editor */ .skin-timeless .oo-ui-toolbar-bar { background-color: var(--translucent-background); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--text-color); } .skin-timeless .oo-ui-iconElement-icon { filter: var(--filter); } .skin-timeless .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon, .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator { filter: var(--filter); } .skin-timeless .client-js .mw-edittools-section input[type="button"] { color: var(--text-color); }