/** * @name OperaGX * @author Hawk * @version 1.2 * @description A highly customizable theme based off of the OperaGX browser. * @source https://github.com/L-Ratio/OperaGXTheme * @invite Xn7UUQUHbN */ /* IMPORTS BELOW */ @import url(https://l-ratio.github.io/OperaGXTheme/release/main.css); /* Literally everything in the theme don't delete this /* IMPORTS ABOVE */ :root { /*#region*/ /* Variable Name | Variable Value | | Default Value(s) | About This Variable (alias: Setting) /* Background-Settings */ --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://…). */ --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. */ --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. */ /* Color-Settings (RGB only) */ --accent-color-1: 222,67,100 ;/* Default: 250, 30, 70 - The main accent color used in the theme. */ --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. */ --dark-background-color: 18, 16, 25 ;/* Default: 18, 16, 25 - Background color used in some elements, like the chatbox. */ --darker-background-color: 8, 5, 14 ;/* Default: 8, 5, 14 - Another background color, this is darker than --dark-background-color. */ --border-brightness: 1; /* More-Color-Settings */ --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. */ --gx-red-2: 130,27,49 ;/* Default: 255, 66, 66 - Secondary red color when using the theme. */ --gx-yellow: 234, 234, 34 ;/* Theme Default: 234, 234, 34 - Discord Default: 250, 166, 26 - Main yellow color when using the theme. */ --gx-yellow-2: 255, 255, 68 ;/* Default: 255, 255, 68 - Secondary yellow color when using the theme. */ --gx-green: 0, 212, 81 ;/* Theme Default: 0, 212, 81 - Discord Default: 67, 181, 129 - Main green color when using the theme. */ --gx-green-2: 0, 255, 129 ;/* Default: 0, 255, 129 - Secondary green color when using the theme. */ /* Font-Color-Settings */ --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. */ --normal-font: 201, 203, 206 ;/* Theme Default: 201, 203, 206 - Discord Default: 185, 187, 190 - Color used for texts with the normal white color. */ --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. */ --muted-font: 114, 118, 125 ;/* Default: 114, 118, 125 - Muted text is commonly darker than the normal text color. */ --link-text: 0, 176, 244 ;/* Default: 0, 176, 244 - Color used for links. */ --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. */ /* Font-Setting */ --customFont: unset ;/* Default: unset Example: "Chakra Petch" - When adding a font make sure to import it at the top*/ --codeBlocksCustomFont: unset ;/* Default: unset Example: "Chakra Petch" - When adding a font make sure to import it at the top*/ --category-name-transform: unset ;/* Theme Default: unset - Discord Default: uppercase - Same as channel names but for categories. Same values. */ /* Advanced-Background-Settings */ --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. */ --wintitlebar-transparency: 0.7 ;/* Default: 0.7 - Transparency for the Windows title bar. Between 0 and 1. */ --wintitlebar-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */ --wintb-focused-alpha: 1 ;/* Default: 1 - Transparency for the Windows title bar when the app is focused. Between 0 and 1. */ --wintb-focused-color: var(--darker-background-color) ;/* Default: var(--darker-background-color) - RGB color used if transparency is higher than 0. */ --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. */ --header-transparency: 0.5 ;/* Default: 0.3 - Transparency for header. Between 0 and 1. */ --header-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */ --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. */ --serverlist-transparency: 0.5 ;/* Default: 0 - Transparency for server list. Between 0 and 1. */ --serverlist-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */ --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. */ --channels-transparency: 0.5 ;/* Default: 0 - Transparency for channel list. Between 0 and 1. */ --channels-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */ --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. */ --chat-transparency: 0.5 ;/* Default: 0 - Transparency for chat window. Between 0 and 1. */ --chat-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */ --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. */ --memberlist-transparency: 0.5 ;/* Default: 0 - Transparency for member list. Between 0 and 1. */ --memberlist-transparency-color: var(--dark-background-color) ;/* Default: var(--dark-background-color) - RGB color used if transparency is higher than 0. */ /* Advanced-Element-Transparency-Settings */ --chatbox-transparency: 1 ;/* Default: 1 - Background transparency for the chat box when not focused. */ --chatbox-focused-transparency: 1 ;/* Default: 1 - Background transparency for the chat box when focused. */ --other-transparency: 1 ;/* Default: 1 - Background transparency for other things. */ --other-highlighted-transparency: 1 ;/* Default: 1 - Background transparency for other things when hovered/focused/active/etc. */ } /* Put your custom css below here */