UserStyles/Klimat.app-DarkMode.user.css at main · Nick2bad4u/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
98
99
100
101
102
103
104
105
/* ==UserStyle==
@name         klimat.app - Dark Mode
@version      2.3
@namespace    klimat.app
@description  Klimat.app Dark Mode
@author       [email protected]
@homepageURL  https://github.com/Nick2bad4u/UserStyles
@supportURL   https://github.com/Nick2bad4u/UserStyles/issues
@license      UnLicense

@var color backgroundColor "Background Color" #121212
@var color textColor "Text Color" #e0e0e0
@var color headerFooterColor "Header/Footer Color" #1e1e1e
@var color linkColor "Link Color" #bb86fc
@var color linkHoverColor "Link Hover Color" #3700b3
@var color buttonColor "Button Color" #333333
@var color buttonHoverColor "Button Hover Color" #bb86fc
@downloadURL  https://github.com/Nick2bad4u/UserStyles/raw/refs/heads/main/Klimat.app-DarkMode.user.css
@updateURL    https://github.com/Nick2bad4u/UserStyles/raw/refs/heads/main/Klimat.app-DarkMode.user.css
==/UserStyle== */
@-moz-document domain("klimat.app") {
	/* Use the variables for colors */
	:root {
		--backgroundColor: var(backgroundColor);
		--textColor: var(textColor);
		--headerFooterColor: var(headerFooterColor);
		--linkColor: var(linkColor);
		--linkHoverColor: var(linkHoverColor);
		--buttonColor: var(buttonColor);
		--buttonHoverColor: var(buttonHoverColor);
	}

	body {
		background-color: var(--backgroundColor);
		color: var(--textColor);
	}

	header,
	footer,
	.sidebar,
	.content {
		background-color: var(--headerFooterColor);
		color: var(--textColor);
	}

	a,
	.mbn {
		color: var(--linkColor);
	}

	a:hover {
		color: var(--linkHoverColor);
	}

	table {
		background-color: var(--headerFooterColor);
		color: var(--textColor);
	}

	table th,
	table td {
		border: 1px solid #333;
	}

	button,
	input,
	select,
	textarea {
		border: 1px solid #444;
		background-color: var(--buttonColor);
		color: var(--textColor);
	}

	button:hover,
	input:hover,
	select:hover,
	textarea:hover {
		border-radius: 5px;
		background-color: var(--buttonHoverColor);
	}

	::selection {
		background-color: var(--buttonHoverColor);
		color: var(--backgroundColor);
	}

	span {
		color: var(--linkColor);
	}

	.information__left__blk {
		border-color: var(--linkColor);
	}

	#content_wrapper,
	.form-actions,
	#fieldDetails > tbody {
		filter: invert(1) hue-rotate(180deg);
	}

	.modal-backdrop.fade {
		display: none;
		opacity: 0%;
	}
}