UserStyles/Nascar.com-DarkMode.user.css at main · step-security-bot/UserStyles · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/* ==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;
	}
}