A new look and night mode for Wikipedia et al.

_wikipedia_new_look.md

A stylesheet and a script that give Wikipedia a new look with a night mode.

The best way to activate it is to go to Wikipedia's Preferences > Appearance and paste the CSS and JS into the corresponding section under "Shared CSS/JavaScript for all wikis".

The CSS is fine on its own, but you will need to activate the script as well for night mode to work.

For best results, have the typefaces Fira Sans and Literata installed (as well as Noto Sans CJK and Noto Serif CJK if you care about Chinese/Japanese/Korean).

Based on http://userstyles.org/styles/119976/wikipedia-minimalistic-material-design -- most of my changes are related to night mode.

global.css

/* my own */

body {
    font-size: 16px;
}

body, .mw-editsection, .mw-editsection-like {
	font-family: "Fira Sans", sans-serif !important;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .MainPageBG h2 {
	font-family: "Literata", "Noto Serif CJK TC", serif !important;
}

h1 .Hani, h1 .Hans, h1 .Hant, h1 .Hira, h1 .Jpan, h1 .Kana {
	font-size: 1em;
}

.Hira, .Jpan, .Kana, .Hani, .Hans, tt, :lang(ko).Hani, .Kore, .Hang, .CGK {
	font-family: inherit;
}

h1 .Hani, h1 .Hani * :not(:lang(vi)), h1 .Hans, h1 .Hans *, h1 .Hant, h1 .Hant *, h1 .Hira, h1 .Hira *, h1 .Jpan, h1 .Jpan *, h1 .Kana, h1 .Kana * {
	font-weight: 700;
}

.mw-body h1 {
	font-weight: 700 !important;
}

.mw-headline {
	font-style: italic;
}

.mw-body h2, .mw-body h3 {
	font-weight: 500 !important;
}

.mw-body h4, .mw-body h5, .mw-body h6 {
	font-weight: 700 !important;
}

pre, code {
	font-family: monospace;
}

button, input {
	font-family: inherit !important;
}

.mwe-popups-extract, .mwe-popups-extract:hover {
	color: #000000 !important;
}

.mwe-popups .mwe-popups-extract p {
	line-height: 1.45 !important;
}

.mwe-popups.mwe-popups-image-tri .mwe-popups-extract {
	padding-top: 1.5em;
}

.portal {
	font-weight: 300;
}

#p-logo {
	padding-left: 0 !important;
}

::selection {
    color: #ffffff;
    background-color: #444444;
}

@media only print {
	body, .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {
		font-family: "Literata", "Noto Serif", serif;
	}
}

/* night mode */

body.night-mode {
	background-color: #222222 !important;
	color: #dddddd;
}

.night-mode .mw-body {
	background-color: transparent !important;
}

.night-mode a {
    color: #08adff !important;
}

.night-mode a:hover {
    color: #43c0ff !important;
}

.night-mode #p-logo, .night-mode #p-logo a, .night-mode #mw-head {
    background-color: #222222 !important;
}

.quotebox {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: transparent !important;
    font-style: italic;
}

.night-mode .mw-body h1, .night-mode .mw-body h2, .night-mode .mw-body h3, 
.night-mode .mw-body h4, .night-mode .mw-body h5, .night-mode .mw-body h6 {
	color: #dddddd !important;
}

.night-mode .mw-body {
	color: #dddddd !important;
}

.night-mode #mw-panel .portal h3 {
	color: #cccccc !important;
}

.night-mode .infobox {
	color: inherit !important;
}

.night-mode .infobox td, .night-mode .infobox th, .night-mode .tright td, 
.night-mode .tright th, .night-mode .toccolours td, .night-mode .toccolours th, .night-mode,
.night-mode .wikitable td, .night-mode .wikitable th, .night-mode table.ambox,
.night-mode #toc {
    border: 1px dashed rgba(255, 255, 255, 0.07) !important;
}

.night-mode th {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.night-mode .wikitable {
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.night-mode .mw-highlight {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.night-mode .mw-content-ltr pre {
	color: #ffffff !important;
}

.night-mode .vertical-navbox {
	background: rgba(255, 255, 255, 0.1) !important;
}

.night-mode .navbox td, .night-mode .navbox th, 
.night-mode .nowraplinks td, .night-mode .nowraplinks th {
	border: 1px solid rgba(255, 255, 255, 0.1) !important
}

.night-mode code {
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.night-mode table.ambox {
	background: rgba(255, 255, 255, 0.1);
}

.night-mode .ambox-text-small, .night-mode .mbox-text, .night-mode .Note td {
	color: #ffffff !important;
}

.night-mode .mw-highlight .nt {
	color: #00bb00;
}

.night-mode .mw-highlight .nc, .night-mode .mw-highlight .nn {
	color: #4e4eff;
}

.night-mode .mw-highlight .m {
	color: #888888;
}

.night-mode .mw-highlight .c {
	color: hsl(180, 33%, 48%);
}

.night-mode #mw-head {
	box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.2);
}

.night-mode #mw-panel {
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.night-mode #p-logo a {
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.night-mode .tocnumber {
	color: rgba(255, 255, 255, 0.7);
}

.night-mode img.thumbborder {
	border: 1px solid transparent;
}

.night-mode #searchInput {
    color: #eeeeee !important;
}

.night-mode #simpleSearch {
	border: solid 1px rgba(255, 255, 255, 0.1) !important;
}

.night-mode .image img {
    opacity: 0.85 !important;
}

.night-mode .image img:hover {
    opacity: 1 !important;
}

.night-mode .mw-echo-notifications-badge {
	color: transparent !important;
}

.night-mode .mw-echo-notifications-badge:before {
    -webkit-filter: invert(1);
}

.night-mode .MainPageBG {
    background-color: rgba(255,255,255,0.1) !important;
}

.night-mode .MainPageBG table {
    background-color: transparent !important;
}

.night-mode .MainPageBG td {
	color: #dddddd !important;
}

.night-mode .MainPageBG h2 {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.night-mode #mp-topbanner {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.night-mode #mp-topbanner *:not(a) {
	color: #dddddd !important;
}

.night-mode .mwe-math-fallback-image-inline {
	-webkit-filter: invert(1);
}

.night-mode ::selection {
	color: #000000;
	background-color: #ffffff;
}

/* wiki logo night mode replacements */

.night-mode.wikipedia .mw-wiki-logo {
	background-image: url(http://i.imgur.com/IqptiFw.png);
}

.night-mode.wiktionary .mw-wiki-logo {
	background-image: url(http://i.imgur.com/Vw4rWrX.png);
}

/* from userstyles.org/styles/119976/wikipedia-minimalistic-material-design */

body {
    background: #ffffff !important;
}

a {
    color: #0088cc !important;
    text-decoration: none;
}

a:hover {
    color: #005580 !important;
    text-decoration: underline;
}

h1 {
    border: 0px !important;
    font-weight: 700 !important;
    font-size: 36px !important;
}

h2 {
    border: 0px !important;
    font-weight: 400 !important;
    font-size: 26px !important;
    
    position: relative;
}

/*.mw-body h2:before {*/
/*    content: "";*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    background: black;*/
/*    display: block;*/
/*    left: -1em;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
/*}*/

h3 {
    border: 0px !important;
    font-weight: 400 !important;
    font-size: 16px !important;
}

#content h3 {
    font-size: 20px !important;
}

p {
    line-height: 1.9 !important;
}

table,td,th {
	border-width: 0;
    border-collapse: collapse !important;
    padding: 5px !important;
}

ul,li {
    background: transparent !important;
    border: 0px !important;
    line-height: 1.8 !important;
    font-size: 14px !important;
}

li span {
    background: transparent !important;
    border: 0px !important;
    font-size: 14px !important;
}

.referencetooltip {
    background-color: #EEE !important;
}

dt {
    font-style: italic;
    font-size: 16px !important;
    margin-top: 10px !important;
}

dd {
    font-size: 15px !important;
}

/*#p-logo a {*/
/*    background-image: url('https://i.imgur.com/ur4m5Ia.png') !important;*/
/*}*/

code {
    padding: 3px !important;
    background: transparent !important;
    color: #39892f !important;
}

tt {
    font-size: 16px !important;
}

.new,.new:link,.new:visited {
    color: #cd5b45 !important;
}

blockquote {
    border: 0px !important;
    font-style: italic !important;
    font-size: 20px !important;
    margin: 35px 75px !important;
    line-height: 1.5 !important;
    font-weight: 300 !important;
    background: transparent !important;
}

select {
    padding: 0px 10px;
}

.mw-ui-button,.mw-ui-progressive {
    border-radius: 4px !important;
    border: 1px solid #347Bff !important;
    color: #347Bff !important;
    background: #fff !important;
    text-shadow: 0px 0px 0px;
}

.mw-ui-button.mw-ui-progressive:hover,.mw-ui-button.mw-ui-progressive:focus,.mw-ui-button.mw-ui-progressive:active,.mw-ui-button:hover,.mw-ui-progressive:hover,.mw-ui-button:focus,.mw-ui-progressive:focus {
    box-shadow: 0px 0px 0px !important;
    text-shadow: 0px 0px 0px !important;
    border: 1px solid #347Bff !important;
}

#wpSave,#wpPreview,#wpDiff {
    border-radius: 4px !important;
    border: 1px solid #347Bff !important;
    color: #347Bff !important;
    background: #fff !important;
    text-shadow: 0px 0px 0px;
    padding: 0.5em 1em;
    cursor: pointer;
}

#wpSave:hover,#wpPreview:hover,#wpDiff:hover {
    color: rgba(52,123,255,0.5) !important;
}

/* Search */
#simpleSearch {
    background: transparent !important;
    border-color: #ccc !important;
}

#searchInput {
    background: transparent !important;
}

.mw-ui-input {
    border: 1px solid #347Bff !important;
    color: #000 !important;
    background: #fff !important;
    font-size: 16px !important;
}

.mw-ui-input:focus {
    box-shadow: 0px 0px 0px !important;
}

.mw-content-ltr pre {
    color: #000d26 !important;
}

.suggestions {
    font-weight: 300 !important;
    font-size: 15px !important;
    max-width: 300px !important;
    margin-top: 15px !important;
    border: 0px !important;
    box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.5);
}

.suggestions-results {
    border: 0px !important;
}

.suggestions-result {
    padding: 10px !important;
}

.imeselector,#searchEngines {
    display: none !important;
}

.mw-search-formheader {
    border: 0px !important;
    background: transparent !important;
}

/*.central-featured-logo {*/
/*    background-image: url('https://i.imgur.com/nRDTbeb.png') !important;*/
/*}*/


.mw-search-result-heading,.searchresult,.searchmatch {
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 3px 0px !important;
}

.searchmatch {
    font-weight: 700 !important;
}

.mw-search-result-data,.mw-search-createlink {
    display: none;
}

#mw-page-base,.vectorTabs {
    background: transparent !important;
    border: 0px !important;
}

#content {
    border: 0px !important;
    margin-left: 215px !important;
}

.portal {
    background: transparent !important;
}

#mw-panel {
    width: 200px !important;
    border-right: 1px solid #bbb;
    background: none;
}

#p-logo {
    left: 0px;
    padding-left: 8px;
    background-color: white;
}

#p-logo a {
    padding-left: 40px;
    background-color: white;
    left: 0px;
    border-right: 1px solid #aaa;
}
#p-logo a:hover {
    opacity: 1.0;
}

#mw-head {
    background-color: #f9f9f9;
    opacity: 1.0;
    box-shadow: 0px 1px 2px #aaa;
    transition-property: opacity !important;
    transition-duration: 0.25s !important;
}

#mw-head:hover {
    opacity: 1.0 !important;
}

.uls-settings-trigger {
    display: none !important;
}

#left-navigation {
    margin-left: 233px !important;
}

.wikitable td,.wikitable th {
    border: 1px dashed rgba(0,0,0,0.07) !important;
}

pre {
    line-height: 1.3 !important;
    border: 0px !important;
    background: 0px !important;
    font-size: 16px !important;
}

.mw-code {
    border: 0px !important;
    padding: 17px !important;
    background: 0px !important;
    font-size: 16px !important;
}

.toc {
    background: transparent !important;
    border-style: dashed !important;
    display: block !important;
    max-width: 300px !important;
}

.toc .toctitle {
	text-align: left;
}

.toctoggle {
    display: none !important;
}

.thumbinner,.thumb,.toccolours,.graytable {
    background: transparent !important;
    border: 0px !important;
    font-size: 16px !important;
}

.thumbimage {
    border: 0px !important;
}

.thumbcaption {
    font-style: italic !important;
    margin: 7px 0px !important;
}

.thumbimage:hover {
    opacity: 0.85 !important;
}

.dablink {
    margin: 14px 0px !important;
    font-size: 18px !important;
}

#siteSub,.flaggedrevs_preview {
    display: none !important;
}

.ambox,.tmbox,.Note,.informationbox {
    margin: 5px 0px !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    border: 1px dashed #aaa !important;
    max-width: 550px !important;
}

.ambox td,.tmbox td {
    padding: 10px !important;
}

.ambox-text-small,.mbox-text,.Note td {
    font-size: 14px !important;
    color: #000 !important;
}

.ambox-image,.mbox-image {
    display: none;
}

#request_for_deletion,.ambox-serious {
    background: rgba(255,0,0,0.1) !important;
    border: 1px dashed rgba(255,0,0,0.15) !important;
    color: #a00000 !important;
}

.tmbox-notice,.tmbox-move,.Note {
    background: rgba(150,75,0,0.1) !important;
    border: 1px dashed rgba(150,75,0,0.15) !important;
}

.informationbox {
    background: #fff !important;
    padding: 10px !important;
    font-size: 14px !important;
}

.editOptions {
    background: #fff !important;
    border: 0px !important;
}

.catlinks {
    background: transparent !important;
    border: 1px dashed #aaa !important;
    font-size: 16px !important;
}

.infobox,.tright,.toccolours {
    border: 0px !important;
    background: transparent !important;
    border-collapse: collapse !important;
}

.infobox td,.infobox th,.tright td,.tright th,.toccolours td,.toccolours th {
    padding: 5px !important;
    border: 1px dashed rgba(0,0,0,0.07) !important;
}

.image img:hover {
    opacity: 0.85 !important;
}

.globegris {
    background: transparent !important;
}

.mw-editsection-bracket,.references-small b,.mw-cite-backlink,.plainlinksneverexpand {
    display: none !important;
}

#floating_object {
    display: none;
}

.navbox,.nowraplinks {
    margin: 10px 0px !important;
    border-collapse: collapse !important;
}

.navbox td,.navbox th,.nowraplinks td,.nowraplinks th {
    padding: 9px 6px !important;
    font-size: 14px !important;
    border: 1px solid #fff !important;
}

.NavFrame {
    border: 0px !important;
    background: transparent !important;
    padding: 0px !important;
}

.NavHead {
    margin: 10px 0px !important;
    padding: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: transparent !important;
}

.Boxmerge {
    border: 0px !important;
}

#coordinates {
    display: none !important;
}

#mw-fr-revisiontag,#mw-fr-reviewnotice {
    display: none !important;
}

div#footer {
    margin-left: 14em !important;
    padding: 1.25em 1.5em 1.5em !important;
}

global.js

/* night mode */

var nightModeDisabled = false; // set this to true to disable night mode

var forceNightMode = false;

var now = new Date();
var hours = now.getHours() + now.getMinutes() / 60;

if (!nightModeDisabled && (hours > 19.5 || hours < 5 || forceNightMode)) {
	document.body.classList.add("night-mode");
}

/* add wiki name to body classList */

var hostname = window.location.hostname;
var wikiName = hostname.substring(hostname.indexOf(".") + 1, hostname.length - 4);
document.body.classList.add(wikiName);

/* activate night mode if GET param "nightmode" is present */

if (window.location.search.indexOf("nightmode") !== -1) {
	document.body.classList.add("night-mode");
}