☰

The Times Dark Mode

A dark mode for The Times & The Sunday Times frontpage and articles.

/* ==UserStyle==
@name           The Times Dark Mode
@namespace      git.arun.host/arun/userstyles
@version        1.0.1
@description    A dark mode for The Times & The Sunday Times frontpage and articles.
@author         Arun Sunner
==/UserStyle== */

@-moz-document domain("thetimes.co.uk") {


/* Page Theming */

.Page {
	background-color: #000 !important;
}

.Container,
.MainContainer,
.Sticky-HeaderContainer,
.Section::after,
.Section::before {
	background-color: #000 !important;
}

.MainContainer {
	border-left: none !important;
	border-right: none !important;
}

.Item:before,
.Item:after,
.SUP-4 .Item-content,
.ItemGrouped:before,
.ItemGrouped:after,
.Theme--news:before,
.Theme--news:after {
	background-color: #222222 !important;
}


/* Footer */

.GlobalFooter-header {
	border-top: none !important;
}

.GlobalFooter-backToTopSection,
.GlobalFooter-backToTopSection .Container {
	background-color: #3C3F44 !important;
}


/* Headlines */

.Headline,
.Item-headline,
.ArticlePagerItem-title,
h1[role="heading"],
[class*="responsiveweb__Heading"],
[class*="Headline"] a,
article[role="article"] p,
.InTheNews-headline,
span[class*="__DropCap"] {
	color: #e2e2e4 !important;
}

.Item-headline a:hover {
	transition: ease 0.5s;
}


/* Nav Menu */

nav#global-menu-mobile {
	background-color: #0c0d0f !important;
}

nav#global-menu-mobile .GlobalMenu-parentLink,
nav#global-menu-mobile .GlobalMenu-dropdown--primary {
	border-color: #242424 !important;
}

a.GlobalMenu-mobileLink {
	color: #eee;
}

#todays-sections-menu-desktop * {
	border-color: #242424 !important;
	color: #242424 !important;
}

#todays-sections-menu-mobile {
	list-style: none;
	padding: 0;
}

.GlobalSearch-searchInput#nav-search-mobile {
	width: 96.5%;
}

@media (min-width: 768px) and (max-width:1023px) {
	.OrientationBar {
		width: auto;
		right: 18.2rem;
	}
}


/* Article Specific */

div[class*="__LeadAssetCaptionContainer"] *,
div[class*="__InsetCaption"] * {
	color: #eee !important;
}

div[class*="__LeadAssetCaptionContainer"] :nth-child(2),
div[class*="__InsetCaption"] :nth-child(2),
div[class*="__HeaderContainer"] h2[role="heading"],
*[class*="keylines__"] *,
.Item-dip * {
	color: #bbb !important;
}

*[class*="keylines__"] * a:hover {
	color: #3C81BE !important;
	text-decoration: underline !important;
}

article [class*="responsiveweb-"][class*="css"][class*="r"],
article span [class*="css"][class*="r"] {
	border-color: transparent !important;
}


/* Previous/Next Article */

.ArticlePagerItem--winged .ArticlePagerItem-name {
	background-color: #333 !important;
	color: #fff !important;
}

.ArticlePagerItem-icon,
.ArticlePagerItem:hover .ArticlePagerItem-icon {
	color: #fff !important;
}

.ArticlePagerItem:hover .ArticlePagerItem-title,
.ArticlePagerItem:hover .ItemGrouped .ArticlePagerItem-title {
	color: #1d1d1b !important;
}


/* Fix for image backgrounds */

.is-delayedImageContainer,
.EditionList-itemLink,
.EditionList-media {
	background: transparent !important;
}


/* Show More Button */

.ShowMore button {
	background: #333333 !important;
	color: #fff !important;
	transition: ease 0.5s;
}

.ShowMore .ShowMore-button:active,
.ShowMore .ShowMore-button:hover {
	border-color: #fff;
	background-color: #069 !important;
	transition: ease 0.5s;
}


/* Links in articles */

[class*="linkweb__"] {
	color: inherit !important;
}

[class*="linkweb__"]:hover {
	color: #069 !important;
	font-weight: bold;
}


/* Masthead */

.Masthead {
	background-color: #000;
	border-bottom: none;
	padding-top: 1em;
	padding-bottom: 0.75em;
}

.Masthead-logo,
.Dual-Masthead-image {
	filter: invert(100%);
}

.Masthead time {
	color: white;
}


/* Error Pages */

.ErrorPage-content *:not(input) {
	color: #fff !important;
}

.ErrorPage-media {
	filter: invert(100%);
}


/* Past Six Days */

.PastSixDays-newspaperIcon {
	filter: invert(100%);
}


/* Section Theming */

.u-themeColor,
.Section-headerBackground,
.GlobalNav *[class*="Theme--"],
.OrientationBar-wrapper {
	filter: brightness(150%);
}

@media (max-width: 1024px) {
	[class*="Theme--"].GlobalNav-wrapper {
		filter: brightness(150%);
	}
}

.Item-articleLabel.u-themeColor,
[class*="Theme--"] .Byline-name,
[class*="__LabelContainer"],
[class*="__HeaderContainer"] [class*="__HeaderContainer"] :nth-child(2):not([class*="LeadAsset"]) *:not([class*="LeadAsset"]) {
	filter: brightness(200%);
}


/* In The News Header */

.InTheNews {
	background-color: #0c0e0f;
	border-bottom: none;
	padding-bottom: 10px;
}


/* Restore certain sections to default */

.SUP-4 .Item-headline.Headline--l,
.Item-headline.Headline--puzzle {
	color: #1D1D1B !important;
}


/* Ads/Paywall Restriction Styling */

#master_adContainer,
#master_adContainer div,
#sponsored-article-container div {
	background: #232323 !important;
	border-color: #333333 !important;
	color: #dedede;
}

[class*="paywall"] [class*="css"][class*="r"] {
	border-color: transparent !important;
	display: none;
}

#paywall-portal-article-footer div,
#paywall-portal-page-footer div div {
	background-color: #222222;
}

#paywall-portal-article-footer div::before {
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
}

#paywall-portal-article-footer *,
#paywall-portal-page-footer * {
	color: #fefefe;
}


/* Puff */

in-article-puff {
	padding-left: 2em;
	padding-right: 2em;
}
}

@-moz-document regexp("(?=.*?\\-cartoon).*") {
	/* Cartoons */
	#article-main h1[class*="Headline"] {
		color: initial !important;
	}
}
@-moz-document url-prefix("https://www.thetimes.co.uk/article") {
	/* Header for shared articles */
	.ArticleMarketing--header .ArticleMarketing-container {
		background-color: #1b1b1b;
		padding-left: 5rem !important;
		padding-right: 5rem !important;
		;
	}
	.ArticleMarketing--header .ArticleMarketing-container * {
		color: #fff !important;
	}
}
@-moz-document url-prefix("https://www.thetimes.co.uk/static") {
	/* Static Page Styling */
	body {
		color: #fff !important;
	}
	.Article-content a {
		color: #3C81BE !important;
	}
	img[src*="The-Times-and-Sunday-Times.png"] {
		filter: grayscale(1) invert(100%);
	}
}