Dark mode for Nascar.com!
/* ==UserStyle==
@name Nascar.com - Dark Mode
@version 20241114.16.46
@namespace nick2bad4u.github.io
@description Dark mode for Nascar.com!
@homepageURL https://github.com/Nick2bad4u/UserStyles
@supportURL https://github.com/Nick2bad4u/UserStyles/issues
@author Nick2bad4u
@license UnLicense
@var color backgroundColor "Background Color" #282a36
@var color linkColor "Link Color" #000
@var color linkHoverColor "Link Hover Color" #ff79c6
@var color cardColor "Card Color" #44475a
@var color footerColor "Footer Color" #282a36
@var color footerTextColor "Footer Text Color" #6272a4
==/UserStyle== */
@-moz-document domain("nascar.com") {
/* Use the variables for colors */
:root {
--backgroundColor: var(backgroundColor);
--linkColor: var(linkColor);
--linkHoverColor: var(linkHoverColor);
--cardColor: var(cardColor);
--footerColor: var(footerColor);
--footerTextColor: var(footerTextColor);
}
/* Invert entire page for dark mode effect */
html {
filter: invert(1) hue-rotate(180deg) !important;
background-color: var(--backgroundColor) !important;
}
/* Revert inversion on images and videos */
img:not(
li:nth-child(2) > a > img,
#top-nav-rewards-profile-logo > img,
div > a > div > picture > img
),
video,
svg:not(li.top-nav-button.user-profile-button > a > svg),
.video-container,
picture,
#footerSection,
iframe {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Revert inversion on specific elements (logos, ads, etc.) */
.logo,
.sponsor-logo,
.ad-container,
.social-icons,
.team-logo,
.icon {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Revert inversion on elements that should keep their original color */
.btn,
button,
.button,
.navbar,
.header,
.footer {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Adjust links and header/footer colors for better readability */
a > svg > path,
.nav-link {
color: var(--linkColor) !important;
}
a:hover {
color: var(--linkHoverColor) !important;
/* Pink on Hover */
}
/* Further tweaks as needed */
/* Example: Re-adjusting specific cards or sections */
.card,
.section,
.news-item {
background-color: var(--cardColor) !important;
color: #f8f8f2 !important;
}
/* Footer styling */
footer,
.footer {
background-color: var(--footerColor) !important;
color: var(--footerTextColor) !important;
}
}