Nascar.com - Dark Mode by Nick2bad4u

/* ==UserStyle==
@name         Nascar.com - Dark Mode
@version      20241114.16.46
@namespace    typpi.online
@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;
	}
}