Zwift.com Dark Mode
Zwift.com Dark Mode by Nick2bad4u
Mirrored from https://github.com/Nick2bad4u/UserStyles/raw/refs/heads/main/Zwift.com-Dark-Mode.user.css
Details
AuthorNick2bad4u
LicenseUnLicense
Categoryzwift
Created
Updated
Size4.7 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Zwift.com Dark Mode
@version 8.5
@namespace typpi.online
@description Zwift.com Dark Mode
@author Nick2bad4u
@license UnLicense
@homepageURL https://github.com/Nick2bad4u/UserStyles
@supportURL https://github.com/Nick2bad4u/UserStyles/issues
@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;
}
}