A dark mode for a few political sites, custom-tailored to invert dark colors and gracefully display images
Dark Mode Political Sites by Siren

Details
AuthorSiren
LicenseGNU GPLv3
Categorywww.theguardian.com; reason.com; www.theepochtimes.com; www.foxnews.com; www.foxbusiness.com
Created
Updated
Size3.6 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
I chose one of each leaning site according to allsides.com/media-bias --> The Guardian, Reason, The Epoch Times, and Fox News (as well as Fox Business)
Source code
/* ==UserStyle==
@name Dark Mode Political Sites
@namespace github.com/openstyles/stylus
@version 0.1.0
@description A dark mode for each site, custom-tailored to invert dark colors and gracefully display content
@author Siren
==/UserStyle== */
@-moz-document domain("www.theguardian.com"), domain("reason.com"), domain("www.theepochtimes.com"), domain("www.foxnews.com"), domain("www.foxbusiness.com") {
:root {
--dark-filter: invert(95%) hue-rotate(180deg);
--revert-filter: invert(0%) hue-rotate(0deg);
}
html {
filter: var(--dark-filter);
}
img, video {
filter: var(--dark-filter);
}
iframe[id*="yt-player"], iframe[class*="yt-player"] {
filter: var(--dark-filter);
}
}
@-moz-document domain("theguardian.com") {
#bannerandheader header {
filter: var(--dark-filter);
}
section[class*="fightback-newsletter"] {
filter: var(--dark-filter);
& img, section[class*="fightback-newsletter"] {
filter: var(--revert-filter);
}
}
section[class*="documentary"] {
filter: var(--dark-filter);
& img {
filter: var(--revert-filter);
}
}
#video {
filter: var(--dark-filter);
& img, video {
filter: var(--revert-filter);
}
}
footer[style="background-color:#052962;"] {
filter: var(--dark-filter);
}
}
@-moz-document domain("reason.com") {
.logo {
filter: var(--revert-filter);
}
div[id*="home-page-feature-bar"], .feature-bar--wrapper {
filter: var(--dark-filter);
.video-player {
filter: var(--dark-filter);
}
}
#primary-nav {
filter: var(--dark-filter);
}
section.widget {
filter: var(--dark-filter);
}
.disco-widget {
filter: var(--dark-filter);
background-color: #b6b6b6;
padding: .5em;
}
footer {
filter: var(--dark-filter);
}
}
@-moz-document domain("www.theepochtimes.com") {
header img {
filter: var(--revert-filter);
}
iframe[src*="embedtv"] {
filter: var(--dark-filter);
}
div[data-ea="top-news-jingwen"] {
& img {
filter: var(--revert-filter);
}
}
/* Within articles */
footer.flex {
filter: var(--dark-filter);
& img {
filter: var(--revert-filter);
}
}
}
@-moz-document domain("www.foxnews.com"), domain("www.foxbusiness.com") {
.network-wrapper {
filter: var(--dark-filter);
}
.site-header {
background-color: transparent;
border-bottom: 0px;
& .nav-row-lower {
filter: var(--dark-filter);
& .inner {
background-color: white !important;
}
}
}
iframe {
filter: var(--dark-filter);
}
.info {
filter: brightness(155%) contrast(85%);
}
.alert-banner, .site-header, .article-header {
filter: var(--dark-filter);
}
footer {
filter: var(--dark-filter);
}
/* On /video/ sites */
#__nuxt {
filter: var(--dark-filter);
& iframe, .video-item img {
filter: var(--revert-filter);
}
.video-item {
filter: var(--dark-filter);
}
section.collection, .item-newsletter {
filter: var(--dark-filter);
}
.article-body .speakable, .article-body p {
filter: var(--dark-filter);
}
img {
filter: var(--revert-filter);
}
iframe[id*="widget"] {
filter: var(--dark-filter);
}
& footer.video-site-footer .branding {
filter: var(--dark-filter);
& a {
opacity: 100%;
}
}
& footer.video-site-footer {
color: black;
}
& footer {
filter: var(--revert-filter);
}
}
}