Skip to content

Zwift.com Dark Mode by Nick2bad4u

Mirrored from https://github.com/Nick2bad4u/UserStyles/raw/refs/heads/main/Zwift.com-Dark-Mode.user.css

Screenshot of Zwift.com Dark Mode

Details

AuthorNick2bad4u

LicenseUnLicense

Categoryzwift

Created

Updated

Size4.6 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Zwift.com Dark Mode

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           Zwift.com Dark Mode
@version        8.3
@namespace      https://userstyles.world/user/Nick2bad4u
@description    Zwift.com Dark Mode
@author         Nick2bad4u
@license        UnLicense
@homepageURL    https://userstyles.world/user/Nick2bad4u
@downloadURL    https://raw.githubusercontent.com/Nick2bad4u/UserStyles/refs/heads/main/Zwift.com-Dark-Mode.user.css

@var color      primary-color            "Primary Color" #ff7830
@var color      secondary-color          "Secondary Color" #141518
@var color      background-color         "Background Color" #f1f1f1
@var color      text-color               "Text Color" black
@var color      card-background-color    "Card Background Color" #fffffffa
@var color      modal-background-color   "Modal Background Color" #ffffffe6
@var color      scrollbar-color          "Scrollbar Color" #000000
@var color      scrollbar-thumb-color    "Scrollbar Thumb Color" #ff7830
@var text       invert-filter            "Invert Filter" "invert(1) hue-rotate(180deg)"
==/UserStyle== */
@-moz-document domain("zwift.com") {
	:root {
			--primary-color: var(primary-color);
			--secondary-color: var(secondary-color);
			--background-color: var(background-color);
			--text-color: var(text-color);
			--card-background-color: var(card-background-color);
			--modal-background-color: var(modal-background-color);
			--scrollbar-color: var(scrollbar-color);
			--scrollbar-thumb-color: var(scrollbar-thumb-color);
			--invert-filter: var(invert-filter);
	}

	/* Invert colors except images, videos, and footer */
	html:not([stylus-iframe]),
	img,
	svg,
	video,
	footer,
	path,
	div.CardCarousel-module__cardContainer--1vNvU,
	.Hero-module__backgroundOverlay--3CFsa.lazy,
	.footer-module__withOutZCurve--2Wu3z,
	.Footer-module__logo--mM_i1,
	.p1z-card-image,
	.p1z-content-slice,
	#znv-footer-link-sv,
	.tile-callout-wrapper.py-6.bg-white
			> div
			> div
			> div
			> ul
			> li,
	.hero-banner-inner,
	.game-web .modal-title,
	div.activity__gradient.pos__absolute.w-100.h-100,
	.MegaNav-module__component--1B_pQ,
	.bg-retina,
	.Footer-module__flex--iWjc8,
	.p1z-content-slice-small {
			filter: var(--invert-filter);
	}

	.game-web
			.border__radius__responsive--small:not(
					.w-100,
					.map_overlay.map_overlay--left.pt-5.pt-md-0
							> div
							> div.d-flex.flex-column.mt-3.mt-1440-4
							> ul
							> li:nth-child(n)
							> img,
					.pos__absolute--right > div,
					.rideOnGiven
			),
	.partner-grid > div:nth-child(8) > img {
			filter: unset !important;
	}

	.game-web .z_background__wrapper {
			background: var(--background-color);
			color: var(--text-color) !important;
	}

	.wrapper--athlete-profile .text-white,
	.wrapper--athlete-profile .text-white h1 {
			color: var(--text-color) !important;
	}

	.bg-alabaster,
	.bg-alabaster .footer__nav-link,
	.accessibility-info-container:hover
			.accessibility-info,
	.accessibility-info-container:focus
			.accessibility-info,
	.accessibility-info-container:active
			.accessibility-info,
	#navigation-container > div > div > main {
			background-color: var(--card-background-color) !important;
			color: var(--text-color);
	}

	.footer__nav-item .seperator {
			opacity: 25%;
			background-color: var(--text-color);
	}

	.Locale-module__icon--jjf-9.Locale-module__small--fqr5w,
	#primaryNavHamburger
			> svg
			> :not(rect:nth-child(999)),
	.game-web .text-shadow,
	.game-web .button,
	.truste-consent-content-wrapper {
			filter: var(--invert-filter) !important;
	}

	.modal-open .fade {
			background-color: var(--modal-background-color);
	}

	.game-web .modal--screenshot .modal-content {
			background-color: var(--modal-background-color);
	}

	.game-web .border__color,
	.game-web .button.border__color {
			border-style: solid;
			border-color: var(--primary-color);
	}

	.onscreen-post .row {
			padding-left: 10px;
			width: auto;
	}

	.Footer-module__platformLinks--1axF9 {
			filter: unset !important;
			background: var(--secondary-color);
	}

	/* For WebKit browsers (e.g., Chrome, Safari) */
	::-webkit-scrollbar {
			width: 12px;
			background: var(--scrollbar-color) !important;
	}

	::-webkit-scrollbar-track {
			border-radius: 0 !important;
			background: var(--scrollbar-color) !important;
	}

	::-webkit-scrollbar-thumb {
			border: 3px solid var(--scrollbar-thumb-color) !important;
			border-radius: 6px !important;
			background-color: var(--scrollbar-color) !important;
	}

	/* For Edge, IE */
	body {
			-ms-overflow-style: -ms-autohiding-scrollbar;
	}

	.default-background {
			background: var(--card-background-color);
			background-image: unset;
	}
}

Reviews

No reviews yet.