Dark Mode for zeit.de
zeit.de Better Dark Mode by klickreflex
Details
Authorklickreflex
LicenseNo License
Categoryzeit.de
Created
Updated
Size13 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name zeit.de Better Dark Mode
@namespace USO Archive
@author klickreflex
@description `A custom dark mode for German news outlet Zeit.de. Using the media query `prefers-color-scheme:dark`, it is only effective if your OS is currently set to dark, too.See it in action: https://cln.sh/JAAr5y`
@version 20210622.6.53
@license CC-BY-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain(zeit.de) {
/*
* Author: Daniel Wentsch (@klickreflex, klickreflex.de)
* Colors from TailwindCSS
*/
:root {
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-300: #93c5fd;
--blue-400: #60a5fa;
--blue-500: #3b82f6;
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--blue-800: #1e40af;
--blue-900: #1e3a8a;
--gray-50: #fafafa;
--gray-100: #f4f4f5;
--gray-200: #e4e4e7;
--gray-300: #d4d4d8;
--gray-400: #a1a1aa;
--gray-500: #71717a;
--gray-600: #52525b;
--gray-700: #3f3f46;
--gray-800: #27272a;
--gray-900: #18181b;
--red-50: #fef2f2;
--red-100: #fee2e2;
--red-200: #fecaca;
--red-300: #fca5a5;
--red-400: #f87171;
--red-500: #ef4444;
--red-600: #dc2626;
--red-700: #b91c1c;
--red-800: #991b1b;
--red-900: #7f1d1d;
--duration-md: .2s;
--transition-properties: background-color, border-color, color, fill stroke, opacity, box-shadow, transform, filter, backdrop-filter;
}
@media (prefers-color-scheme:dark) {
:root {
--z-background-primary: var(--gray-800);
--z-background-iron: var(--gray-900);
}
body {
background-color: var(--gray-900);
color: var(--gray-200);
}
a {
color: var(--gray-200);
}
.page__content {
box-shadow: none;
background-color: var(--gray-800);
color: var(--gray-200);
}
.metadata,
.bookmark-icon {
color: var(--gray-400);
}
.header,
.header .nav,
.header--sticky .header__brand {
color: var(--gray-100);
background-color: transparent;
}
.header--sticky .header__brand {
background-color: var(--gray-900);
}
.header__menu-link {
color: var(--gray-200);
}
.header .nav a {
color: var(--gray-400);
}
.header .nav .nav__ressorts-list a {
color: var(--gray-200);
}
.header .nav .nav__ressorts-list .nav__ressorts-link--current {
color: #fff;
box-shadow: inset 0 -3px 0 0 var(--gray-200) !important;
}
.header:not(.header--force-mobile) .nav__ressorts {
border-bottom: 1px solid var(--gray-700);
}
.svg-symbol.header__logo {
color: var(--gray-100);
}
.search__input,
button.search__button,
.recipe-search__input,
.recipe-search__submit {
background-color: var(--gray-900);
border-color: #000;
color: var(--gray-50);
}
form.search,
.search-form.recipe-search__form {
padding: 0 !important;
margin-top: 1.375rem;
border-radius: 4px
}
.recipe-search__input:focus {
background: inherit;
}
form.search:focus-within {
box-shadow: 0 0 0 2px var(--blue-400);
}
input:focus,
textarea:focus,
select:focus {
background-color: var(--gray-900);
border-color: #000;
color: var(--gray-50);
}
.summary,
.byline {
color: var(--gray-300);
}
.list,
.paragraph {
line-height: 1.6;
}
.list a,
.paragraph a {
color: var(--gray-300);
border:none;
text-decoration: underline;
}
.article-heading__kicker {
color: var(--red-700);
}
.volume-teaser,
.figure__caption {
color: var(--gray-400);
}
.figure__copyright {
color: var(--gray-500);
}
.topicbox {
border-color: var(--gray-600);
}
.topicbox__supertitle {
background-color: var(--gray-800);
color: var(--gray-200)
}
.topicbox__title {
color: var(--gray-200);
}
.topicbox-item__kicker {
color: var(--red-700);
}
.topicbox-item__title {
color: var(--gray-300);
}
.article-tags__link {
color: var(--gray-400);
}
.article-tags__link:hover {
color: var(--gray-100);
}
.footer-brand__logo {
color: var(--gray-500);
}
.footer-publisher,
.footer-publisher__row{
background-color: transparent !important;
color: var(--gray-400) !important;
}
.footer-links,
.footer-links__row,
.footer-publisher {
background-color: var(--gray-900);
}
.print-menu {
color: var(--gray-400);
}
.print-menu:hover {
color: var(--gray-50);
}
.article-pagination__button {
background-color: var(--gray-900);
}
.article-pagination__button:hover {
background-color: #000;
}
.article-tags__title {
color: var(--red-700);
}
.sticky-nav {
background-color: #000;
}
.sticky-nav__icon--zon {
color: var(--gray-100);
}
.sticky-nav__content:before,
.sticky-nav__content:after {
border-color: var(--gray-400);
}
.sticky-nav__focusheadline,
.sticky-nav__hplink {
color: var(--gray-400);
}
.sticky-nav__tag,
.nav__tag {
border-color: var(--gray-700);
color: var(--gray-500);
transition: ease-in var(--duration-md) var(--transition-properties);
}
.sticky-nav__tag:hover,
.nav__tag:hover {
color: var(--gray-100);
background-color: var(--gray-900);
border-color: var(--gray-50);
}
.nav__dropdown-list,
.nav__login-list,
.nav__dropdown-item--has-label{
background-color: var(--gray-900) !important;
border: none !important;
}
.nav__dropdown-list a:hover,
.nav__dropdown-list a:active,
.nav__dropdown-list a:focus,
.nav__login-list a:hover,
.nav__login-list a:active,
.nav__login-list a:focus {
background-color: #000 !important;
}
.nav__metadata {
color: var(--gray-400) !important;
}
.zon-teaser-poster__title,
.zon-teaser-classic__title,
.zon-teaser-lead__title,
.zon-teaser-wide__title,
.zon-teaser-news__title,
.zon-teaser-upright__title,
.zon-teaser-printbox__title,
.zon-teaser-standard__title,
.teaser-buzz__title {
color: var(--gray-50);
}
.zon-teaser-poster__kicker, .zon-teaser-news__kicker, .zon-teaser-upright__kicker, .zon-teaser-printbox__kicker, .zon-teaser-classic__kicker, .zon-teaser-lead__kicker, .zon-teaser-wide__kicker, .zon-teaser-standard__kicker, .zon-teaser-square__kicker, .teaser-buzz__kicker, .zon-teaser-news__kicker--ad, .zon-teaser-upright__kicker--ad, .zon-teaser-classic__kicker--ad, .zon-teaser-lead__kicker--ad, .zon-teaser-wide__kicker--ad, .zon-teaser-standard__kicker--ad, .zon-teaser-square__kicker--ad {
color: var(--red-700);
}
.zon-teaser-poster__text, .zon-teaser-news__text, .zon-teaser-upright__text, .zon-teaser-printbox__text, .zon-teaser-classic__text, .zon-teaser-lead__text, .zon-teaser-wide__text, .zon-teaser-standard__text {
color: inherit;
}
a:hover, a:active, a:focus {
color: inherit;
}
.zon-teaser-poster__metadata, .zon-teaser-news__metadata, .zon-teaser-upright__metadata, .zon-teaser-classic__metadata, .zon-teaser-lead__metadata, .zon-teaser-wide__metadata, .zon-teaser-standard__metadata, .zon-teaser-square__metadata, .teaser-buzz__metadata {
color: var(--gray-400) !important;
}
.zon-teaser-poster__combined-link,
.zon-teaser-news__combined-link,
.zon-teaser-upright__combined-link,
.zon-teaser-printbox__combined-link,
.zon-teaser-classic__combined-link,
.zon-teaser-lead__combined-link,
.zon-teaser-wide__combined-link,
.zon-teaser-standard__combined-link,
.teaser-podcast-lead__combined-link,
.zon-teaser-square__combined-link,
.teaser-buzz__combined-link {
transition: ease-in var(--duration-md) var(--transition-properties);
}
.zon-teaser-wide__combined-link:hover .zon-teaser-wide__title,
.zon-teaser-classic__combined-link:hover .zon-teaser-classic__title,
.zon-teaser-standard__combined-link:hover .zon-teaser-standard__title{
text-decoration: underline;
}
.podcastfooter {
background-color: rgba(0,0,0,0.25);
}
.wm-ticker {
color: var(--gray-200);
}
.wm-ticker__text {
color: var(--gray-200);
}
.wm-ticker__header {
border-color: var(--gray-900);
}
.wm-ticker__match {
border-color: var(--gray-700) !important;
}
.wm-ticker__match--finished {
background-color: transparent;
}
.wm-ticker__match-score--finished {
color: var(--gray-100);
}
.wm-ticker__match-link,
.wm-ticker__match-info,
.wm-ticker__list-time {
color: var(--gray-400) !important;
}
.wm-ticker__match-link:hover {
color: var(--gray-100) !important;
}
.zon-dossier {
border-color: var(--gray-600);
}
.zon-dossier__kicker {
background-color: var(...