Gruvbox Sharp

By passthehat Version 3.2 Updated 03/03/2026 1.8K downloads

Gruvbox Dark Soft palette with sharp corners and IBM Plex typography. Monospace UI chrome, IBM Plex Sans for chat. Compatible with BetterDiscord and Vencord.

flat dark other

Live preview

Full Discord interface with this theme applied — powered by ThemePreview.

Screenshot

GruvboxSharp.theme.css

GitHub

Open source

https://raw.githubusercontent.com/round-panda/gruvbox-sharp/54f0612a1d0fb38d3f2c7a7f4b697b5ad607d312/GruvboxSharp.theme.css

1/**

2 * @name Gruvbox Sharp

3 * @version 3.2

4 * @description Gruvbox Dark Soft palette with sharp corners and IBM Plex

5 * typography. Monospace UI chrome, IBM Plex Sans for chat.

6 * Compatible with BetterDiscord and Vencord.

7 * Requires Discord's built-in Dark Mode to be enabled.

8 * @author round-panda

9 * @authorLink https://github.com/round-panda

10 * @source https://github.com/round-panda/gruvbox-sharp

11 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

13:root {

14 --background-primary: #32302f;

15 --background-secondary: #282828;

16 --background-secondary-alt: #3c3836;

17 --background-tertiary: #1d2021;

18 --background-floating: #3c3836;

19 --background-accent: #504945;

20 --background-modifier-hover: rgba(80, 73, 69, 0.3);

21 --background-modifier-active: rgba(80, 73, 69, 0.5);

22 --background-modifier-selected: rgba(80, 73, 69, 0.6);

23 --background-modifier-accent: #504945;

24 --background-mentioned: rgba(215, 153, 33, 0.07);

25 --background-mentioned-hover: rgba(215, 153, 33, 0.12);

26 --background-mentioned-focus: rgba(215, 153, 33, 0.15);

27 --background-message-hover: rgba(30, 25, 20, 0.08);

28 --app-frame-background: #1d2021;

29 --home-background: #32302f;

30 --chat-background: #32302f;

31 --chat-background-default: #32302f;

32 --chat-border: #1d2021;

33 --chat-text-muted: #a89984;

34 --userarea-background: #1d2021;

35 --activity-card-background: #32302f;

36 --__header-bar-background: #3c3836;

37 --bg-surface-raised: #3c3836;

38 --background-gradient-highest: #32302f;

39 --background-surface-high: #32302f;

40 --background-surface-higher: #3c3836;

41 --background-surface-highest: #504945;

42 --background-base-lowest: #1d2021;

43 --background-base-lower: #282828;

44 --background-base-low: #32302f;

45 --background-mod-muted: rgba(80, 73, 69, 0.05);

46 --background-mod-normal: rgba(80, 73, 69, 0.15);

47 --background-mod-subtle: rgba(80, 73, 69, 0.25);

48 --background-mod-strong: rgba(80, 73, 69, 0.45);

49 --card-background-default: #3c3836;

50 --custom-channel-members-bg: #282828;

51 --custom-status-bubble-background: #1d2021;

52 --custom-status-bubble-background-color: #282828;

53 --border-subtle: #32302f;

54 --border-muted: #3c3836;

55 --border-normal: #1d2021;

56 --border-strong: #282828;

57 --border-color: #504945;

58 --deprecated-text-input-border: #504945;

59 --deprecated-text-input-border-hover: #665c54;

60 --deprecated-text-input-border-disabled: #3c3836;

61 --deprecated-text-input-prefix: #d5c4a1;

62 --header-primary: #f9f5d7;

63 --header-secondary: #a89984;

64 --text-normal: #ebdbb2;

65 --text-muted: #a89984;

66 --text-link: #83a598;

67 --text-positive: #b8bb26;

68 --text-warning: #fabd2f;

69 --text-danger: #fb4934;

70 --text-default: #ebdbb2;

71 --text-strong: #f9f5d7;

72 --text-subtle: #d5c4a1;

73 --text-brand: #83a598;

74 --text-feedback-positive: #b8bb26;

75 --text-feedback-critical: #fb4934;

76 --text-feedback-warning: #fabd2f;

77 --text-feedback-info: #83a598;

78 --text-status-online: #b8bb26;

79 --text-status-idle: #fabd2f;

80 --text-status-dnd: #fb4934;

81 --text-status-offline: #a89984;

82 --interactive-normal: #a89984;

83 --interactive-hover: #d5c4a1;

84 --interactive-active: #f9f5d7;

85 --interactive-muted: #665c54;

86 --interactive-icon-default: #ebdbb2;

87 --interactive-icon-hover: #ebdbb2;

88 --interactive-icon-active: #ebdbb2;

89 --interactive-text-default: #ebdbb2;

90 --interactive-text-hover: #ebdbb2;

91 --interactive-text-active: #ebdbb2;

92 --interactive-background-hover: rgba(80, 73, 69, 0.15);

93 --interactive-background-selected: rgba(80, 73, 69, 0.2);

94 --interactive-background-active: rgba(235, 219, 178, 0.17);

95 --channels-default: #a89984;

96 --channels-voice-default: #a89984;

97 --channel-icon: #a89984;

98 --channel-text-area-placeholder: rgba(235, 219, 178, 0.5);

99 --channeltextarea-background: #282828;

100 --voice-color: #8ec07c;

101 --status-speaking: #8ec07c;

102 --brand-experiment: #076678;

103 --brand-experiment-560: #076678;

104 --brand-experiment-600: #83a598;

105 --control-brand-foreground: #83a598;

106 --control-brand-foreground-new: #83a598;

107 --brand-100: #e8f2f0;

108 --brand-130: #def0ed;

109 --brand-160: #d1ebe7;

110 --brand-200: #c2e4de;

111 --brand-230: #b3dcd6;

112 --brand-260: #a4d3cc;

113 --brand-300: #96ccc4;

114 --brand-330: #8fc4bc;

115 --brand-360: #89bcb4;

116 --brand-400: #87b9b1;

117 --brand-430: #85b4ac;

118 --brand-460: #84afa7;

119 --brand-500: #83a598;

120 --brand-530: #83a598;

121 --brand-560: #076678;

122 --brand-600: #83a598;

123 --brand-630: #63837b;

124 --brand-660: #547970;

125 --brand-700: #456f66;

126 --brand-730: #3c6259;

127 --brand-760: #335650;

128 --brand-800: #2a4a44;

129 --brand-830: #21403a;

130 --brand-860: #193630;

131 --brand-900: #112c26;

132 --brand-05a: rgba(131, 165, 152, 0.05);

133 --brand-10a: rgba(131, 165, 152, 0.1);

134 --brand-15a: rgba(131, 165, 152, 0.15);

135 --brand-20a: rgba(131, 165, 152, 0.2);

136 --brand-25a: rgba(131, 165, 152, 0.25);

137 --brand-30a: rgba(131, 165, 152, 0.3);

138 --brand-35a: rgba(131, 165, 152, 0.35);

139 --brand-40a: rgba(131, 165, 152, 0.4);

140 --brand-45a: rgba(131, 165, 152, 0.45);

141 --brand-50a: rgba(131, 165, 152, 0.5);

142 --brand-55a: rgba(131, 165, 152, 0.55);

143 --brand-60a: rgba(131, 165, 152, 0.6);

144 --brand-65a: rgba(131, 165, 152, 0.65);

145 --brand-70a: rgba(131, 165, 152, 0.7);

146 --brand-75a: rgba(131, 165, 152, 0.75);

147 --brand-80a: rgba(131, 165, 152, 0.8);

148 --brand-85a: rgba(131, 165, 152, 0.85);

149 --brand-90a: rgba(131, 165, 152, 0.9);

150 --brand-95a: rgba(131, 165, 152, 0.95);

151 --opacity-blurple-8: rgba(131, 165, 152, 0.08);

152 --opacity-blurple-16: rgba(131, 165, 152, 0.16);

153 --opacity-blurple-24: rgba(131, 165, 152, 0.24);

154 --opacity-blurple-32: rgba(131, 165, 152, 0.32);

155 --opacity-blurple-60: rgba(131, 165, 152, 0.6);

156 --blurple-50: #076678;

157 --blurple-60: #a4c3bb;

158 --control-primary-background-default: #076678;

159 --control-primary-background-hover: #83a598;

160 --control-primary-background-active: #83a598;

161 --control-secondary-background-default: #504945;

162 --control-secondary-background-hover: #665c54;

163 --control-secondary-background-active: #665c54;

164 --control-secondary-border-default: #504945;

165 --control-secondary-text-default: #ebdbb2;

166 --control-secondary-text-hover: #ebdbb2;

167 --control-critical-primary-background-default: #cc241d;

168 --control-critical-primary-background-hover: #fb4934;

169 --control-critical-primary-background-active: #fb4934;

170 --control-critical-primary-text-default: #1d2021;

171 --control-critical-primary-text-hover: #1d2021;

172 --control-critical-secondary-background-default: transparent;

173 --control-critical-secondary-background-hover: rgba(251, 73, 52, 0.15);

174 --control-critical-secondary-background-active: rgba(251, 73, 52, 0.2);

175 --control-critical-secondary-border-default: #fb4934;

176 --control-critical-secondary-border-hover: #fb4934;

177 --control-critical-secondary-border-active: #fb4934;

178 --control-critical-secondary-text-default: #ebdbb2;

179 --control-critical-secondary-text-hover: #1d2021;

180 --control-critical-secondary-text-active: #1d2021;

181 --control-connected-background-default: #b8bb26;

182 --control-connected-background-hover: rgb(204.8533333333, 208.1933333333, 42.3066666667);

183 --control-connected-background-active: #b8bb26;

184 --control-connected-border-default: #b8bb26;

185 --control-connected-border-hover: rgb(204.8533333333, 208.1933333333, 42.3066666667);

186 --control-connected-border-active: rgb(204.8533333333, 208.1933333333, 42.3066666667);

187 --button-outline-primary-text: #ebdbb2;

188 --button-outline-brand-text: #ebdbb2;

189 --button-outline-brand-background-hover: rgba(131, 165, 152, 0.3);

190 --button-outline-brand-border-active: #83a598;

191 --status-positive: #8ec07c;

192 --status-positive-background: #8ec07c;

193 --status-positive-text: #1d2021;

194 --status-warning: #fabd2f;

195 --status-warning-background: #fabd2f;

196 --status-warning-text: #1d2021;

197 --status-danger: #fb4934;

198 --icon-status-online: #b8bb26;

199 --icon-status-idle: #fabd2f;

200 --icon-status-dnd: #fb4934;

201 --icon-status-offline: #a89984;

202 --background-feedback-positive: rgba(184, 187, 38, 0.15);

203 --background-feedback-warning: rgba(250, 189, 47, 0.15);

204 --background-feedback-critical: rgba(251, 73, 52, 0.15);

205 --background-feedback-info: rgba(131, 165, 152, 0.15);

206 --background-feedback-notification: #fb4934;

207 --badge-notification-background: #fb4934;

208 --icon-feedback-positive: #8ec07c;

209 --icon-feedback-warning: #fabd2f;

210 --icon-feedback-critical: #fb4934;

211 --icon-feedback-info: #83a598;

212 --icon-feedback-notification: #fb4934;

213 --notice-background-critical: #fb4934;

214 --notice-background-info: #83a598;

215 --notice-background-positive: #b8bb26;

216 --notice-background-warning: #fabd2f;

217 --notice-text-critical: #1d2021;

218 --notice-text-info: #1d2021;

219 --notice-text-positive: #1d2021;

220 --notice-text-warning: #1d2021;

221 --info-positive-background: rgba(184, 187, 38, 0.15);

222 --info-positive-text: #ebdbb2;

223 --info-warning-background: rgba(250, 189, 47, 0.15);

224 --info-warning-text: #ebdbb2;

225 --info-danger-background: rgba(251, 73, 52, 0.15);

226 --info-danger-text: #f9f5d7;

227 --info-help-background: rgba(131, 165, 152, 0.15);

228 --info-help-foreground: #83a598;

229 --info-help-text: #ebdbb2;

230 --scrollbar-thin-thumb: #504945;

231 --scrollbar-thin-track: transparent;

232 --scrollbar-auto-thumb: #504945;

233 --scrollbar-auto-track: #1d2021;

234 --scrollbar-auto-scrollbar-color-thumb: #504945;

235 --scrollbar-auto-scrollbar-color-track: #1d2021;

236 --elevation-low: 0 1px 0 rgba(29, 32, 33, 0.3), 0 2px 0 rgba(29, 32, 33, 0.1);

237 --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.24);

238 --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.36);

239 --elevation-stroke: 0 0 0 1px rgba(29, 32, 33, 0.2);

240 --mention-foreground: #d79921;

241 --mention-background: rgba(215, 153, 33, 0.3);

242 --message-mentioned-background-default: rgba(215, 153, 33, 0.07);

243 --message-mentioned-background-hover: rgba(215, 153, 33, 0.05);

244 --message-automod-background-default: rgba(204, 36, 29, 0.05);

245 --message-automod-background-hover: rgba(204, 36, 29, 0.1);

246 --message-highlight-background-default: rgba(215, 153, 33, 0.08);

247 --message-highlight-background-hover: rgba(215, 153, 33, 0.06);

248 --message-reacted-background-default: rgba(131, 165, 152, 0.3);

249 --message-reacted-text-default: #83a598;

250 --message-background-hover: rgba(30, 25, 20, 0.08);

251 --background-code: #1d2021;

252 --spoiler-revealed-background: #3c3836;

253 --spoiler-hidden-background: #504945;

254 --__spoiler-background-color--hidden: #504945;

255 --__spoiler-warning-background-color: #665c54;

256 --input-background-default: #1d2021;

257 --input-text-default: #ebdbb2;

258 --input-placeholder-text-default: rgba(235, 219, 178, 0.5);

259 --input-border-default: #504945;

260 --icon-muted: #665c54;

261 --icon-voice-muted: #fb4934;

262 --icon-default: #ebdbb2;

263 --icon-strong: #f9f5d7;

264 --icon-subtle: #d5c4a1;

265 --user-profile-overlay-background: #32302f;

266 --user-profile-overlay-background-hover: #3c3836;

267 --modal-background: #32302f;

268 --modal-footer-background: #32302f;

269 --__adaptive-focus-ring-color: #83a598;

270 --textbox-markdown-syntax: #7c6f64;

271 --logo-primary: #f9f5d7;

272 --checkbox-border-default: #665c54;

273 --checkbox-icon-active: #1d2021;

274 --radio-thumb-background-active: #1d2021;

275 --plum-23: #32302f;

276 --badge-text-brand: #1d2021;

277 --deprecated-panel-background: #3c3836;

278 --deprecated-card-bg: #282828;

279 --deprecated-card-editable-bg: #282828;

280 --deprecated-store-bg: #3c3836;

281 --deprecated-quickswitcher-input-background: #282828;

282 --deprecated-quickswitcher-input-placeholder: rgba(235, 219, 178, 0.3);

283 --deprecated-text-input-bg: #282828;

284 --white: #ebdbb2;

285 --white-500: #ebdbb2;

286 --black-500: #1d2021;

287 --green-360: #b8bb26;

288 --green-300: #b8bb26;

289 --yellow-360: #fabd2f;

290 --yellow-300: #fabd2f;

291 --red-400: #fb4934;

292 --red-430: #fb4934;

293 --red-500: #cc241d;

294 --blue-500: #83a598;

295 --blue-530: #83a598;

296 --primary-100: #d5c4a1;

297 --primary-200: #a89984;

298 --primary-300: #d5c4a1;

299 --primary-400: #d5c4a1;

300 --primary-630: #3c3836;

301 --primary-700: #504945;

302 --primary-800: #1d2021;

303 --twitch: #d5c4a1;

304 --playstation: #83a598;

305 --spotify: #b8bb26;

306 --guild-boosting-pink: #8ec07c;

307 --guild-boosting-blue: #83a598;

308 --guild-boosting-purple: #d5c4a1;

309 --premium-perk-yellow: #fabd2f;

310 --premium-perk-purple: #d5c4a1;

311 --premium-perk-dark-blue: #83a598;

312 --premium-perk-light-blue: #8ec07c;

313 --premium-perk-blue: #83a598;

314 --premium-perk-green: #b8bb26;

315 --premium-perk-pink: #d5c4a1;

316 --premium-perk-orange: #fabd2f;

317 --premium-tier-0-blue: #83a598;

318 --premium-tier-0-purple: #d5c4a1;

319 --premium-tier-1-blue-for-gradients: #8ec07c;

320 --premium-tier-1-dark-blue-for-gradients: #83a598;

321 --premium-tier-2-purple-for-gradients: #d5c4a1;

322 --premium-tier-2-purple-for-gradients-2: #a89984;

323 --premium-tier-2-pink-for-gradients: #d5c4a1;

324}

325

326.visual-refresh.theme-dark,

327.visual-refresh .theme-dark {

328 --__header-bar-background: #3c3836 !important;

329 --background-surface-high: #32302f !important;

330 --background-surface-higher: #3c3836 !important;

331 --background-surface-highest: #504945 !important;

332 --background-base-lowest: #1d2021 !important;

333 --background-base-lower: #282828 !important;

334 --background-base-low: #32302f !important;

335 --bg-surface-raised: #3c3836;

336 --background-gradient-highest: #32302f;

337 --background-primary: #32302f;

338 --background-secondary: #282828;

339 --background-secondary-alt: #3c3836 !important;

340 --background-tertiary: #1d2021;

341 --background-floating: #3c3836;

342 --background-accent: #504945 !important;

343 --background-modifier-hover: rgba(80, 73, 69, 0.3);

344 --background-modifier-active: rgba(80, 73, 69, 0.5);

345 --background-modifier-selected: rgba(80, 73, 69, 0.6);

346 --background-modifier-accent: #504945;

347 --background-mod-muted: rgba(80, 73, 69, 0.05);

348 --background-mod-normal: rgba(80, 73, 69, 0.15);

349 --background-mod-subtle: rgba(80, 73, 69, 0.25) !important;

350 --background-mod-strong: rgba(80, 73, 69, 0.45) !important;

351 --app-frame-background: #1d2021;

352 --home-background: #32302f;

353 --chat-background: #32302f;

354 --chat-background-default: #32302f;

355 --chat-border: #1d2021;

356 --chat-text-muted: #a89984;

357 --userarea-background: #1d2021;

358 --activity-card-background: #32302f;

359 --card-background-default: #3c3836 !important;

360 --custom-channel-members-bg: #282828;

361 --custom-status-bubble-background: #1d2021 !important;

362 --custom-status-bubble-background-color: #282828 !important;

363 --border-subtle: #32302f !important;

364 --border-muted: #3c3836;

365 --border-normal: #1d2021;

366 --border-strong: #282828;

367 --border-color: #504945;

368 --deprecated-text-input-border: #504945;

369 --deprecated-text-input-border-hover: #665c54;

370 --deprecated-text-input-border-disabled: #3c3836;

371 --deprecated-text-input-prefix: #d5c4a1;

372 --header-primary: #f9f5d7;

373 --header-secondary: #a89984;

374 --text-normal: #ebdbb2;

375 --text-muted: #a89984 !important;

376 --text-link: #83a598 !important;

377 --text-positive: #b8bb26;

378 --text-warning: #fabd2f;

379 --text-danger: #fb4934;

380 --text-default: #ebdbb2;

381 --text-strong: #f9f5d7 !important;

382 --text-subtle: #d5c4a1;

383 --text-brand: #83a598;

384 --text-feedback-positive: #b8bb26;

385 --text-feedback-critical: #fb4934;

386 --text-feedback-warning: #fabd2f;

387 --text-feedback-info: #83a598;

388 --text-status-online: #b8bb26;

389 --text-status-idle: #fabd2f;

390 --text-status-dnd: #fb4934;

391 --text-status-offline: #a89984;

392 --interactive-normal: #a89984;

393 --interactive-hover: #d5c4a1;

394 --interactive-active: #f9f5d7;

395 --interactive-muted: #665c54;

396 --interactive-icon-default: #ebdbb2 !important;

397 --interactive-icon-hover: #ebdbb2;

398 --interactive-icon-active: #ebdbb2;

399 --interactive-text-default: #ebdbb2 !important;

400 --interactive-text-hover: #ebdbb2;

401 --interactive-text-active: #ebdbb2;

402 --interactive-background-hover: rgba(80, 73, 69, 0.15);

403 --interactive-background-selected: rgba(80, 73, 69, 0.2);

404 --interactive-background-active: rgba(235, 219, 178, 0.17);

405 --channels-default: #a89984 !important;

406 --channels-voice-default: #a89984;

407 --channel-icon: #a89984 !important;

408 --channel-text-area-placeholder: rgba(235, 219, 178, 0.5);

409 --channeltextarea-background: #282828;

410 --voice-color: #8ec07c;

411 --status-speaking: #8ec07c !important;

412 --brand-experiment: #076678;

413 --brand-experiment-560: #076678;

414 --brand-experiment-600: #83a598;

415 --control-brand-foreground: #83a598;

416 --control-brand-foreground-new: #83a598;

417 --brand-100: #e8f2f0;

418 --brand-130: #def0ed;

419 --brand-160: #d1ebe7;

420 --brand-200: #c2e4de;

421 --brand-230: #b3dcd6;

422 --brand-260: #a4d3cc;

423 --brand-300: #96ccc4;

424 --brand-330: #8fc4bc;

425 --brand-360: #89bcb4;

426 --brand-400: #87b9b1;

427 --brand-430: #85b4ac;

428 --brand-460: #84afa7;

429 --brand-500: #83a598 !important;

430 --brand-530: #83a598;

431 --brand-560: #076678;

432 --brand-600: #83a598;

433 --brand-630: #63837b;

434 --brand-660: #547970;

435 --brand-700: #456f66;

436 --brand-730: #3c6259;

437 --brand-760: #335650;

438 --brand-800: #2a4a44;

439 --brand-830: #21403a;

440 --brand-860: #193630;

441 --brand-900: #112c26;

442 --brand-05a: rgba(131, 165, 152, 0.05);

443 --brand-10a: rgba(131, 165, 152, 0.1);

444 --brand-15a: rgba(131, 165, 152, 0.15);

445 --brand-20a: rgba(131, 165, 152, 0.2);

446 --brand-25a: rgba(131, 165, 152, 0.25);

447 --brand-30a: rgba(131, 165, 152, 0.3);

448 --brand-35a: rgba(131, 165, 152, 0.35);

449 --brand-40a: rgba(131, 165, 152, 0.4);

450 --brand-45a: rgba(131, 165, 152, 0.45);

451 --brand-50a: rgba(131, 165, 152, 0.5);

452 --brand-55a: rgba(131, 165, 152, 0.55);

453 --brand-60a: rgba(131, 165, 152, 0.6);

454 --brand-65a: rgba(131, 165, 152, 0.65);

455 --brand-70a: rgba(131, 165, 152, 0.7);

456 --brand-75a: rgba(131, 165, 152, 0.75);

457 --brand-80a: rgba(131, 165, 152, 0.8);

458 --brand-85a: rgba(131, 165, 152, 0.85);

459 --brand-90a: rgba(131, 165, 152, 0.9);

460 --brand-95a: rgba(131, 165, 152, 0.95);

461 --opacity-blurple-8: rgba(131, 165, 152, 0.08);

462 --opacity-blurple-16: rgba(131, 165, 152, 0.16);

463 --opacity-blurple-24: rgba(131, 165, 152, 0.24);

464 --opacity-blurple-32: rgba(131, 165, 152, 0.32);

465 --opacity-blurple-60: rgba(131, 165, 152, 0.6);

466 --blurple-50: #076678;

467 --blurple-60: #a4c3bb;

468 --control-primary-background-default: #076678;

469 --control-primary-background-hover: #83a598;

470 --control-primary-background-active: #83a598;

471 --control-secondary-background-default: #504945 !important;

472 --control-secondary-background-hover: #665c54;

473 --control-secondary-background-active: #665c54;

474 --control-secondary-border-default: #504945;

475 --control-secondary-text-default: #ebdbb2 !important;

476 --control-secondary-text-hover: #ebdbb2;

477 --control-critical-primary-background-default: #cc241d;

478 --control-critical-primary-background-hover: #fb4934;

479 --control-critical-primary-background-active: #fb4934;

480 --control-critical-primary-text-default: #1d2021;

481 --control-critical-primary-text-hover: #1d2021;

482 --control-critical-secondary-background-default: transparent;

483 --control-critical-secondary-background-hover: rgba(251, 73, 52, 0.15);

484 --control-critical-secondary-background-active: rgba(251, 73, 52, 0.2);

485 --control-critical-secondary-border-default: #fb4934;

486 --control-critical-secondary-border-hover: #fb4934;

487 --control-critical-secondary-border-active: #fb4934;

488 --control-critical-secondary-text-default: #ebdbb2;

489 --control-critical-secondary-text-hover: #1d2021;

490 --control-critical-secondary-text-active: #1d2021;

491 --control-connected-background-default: #b8bb26;

492 --control-connected-background-hover: rgb(204.8533333333, 208.1933333333, 42.3066666667);

493 --control-connected-background-active: #b8bb26;

494 --control-connected-border-default: #b8bb26;

495 --control-connected-border-hover: rgb(204.8533333333, 208.1933333333, 42.3066666667);

496 --control-connected-border-active: rgb(204.8533333333, 208.1933333333, 42.3066666667);

497 --button-outline-primary-text: #ebdbb2;

498 --button-outline-brand-text: #ebdbb2;

499 --button-outline-brand-background-hover: rgba(131, 165, 152, 0.3);

500 --button-outline-brand-border-active: #83a598;

501 --status-positive: #8ec07c !important;

502 --status-positive-background: #8ec07c !important;

503 --status-positive-text: #1d2021;

504 --status-warning: #fabd2f;

505 --status-warning-background: #fabd2f;

506 --status-warning-text: #1d2021;

507 --status-danger: #fb4934;

508 --icon-status-online: #b8bb26;

509 --icon-status-idle: #fabd2f;

510 --icon-status-dnd: #fb4934;

511 --icon-status-offline: #a89984;

512 --background-feedback-positive: rgba(184, 187, 38, 0.15) !important;

513 --background-feedback-warning: rgba(250, 189, 47, 0.15);

514 --background-feedback-critical: rgba(251, 73, 52, 0.15);

515 --background-feedback-info: rgba(131, 165, 152, 0.15);

516 --background-feedback-notification: #fb4934;

517 --badge-notification-background: #fb4934;

518 --icon-feedback-positive: #8ec07c !important;

519 --icon-feedback-warning: #fabd2f;

520 --icon-feedback-critical: #fb4934;

521 --icon-feedback-info: #83a598;

522 --icon-feedback-notification: #fb4934;

523 --notice-background-critical: #fb4934;

524 --notice-background-info: #83a598;

525 --notice-background-positive: #b8bb26;

526 --notice-background-warning: #fabd2f;

527 --notice-text-critical: #1d2021;

528 --notice-text-info: #1d2021;

529 --notice-text-positive: #1d2021;

530 --notice-text-warning: #1d2021;

531 --background-mentioned: rgba(215, 153, 33, 0.07);

532 --background-mentioned-hover: rgba(215, 153, 33, 0.12);

533 --background-mentioned-focus: rgba(215, 153, 33, 0.15);

534 --mention-foreground: #d79921;

535 --mention-background: rgba(215, 153, 33, 0.3);

536 --message-mentioned-background-default: rgba(215, 153, 33, 0.07);

537 --message-mentioned-background-hover: rgba(215, 153, 33, 0.05);

538 --message-automod-background-default: rgba(204, 36, 29, 0.05);

539 --message-automod-background-hover: rgba(204, 36, 29, 0.1);

540 --message-highlight-background-default: rgba(215, 153, 33, 0.08);

541 --message-highlight-background-hover: rgba(215, 153, 33, 0.06);

542 --message-reacted-background-default: rgba(131, 165, 152, 0.3) !important;

543 --message-reacted-text-default: #83a598;

544 --message-background-hover: rgba(30, 25, 20, 0.08) !important;

545 --background-code: #1d2021;

546 --spoiler-revealed-background: #3c3836;

547 --spoiler-hidden-background: #504945;

548 --__spoiler-background-color--hidden: #504945;

549 --__spoiler-warning-background-color: #665c54;

550 --input-background-default: #1d2021;

551 --input-text-default: #ebdbb2;

552 --input-placeholder-text-default: rgba(235, 219, 178, 0.5);

553 --input-border-default: #504945;

554 --icon-muted: #665c54 !important;

555 --icon-voice-muted: #fb4934;

556 --icon-default: #ebdbb2;

557 --icon-strong: #f9f5d7;

558 --icon-subtle: #d5c4a1;

559 --scrollbar-thin-thumb: #504945;

560 --scrollbar-thin-track: transparent;

561 --scrollbar-auto-thumb: #504945;

562 --scrollbar-auto-track: #1d2021;

563 --scrollbar-auto-scrollbar-color-thumb: #504945;

564 --scrollbar-auto-scrollbar-color-track: #1d2021;

565 --elevation-low: 0 1px 0 rgba(29, 32, 33, 0.3), 0 2px 0 rgba(29, 32, 33, 0.1);

566 --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.24);

567 --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.36);

568 --elevation-stroke: 0 0 0 1px rgba(29, 32, 33, 0.2);

569 --user-profile-overlay-background: #32302f;

570 --user-profile-overlay-background-hover: #3c3836;

571 --modal-background: #32302f !important;

572 --modal-footer-background: #32302f;

573 --logo-primary: #f9f5d7;

574 --__adaptive-focus-ring-color: #83a598;

575 --textbox-markdown-syntax: #7c6f64;

576 --checkbox-border-default: #665c54;

577 --checkbox-icon-active: #1d2021;

578 --radio-thumb-background-active: #1d2021;

579 --plum-23: #32302f;

580 --badge-text-brand: #1d2021;

581 --deprecated-panel-background: #3c3836;

582 --deprecated-card-bg: #282828;

583 --deprecated-card-editable-bg: #282828;

584 --deprecated-store-bg: #3c3836;

585 --deprecated-quickswitcher-input-background: #282828;

586 --deprecated-quickswitcher-input-placeholder: rgba(235, 219, 178, 0.3);

587 --deprecated-text-input-bg: #282828;

588 --white: #ebdbb2;

589 --white-500: #ebdbb2;

590 --black-500: #1d2021;

591 --green-360: #b8bb26;

592 --green-300: #b8bb26;

593 --yellow-360: #fabd2f;

594 --yellow-300: #fabd2f;

595 --red-400: #fb4934;

596 --red-430: #fb4934;

597 --red-500: #cc241d;

598 --blue-500: #83a598;

599 --blue-530: #83a598;

600 --primary-100: #d5c4a1;

601 --primary-200: #a89984;

602 --primary-300: #d5c4a1;

603 --primary-400: #d5c4a1;

604 --primary-630: #3c3836;

605 --primary-700: #504945;

606 --primary-800: #1d2021;

607 --twitch: #d5c4a1;

608 --playstation: #83a598;

609 --spotify: #b8bb26;

610 --guild-boosting-pink: #8ec07c;

611 --guild-boosting-blue: #83a598;

612 --guild-boosting-purple: #d5c4a1;

613 --premium-perk-yellow: #fabd2f;

614 --premium-perk-purple: #d5c4a1;

615 --premium-perk-dark-blue: #83a598;

616 --premium-perk-light-blue: #8ec07c;

617 --premium-perk-blue: #83a598;

618 --premium-perk-green: #b8bb26;

619 --premium-perk-pink: #d5c4a1;

620 --premium-perk-orange: #fabd2f;

621 --premium-tier-0-blue: #83a598;

622 --premium-tier-0-purple: #d5c4a1;

623 --premium-tier-1-blue-for-gradients: #8ec07c;

624 --premium-tier-1-dark-blue-for-gradients: #83a598;

625 --premium-tier-2-purple-for-gradients: #d5c4a1;

626 --premium-tier-2-purple-for-gradients-2: #a89984;

627 --premium-tier-2-pink-for-gradients: #d5c4a1;

628}

629

630.visual-refresh.theme-dark button[class*=button_][class*=lookFilled_][class*=colorGreen_],

631.visual-refresh .theme-dark button[class*=button_][class*=lookFilled_][class*=colorGreen_],

632.visual-refresh.theme-dark button[class*=colorable_][class*=join_],

633.visual-refresh .theme-dark button[class*=colorable_][class*=join_] {

634 color: #1d2021 !important;

635}

636

637:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) :is(div[class^=item_][class*=addFriend_],

638div[class^=numberBadge_][style*=";background-color: var(--background-feedback-notification);";],

639div[class^=numberBadge_][style*=";background-color: var(--badge-notification-background);";],

640div[class*=iconBadge_][class*=isCurrentUserConnected_],

641span[class*=botTag_],

642span[class^=unreadPill_],

643div[class^=listItem_] div[class^=wrapper_] [class*=selected_],

644div[class^=icon_][class*=noIcon_],

645button[class^=container_] >; div[class^=icon_] >; svg,

646div[class^=newBadge_],

647button[class*=button_][class*=lookFilled_][class*=colorBrand_],

648button[class*=button_][class*=lookFilled_][class*=colorLink_],

649div[class*=textBadge_][class*=base_],

650svg[class^=descriptionIcon_],

651div[class^=uploadDropModal_],

652svg[class^=stepIcon_],

653svg[class^=activeIcon_],

654div[class*=tooltipBrand_],

655div[class*=tooltipGreen_],

656span[class*=planOptionDiscount_],

657div[class*=memberCount_],

658svg[class*=flowerStar_] + div[class*=childContainer_],

659div[class*=streamerModeEnabledBtn_],

660div[class*=nowPlaying_],

661div[class^=pageControlContainer_],

662[class*=notice_][class*=colorBrand_],

663[class*=colorStreamerMode_],

664[class*=colorSpotify_],

665[class*=colorPremium_],

666[class*=colorPlayStation_]) {

667 --white: #f9f5d7;

668 --white-500: #f9f5d7;

669}

670

671.visual-refresh.theme-dark ::-moz-selection, .visual-refresh .theme-dark ::-moz-selection {

672 background-color: rgba(131, 165, 152, 0.6);

673}

674

675.visual-refresh.theme-dark ::selection,

676.visual-refresh .theme-dark ::selection {

677 background-color: rgba(131, 165, 152, 0.6);

678}

679

680.visual-refresh.theme-dark button.vc-btn-primary,

681.visual-refresh .theme-dark button.vc-btn-primary {

682 color: #f9f5d7 !important;

683 background-color: #076678 !important;

684}

685.visual-refresh.theme-dark button.vc-btn-primary:hover, .visual-refresh.theme-dark button.vc-btn-primary:active,

686.visual-refresh .theme-dark button.vc-btn-primary:hover,

687.visual-refresh .theme-dark button.vc-btn-primary:active {

688 background-color: #83a598 !important;

689}

690

691.visual-refresh.theme-dark button.vc-btn-positive,

692.visual-refresh .theme-dark button.vc-btn-positive {

693 color: #1d2021 !important;

694}

695

696.visual-refresh.theme-dark button[class^=button_][class*="; primary_";],

697.visual-refresh .theme-dark button[class^=button_][class*="; primary_";] {

698 color: #f9f5d7 !important;

699 background-color: #076678 !important;

700}

701

.visual-refresh.theme-dark button[class^=button_][class*="; primary_";]:hover, .visual-refresh.theme-dark button[class^=button_][class*="; primary_";]:active,

702.visual-refresh .theme-dark button[class^=button_][class*="; primary_";]:hover,

703.visual-refresh .theme-dark button[class^=button_][class*="; primary_";]:active {

704 background-color: #83a598 !important;

705}

706

707.theme-dark {

708 --background-mentioned: rgba(215, 153, 33, 0.07);

709 --background-mentioned-hover: rgba(215, 153, 33, 0.12);

710 --background-message-hover: rgba(30, 25, 20, 0.08);

711 --text-normal: #ebdbb2;

712 --text-link: #83a598;

713 --header-primary: #f9f5d7;

714 --header-secondary: #a89984;

715 --interactive-normal: #a89984;

716 --interactive-hover: #d5c4a1;

717 --interactive-active: #f9f5d7;

718 --channels-default: #a89984;

719}

720

721.theme-light {

722 --background-primary: #32302f;

723 --background-secondary: #282828;

724 --background-tertiary: #1d2021;

725 --background-floating: #3c3836;

726 --header-primary: #f9f5d7;

727 --header-secondary: #a89984;

728 --text-normal: #ebdbb2;

729 --deprecated-text-input-bg: #282828;

730}

731

732* {

733 border-radius: 0 !important;

734}

735

736#app-mount {

737 font-family: ";IBM Plex Mono";, ";Courier New";, monospace;

738 letter-spacing: -0.01em;

739}

740

741#app-mount [class*=markup],

742#app-mount [class*=markup] *,

743#app-mount [class*=messageContent],

744#app-mount [class*=messageContent] * {

745 font-family: ";IBM Plex Sans";, sans-serif;

746 letter-spacing: 0;

747}

748

749[role=textbox],

750[role=textbox] *,

751[data-slate-editor],

752[data-slate-editor] * {

753 font-family: ";IBM Plex Sans";, sans-serif !important;

754 letter-spacing: 0 !important;

755}

756

757div[class*=accountProfileCard_] *,

758div[class*=nameTag_] *,

759div[class*=customStatus_] * {

760 font-family: ";IBM Plex Sans";, sans-serif !important;

761 letter-spacing: 0 !important;

762 line-height: normal !important;

763}

764

765code,

766pre,

767#app-mount [class*=markup] code,

768#app-mount [class*=markup] pre {

769 font-family: ";IBM Plex Mono";, monospace !important;

770 background-color: #1d2021 !important;

771 border: 1px solid #504945 !important;

772}

773

774::-webkit-scrollbar-thumb {

775 background-color: #504945 !important;

776 border-radius: 0 !important;

777}

778

779::-webkit-scrollbar-track {

780 background-color: #1d2021 !important;

781 border-radius: 0 !important;

782}

783

784foreignObject[mask] {

785 -webkit-mask: none !important;

786 mask: none !important;

787}

788

789[class*=mask] circle[fill=black],

790[class*=svg] circle[fill=black],

791[class*=mask] circle[fill=white],

792[class*=svg] circle[fill=white],

793[class*=mask] rect[fill=black],

794[class*=svg] rect[fill=black] {

795 display: none !important;

796}

797

798rect[mask*=status] {

799 stroke: #1d2021 !important;

800 stroke-width: 10px !important;

801 paint-order: stroke fill !important;

802}

803

804foreignObject[width=";20";][height=";20";]:has(~ g),

805foreignObject[width=";24";][height=";24";]:has(~ g),

806foreignObject[width=";32";][height=";32";]:has(~ g),

807foreignObject[width=";40";][height=";40";]:has(~ g) {

808 clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 65% 65%, 65% 100%, 0% 100%) !important;

809}

810

811foreignObject[width=";32";][height=";32";]:has(~ g rect[mask=";url(#svg-mask-status-online-mobile)";]),

812foreignObject[width=";40";][height=";40";]:has(~ g rect[mask=";url(#svg-mask-status-online-mobile)";]) {

813 clip-path: polygon(0% 0%, 100% 0%, 100% 49%, 65% 49%, 65% 100%, 0% 100%) !important;

814}

815

816foreignObject[width=";80";][height=";80";][mask] ~ g rect {

817 transform: translate(16px, 16px) !important;

818}

819

820foreignObject[width=";80";][height=";80";]:has(~ g rect[mask=";url(#svg-mask-status-online-mobile)";]) {

821 clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 95% 90%, 95% 100%, 0% 100%) !important;

822}

823

824foreignObject[width=";120";][height=";120";][mask] ~ g rect {

825 transform: translate(25px, 25px) !important;

826}

827

828foreignObject[width=";120";][height=";120";]:has(~ g rect[mask=";url(#svg-mask-status-online-mobile)";]) {

829 clip-path: polygon(0% 0%, 100% 0%, 100% 88.7%, 95% 88.7%, 95% 100%, 0% 100%) !important;

830}

831

832foreignObject [class*=avatarStack_],

833foreignObject [class*=avatarStack_]::after,

834foreignObject [class*=avatarStack_] >; * {

835 clip-path: none !important;

836 border-radius: 0 !important;

837}

838

839div[class*=speaking_] {

840 box-shadow: inset 0 0 0 2px #8ec07c !important;

841}

842

843[class*=folder],

844[class*=folderEndButton],

845[class*=folderPreview],

846[class*=blobContainer],

847[class*=iconBadge] {

848 clip-path: inset(0) !important;

849}

850

851section[class*=panels_] {

852 flex-shrink: 0 !important;

853 min-height: 52px !important;

854 background-color: #1d2021 !important;

855}

856

857[class^=privateChannels_] [class^=buttonChildrenWrapper_],

858[class^=privateChannels_] [class^=buttonChildren_],

859[class^=privateChannels_] button:has([class^=buttonChildrenWrapper_]) {

860 background-color: #1d2021 !important;

861}

862

863div[class*=listItemWrapper_],

864li[class*=listItem_] {

865 overflow: visible !important;

866}

867

868div[class*=embed_],

869div[class*=embedWrapper_] {

870 background-color: #3c3836 !important;

871 border-left: 3px solid #83a598 !important;

872}

873

874div[class*=reaction_] {

875 background-color: #3c3836 !important;

876 border: 1px solid #504945 !important;

877}

878

879div[class*=reactionMe_] {

880 background-color: rgba(131, 165, 152, 0.2) !important;

881 border: 1px solid #83a598 !important;

882}

883

884div[class*=mentioned_] {

885 background-color: rgba(215, 153, 33, 0.07) !important;

886}

887div[class*=mentioned_]::before {

888 background-color: #d79921 !important;

889}

890

891

:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorRed_] {

892 background-color: #cc241d !important;

893}

894

:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorRed_]:hover {

895 background-color: #fb4934 !important;

896}

897

:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorGrey_] {

898 background-color: #3c3836 !important;

899 color: #ebdbb2 !important;

900}

901

:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorGrey_]:hover {

902 background-color: #504945 !important;

903}

904

:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorBrand_] {

905 background-color: #076678 !important;

906 color: #f9f5d7 !important;

907}

908

:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorBrand_]:hover {

909 background-color: #83a598 !important;

910}

911:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=active_] {

912 color: #f9f5d7 !important;

913}

914:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) div[class*=winButtonClose_]:hover {

915 color: #f9f5d7 !important;

916}

917

918div[class*=overlay_] {

919 background-color: #282828 !important;

920}

921

922div[class*=newMessagesBar_] {

923 background-color: #076678 !important;

924}

925

926.bd-addon-list .bd-addon-card {

927 border: 1px solid #504945;

928 background-color: #32302f;

929 margin-bottom: 18px;

930}/*# sourceMappingURL=GruvboxSharp.theme.css.map */

/**
 * @name          Gruvbox Sharp
 * @version       3.2
 * @description   Gruvbox Dark Soft palette with sharp corners and IBM Plex
 *                typography. Monospace UI chrome, IBM Plex Sans for chat.
 *                Compatible with BetterDiscord and Vencord.
 *                Requires Discord's built-in Dark Mode to be enabled.
 * @author        round-panda
 * @authorLink    https://github.com/round-panda
 * @source        https://github.com/round-panda/gruvbox-sharp
 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
:root {
  --background-primary: #32302f;
  --background-secondary: #282828;
  --background-secondary-alt: #3c3836;
  --background-tertiary: #1d2021;
  --background-floating: #3c3836;
  --background-accent: #504945;
  --background-modifier-hover: rgba(80, 73, 69, 0.3);
  --background-modifier-active: rgba(80, 73, 69, 0.5);
  --background-modifier-selected: rgba(80, 73, 69, 0.6);
  --background-modifier-accent: #504945;
  --background-mentioned: rgba(215, 153, 33, 0.07);
  --background-mentioned-hover: rgba(215, 153, 33, 0.12);
  --background-mentioned-focus: rgba(215, 153, 33, 0.15);
  --background-message-hover: rgba(30, 25, 20, 0.08);
  --app-frame-background: #1d2021;
  --home-background: #32302f;
  --chat-background: #32302f;
  --chat-background-default: #32302f;
  --chat-border: #1d2021;
  --chat-text-muted: #a89984;
  --userarea-background: #1d2021;
  --activity-card-background: #32302f;
  --__header-bar-background: #3c3836;
  --bg-surface-raised: #3c3836;
  --background-gradient-highest: #32302f;
  --background-surface-high: #32302f;
  --background-surface-higher: #3c3836;
  --background-surface-highest: #504945;
  --background-base-lowest: #1d2021;
  --background-base-lower: #282828;
  --background-base-low: #32302f;
  --background-mod-muted: rgba(80, 73, 69, 0.05);
  --background-mod-normal: rgba(80, 73, 69, 0.15);
  --background-mod-subtle: rgba(80, 73, 69, 0.25);
  --background-mod-strong: rgba(80, 73, 69, 0.45);
  --card-background-default: #3c3836;
  --custom-channel-members-bg: #282828;
  --custom-status-bubble-background: #1d2021;
  --custom-status-bubble-background-color: #282828;
  --border-subtle: #32302f;
  --border-muted: #3c3836;
  --border-normal: #1d2021;
  --border-strong: #282828;
  --border-color: #504945;
  --deprecated-text-input-border: #504945;
  --deprecated-text-input-border-hover: #665c54;
  --deprecated-text-input-border-disabled: #3c3836;
  --deprecated-text-input-prefix: #d5c4a1;
  --header-primary: #f9f5d7;
  --header-secondary: #a89984;
  --text-normal: #ebdbb2;
  --text-muted: #a89984;
  --text-link: #83a598;
  --text-positive: #b8bb26;
  --text-warning: #fabd2f;
  --text-danger: #fb4934;
  --text-default: #ebdbb2;
  --text-strong: #f9f5d7;
  --text-subtle: #d5c4a1;
  --text-brand: #83a598;
  --text-feedback-positive: #b8bb26;
  --text-feedback-critical: #fb4934;
  --text-feedback-warning: #fabd2f;
  --text-feedback-info: #83a598;
  --text-status-online: #b8bb26;
  --text-status-idle: #fabd2f;
  --text-status-dnd: #fb4934;
  --text-status-offline: #a89984;
  --interactive-normal: #a89984;
  --interactive-hover: #d5c4a1;
  --interactive-active: #f9f5d7;
  --interactive-muted: #665c54;
  --interactive-icon-default: #ebdbb2;
  --interactive-icon-hover: #ebdbb2;
  --interactive-icon-active: #ebdbb2;
  --interactive-text-default: #ebdbb2;
  --interactive-text-hover: #ebdbb2;
  --interactive-text-active: #ebdbb2;
  --interactive-background-hover: rgba(80, 73, 69, 0.15);
  --interactive-background-selected: rgba(80, 73, 69, 0.2);
  --interactive-background-active: rgba(235, 219, 178, 0.17);
  --channels-default: #a89984;
  --channels-voice-default: #a89984;
  --channel-icon: #a89984;
  --channel-text-area-placeholder: rgba(235, 219, 178, 0.5);
  --channeltextarea-background: #282828;
  --voice-color: #8ec07c;
  --status-speaking: #8ec07c;
  --brand-experiment: #076678;
  --brand-experiment-560: #076678;
  --brand-experiment-600: #83a598;
  --control-brand-foreground: #83a598;
  --control-brand-foreground-new: #83a598;
  --brand-100: #e8f2f0;
  --brand-130: #def0ed;
  --brand-160: #d1ebe7;
  --brand-200: #c2e4de;
  --brand-230: #b3dcd6;
  --brand-260: #a4d3cc;
  --brand-300: #96ccc4;
  --brand-330: #8fc4bc;
  --brand-360: #89bcb4;
  --brand-400: #87b9b1;
  --brand-430: #85b4ac;
  --brand-460: #84afa7;
  --brand-500: #83a598;
  --brand-530: #83a598;
  --brand-560: #076678;
  --brand-600: #83a598;
  --brand-630: #63837b;
  --brand-660: #547970;
  --brand-700: #456f66;
  --brand-730: #3c6259;
  --brand-760: #335650;
  --brand-800: #2a4a44;
  --brand-830: #21403a;
  --brand-860: #193630;
  --brand-900: #112c26;
  --brand-05a: rgba(131, 165, 152, 0.05);
  --brand-10a: rgba(131, 165, 152, 0.1);
  --brand-15a: rgba(131, 165, 152, 0.15);
  --brand-20a: rgba(131, 165, 152, 0.2);
  --brand-25a: rgba(131, 165, 152, 0.25);
  --brand-30a: rgba(131, 165, 152, 0.3);
  --brand-35a: rgba(131, 165, 152, 0.35);
  --brand-40a: rgba(131, 165, 152, 0.4);
  --brand-45a: rgba(131, 165, 152, 0.45);
  --brand-50a: rgba(131, 165, 152, 0.5);
  --brand-55a: rgba(131, 165, 152, 0.55);
  --brand-60a: rgba(131, 165, 152, 0.6);
  --brand-65a: rgba(131, 165, 152, 0.65);
  --brand-70a: rgba(131, 165, 152, 0.7);
  --brand-75a: rgba(131, 165, 152, 0.75);
  --brand-80a: rgba(131, 165, 152, 0.8);
  --brand-85a: rgba(131, 165, 152, 0.85);
  --brand-90a: rgba(131, 165, 152, 0.9);
  --brand-95a: rgba(131, 165, 152, 0.95);
  --opacity-blurple-8: rgba(131, 165, 152, 0.08);
  --opacity-blurple-16: rgba(131, 165, 152, 0.16);
  --opacity-blurple-24: rgba(131, 165, 152, 0.24);
  --opacity-blurple-32: rgba(131, 165, 152, 0.32);
  --opacity-blurple-60: rgba(131, 165, 152, 0.6);
  --blurple-50: #076678;
  --blurple-60: #a4c3bb;
  --control-primary-background-default: #076678;
  --control-primary-background-hover: #83a598;
  --control-primary-background-active: #83a598;
  --control-secondary-background-default: #504945;
  --control-secondary-background-hover: #665c54;
  --control-secondary-background-active: #665c54;
  --control-secondary-border-default: #504945;
  --control-secondary-text-default: #ebdbb2;
  --control-secondary-text-hover: #ebdbb2;
  --control-critical-primary-background-default: #cc241d;
  --control-critical-primary-background-hover: #fb4934;
  --control-critical-primary-background-active: #fb4934;
  --control-critical-primary-text-default: #1d2021;
  --control-critical-primary-text-hover: #1d2021;
  --control-critical-secondary-background-default: transparent;
  --control-critical-secondary-background-hover: rgba(251, 73, 52, 0.15);
  --control-critical-secondary-background-active: rgba(251, 73, 52, 0.2);
  --control-critical-secondary-border-default: #fb4934;
  --control-critical-secondary-border-hover: #fb4934;
  --control-critical-secondary-border-active: #fb4934;
  --control-critical-secondary-text-default: #ebdbb2;
  --control-critical-secondary-text-hover: #1d2021;
  --control-critical-secondary-text-active: #1d2021;
  --control-connected-background-default: #b8bb26;
  --control-connected-background-hover: rgb(204.8533333333, 208.1933333333, 42.3066666667);
  --control-connected-background-active: #b8bb26;
  --control-connected-border-default: #b8bb26;
  --control-connected-border-hover: rgb(204.8533333333, 208.1933333333, 42.3066666667);
  --control-connected-border-active: rgb(204.8533333333, 208.1933333333, 42.3066666667);
  --button-outline-primary-text: #ebdbb2;
  --button-outline-brand-text: #ebdbb2;
  --button-outline-brand-background-hover: rgba(131, 165, 152, 0.3);
  --button-outline-brand-border-active: #83a598;
  --status-positive: #8ec07c;
  --status-positive-background: #8ec07c;
  --status-positive-text: #1d2021;
  --status-warning: #fabd2f;
  --status-warning-background: #fabd2f;
  --status-warning-text: #1d2021;
  --status-danger: #fb4934;
  --icon-status-online: #b8bb26;
  --icon-status-idle: #fabd2f;
  --icon-status-dnd: #fb4934;
  --icon-status-offline: #a89984;
  --background-feedback-positive: rgba(184, 187, 38, 0.15);
  --background-feedback-warning: rgba(250, 189, 47, 0.15);
  --background-feedback-critical: rgba(251, 73, 52, 0.15);
  --background-feedback-info: rgba(131, 165, 152, 0.15);
  --background-feedback-notification: #fb4934;
  --badge-notification-background: #fb4934;
  --icon-feedback-positive: #8ec07c;
  --icon-feedback-warning: #fabd2f;
  --icon-feedback-critical: #fb4934;
  --icon-feedback-info: #83a598;
  --icon-feedback-notification: #fb4934;
  --notice-background-critical: #fb4934;
  --notice-background-info: #83a598;
  --notice-background-positive: #b8bb26;
  --notice-background-warning: #fabd2f;
  --notice-text-critical: #1d2021;
  --notice-text-info: #1d2021;
  --notice-text-positive: #1d2021;
  --notice-text-warning: #1d2021;
  --info-positive-background: rgba(184, 187, 38, 0.15);
  --info-positive-text: #ebdbb2;
  --info-warning-background: rgba(250, 189, 47, 0.15);
  --info-warning-text: #ebdbb2;
  --info-danger-background: rgba(251, 73, 52, 0.15);
  --info-danger-text: #f9f5d7;
  --info-help-background: rgba(131, 165, 152, 0.15);
  --info-help-foreground: #83a598;
  --info-help-text: #ebdbb2;
  --scrollbar-thin-thumb: #504945;
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: #504945;
  --scrollbar-auto-track: #1d2021;
  --scrollbar-auto-scrollbar-color-thumb: #504945;
  --scrollbar-auto-scrollbar-color-track: #1d2021;
  --elevation-low: 0 1px 0 rgba(29, 32, 33, 0.3), 0 2px 0 rgba(29, 32, 33, 0.1);
  --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.24);
  --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.36);
  --elevation-stroke: 0 0 0 1px rgba(29, 32, 33, 0.2);
  --mention-foreground: #d79921;
  --mention-background: rgba(215, 153, 33, 0.3);
  --message-mentioned-background-default: rgba(215, 153, 33, 0.07);
  --message-mentioned-background-hover: rgba(215, 153, 33, 0.05);
  --message-automod-background-default: rgba(204, 36, 29, 0.05);
  --message-automod-background-hover: rgba(204, 36, 29, 0.1);
  --message-highlight-background-default: rgba(215, 153, 33, 0.08);
  --message-highlight-background-hover: rgba(215, 153, 33, 0.06);
  --message-reacted-background-default: rgba(131, 165, 152, 0.3);
  --message-reacted-text-default: #83a598;
  --message-background-hover: rgba(30, 25, 20, 0.08);
  --background-code: #1d2021;
  --spoiler-revealed-background: #3c3836;
  --spoiler-hidden-background: #504945;
  --__spoiler-background-color--hidden: #504945;
  --__spoiler-warning-background-color: #665c54;
  --input-background-default: #1d2021;
  --input-text-default: #ebdbb2;
  --input-placeholder-text-default: rgba(235, 219, 178, 0.5);
  --input-border-default: #504945;
  --icon-muted: #665c54;
  --icon-voice-muted: #fb4934;
  --icon-default: #ebdbb2;
  --icon-strong: #f9f5d7;
  --icon-subtle: #d5c4a1;
  --user-profile-overlay-background: #32302f;
  --user-profile-overlay-background-hover: #3c3836;
  --modal-background: #32302f;
  --modal-footer-background: #32302f;
  --__adaptive-focus-ring-color: #83a598;
  --textbox-markdown-syntax: #7c6f64;
  --logo-primary: #f9f5d7;
  --checkbox-border-default: #665c54;
  --checkbox-icon-active: #1d2021;
  --radio-thumb-background-active: #1d2021;
  --plum-23: #32302f;
  --badge-text-brand: #1d2021;
  --deprecated-panel-background: #3c3836;
  --deprecated-card-bg: #282828;
  --deprecated-card-editable-bg: #282828;
  --deprecated-store-bg: #3c3836;
  --deprecated-quickswitcher-input-background: #282828;
  --deprecated-quickswitcher-input-placeholder: rgba(235, 219, 178, 0.3);
  --deprecated-text-input-bg: #282828;
  --white: #ebdbb2;
  --white-500: #ebdbb2;
  --black-500: #1d2021;
  --green-360: #b8bb26;
  --green-300: #b8bb26;
  --yellow-360: #fabd2f;
  --yellow-300: #fabd2f;
  --red-400: #fb4934;
  --red-430: #fb4934;
  --red-500: #cc241d;
  --blue-500: #83a598;
  --blue-530: #83a598;
  --primary-100: #d5c4a1;
  --primary-200: #a89984;
  --primary-300: #d5c4a1;
  --primary-400: #d5c4a1;
  --primary-630: #3c3836;
  --primary-700: #504945;
  --primary-800: #1d2021;
  --twitch: #d5c4a1;
  --playstation: #83a598;
  --spotify: #b8bb26;
  --guild-boosting-pink: #8ec07c;
  --guild-boosting-blue: #83a598;
  --guild-boosting-purple: #d5c4a1;
  --premium-perk-yellow: #fabd2f;
  --premium-perk-purple: #d5c4a1;
  --premium-perk-dark-blue: #83a598;
  --premium-perk-light-blue: #8ec07c;
  --premium-perk-blue: #83a598;
  --premium-perk-green: #b8bb26;
  --premium-perk-pink: #d5c4a1;
  --premium-perk-orange: #fabd2f;
  --premium-tier-0-blue: #83a598;
  --premium-tier-0-purple: #d5c4a1;
  --premium-tier-1-blue-for-gradients: #8ec07c;
  --premium-tier-1-dark-blue-for-gradients: #83a598;
  --premium-tier-2-purple-for-gradients: #d5c4a1;
  --premium-tier-2-purple-for-gradients-2: #a89984;
  --premium-tier-2-pink-for-gradients: #d5c4a1;
}

.visual-refresh.theme-dark,
.visual-refresh .theme-dark {
  --__header-bar-background: #3c3836 !important;
  --background-surface-high: #32302f !important;
  --background-surface-higher: #3c3836 !important;
  --background-surface-highest: #504945 !important;
  --background-base-lowest: #1d2021 !important;
  --background-base-lower: #282828 !important;
  --background-base-low: #32302f !important;
  --bg-surface-raised: #3c3836;
  --background-gradient-highest: #32302f;
  --background-primary: #32302f;
  --background-secondary: #282828;
  --background-secondary-alt: #3c3836 !important;
  --background-tertiary: #1d2021;
  --background-floating: #3c3836;
  --background-accent: #504945 !important;
  --background-modifier-hover: rgba(80, 73, 69, 0.3);
  --background-modifier-active: rgba(80, 73, 69, 0.5);
  --background-modifier-selected: rgba(80, 73, 69, 0.6);
  --background-modifier-accent: #504945;
  --background-mod-muted: rgba(80, 73, 69, 0.05);
  --background-mod-normal: rgba(80, 73, 69, 0.15);
  --background-mod-subtle: rgba(80, 73, 69, 0.25) !important;
  --background-mod-strong: rgba(80, 73, 69, 0.45) !important;
  --app-frame-background: #1d2021;
  --home-background: #32302f;
  --chat-background: #32302f;
  --chat-background-default: #32302f;
  --chat-border: #1d2021;
  --chat-text-muted: #a89984;
  --userarea-background: #1d2021;
  --activity-card-background: #32302f;
  --card-background-default: #3c3836 !important;
  --custom-channel-members-bg: #282828;
  --custom-status-bubble-background: #1d2021 !important;
  --custom-status-bubble-background-color: #282828 !important;
  --border-subtle: #32302f !important;
  --border-muted: #3c3836;
  --border-normal: #1d2021;
  --border-strong: #282828;
  --border-color: #504945;
  --deprecated-text-input-border: #504945;
  --deprecated-text-input-border-hover: #665c54;
  --deprecated-text-input-border-disabled: #3c3836;
  --deprecated-text-input-prefix: #d5c4a1;
  --header-primary: #f9f5d7;
  --header-secondary: #a89984;
  --text-normal: #ebdbb2;
  --text-muted: #a89984 !important;
  --text-link: #83a598 !important;
  --text-positive: #b8bb26;
  --text-warning: #fabd2f;
  --text-danger: #fb4934;
  --text-default: #ebdbb2;
  --text-strong: #f9f5d7 !important;
  --text-subtle: #d5c4a1;
  --text-brand: #83a598;
  --text-feedback-positive: #b8bb26;
  --text-feedback-critical: #fb4934;
  --text-feedback-warning: #fabd2f;
  --text-feedback-info: #83a598;
  --text-status-online: #b8bb26;
  --text-status-idle: #fabd2f;
  --text-status-dnd: #fb4934;
  --text-status-offline: #a89984;
  --interactive-normal: #a89984;
  --interactive-hover: #d5c4a1;
  --interactive-active: #f9f5d7;
  --interactive-muted: #665c54;
  --interactive-icon-default: #ebdbb2 !important;
  --interactive-icon-hover: #ebdbb2;
  --interactive-icon-active: #ebdbb2;
  --interactive-text-default: #ebdbb2 !important;
  --interactive-text-hover: #ebdbb2;
  --interactive-text-active: #ebdbb2;
  --interactive-background-hover: rgba(80, 73, 69, 0.15);
  --interactive-background-selected: rgba(80, 73, 69, 0.2);
  --interactive-background-active: rgba(235, 219, 178, 0.17);
  --channels-default: #a89984 !important;
  --channels-voice-default: #a89984;
  --channel-icon: #a89984 !important;
  --channel-text-area-placeholder: rgba(235, 219, 178, 0.5);
  --channeltextarea-background: #282828;
  --voice-color: #8ec07c;
  --status-speaking: #8ec07c !important;
  --brand-experiment: #076678;
  --brand-experiment-560: #076678;
  --brand-experiment-600: #83a598;
  --control-brand-foreground: #83a598;
  --control-brand-foreground-new: #83a598;
  --brand-100: #e8f2f0;
  --brand-130: #def0ed;
  --brand-160: #d1ebe7;
  --brand-200: #c2e4de;
  --brand-230: #b3dcd6;
  --brand-260: #a4d3cc;
  --brand-300: #96ccc4;
  --brand-330: #8fc4bc;
  --brand-360: #89bcb4;
  --brand-400: #87b9b1;
  --brand-430: #85b4ac;
  --brand-460: #84afa7;
  --brand-500: #83a598 !important;
  --brand-530: #83a598;
  --brand-560: #076678;
  --brand-600: #83a598;
  --brand-630: #63837b;
  --brand-660: #547970;
  --brand-700: #456f66;
  --brand-730: #3c6259;
  --brand-760: #335650;
  --brand-800: #2a4a44;
  --brand-830: #21403a;
  --brand-860: #193630;
  --brand-900: #112c26;
  --brand-05a: rgba(131, 165, 152, 0.05);
  --brand-10a: rgba(131, 165, 152, 0.1);
  --brand-15a: rgba(131, 165, 152, 0.15);
  --brand-20a: rgba(131, 165, 152, 0.2);
  --brand-25a: rgba(131, 165, 152, 0.25);
  --brand-30a: rgba(131, 165, 152, 0.3);
  --brand-35a: rgba(131, 165, 152, 0.35);
  --brand-40a: rgba(131, 165, 152, 0.4);
  --brand-45a: rgba(131, 165, 152, 0.45);
  --brand-50a: rgba(131, 165, 152, 0.5);
  --brand-55a: rgba(131, 165, 152, 0.55);
  --brand-60a: rgba(131, 165, 152, 0.6);
  --brand-65a: rgba(131, 165, 152, 0.65);
  --brand-70a: rgba(131, 165, 152, 0.7);
  --brand-75a: rgba(131, 165, 152, 0.75);
  --brand-80a: rgba(131, 165, 152, 0.8);
  --brand-85a: rgba(131, 165, 152, 0.85);
  --brand-90a: rgba(131, 165, 152, 0.9);
  --brand-95a: rgba(131, 165, 152, 0.95);
  --opacity-blurple-8: rgba(131, 165, 152, 0.08);
  --opacity-blurple-16: rgba(131, 165, 152, 0.16);
  --opacity-blurple-24: rgba(131, 165, 152, 0.24);
  --opacity-blurple-32: rgba(131, 165, 152, 0.32);
  --opacity-blurple-60: rgba(131, 165, 152, 0.6);
  --blurple-50: #076678;
  --blurple-60: #a4c3bb;
  --control-primary-background-default: #076678;
  --control-primary-background-hover: #83a598;
  --control-primary-background-active: #83a598;
  --control-secondary-background-default: #504945 !important;
  --control-secondary-background-hover: #665c54;
  --control-secondary-background-active: #665c54;
  --control-secondary-border-default: #504945;
  --control-secondary-text-default: #ebdbb2 !important;
  --control-secondary-text-hover: #ebdbb2;
  --control-critical-primary-background-default: #cc241d;
  --control-critical-primary-background-hover: #fb4934;
  --control-critical-primary-background-active: #fb4934;
  --control-critical-primary-text-default: #1d2021;
  --control-critical-primary-text-hover: #1d2021;
  --control-critical-secondary-background-default: transparent;
  --control-critical-secondary-background-hover: rgba(251, 73, 52, 0.15);
  --control-critical-secondary-background-active: rgba(251, 73, 52, 0.2);
  --control-critical-secondary-border-default: #fb4934;
  --control-critical-secondary-border-hover: #fb4934;
  --control-critical-secondary-border-active: #fb4934;
  --control-critical-secondary-text-default: #ebdbb2;
  --control-critical-secondary-text-hover: #1d2021;
  --control-critical-secondary-text-active: #1d2021;
  --control-connected-background-default: #b8bb26;
  --control-connected-background-hover: rgb(204.8533333333, 208.1933333333, 42.3066666667);
  --control-connected-background-active: #b8bb26;
  --control-connected-border-default: #b8bb26;
  --control-connected-border-hover: rgb(204.8533333333, 208.1933333333, 42.3066666667);
  --control-connected-border-active: rgb(204.8533333333, 208.1933333333, 42.3066666667);
  --button-outline-primary-text: #ebdbb2;
  --button-outline-brand-text: #ebdbb2;
  --button-outline-brand-background-hover: rgba(131, 165, 152, 0.3);
  --button-outline-brand-border-active: #83a598;
  --status-positive: #8ec07c !important;
  --status-positive-background: #8ec07c !important;
  --status-positive-text: #1d2021;
  --status-warning: #fabd2f;
  --status-warning-background: #fabd2f;
  --status-warning-text: #1d2021;
  --status-danger: #fb4934;
  --icon-status-online: #b8bb26;
  --icon-status-idle: #fabd2f;
  --icon-status-dnd: #fb4934;
  --icon-status-offline: #a89984;
  --background-feedback-positive: rgba(184, 187, 38, 0.15) !important;
  --background-feedback-warning: rgba(250, 189, 47, 0.15);
  --background-feedback-critical: rgba(251, 73, 52, 0.15);
  --background-feedback-info: rgba(131, 165, 152, 0.15);
  --background-feedback-notification: #fb4934;
  --badge-notification-background: #fb4934;
  --icon-feedback-positive: #8ec07c !important;
  --icon-feedback-warning: #fabd2f;
  --icon-feedback-critical: #fb4934;
  --icon-feedback-info: #83a598;
  --icon-feedback-notification: #fb4934;
  --notice-background-critical: #fb4934;
  --notice-background-info: #83a598;
  --notice-background-positive: #b8bb26;
  --notice-background-warning: #fabd2f;
  --notice-text-critical: #1d2021;
  --notice-text-info: #1d2021;
  --notice-text-positive: #1d2021;
  --notice-text-warning: #1d2021;
  --background-mentioned: rgba(215, 153, 33, 0.07);
  --background-mentioned-hover: rgba(215, 153, 33, 0.12);
  --background-mentioned-focus: rgba(215, 153, 33, 0.15);
  --mention-foreground: #d79921;
  --mention-background: rgba(215, 153, 33, 0.3);
  --message-mentioned-background-default: rgba(215, 153, 33, 0.07);
  --message-mentioned-background-hover: rgba(215, 153, 33, 0.05);
  --message-automod-background-default: rgba(204, 36, 29, 0.05);
  --message-automod-background-hover: rgba(204, 36, 29, 0.1);
  --message-highlight-background-default: rgba(215, 153, 33, 0.08);
  --message-highlight-background-hover: rgba(215, 153, 33, 0.06);
  --message-reacted-background-default: rgba(131, 165, 152, 0.3) !important;
  --message-reacted-text-default: #83a598;
  --message-background-hover: rgba(30, 25, 20, 0.08) !important;
  --background-code: #1d2021;
  --spoiler-revealed-background: #3c3836;
  --spoiler-hidden-background: #504945;
  --__spoiler-background-color--hidden: #504945;
  --__spoiler-warning-background-color: #665c54;
  --input-background-default: #1d2021;
  --input-text-default: #ebdbb2;
  --input-placeholder-text-default: rgba(235, 219, 178, 0.5);
  --input-border-default: #504945;
  --icon-muted: #665c54 !important;
  --icon-voice-muted: #fb4934;
  --icon-default: #ebdbb2;
  --icon-strong: #f9f5d7;
  --icon-subtle: #d5c4a1;
  --scrollbar-thin-thumb: #504945;
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: #504945;
  --scrollbar-auto-track: #1d2021;
  --scrollbar-auto-scrollbar-color-thumb: #504945;
  --scrollbar-auto-scrollbar-color-track: #1d2021;
  --elevation-low: 0 1px 0 rgba(29, 32, 33, 0.3), 0 2px 0 rgba(29, 32, 33, 0.1);
  --elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.24);
  --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.36);
  --elevation-stroke: 0 0 0 1px rgba(29, 32, 33, 0.2);
  --user-profile-overlay-background: #32302f;
  --user-profile-overlay-background-hover: #3c3836;
  --modal-background: #32302f !important;
  --modal-footer-background: #32302f;
  --logo-primary: #f9f5d7;
  --__adaptive-focus-ring-color: #83a598;
  --textbox-markdown-syntax: #7c6f64;
  --checkbox-border-default: #665c54;
  --checkbox-icon-active: #1d2021;
  --radio-thumb-background-active: #1d2021;
  --plum-23: #32302f;
  --badge-text-brand: #1d2021;
  --deprecated-panel-background: #3c3836;
  --deprecated-card-bg: #282828;
  --deprecated-card-editable-bg: #282828;
  --deprecated-store-bg: #3c3836;
  --deprecated-quickswitcher-input-background: #282828;
  --deprecated-quickswitcher-input-placeholder: rgba(235, 219, 178, 0.3);
  --deprecated-text-input-bg: #282828;
  --white: #ebdbb2;
  --white-500: #ebdbb2;
  --black-500: #1d2021;
  --green-360: #b8bb26;
  --green-300: #b8bb26;
  --yellow-360: #fabd2f;
  --yellow-300: #fabd2f;
  --red-400: #fb4934;
  --red-430: #fb4934;
  --red-500: #cc241d;
  --blue-500: #83a598;
  --blue-530: #83a598;
  --primary-100: #d5c4a1;
  --primary-200: #a89984;
  --primary-300: #d5c4a1;
  --primary-400: #d5c4a1;
  --primary-630: #3c3836;
  --primary-700: #504945;
  --primary-800: #1d2021;
  --twitch: #d5c4a1;
  --playstation: #83a598;
  --spotify: #b8bb26;
  --guild-boosting-pink: #8ec07c;
  --guild-boosting-blue: #83a598;
  --guild-boosting-purple: #d5c4a1;
  --premium-perk-yellow: #fabd2f;
  --premium-perk-purple: #d5c4a1;
  --premium-perk-dark-blue: #83a598;
  --premium-perk-light-blue: #8ec07c;
  --premium-perk-blue: #83a598;
  --premium-perk-green: #b8bb26;
  --premium-perk-pink: #d5c4a1;
  --premium-perk-orange: #fabd2f;
  --premium-tier-0-blue: #83a598;
  --premium-tier-0-purple: #d5c4a1;
  --premium-tier-1-blue-for-gradients: #8ec07c;
  --premium-tier-1-dark-blue-for-gradients: #83a598;
  --premium-tier-2-purple-for-gradients: #d5c4a1;
  --premium-tier-2-purple-for-gradients-2: #a89984;
  --premium-tier-2-pink-for-gradients: #d5c4a1;
}

.visual-refresh.theme-dark button[class*=button_][class*=lookFilled_][class*=colorGreen_],
.visual-refresh .theme-dark button[class*=button_][class*=lookFilled_][class*=colorGreen_],
.visual-refresh.theme-dark button[class*=colorable_][class*=join_],
.visual-refresh .theme-dark button[class*=colorable_][class*=join_] {
  color: #1d2021 !important;
}

:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) :is(div[class^=item_][class*=addFriend_],
div[class^=numberBadge_][style*="background-color: var(--background-feedback-notification);"],
div[class^=numberBadge_][style*="background-color: var(--badge-notification-background);"],
div[class*=iconBadge_][class*=isCurrentUserConnected_],
span[class*=botTag_],
span[class^=unreadPill_],
div[class^=listItem_] div[class^=wrapper_] [class*=selected_],
div[class^=icon_][class*=noIcon_],
button[class^=container_] > div[class^=icon_] > svg,
div[class^=newBadge_],
button[class*=button_][class*=lookFilled_][class*=colorBrand_],
button[class*=button_][class*=lookFilled_][class*=colorLink_],
div[class*=textBadge_][class*=base_],
svg[class^=descriptionIcon_],
div[class^=uploadDropModal_],
svg[class^=stepIcon_],
svg[class^=activeIcon_],
div[class*=tooltipBrand_],
div[class*=tooltipGreen_],
span[class*=planOptionDiscount_],
div[class*=memberCount_],
svg[class*=flowerStar_] + div[class*=childContainer_],
div[class*=streamerModeEnabledBtn_],
div[class*=nowPlaying_],
div[class^=pageControlContainer_],
[class*=notice_][class*=colorBrand_],
[class*=colorStreamerMode_],
[class*=colorSpotify_],
[class*=colorPremium_],
[class*=colorPlayStation_]) {
  --white: #f9f5d7;
  --white-500: #f9f5d7;
}

.visual-refresh.theme-dark ::-moz-selection, .visual-refresh .theme-dark ::-moz-selection {
  background-color: rgba(131, 165, 152, 0.6);
}

.visual-refresh.theme-dark ::selection,
.visual-refresh .theme-dark ::selection {
  background-color: rgba(131, 165, 152, 0.6);
}

.visual-refresh.theme-dark button.vc-btn-primary,
.visual-refresh .theme-dark button.vc-btn-primary {
  color: #f9f5d7 !important;
  background-color: #076678 !important;
}
.visual-refresh.theme-dark button.vc-btn-primary:hover, .visual-refresh.theme-dark button.vc-btn-primary:active,
.visual-refresh .theme-dark button.vc-btn-primary:hover,
.visual-refresh .theme-dark button.vc-btn-primary:active {
  background-color: #83a598 !important;
}

.visual-refresh.theme-dark button.vc-btn-positive,
.visual-refresh .theme-dark button.vc-btn-positive {
  color: #1d2021 !important;
}

.visual-refresh.theme-dark button[class^=button_][class*=" primary_"],
.visual-refresh .theme-dark button[class^=button_][class*=" primary_"] {
  color: #f9f5d7 !important;
  background-color: #076678 !important;
}
.visual-refresh.theme-dark button[class^=button_][class*=" primary_"]:hover, .visual-refresh.theme-dark button[class^=button_][class*=" primary_"]:active,
.visual-refresh .theme-dark button[class^=button_][class*=" primary_"]:hover,
.visual-refresh .theme-dark button[class^=button_][class*=" primary_"]:active {
  background-color: #83a598 !important;
}

.theme-dark {
  --background-mentioned: rgba(215, 153, 33, 0.07);
  --background-mentioned-hover: rgba(215, 153, 33, 0.12);
  --background-message-hover: rgba(30, 25, 20, 0.08);
  --text-normal: #ebdbb2;
  --text-link: #83a598;
  --header-primary: #f9f5d7;
  --header-secondary: #a89984;
  --interactive-normal: #a89984;
  --interactive-hover: #d5c4a1;
  --interactive-active: #f9f5d7;
  --channels-default: #a89984;
}

.theme-light {
  --background-primary: #32302f;
  --background-secondary: #282828;
  --background-tertiary: #1d2021;
  --background-floating: #3c3836;
  --header-primary: #f9f5d7;
  --header-secondary: #a89984;
  --text-normal: #ebdbb2;
  --deprecated-text-input-bg: #282828;
}

* {
  border-radius: 0 !important;
}

#app-mount {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  letter-spacing: -0.01em;
}

#app-mount [class*=markup],
#app-mount [class*=markup] *,
#app-mount [class*=messageContent],
#app-mount [class*=messageContent] * {
  font-family: "IBM Plex Sans", sans-serif;
  letter-spacing: 0;
}

[role=textbox],
[role=textbox] *,
[data-slate-editor],
[data-slate-editor] * {
  font-family: "IBM Plex Sans", sans-serif !important;
  letter-spacing: 0 !important;
}

div[class*=accountProfileCard_] *,
div[class*=nameTag_] *,
div[class*=customStatus_] * {
  font-family: "IBM Plex Sans", sans-serif !important;
  letter-spacing: 0 !important;
  line-height: normal !important;
}

code,
pre,
#app-mount [class*=markup] code,
#app-mount [class*=markup] pre {
  font-family: "IBM Plex Mono", monospace !important;
  background-color: #1d2021 !important;
  border: 1px solid #504945 !important;
}

::-webkit-scrollbar-thumb {
  background-color: #504945 !important;
  border-radius: 0 !important;
}

::-webkit-scrollbar-track {
  background-color: #1d2021 !important;
  border-radius: 0 !important;
}

foreignObject[mask] {
  -webkit-mask: none !important;
          mask: none !important;
}

[class*=mask] circle[fill=black],
[class*=svg] circle[fill=black],
[class*=mask] circle[fill=white],
[class*=svg] circle[fill=white],
[class*=mask] rect[fill=black],
[class*=svg] rect[fill=black] {
  display: none !important;
}

rect[mask*=status] {
  stroke: #1d2021 !important;
  stroke-width: 10px !important;
  paint-order: stroke fill !important;
}

foreignObject[width="20"][height="20"]:has(~ g),
foreignObject[width="24"][height="24"]:has(~ g),
foreignObject[width="32"][height="32"]:has(~ g),
foreignObject[width="40"][height="40"]:has(~ g) {
  clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 65% 65%, 65% 100%, 0% 100%) !important;
}

foreignObject[width="32"][height="32"]:has(~ g rect[mask="url(#svg-mask-status-online-mobile)"]),
foreignObject[width="40"][height="40"]:has(~ g rect[mask="url(#svg-mask-status-online-mobile)"]) {
  clip-path: polygon(0% 0%, 100% 0%, 100% 49%, 65% 49%, 65% 100%, 0% 100%) !important;
}

foreignObject[width="80"][height="80"][mask] ~ g rect {
  transform: translate(16px, 16px) !important;
}

foreignObject[width="80"][height="80"]:has(~ g rect[mask="url(#svg-mask-status-online-mobile)"]) {
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 95% 90%, 95% 100%, 0% 100%) !important;
}

foreignObject[width="120"][height="120"][mask] ~ g rect {
  transform: translate(25px, 25px) !important;
}

foreignObject[width="120"][height="120"]:has(~ g rect[mask="url(#svg-mask-status-online-mobile)"]) {
  clip-path: polygon(0% 0%, 100% 0%, 100% 88.7%, 95% 88.7%, 95% 100%, 0% 100%) !important;
}

foreignObject [class*=avatarStack_],
foreignObject [class*=avatarStack_]::after,
foreignObject [class*=avatarStack_] > * {
  clip-path: none !important;
  border-radius: 0 !important;
}

div[class*=speaking_] {
  box-shadow: inset 0 0 0 2px #8ec07c !important;
}

[class*=folder],
[class*=folderEndButton],
[class*=folderPreview],
[class*=blobContainer],
[class*=iconBadge] {
  clip-path: inset(0) !important;
}

section[class*=panels_] {
  flex-shrink: 0 !important;
  min-height: 52px !important;
  background-color: #1d2021 !important;
}

[class^=privateChannels_] [class^=buttonChildrenWrapper_],
[class^=privateChannels_] [class^=buttonChildren_],
[class^=privateChannels_] button:has([class^=buttonChildrenWrapper_]) {
  background-color: #1d2021 !important;
}

div[class*=listItemWrapper_],
li[class*=listItem_] {
  overflow: visible !important;
}

div[class*=embed_],
div[class*=embedWrapper_] {
  background-color: #3c3836 !important;
  border-left: 3px solid #83a598 !important;
}

div[class*=reaction_] {
  background-color: #3c3836 !important;
  border: 1px solid #504945 !important;
}

div[class*=reactionMe_] {
  background-color: rgba(131, 165, 152, 0.2) !important;
  border: 1px solid #83a598 !important;
}

div[class*=mentioned_] {
  background-color: rgba(215, 153, 33, 0.07) !important;
}
div[class*=mentioned_]::before {
  background-color: #d79921 !important;
}

:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorRed_] {
  background-color: #cc241d !important;
}
:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorRed_]:hover {
  background-color: #fb4934 !important;
}
:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorGrey_] {
  background-color: #3c3836 !important;
  color: #ebdbb2 !important;
}
:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorGrey_]:hover {
  background-color: #504945 !important;
}
:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorBrand_] {
  background-color: #076678 !important;
  color: #f9f5d7 !important;
}
:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=lookFilled_][class*=colorBrand_]:hover {
  background-color: #83a598 !important;
}
:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) button[class*=button_][class*=active_] {
  color: #f9f5d7 !important;
}
:is(.visual-refresh.theme-dark, .visual-refresh .theme-dark) div[class*=winButtonClose_]:hover {
  color: #f9f5d7 !important;
}

div[class*=overlay_] {
  background-color: #282828 !important;
}

div[class*=newMessagesBar_] {
  background-color: #076678 !important;
}

.bd-addon-list .bd-addon-card {
  border: 1px solid #504945;
  background-color: #32302f;
  margin-bottom: 18px;
}/*# sourceMappingURL=GruvboxSharp.theme.css.map */

Actions

Download Source

About

Version: 3.2
Downloads: 1,817
Added: 02/23/2026
Updated: 03/03/2026
Hash: 3e1b9ad5-b869-133c-3a7a-67b2097e2f8e
Source: https://github.com/round-panda/gruvbox-sharp

Author

passthehat GitHub

Live preview

Screenshot

Open source

FiveCord for Windows