Pyrite

By LeafyLuigi Version 0.2.8 Updated 05/06/2025 427.6K downloads

Pyrite for BetterDiscord

customizable transparent layout

208

Live preview

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

Screenshot

pyrite.theme.css

GitHub

Open source

https://raw.githubusercontent.com/LeafyLuigi/discord-themes/99823b01b6cf6bd3a1b9afc3a5312cafecc5cd62/pyrite/pyrite.theme.css

1/**

2 * @name Pyrite - BetterDiscord

3 * @author LeafyLuigi

4 * @version 0.2.8

5 * @description Pyrite for BetterDiscord.

6 * @source https://github.com/LeafyLuigi/discord-themes/tree/master/pyrite

7 * @website https://github.com/LeafyLuigi/discord-themes/tree/master/pyrite

8 * @invite EeQQTWbTf5

9 */

10/* Main Imports */

11/* Import Base */

12@import url(https://leafyluigi.github.io/discord-themes/pyrite/build/base.css);

13/* Import BetterDiscord Only Features */

14@import url(https://leafyluigi.github.io/discord-themes/pyrite/build/better-discord.css);

15/* Using Vencord? Comment out the above import and uncomment the following import. */

16/* @import url(https://leafyluigi.github.io/discord-themes/pyrite/build/vencord.css); */

17/*

18Imports for optional things:

20To enable any of these, uncomment of the line containing the `@import` you wish to use.

22Whitney Font support. Font file basically stolen from https://github.com/Overimagine1/old-discord-font. */

23@import url(https://leafyluigi.github.io/discord-themes/whitney.css);

24/*

25HorizontalServerList. Forked from Gibbu. Do not use this with the original. */

26/* @import url(https://leafyluigi.github.io/discord-themes/pyrite/build/horizontal-server-list.css); */

27/*

28HorizontalServerList on bottom. Requires the above import. */

29/* @import url(https://leafyluigi.github.io/discord-themes/pyrite/build/horizontal-server-list-bottom.css); */

30/*

31Border Radius / Radical Status. Does not include Gibbu's base for Radical Status. Incompatible with it. */

32/* @import url(https://leafyluigi.github.io/discord-themes/pyrite/build/borders.css) */

33/*

34Restore Windows Titlebar. This will not work for those using Mac OS, Linux or using Web. */

35/* @import url(https://leafyluigi.github.io/discord-themes/pyrite/build/windows-titlebar.css); */

36/*

37Theme Base

38If you wish to read what these variables mean, open this link in your browser:

39https://leafyluigi.github.io/discord-themes/pyrite/var-examples.html */

40:root {

  /* URL must be HTTPS and a direct link to the image. You can have a custom background image for the User Popout and the User Modals. */

42 --background-image: url("https://leafyluigi.github.io/images/pexels-josh-sorenson-116359.png");

43 --user-modal-image: var(--background-image);

44 --user-popout-image: var(--background-image);

45 /* Home icon is for the little button in the top left. */

46 --home-icon: url("https://leafyluigi.github.io/images/pexels-chris-munnik-2604991.png");

47 /*

48 Image attachment can be ";fixed";, ";scroll"; or ";local";.

49 scroll/local attaches the background to the modal completely while fixed keeps it in line with the background.

50 Default is ";fixed"; */

51 --background-attachment: fixed;

52 --user-modal-attachment: var(--background-attachment);

53 --user-popout-attachment: var(--background-attachment);

54 /*

55 Colours.

56 Primary is the ";main colour";.

  Secondary is an accent colour of sorts. It&#039;s not used as often as Primary. It should be a shade or two lighter or darker compared to Primary.

  Hover is a secondary accent colour of sorts and is often used when hovering over something. Like Secondary, it should be a shade or two lighter or darker compared to Primary.

59 Tooltip is used for tooltips. It can whatever colour you wish.

61 When using these variables as values for other variables, it's advised to use the HSL variant.

62 Such variables will be labeled with a dagger (†).

63 Example: --primary-color becomes --hsl-primary-color. */

64 --primary-color: #387eff; /* † */

65 --secondary-color: #3298e0; /* † */

66 --hover-color: #139dff; /* † */

67 --tooltip-color: #1967ab; /* † */

68 /*

  These colours are used for statues and other coloured things. Ignoring Green they default to Discord&#039;s HSL though converted to Hex.

70 Green's default here is the old green. The current green is #3ba55d */

71 --green-color: #43b581; /* † */

72 --yellow-color: #f9a719; /* † */

73 --red-color: #ec4144; /* † */

74 --link-color: #00aef3; /* † */

75 --live-color: #583594; /* † */

76 --offline-color: #737e8c; /* † */

77 /*

78 Channels

79 These are used for channel related things. ";Channels"; may apply to DMs or Server channels. */

  --category-color: var(--header-primary); /* Applies to uncollapsed categories, member list groups and applies to active voice/stage channel. */

  --selected-channel-color: var(--header-primary); /* Applies to selected channel as well as non-locked, non-muted channels on hover. */

  --unread-channel-color: var(--hsl-primary-color); /* Applies to unread channels. Combined with below can give a glow. */

  --read-channel-color: var(--interactive-normal); /* Applies unread, unmuted, unlocked (voice) channels and unmuted collapsed categories. */

  --muted-channel-color: var(--interactive-muted); /* Applies to muted channels and categories. Ignores hover from selected. */

  --show-channel-unread-dot: block; /* Toggle display of the unread channel dot. Valid options: ";block"; and ";none";, both without quotations. ";block"; shows the blob and ";none"; hides it. */

  --locked-voice-channel-color: var(--hsl-red-color); /* Applies to locked voice channels. Does NOT include full voice channels. */

87 /*

  Background default to Primary. Default opacity is 0.3 while on hover it&#039;s a static +0.2 compared to not hovered. */

89 /* --mention-background: var(--hsl-primary-color); -- See :root:root:root. */

90 --mention-opacity: 0.3;

91 /*

92 For Advanced Users */

93 --code-font: Hack, Monaco, Consolas, Courier, monospace;

94 --body-font: Whitney, ";gg sans";, ";Noto Sans";, ";Helvetica Neue";, Helvetica, sans-serif;

  --expression-picker-height: 500px; /* Height of the combined Gif/Sticker/Emoji picker. Does not effect adding reactions. Default and minimum height 500px (498px for Discord&#039;s base) and a maximum of 70vh. If Discord is smaller than 720px vertically, this won&#039;t apply. */

96 --background-filter: saturate(calc(1 * var(--saturation-factor, 1)));

97 --user-modal-filter: saturate(calc(1 * var(--saturation-factor, 1)));

98 --user-popout-filter: saturate(calc(1 * var(--saturation-factor, 1)));

99 --home-icon-filter: saturate(calc(1 * var(--saturation-factor, 1)));

100 /*

101

  Toggles. From 0 (disable) to 1 (enable). Anything outside of those values have NOT been tested and likely aren&#039;t supported. */

102 --hide-speed: 0.5s;

103 --hide-member-list: 1;

104 --hide-active-now: 1;

105 --hide-profile-panel: 1;

106 --hide-channel-list: 0;

107 --blur-intensity: 1;

108 /*

109

  Windows Only - How many *pixels* wide the min/max/close buttons should be. This will not work when using the ";Restore Windows Titlebar"; Import. */

110 --win-min-max-close-button-width: 28px; /* default: 28px, square: 48px */

111 /*

112 Using HSL? You can freely change these variables for a different look. */

113 --HSL-server-icon-size: 40px; /* Size of the server icons | DEFAULT: 40px */

114 --HSL-server-spacing: 10px; /* Spacing between each server icon | DEFAULT: 10px */

115

  --HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column */

116 /* Debug; please do not touch */

117 --update-notice-may25: none;

118}

119

120/* Certain things will need to be defined here, mainly due to Discord's own CSS rules. */

121:root:root:root {

122 --mention-background: var(--hsl-primary-color);

123}

124

125/* Theme-specific variables */

126/* These ones are for "Light" */

127.theme-light,

128

.theme-light :not(div[class*=previewContainer_]) .theme-dark:not(div[class*=layer_], div[class*=outer_]:is([class*=user-profile-popout], [class*=user-profile-modal]), div[class*=sidebar_], nav[class*=guilds_], div[class*=sidebarRegion_]) {

129 --card-background: rgba(255, 255, 255, 0.05); /* † */

130 --side-shading: rgba(255, 255, 255, 0.4); /* † */

131 --middle-shading: rgba(255, 255, 255, 0.3); /* † */

132 --header-shading: rgba(255, 255, 255, 0.5); /* † */

133 /* The following are applied to buttons to indicate hover and being held down. */

134 --hover-filter: rgba(255, 255, 255, 0.2);

135 --active-filter: rgba(255, 255, 255, 0.4);

136}

137

138/* These ones are for "Ash" */

139.theme-dark,

140

.theme-dark :not(div[class*=previewContainer_]) .theme-light:not(div[class*=layer_], div[class*=outer_]:is([class*=user-profile-popout], [class*=user-profile-modal])) {

141 --card-background: rgba(0, 0, 0, 0.4); /* † */

142 --side-shading: rgba(0, 0, 0, 0.4); /* † */

143 --middle-shading: rgba(0, 0, 0, 0.2); /* † */

144 --header-shading: rgba(0, 0, 0, 0.6); /* † */

145 /* The following are applied to buttons to indicate hover and being held down. */

146 --hover-filter: rgba(0, 0, 0, 0.2);

147 --active-filter: rgba(0, 0, 0, 0.4);

148}

149

150/* These ones are for "Dark" */

151.theme-darker,

152

.theme-darker :not(div[class*=previewContainer_]) .theme-light:not(div[class*=layer_], div[class*=outer_]:is([class*=user-profile-popout], [class*=user-profile-modal])) {

153 --card-background: rgba(0, 0, 0, 0.5); /* † */

154 --side-shading: rgba(0, 0, 0, 0.5); /* † */

155 --middle-shading: rgba(0, 0, 0, 0.3); /* † */

156 --header-shading: rgba(0, 0, 0, 0.7); /* † */

157 /* The following are applied to buttons to indicate hover and being held down. */

158 --hover-filter: rgba(0, 0, 0, 0.2);

159 --active-filter: rgba(0, 0, 0, 0.4);

160}

161

162/* These ones are for "Onyx" */

163.theme-midnight,

164

.theme-midnight :not(div[class*=previewContainer_]) .theme-light:not(div[class*=layer_], div[class*=outer_]:is([class*=user-profile-popout], [class*=user-profile-modal])) {

165 --card-background: rgba(0, 0, 0, 0.7); /* † */

166 --side-shading: rgba(0, 0, 0, 0.7); /* † */

167 --middle-shading: rgba(0, 0, 0, 0.6); /* † */

168 --header-shading: rgba(0, 0, 0, 0.8); /* † */

169 /* The following are applied to buttons to indicate hover and being held down. */

170 --hover-filter: rgba(0, 0, 0, 0.2);

171 --active-filter: rgba(0, 0, 0, 0.4);

172}

173

174/*

175***********************************************************************************************

176** WARNING: *VERY* ADVANCED USERS ONLY. IF THIS SECTION IS TOO CONFUSING FOR YOU, IGNORE IT. **

177***********************************************************************************************

178

179Chat markup stuff. Change the appearance of certain in-chat text components.

180I strongly recommend reading Mozilla Development Network (MDN) for more information on the below variable kinds.

181

182Font sizes:

183 For accessibility reasons and there being a text size slider in Discord's settings, it is strongly recommended

184 to use ";rem"; units or percentages instead of other units (";px";, ";em";, etc), using calc,

185 absolute sizes (";xx-small";, ";medium";, ";xxx-large";, etc) or relative sizes (";smaller"; and ";larger";).

186 MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

187

188Line heights:

189 Line heights should always be larger than the font size. Either no specified unit (ie 1.2) should be used or

190 ";rem"; units should be used, preferably the former. Avoid percentages. A similar reason as above applies here.

191 The keyword ";normal"; may be used instead.

192 MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

193

194Font weights:

195 Font weights are for the weight (or boldness) of the font. The weights depend on the chosen font and may or

196 may not appear. Numeric values between 1 and 1000 (inclusive) are accepted, as are certain keywords.

197 Headings usually have a higher weight than regular text.

198

	";normal"; is an alias for 400 while ";bold"; is an alias for 700. ";lighter"; and ";bolder"; may be used as relative keywords.

199 MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

200

201Font styles:

202 Font styles control the style of the text. These are either normal, italic or oblique. Italic text is generally cursive

203 while Oblique text is usually just normal text at an angle. Oblique text can also have a specified angle.

204 Note that not all fonts contain both Italic or Oblique styles with the latter usually being less common.

205 MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

206

207Decorations:

208

	Text decorations are extra things added to the text as a whole. The theme uses the CSS shorthand ";text-decoration"; within.

209 Only the ";line"; is used by default, though all will be explained:

210

		- Line (text-decoration-line) controls where the line is placed. Accepted keyword values include ";underline";, ";overline";,

211 ";line-through"; and ";none";. Multiple non-none values may be used (ie text-decoration-line: underline overline;).

212 Underline will show a line underneath the text, overline will show a line above the text, line-through will show a

213 line through the text itself and none will not have any lines.

214 - Colour (text-decoration-color) controls the colour of all lines.

215

		- Style (text-decoration-style) specifies the style of lines used. Accepted values include ";solid";, ";double";, ";dotted";,

216 ";dashed"; and ";wavy";.

217 - Thickness (text-decoration-thickness) is for how thick the lines are.

218 MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

219*/

220:root {

221 /* Default text components */

222 --chat-font-size: 1rem; /* Default 1rem */

223 --chat-line-height: 1.375rem; /* Default 1.375rem */

224 --chat-font-color: var(--text-normal); /* Default var(--text-normal) */

225 --chat-font-style: normal; /* Default normal */

226 --chat-font-weight: 400; /* Default 400 */

227

  --chat-light-theme-not-zoomed-in-font-weight: 500; /* Default 500 | Light theme font weight without being zoomed in. This falls back to the default value above otherwise. */

228 /* Bold text (eg **bold**) */

229 --chat-bold-font-weight: 700; /* Default 700 */

230 /* Italicised text (eg *italics* or _italics_) */

231 --chat-emphasis-style: italic; /* Default italic */

232 /* Underlined text (eg __underline__); note that this does not override underlines for links. */

233 --chat-underline-decoration: underline; /* Default underline */

234 /* Striked through text (eg ~~strikethrough~~) */

235 --chat-strikethrough-decoration: line-through; /* Default line-through */

236 /* Preformatted text. Appears to be used for outer stuff for big codeblocks. */

237 --chat-preformatted-font-size: 0.75rem; /* Default .75rem */

238 --chat-preformatted-line-height: 1rem; /* Default 1rem */

239

  /* Subtext (eg -# subtext); note that the default values at default settings look very similar to the "Only you can see this" text by Clyde or other bots. */

240 --chat-subtext-color: var(--text-muted); /* Default var(--text-muted) */

241 --chat-subtext-font-size: 0.8125rem; /* Default .8125rem */

242 --chat-subtext-line-height: 1.11719rem; /* Default 1.11719rem */

243 /* Codeblocks, both inline and large (eg `inline code` and ```large code blocks```) */

244 --chat-code-font-size: 0.875rem; /* Default .875rem */

245 --chat-code-line-height: 1.125rem; /* Default 1.125rem */

246 /* Inline codeblock specifically has a smaller font size. (eg `inline code`) */

247 --chat-inline-code-font-size: 85%; /* Default 85% */

248

  /* All HTML heading tags [h1,h2,h3,h4,h5,h6] (eg # h1 | ## h2 | ### h3 | (h4, h5 and h6 do not appear to be possible to made)) */

249 --chat-headings-font-weight: 700; /* Default 700 */

250 --chat-headings-font-color: var(--header-primary); /* Default var(--header-primary) */

251 --chat-headings-line-height: 1.375em; /* Default 1.375em */

252 /* Above but with .inlineFormat_[hash] class with it; I genuinely no idea how to make these appear */

253 --chat-inline-headings-font-weight: 600; /* Default 600 */

254 --chat-inline-headings-font-color: inherit; /* Default inherit */

255 --chat-inline-headings-line-height: 1.25em; /* Default 1.25rem */

256 /* First HTML heading (eg # h1) */

257 --chat-h1-font-size: 1.5rem; /* Default 1.5rem */

258 /* Second HTML heading (eg ## h2) */

259 --chat-h2-font-size: 1.25rem; /* Default 1.25rem */

260 /* Third HTML heading (eg ### h3). Other headings do not have their own rules. */

261 --chat-h3-font-size: 1rem; /* Default 1rem */

262

  /* "Visual Refresh" experiment [2024-05_desktop_visual_refresh; Treatment 1: Refresh Enabled]. This likely will not effect you. */

263 --chat-visual-refresh-line-height: 1.5rem; /* Default 1.5rem */

264}

265

/** 
 * @name Pyrite - BetterDiscord
 * @author LeafyLuigi
 * @version 0.2.8
 * @description Pyrite for BetterDiscord.
 * @source https://github.com/LeafyLuigi/discord-themes/tree/master/pyrite
 * @website https://github.com/LeafyLuigi/discord-themes/tree/master/pyrite
 * @invite EeQQTWbTf5
 */
/* Main Imports */
/* Import Base */
@import url(https://leafyluigi.github.io/discord-themes/pyrite/build/base.css);
/* Import BetterDiscord Only Features */
@import url(https://leafyluigi.github.io/discord-themes/pyrite/build/better-discord.css);
/* Using Vencord? Comment out the above import and uncomment the following import. */
/* @import url(https://leafyluigi.github.io/discord-themes/pyrite/build/vencord.css); */
/*
Imports for optional things:

To enable any of these, uncomment of the line containing the `@import` you wish to use.

Whitney Font support. Font file basically stolen from https://github.com/Overimagine1/old-discord-font. */
@import url(https://leafyluigi.github.io/discord-themes/whitney.css);
/*
HorizontalServerList. Forked from Gibbu. Do not use this with the original. */
/* @import url(https://leafyluigi.github.io/discord-themes/pyrite/build/horizontal-server-list.css); */
/*
HorizontalServerList on bottom. Requires the above import. */
/* @import url(https://leafyluigi.github.io/discord-themes/pyrite/build/horizontal-server-list-bottom.css); */
/*
Border Radius / Radical Status. Does not include Gibbu's base for Radical Status. Incompatible with it. */
/* @import url(https://leafyluigi.github.io/discord-themes/pyrite/build/borders.css) */
/*
Restore Windows Titlebar. This will not work for those using Mac OS, Linux or using Web. */
/* @import url(https://leafyluigi.github.io/discord-themes/pyrite/build/windows-titlebar.css); */
/*
Theme Base
If you wish to read what these variables mean, open this link in your browser:
https://leafyluigi.github.io/discord-themes/pyrite/var-examples.html */
:root {
  /* URL must be HTTPS and a direct link to the image. You can have a custom background image for the User Popout and the User Modals. */
  --background-image: url("https://leafyluigi.github.io/images/pexels-josh-sorenson-116359.png");
  --user-modal-image: var(--background-image);
  --user-popout-image: var(--background-image);
  /* Home icon is for the little button in the top left. */
  --home-icon: url("https://leafyluigi.github.io/images/pexels-chris-munnik-2604991.png");
  /* 
  Image attachment can be "fixed", "scroll" or "local".
  scroll/local attaches the background to the modal completely while fixed keeps it in line with the background.
  Default is "fixed" */
  --background-attachment: fixed;
  --user-modal-attachment: var(--background-attachment);
  --user-popout-attachment: var(--background-attachment);
  /*
  Colours.
  Primary is the "main colour".
  Secondary is an accent colour of sorts. It's not used as often as Primary. It should be a shade or two lighter or darker compared to Primary.
  Hover is a secondary accent colour of sorts and is often used when hovering over something. Like Secondary, it should be a shade or two lighter or darker compared to Primary.
  Tooltip is used for tooltips. It can whatever colour you wish.

  When using these variables as values for other variables, it's advised to use the HSL variant.
  Such variables will be labeled with a dagger (†).
  Example: --primary-color becomes --hsl-primary-color. */
  --primary-color: #387eff; /* † */
  --secondary-color: #3298e0; /* † */
  --hover-color: #139dff; /* † */
  --tooltip-color: #1967ab; /* † */
  /*
  These colours are used for statues and other coloured things. Ignoring Green they default to Discord's HSL though converted to Hex.
  Green's default here is the old green. The current green is #3ba55d */
  --green-color: #43b581; /* † */
  --yellow-color: #f9a719; /* † */
  --red-color: #ec4144; /* † */
  --link-color: #00aef3; /* † */
  --live-color: #583594; /* † */
  --offline-color: #737e8c; /* † */
  /*
  Channels
  These are used for channel related things. "Channels" may apply to DMs or Server channels. */
  --category-color: var(--header-primary); /* Applies to uncollapsed categories, member list groups and applies to active voice/stage channel. */
  --selected-channel-color: var(--header-primary); /* Applies to selected channel as well as non-locked, non-muted channels on hover. */
  --unread-channel-color: var(--hsl-primary-color); /* Applies to unread channels. Combined with below can give a glow. */
  --read-channel-color: var(--interactive-normal); /* Applies unread, unmuted, unlocked (voice) channels and unmuted collapsed categories. */
  --muted-channel-color: var(--interactive-muted); /* Applies to muted channels and categories. Ignores hover from selected. */
  --show-channel-unread-dot: block; /* Toggle display of the unread channel dot. Valid options: "block" and "none", both without quotations. "block" shows the blob and "none" hides it. */
  --locked-voice-channel-color: var(--hsl-red-color); /* Applies to locked voice channels. Does NOT include full voice channels. */
  /*
  Background default to Primary. Default opacity is 0.3 while on hover it's a static +0.2 compared to not hovered. */
  /* --mention-background: var(--hsl-primary-color); -- See :root:root:root. */
  --mention-opacity: 0.3;
  /*
  For Advanced Users */
  --code-font: Hack, Monaco, Consolas, Courier, monospace;
  --body-font: Whitney, "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, sans-serif;
  --expression-picker-height: 500px; /* Height of the combined Gif/Sticker/Emoji picker. Does not effect adding reactions. Default and minimum height 500px (498px for Discord's base) and a maximum of 70vh. If Discord is smaller than 720px vertically, this won't apply. */
  --background-filter: saturate(calc(1 * var(--saturation-factor, 1)));
  --user-modal-filter: saturate(calc(1 * var(--saturation-factor, 1)));
  --user-popout-filter: saturate(calc(1 * var(--saturation-factor, 1)));
  --home-icon-filter: saturate(calc(1 * var(--saturation-factor, 1)));
  /*
  Toggles. From 0 (disable) to 1 (enable). Anything outside of those values have NOT been tested and likely aren't supported. */
  --hide-speed: 0.5s;
  --hide-member-list: 1;
  --hide-active-now: 1;
  --hide-profile-panel: 1;
  --hide-channel-list: 0;
  --blur-intensity: 1;
  /*
  Windows Only - How many *pixels* wide the min/max/close buttons should be. This will not work when using the "Restore Windows Titlebar" Import. */
  --win-min-max-close-button-width: 28px; /* default: 28px, square: 48px */
  /*
  Using HSL? You can freely change these variables for a different look. */
  --HSL-server-icon-size: 40px; /* Size of the server icons | DEFAULT: 40px */
  --HSL-server-spacing: 10px; /* Spacing between each server icon | DEFAULT: 10px */
  --HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column */
  /* Debug; please do not touch */
  --update-notice-may25: none;
}

/* Certain things will need to be defined here, mainly due to Discord's own CSS rules. */
:root:root:root {
  --mention-background: var(--hsl-primary-color);
}

/* Theme-specific variables */
/* These ones are for "Light" */
.theme-light,
.theme-light :not(div[class*=previewContainer_]) .theme-dark:not(div[class*=layer_], div[class*=outer_]:is([class*=user-profile-popout], [class*=user-profile-modal]), div[class*=sidebar_], nav[class*=guilds_], div[class*=sidebarRegion_]) {
  --card-background: rgba(255, 255, 255, 0.05); /* † */
  --side-shading: rgba(255, 255, 255, 0.4); /* † */
  --middle-shading: rgba(255, 255, 255, 0.3); /* † */
  --header-shading: rgba(255, 255, 255, 0.5); /* † */
  /* The following are applied to buttons to indicate hover and being held down. */
  --hover-filter: rgba(255, 255, 255, 0.2);
  --active-filter: rgba(255, 255, 255, 0.4);
}

/* These ones are for "Ash" */
.theme-dark,
.theme-dark :not(div[class*=previewContainer_]) .theme-light:not(div[class*=layer_], div[class*=outer_]:is([class*=user-profile-popout], [class*=user-profile-modal])) {
  --card-background: rgba(0, 0, 0, 0.4); /* † */
  --side-shading: rgba(0, 0, 0, 0.4); /* † */
  --middle-shading: rgba(0, 0, 0, 0.2); /* † */
  --header-shading: rgba(0, 0, 0, 0.6); /* † */
  /* The following are applied to buttons to indicate hover and being held down. */
  --hover-filter: rgba(0, 0, 0, 0.2);
  --active-filter: rgba(0, 0, 0, 0.4);
}

/* These ones are for "Dark" */
.theme-darker,
.theme-darker :not(div[class*=previewContainer_]) .theme-light:not(div[class*=layer_], div[class*=outer_]:is([class*=user-profile-popout], [class*=user-profile-modal])) {
  --card-background: rgba(0, 0, 0, 0.5); /* † */
  --side-shading: rgba(0, 0, 0, 0.5); /* † */
  --middle-shading: rgba(0, 0, 0, 0.3); /* † */
  --header-shading: rgba(0, 0, 0, 0.7); /* † */
  /* The following are applied to buttons to indicate hover and being held down. */
  --hover-filter: rgba(0, 0, 0, 0.2);
  --active-filter: rgba(0, 0, 0, 0.4);
}

/* These ones are for "Onyx" */
.theme-midnight,
.theme-midnight :not(div[class*=previewContainer_]) .theme-light:not(div[class*=layer_], div[class*=outer_]:is([class*=user-profile-popout], [class*=user-profile-modal])) {
  --card-background: rgba(0, 0, 0, 0.7); /* † */
  --side-shading: rgba(0, 0, 0, 0.7); /* † */
  --middle-shading: rgba(0, 0, 0, 0.6); /* † */
  --header-shading: rgba(0, 0, 0, 0.8); /* † */
  /* The following are applied to buttons to indicate hover and being held down. */
  --hover-filter: rgba(0, 0, 0, 0.2);
  --active-filter: rgba(0, 0, 0, 0.4);
}

/*
***********************************************************************************************
** WARNING: *VERY* ADVANCED USERS ONLY. IF THIS SECTION IS TOO CONFUSING FOR YOU, IGNORE IT. **
***********************************************************************************************

Chat markup stuff. Change the appearance of certain in-chat text components.
I strongly recommend reading Mozilla Development Network (MDN) for more information on the below variable kinds.

Font sizes:
	For accessibility reasons and there being a text size slider in Discord's settings, it is strongly recommended
	to use "rem" units or percentages instead of other units ("px", "em", etc), using calc,
	absolute sizes ("xx-small", "medium", "xxx-large", etc) or relative sizes ("smaller" and "larger").
	MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

Line heights:
	Line heights should always be larger than the font size. Either no specified unit (ie 1.2) should be used or
	"rem" units should be used, preferably the former. Avoid percentages. A similar reason as above applies here.
	The keyword "normal" may be used instead.
	MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Font weights:
	Font weights are for the weight (or boldness) of the font. The weights depend on the chosen font and may or
	may not appear. Numeric values between 1 and 1000 (inclusive) are accepted, as are certain keywords.
	Headings usually have a higher weight than regular text.
	"normal" is an alias for 400 while "bold" is an alias for 700. "lighter" and "bolder" may be used as relative keywords.
	MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Font styles:
	Font styles control the style of the text. These are either normal, italic or oblique. Italic text is generally cursive
	while Oblique text is usually just normal text at an angle. Oblique text can also have a specified angle.
	Note that not all fonts contain both Italic or Oblique styles with the latter usually being less common.
	MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

Decorations:
	Text decorations are extra things added to the text as a whole. The theme uses the CSS shorthand "text-decoration" within.
	Only the "line" is used by default, though all will be explained:
		- Line (text-decoration-line) controls where the line is placed. Accepted keyword values include "underline", "overline",
			"line-through" and "none". Multiple non-none values may be used (ie text-decoration-line: underline overline;).
			Underline will show a line underneath the text, overline will show a line above the text, line-through will show a
			line through the text itself and none will not have any lines.
		- Colour (text-decoration-color) controls the colour of all lines.
		- Style (text-decoration-style) specifies the style of lines used. Accepted values include "solid", "double", "dotted",
			"dashed" and "wavy".
		- Thickness (text-decoration-thickness) is for how thick the lines are. 
	MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
*/
:root {
  /* Default text components */
  --chat-font-size: 1rem; /* Default 1rem */
  --chat-line-height: 1.375rem; /* Default 1.375rem */
  --chat-font-color: var(--text-normal); /* Default var(--text-normal) */
  --chat-font-style: normal; /* Default normal */
  --chat-font-weight: 400; /* Default 400 */
  --chat-light-theme-not-zoomed-in-font-weight: 500; /* Default 500 | Light theme font weight without being zoomed in. This falls back to the default value above otherwise. */
  /* Bold text (eg **bold**) */
  --chat-bold-font-weight: 700; /* Default 700 */
  /* Italicised text (eg *italics* or _italics_) */
  --chat-emphasis-style: italic; /* Default italic */
  /* Underlined text (eg __underline__); note that this does not override underlines for links. */
  --chat-underline-decoration: underline; /* Default underline */
  /* Striked through text (eg ~~strikethrough~~) */
  --chat-strikethrough-decoration: line-through; /* Default line-through */
  /* Preformatted text. Appears to be used for outer stuff for big codeblocks. */
  --chat-preformatted-font-size: 0.75rem; /* Default .75rem */
  --chat-preformatted-line-height: 1rem; /* Default 1rem */
  /* Subtext (eg -# subtext); note that the default values at default settings look very similar to the "Only you can see this" text by Clyde or other bots. */
  --chat-subtext-color: var(--text-muted); /* Default var(--text-muted) */
  --chat-subtext-font-size: 0.8125rem; /* Default .8125rem */
  --chat-subtext-line-height: 1.11719rem; /* Default 1.11719rem */
  /* Codeblocks, both inline and large (eg `inline code` and ```large code blocks```) */
  --chat-code-font-size: 0.875rem; /* Default .875rem */
  --chat-code-line-height: 1.125rem; /* Default 1.125rem */
  /* Inline codeblock specifically has a smaller font size. (eg `inline code`) */
  --chat-inline-code-font-size: 85%; /* Default 85% */
  /* All HTML heading tags [h1,h2,h3,h4,h5,h6] (eg # h1 | ## h2 | ### h3 | (h4, h5 and h6 do not appear to be possible to made)) */
  --chat-headings-font-weight: 700; /* Default 700 */
  --chat-headings-font-color: var(--header-primary); /* Default var(--header-primary) */
  --chat-headings-line-height: 1.375em; /* Default 1.375em */
  /* Above but with .inlineFormat_[hash] class with it; I genuinely no idea how to make these appear */
  --chat-inline-headings-font-weight: 600; /* Default 600 */
  --chat-inline-headings-font-color: inherit; /* Default inherit */
  --chat-inline-headings-line-height: 1.25em; /* Default 1.25rem */
  /* First HTML heading (eg # h1) */
  --chat-h1-font-size: 1.5rem; /* Default 1.5rem */
  /* Second HTML heading (eg ## h2) */
  --chat-h2-font-size: 1.25rem; /* Default 1.25rem */
  /* Third HTML heading (eg ### h3). Other headings do not have their own rules. */
  --chat-h3-font-size: 1rem; /* Default 1rem */
  /* "Visual Refresh" experiment [2024-05_desktop_visual_refresh; Treatment 1: Refresh Enabled]. This likely will not effect you. */
  --chat-visual-refresh-line-height: 1.5rem; /* Default 1.5rem */
}

Actions

Download Source

About

Version: 0.2.8
Downloads: 427,600
Added: 04/24/2021
Updated: 05/06/2025
Hash: 35d87ed5-cb75-7ee3-9be7-09acceb2ba61
Source: https://github.com/LeafyLuigi/discord-themes/tree/master/pyrite

Author

LeafyLuigi GitHub

Live preview

Screenshot

Open source

FiveCord for Windows