Revision of Heroic OLED Theme

1

+

/*

2

+

* OLED Crimson — a Heroic Games Launcher theme

3

+

* True black (#000) everywhere for OLED panels, with a crimson sidebar.

4

+

*

5

+

* Install: put this file in your Custom Themes folder

6

+

* (Heroic → Settings → Accessibility → Custom Themes Path),

7

+

* then pick "oled-crimson" under Select Theme.

8

+

*

9

+

* Heroic sets the body class from the file name, so if you rename

10

+

* this file, rename the "body.oled-crimson" selectors to match.

11

+

*/

12

+

13

+

body.oled-crimson {

14

+

/* Crimson palette */

15

+

--crimson: #dc143c;

16

+

--crimson-bright: #ff2d55;

17

+

--crimson-deep: #7a0019;

18

+

--crimson-darkest: #2b0009;

19

+

20

+

/* Backgrounds — true black for OLED */

21

+

--background: #000000;

22

+

--background-darker: #000000;

23

+

--background-darker-80: #000000e0;

24

+

--background-lighter: #0a0a0a;

25

+

--background-secondary: #0a0a0a;

26

+

--body-background: #000000;

27

+

--current-background: #000000;

28

+

--gradient-body-background: #000000;

29

+

--input-background: #0d0d0d;

30

+

--search-bar-background: #0d0d0d;

31

+

--search-bar-border: #2a0a10;

32

+

--modal-background: #000000;

33

+

--modal-backdrop: #000000e6;

34

+

--modal-border: var(--crimson-deep);

35

+

--controller-hints-background: transparent;

36

+

--icons-background: #0d0d0d;

37

+

--divider: #1f0a0e;

38

+

39

+

/* Accent */

40

+

--accent: var(--crimson);

41

+

--accent-overlay: var(--crimson-bright);

42

+

--link-highlight: var(--crimson-bright);

43

+

--button-stroke: var(--crimson);

44

+

45

+

/* Sidebar — the crimson side */

46

+

--navbar-background: var(--crimson-deep);

47

+

--navbar-active-background: #000000;

48

+

--navbar-accent: #ffffff;

49

+

--navbar-active: #ffffff;

50

+

--navbar-inactive: #f3c2cc;

51

+

52

+

/* Text */

53

+

--text-default: #ececec;

54

+

--text-secondary: #a8a8a8;

55

+

--text-tertiary: #000000;

56

+

--text-quartenary: #555555;

57

+

--text-title: #ffffff;

58

+

--text-hover: var(--crimson-bright);

59

+

--text-gametitle: #ffffff;

60

+

--text-danger: var(--crimson-bright);

61

+

62

+

/* Buttons */

63

+

--primary: var(--crimson);

64

+

--primary-hover: var(--crimson-bright);

65

+

--primary-button: var(--crimson);

66

+

--secondary: var(--crimson-deep);

67

+

--secondary-button: var(--crimson);

68

+

--secondary-button-overlay: var(--crimson-bright);

69

+

--play-button: var(--crimson);

70

+

--install-button: var(--crimson);

71

+

--download-button: var(--crimson-deep);

72

+

--download-button-overlay: var(--crimson);

73

+

--success-button: var(--crimson);

74

+

--disabled-button: #1a1a1a;

75

+

--disabled-button-overlay: #2a2a2a;

76

+

77

+

/* Status */

78

+

--success: #e8e8e8;

79

+

--success-hover: #ffffff;

80

+

--danger: #b00020;

81

+

--danger-hover: var(--crimson-bright);

82

+

83

+

/* Icons */

84

+

--action-icon: #d0d0d0;

85

+

--action-icon-hover: var(--crimson-bright);

86

+

--action-icon-active: var(--crimson);

87

+

--icon-disabled: #3a3a3a;

88

+

89

+

/* Game cards */

90

+

--gamecard-title-color: #000000d9;

91

+

--gradient-gamecard: linear-gradient(

92

+

180deg,

93

+

rgba(0, 0, 0, 0.2) 1.8%,

94

+

var(--gamecard-title-color) 45%

95

+

);

96

+

97

+

/* On-screen keyboard */

98

+

--osk-background: #000000;

99

+

--osk-button-background: #0d0d0d;

100

+

--osk-button-border: var(--crimson-deep);

101

+

102

+

/* Tour popups */

103

+

--tour-popup-background: #0d0d0d;

104

+

--tour-bullet-active: var(--crimson);

105

+

--tour-bullet-inactive: var(--crimson-deep);

106

+

107

+

/* Alphabet filter */

108

+

--alphabet-filter-accent-color: var(--crimson);

109

+

--alphabet-filter-accent-hover: var(--crimson-bright);

110

+

}

111

+

112

+

/* Sidebar: crimson fading toward black, with a bright edge */

113

+

body.oled-crimson .Sidebar {

114

+

background: linear-gradient(

115

+

180deg,

116

+

var(--crimson-deep) 0%,

117

+

#4a000f 55%,

118

+

var(--crimson-darkest) 100%

119

+

) !important;

120

+

border-right: 1px solid var(--crimson);

121

+

}

122

+

123

+

/* Dialogs and menus stay pure black with a crimson outline */

124

+

body.oled-crimson .MuiDialog-paper {

125

+

background-color: #000000;

126

+

border: 1px solid var(--crimson-deep);

127

+

}

128

+

129

+

body.oled-crimson .contextMenu > .MuiPaper-root,

130

+

body.oled-crimson .contextMenu > .MuiPaper-root > .MuiMenu-list {

131

+

background-color: #000000;

132

+

border: 1px solid var(--crimson-deep);

133

+

}

134

+

135

+

body.oled-crimson .contextMenu .MuiMenuItem-root:hover {

136

+

background-color: var(--crimson-darkest);

137

+

}

138

+

139

+

body.oled-crimson .selectFieldWrapper select > option {

140

+

background: #000000;

141

+

}

142

+

143

+

body.oled-crimson .heroicVersion {

144

+

color: var(--navbar-inactive);

145

+

}

146

+

147

+

/* Crimson keyboard/controller focus ring */

148

+

body.oled-crimson *:focus-visible {

149

+

outline: 2px solid var(--crimson-bright);

150

+

outline-offset: 2px;

151

+

}

152

+

153

+

/* Thin crimson scrollbars on black */

154

+

body.oled-crimson ::-webkit-scrollbar {

155

+

width: 8px;

156

+

height: 8px;

157

+

background: #000000;

158

+

}

159

+

160

+

body.oled-crimson ::-webkit-scrollbar-thumb {

161

+

background: var(--crimson-deep);

162

+

border-radius: 4px;

163

+

}

164

+

165

+

body.oled-crimson ::-webkit-scrollbar-thumb:hover {

166

+

background: var(--crimson);

167

+

}

			@@ -263,4 +263,4 @@ body.oled-crimson ::-webkit-scrollbar-thumb {
263	263
264	264		body.oled-crimson ::-webkit-scrollbar-thumb:hover {
265	265		background: #3f3f46;
266		-	}
	266	+	}

cdnutter / Heroic OLED Theme

cdnutter revised this gist 1 day ago · 7b0bff3

cdnutter revised this gist 5 days ago · 77cab57

cdnutter revised this gist 5 days ago · 3c5aa03

		@@ -0,0 +1,167 @@
1	+	/*
2	+	* OLED Crimson — a Heroic Games Launcher theme
3	+	* True black (#000) everywhere for OLED panels, with a crimson sidebar.
4	+	*
5	+	* Install: put this file in your Custom Themes folder
6	+	* (Heroic → Settings → Accessibility → Custom Themes Path),
7	+	* then pick "oled-crimson" under Select Theme.
8	+	*
9	+	* Heroic sets the body class from the file name, so if you rename
10	+	* this file, rename the "body.oled-crimson" selectors to match.
11	+	*/
12	+
13	+	body.oled-crimson {
14	+	/* Crimson palette */
15	+	--crimson: #dc143c;
16	+	--crimson-bright: #ff2d55;
17	+	--crimson-deep: #7a0019;
18	+	--crimson-darkest: #2b0009;
19	+
20	+	/* Backgrounds — true black for OLED */
21	+	--background: #000000;
22	+	--background-darker: #000000;
23	+	--background-darker-80: #000000e0;
24	+	--background-lighter: #0a0a0a;
25	+	--background-secondary: #0a0a0a;
26	+	--body-background: #000000;
27	+	--current-background: #000000;
28	+	--gradient-body-background: #000000;
29	+	--input-background: #0d0d0d;
30	+	--search-bar-background: #0d0d0d;
31	+	--search-bar-border: #2a0a10;
32	+	--modal-background: #000000;
33	+	--modal-backdrop: #000000e6;
34	+	--modal-border: var(--crimson-deep);
35	+	--controller-hints-background: transparent;
36	+	--icons-background: #0d0d0d;
37	+	--divider: #1f0a0e;
38	+
39	+	/* Accent */
40	+	--accent: var(--crimson);
41	+	--accent-overlay: var(--crimson-bright);
42	+	--link-highlight: var(--crimson-bright);
43	+	--button-stroke: var(--crimson);
44	+
45	+	/* Sidebar — the crimson side */
46	+	--navbar-background: var(--crimson-deep);
47	+	--navbar-active-background: #000000;
48	+	--navbar-accent: #ffffff;
49	+	--navbar-active: #ffffff;
50	+	--navbar-inactive: #f3c2cc;
51	+
52	+	/* Text */
53	+	--text-default: #ececec;
54	+	--text-secondary: #a8a8a8;
55	+	--text-tertiary: #000000;
56	+	--text-quartenary: #555555;
57	+	--text-title: #ffffff;
58	+	--text-hover: var(--crimson-bright);
59	+	--text-gametitle: #ffffff;
60	+	--text-danger: var(--crimson-bright);
61	+
62	+	/* Buttons */
63	+	--primary: var(--crimson);
64	+	--primary-hover: var(--crimson-bright);
65	+	--primary-button: var(--crimson);
66	+	--secondary: var(--crimson-deep);
67	+	--secondary-button: var(--crimson);
68	+	--secondary-button-overlay: var(--crimson-bright);
69	+	--play-button: var(--crimson);
70	+	--install-button: var(--crimson);
71	+	--download-button: var(--crimson-deep);
72	+	--download-button-overlay: var(--crimson);
73	+	--success-button: var(--crimson);
74	+	--disabled-button: #1a1a1a;
75	+	--disabled-button-overlay: #2a2a2a;
76	+
77	+	/* Status */
78	+	--success: #e8e8e8;
79	+	--success-hover: #ffffff;
80	+	--danger: #b00020;
81	+	--danger-hover: var(--crimson-bright);
82	+
83	+	/* Icons */
84	+	--action-icon: #d0d0d0;
85	+	--action-icon-hover: var(--crimson-bright);
86	+	--action-icon-active: var(--crimson);
87	+	--icon-disabled: #3a3a3a;
88	+
89	+	/* Game cards */
90	+	--gamecard-title-color: #000000d9;
91	+	--gradient-gamecard: linear-gradient(
92	+	180deg,
93	+	rgba(0, 0, 0, 0.2) 1.8%,
94	+	var(--gamecard-title-color) 45%
95	+	);
96	+
97	+	/* On-screen keyboard */
98	+	--osk-background: #000000;
99	+	--osk-button-background: #0d0d0d;
100	+	--osk-button-border: var(--crimson-deep);
101	+
102	+	/* Tour popups */
103	+	--tour-popup-background: #0d0d0d;
104	+	--tour-bullet-active: var(--crimson);
105	+	--tour-bullet-inactive: var(--crimson-deep);
106	+
107	+	/* Alphabet filter */
108	+	--alphabet-filter-accent-color: var(--crimson);
109	+	--alphabet-filter-accent-hover: var(--crimson-bright);
110	+	}
111	+
112	+	/* Sidebar: crimson fading toward black, with a bright edge */
113	+	body.oled-crimson .Sidebar {
114	+	background: linear-gradient(
115	+	180deg,
116	+	var(--crimson-deep) 0%,
117	+	#4a000f 55%,
118	+	var(--crimson-darkest) 100%
119	+	) !important;
120	+	border-right: 1px solid var(--crimson);
121	+	}
122	+
123	+	/* Dialogs and menus stay pure black with a crimson outline */
124	+	body.oled-crimson .MuiDialog-paper {
125	+	background-color: #000000;
126	+	border: 1px solid var(--crimson-deep);
127	+	}
128	+
129	+	body.oled-crimson .contextMenu > .MuiPaper-root,
130	+	body.oled-crimson .contextMenu > .MuiPaper-root > .MuiMenu-list {
131	+	background-color: #000000;
132	+	border: 1px solid var(--crimson-deep);
133	+	}
134	+
135	+	body.oled-crimson .contextMenu .MuiMenuItem-root:hover {
136	+	background-color: var(--crimson-darkest);
137	+	}
138	+
139	+	body.oled-crimson .selectFieldWrapper select > option {
140	+	background: #000000;
141	+	}
142	+
143	+	body.oled-crimson .heroicVersion {
144	+	color: var(--navbar-inactive);
145	+	}
146	+
147	+	/* Crimson keyboard/controller focus ring */
148	+	body.oled-crimson *:focus-visible {
149	+	outline: 2px solid var(--crimson-bright);
150	+	outline-offset: 2px;
151	+	}
152	+
153	+	/* Thin crimson scrollbars on black */
154	+	body.oled-crimson ::-webkit-scrollbar {
155	+	width: 8px;
156	+	height: 8px;
157	+	background: #000000;
158	+	}
159	+
160	+	body.oled-crimson ::-webkit-scrollbar-thumb {
161	+	background: var(--crimson-deep);
162	+	border-radius: 4px;
163	+	}
164	+
165	+	body.oled-crimson ::-webkit-scrollbar-thumb:hover {
166	+	background: var(--crimson);
167	+	}