OperaGX Theme
A highly customizable theme based off of the OperaGX browser. To easily customize the theme use https://bdeditor.dev/theme/operagxtheme
60
Live preview
Full Discord interface with this theme applied — powered by ThemePreview.
Screenshot
1
/**2
* @name OperaGX3
* @author Hawk4
* @version 1.25
* @description A highly customizable theme based off of the OperaGX browser.6
* @source https://github.com/L-Ratio/OperaGXTheme7
* @invite Xn7UUQUHbN8
*/9
10
/* IMPORTS BELOW */11
@import url(https://l-ratio.github.io/OperaGXTheme/release/main.css); /* Literally everything in the theme don't delete this12
13
14
15
16
/* IMPORTS ABOVE */17
:root {18
/*#region*/19
/* Variable Name | Variable Value | | Default Value(s) | About This Variable (alias: Setting) 20
/* Background-Settings */21
--background: var(--opera-gx-bg-1) ;/* Default: var(--opera-gx-bg-1) - Background for app-mount, you can use a preset var, your own url, transparent (requires transparency enabled and dark theme set) or just a color. Var syntax: var(--var-name), url syntax: url(https://…). */22
--background-behind-appmount: rgb(var(--darker-background-color)) ;/* Default: rgb(var(--darker-background-color)) - Background that is behind the --background variable, in case if --background is unloaded. To make your app transparent, set BOTH background variables to transparent. Otehrwise, put a background color. */23
--background-accent-color-1: var(--accent-color-1) ;/* Default: var(--accent-color-1) - Set to 0,0,0,0 or transparent to completely remove the coloring - Sets the color overlay over the background applying whatever the RGB color is to it. Use a grayscale image to color it anything you want. */24
/* Color-Settings (RGB only) */25
--accent-color-1: 222,67,100 ;/* Default: 250, 30, 70 - The main accent color used in the theme. */26
--accent-color-2: 222,67,100 ;/* Default: 255, 55, 109 - This 2nd one should be a bit lighter or darker than the first one. But anyways you can use the color you want, some gradients can be very awesome. */27
--dark-background-color: 18, 16, 25 ;/* Default: 18, 16, 25 - Background color used in some elements, like the chatbox. */28
--darker-background-color: 8, 5, 14 ;/* Default: 8, 5, 14 - Another background color, this is darker than --dark-background-color. */29
--border-brightness: 1;30
/* More-Color-Settings */31
--gx-red: 181,32,63 ;/* Theme Default: 255, 34, 34 - Discord Default: 240, 71, 71 - Main red color when using the theme. The second one should be brighter than the first one, just like the secondary accent color. */32
--gx-red-2: 130,27,49 ;/* Default: 255, 66, 66 - Secondary red color when using the theme. */33
--gx-yellow: 234, 234, 34 ;/* Theme Default: 234, 234, 34 - Discord Default: 250, 166, 26 - Main yellow color when using the theme. */34
--gx-yellow-2: 255, 255, 68 ;/* Default: 255, 255, 68 - Secondary yellow color when using the theme. */35
--gx-green: 0, 212, 81 ;/* Theme Default: 0, 212, 81 - Discord Default: 67, 181, 129 - Main green color when using the theme. */36
--gx-green-2: 0, 255, 129 ;/* Default: 0, 255, 129 - Secondary green color when using the theme. */37
38
/* Font-Color-Settings */39
--fullwhite-font: 250, 253, 255 ;/* Default: 250, 253, 255 - Color used for texts with the full white color. Note that these vars also modify some icons. */40
--normal-font: 201, 203, 206 ;/* Theme Default: 201, 203, 206 - Discord Default: 185, 187, 190 - Color used for texts with the normal white color. */41
--normal-hover-font: 238, 239, 240 ;/* Theme Default: 238, 239, 240 - Discord Default: 220, 221, 222 - Color used for texts with the white color when hovering. */42
--muted-font: 114, 118, 125 ;/* Default: 114, 118, 125 - Muted text is commonly darker than the normal text color. */43
--link-text: 0, 176, 244 ;/* Default: 0, 176, 244 - Color used for links. */44
--font-in-accent: 0, 0, 0 ;/* Default: 0, 0, 0 - Color used for text and icons that are in a element that has the --accent-color-X variable as a background color. */45
46
/* Font-Setting */47
--customFont: unset ;/* Default: unset Example: ";Chakra Petch"; - When adding a font make sure to import it at the top*/48
--codeBlocksCustomFont: unset ;/* Default: unset Example: ";Chakra Petch"; - When adding a font make sure to import it at the top*/ 49
--category-name-transform: unset ;/* Theme Default: unset - Discord Default: uppercase - Same as channel names but for categories. Same values. */50
51
/* Advanced-Background-Settings */52
--wintitlebar-background-blur: none ;/* Default: none - Background blur for the Windows title bar. Use any unit supported by CSS like px. Put none to remove blur effect and avoid lags. */53
--wintitlebar-transparency: 0.7 ;/* Default: 0.7 - Transparency for the Windows title bar. Between 0 and 1. */54
--wintitlebar-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */55
--wintb-focused-alpha: 1 ;/* Default: 1 - Transparency for the Windows title bar when the app is focused. Between 0 and 1. */56
--wintb-focused-color: var(--darker-background-color) ;/* Default: var(--darker-background-color) - RGB color used if transparency is higher than 0. */57
58
--header-background-blur: none ;/* Default: none - Background blur for header. Use any unit supported by CSS like px. Put none to remove blur effect and avoid lags. */59
--header-transparency: 0.5 ;/* Default: 0.3 - Transparency for header. Between 0 and 1. */60
--header-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */61
62
--serverlist-background-blur: none ;/* Default: none - Background blur for server list. Use any unit supported by CSS like px. Put none to remove blur effect and avoid lags. */63
--serverlist-transparency: 0.5 ;/* Default: 0 - Transparency for server list. Between 0 and 1. */64
--serverlist-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */65
66
--channels-background-blur: none ;/* Default: none - Background blur for channel list. Use any unit supported by CSS like px. Put none to remove blur effect and avoid lags. */67
--channels-transparency: 0.5 ;/* Default: 0 - Transparency for channel list. Between 0 and 1. */68
--channels-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */69
70
--chat-background-blur: none ;/* Default: none - Background blur for header. Use any unit supported by CSS like px. Put none to remove blur effect and avoid lags. */71
--chat-transparency: 0.5 ;/* Default: 0 - Transparency for chat window. Between 0 and 1. */72
--chat-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */73
74
--memberlist-background-blur: none ;/* Default: none - Background blur for member list. Use any unit supported by CSS like px. Put none to remove blur effect and avoid lags. */75
--memberlist-transparency: 0.5 ;/* Default: 0 - Transparency for member list. Between 0 and 1. */76
--memberlist-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */77
78
/* Advanced-Element-Transparency-Settings */79
--chatbox-transparency: 1 ;/* Default: 1 - Background transparency for the chat box when not focused. */80
--chatbox-focused-transparency: 1 ;/* Default: 1 - Background transparency for the chat box when focused. */81
--other-transparency: 1 ;/* Default: 1 - Background transparency for other things. */82
--other-highlighted-transparency: 1 ;/* Default: 1 - Background transparency for other things when hovered/focused/active/etc. */83
}84
85
/* Put your custom css below here */