├── .gitignore ├── LICENSE ├── README.md ├── assets ├── 2024-01-14-022114_hyprshot.png ├── 2024-01-14-022145_hyprshot.png ├── 2024-01-14-022241_hyprshot.png ├── 2024-01-14-022423_hyprshot.png ├── nix1.png ├── nix2.png ├── nix3.png ├── nix4.png ├── nix5.png ├── preview.gif ├── swappy-20240810_031322.png ├── swappy-20240810_031551.png ├── swappy-20240810_031610.png ├── swappy-20240810_031628.png ├── swappy-20240810_031657.png ├── swappy-20240924_214828.png ├── swappy-20241011_013212.png ├── swappy-20241011_013305.png ├── swappy-20241011_013320.png ├── swappy-20241011_013333.png ├── swappy-20241011_013405.png ├── swappy-20241011_013421.png ├── swappy-20241011_013439.png ├── swappy-20241011_013456.png ├── swappy-20241011_013514.png └── swappy-20241011_013532.png ├── build-themecord.sh ├── css ├── Themecord.css ├── ThemecordFiller.css ├── ThemecordFiller2nd.css ├── dark_theme.css ├── hellwal │ └── discord-colors.css ├── light_theme.css ├── pywal │ └── discord-colors.css └── wallust │ ├── discord-colors.css │ └── wallust.toml ├── default.nix ├── example ├── example.sh └── test-wallpaper.jpg ├── flake.lock ├── flake.nix ├── midnight.css ├── nix ├── hellwal.nix ├── pywal.nix └── wallust.nix ├── scripts └── themecord.sh └── themecord /.gitignore: -------------------------------------------------------------------------------- 1 | *result/* 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 danihek 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Themecord 2 | 3 | Discord theme that will always match your wallpaper! 4 | 5 | drawing

6 | 7 |

8 |

Click to expand star history

9 |

10 | 14 |

15 |

16 | 17 | ## Why? 18 | Because why not, I like having same theme on everything I thought it's cool. 19 | 20 | ## Dependecies 21 | - Compatible discord client 22 | - One of color palettes generators: 23 | - [hellwal](https://github.com/danihek/hellwal) 24 | - [python-pywal](https://github.com/dylanaraps/pywal) 25 | - [wallust](https://codeberg.org/onemoresuza/wallust) 26 | 27 | ## Supported Clients: 28 | - Vencord 29 | - Vesktop 30 | 31 | ## Installation 32 | 33 | ### AUR 34 | ``yay -S themecord`` 35 | 36 | ### Manual 37 | 38 | 1. Install supported discord client 39 | 2. Download themecord from [release](https://github.com/danihek/Themecord/releases) page 40 | 3. Look into **# Generating colorscheme** Section 41 | 4. In your discord client, go to themes and select Themecord from available themes. 42 | 5. Now after you run hellwal, pywal or wallust run ``./themecord`` and your discord theme will be applied. 43 | 44 | You can put it in ``/usr/local/bin/`` for ease of use 45 | 46 | ### NixOS 47 | 1. Add themecord to inputs(just like home-manager) in your config flake: 48 | ``` 49 | themecord = { 50 | url = "github:danihek/themecord"; 51 | inputs.nixpkgs.follows = "nixpkgs"; 52 | }; 53 | ``` 54 | 55 | 2. Add as a module: 56 | ``` 57 | ({ config, pkgs, ... }: { 58 | environment.systemPackages = with pkgs; [ 59 | themecord.packages.x86_64-linux.default 60 | ]; 61 | }) 62 | ``` 63 | (Example from my config) 64 | 65 | ![alt text](https://github.com/danihek/Themecord/blob/main/assets/nix5.png) 66 | 67 | 3. Rebuild your configuration and run ``themecord`` 68 | 69 | 4. Go to discord client and select Themecord from available themes 70 | 71 | ![alt text](https://github.com/danihek/Themecord/blob/main/assets/nix3.png) 72 | 73 | 6. Now after you run hellwal, pywal or wallust run ``./themecord`` and your discord theme will be applied. 74 | and your discord client will update it's theme. 75 | 76 | ## Nix 77 | In folder ``./nix`` you can see example how I added to my flake hellwal, wallust and pywal templates. 78 | 79 | --- 80 | 81 | ## Generating colorscheme 82 | Before you even start doing **ANYTHING**, you have to choose if you wanna use pywal or wallust 83 | 84 | ### In case of hellwal you have to copy css file: 85 | ``./css/hellwal/discord-colors.css`` to ``~/.config/hellwal/templates/`` folder 86 | 87 | ### in case of pywal: 88 | ``./css/pywal/discord-colors.css`` to ``~/.config/wal/templates/`` folder 89 | 90 | ### and in case of wallust: 91 | ``./css/wallust/discord-colors.css`` to ``~/.config/wallust/templates/`` folder 92 | 93 | also add to ``~/.config/wallust/wallust.toml`` required config: 94 | 95 | ``` 96 | [templates] 97 | themecord.template = "discord-colors.css" 98 | themecord.target = '~/.cache/wallust/discord-colors.css' 99 | ``` 100 | 101 | ## Example usage 102 | 103 | In folder ``./example`` you see example script which you can use as your template in your own script/config for changing wallpapers and edit to your needs. 104 | 105 | ## Light mode 106 | 107 | You can use `-l` flag to use light mode like this (**hellwal** as backend ): 108 | 109 | ```sh 110 | themecord -l 111 | ``` 112 | 113 | # Enjoy theme'in!! 114 | 115 | ## Showcase 116 | 117 | ![swappy-20250406_214827](https://github.com/user-attachments/assets/662eda4c-d5ce-456b-b11a-e51187e90ae4) 118 | ![swappy-20250406_214848](https://github.com/user-attachments/assets/b43d464a-e6da-4e75-a84c-7752a2253ca2) 119 | ![swappy-20250406_214847](https://github.com/user-attachments/assets/e108c98b-425d-4156-ad34-1dbbc0fd0b42) 120 | ![swappy-20250406_214846](https://github.com/user-attachments/assets/61056857-9a64-486f-96cf-7c42f2e859a3) 121 | ![swappy-20250406_214844](https://github.com/user-attachments/assets/51217cff-e79e-464b-8808-da255bf79938) 122 | ![swappy-20250406_214842](https://github.com/user-attachments/assets/d5af1fa9-8764-4e5c-a428-39a223702af0) 123 | ![swappy-20250406_214838](https://github.com/user-attachments/assets/4b9b0173-fbec-4f0c-a337-949e48aaf6bd) 124 | ![swappy-20250406_214837](https://github.com/user-attachments/assets/b9eed68c-6819-4b75-a851-c772f0b0ddb3) 125 | ![swappy-20250406_214836](https://github.com/user-attachments/assets/4c03edce-7831-4ac2-8e6d-fedaab0ca7e7) 126 | ![swappy-20250406_214835](https://github.com/user-attachments/assets/56976557-91ea-4e4f-8648-05347bd59522) 127 | ![swappy-20250406_214834](https://github.com/user-attachments/assets/304bb494-dfd8-493a-a761-85e395e11d79) 128 | ![swappy-20250406_214832](https://github.com/user-attachments/assets/7ea64335-3550-41eb-b194-6472947ae206) 129 | ![swappy-20250406_214830](https://github.com/user-attachments/assets/c026e974-448d-4261-b14f-f64c747905ef) 130 | 131 | ## Special thanks 132 | 133 | - [dylanaraps](https://github.com/dylanaraps) for creating pywal and inspiration for other programmers 134 | - [refact0r](https://github.com/refact0r) for fixing miserable discord update and providing pretty and well-built discord theme 135 | -------------------------------------------------------------------------------- /assets/2024-01-14-022114_hyprshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/2024-01-14-022114_hyprshot.png -------------------------------------------------------------------------------- /assets/2024-01-14-022145_hyprshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/2024-01-14-022145_hyprshot.png -------------------------------------------------------------------------------- /assets/2024-01-14-022241_hyprshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/2024-01-14-022241_hyprshot.png -------------------------------------------------------------------------------- /assets/2024-01-14-022423_hyprshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/2024-01-14-022423_hyprshot.png -------------------------------------------------------------------------------- /assets/nix1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/nix1.png -------------------------------------------------------------------------------- /assets/nix2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/nix2.png -------------------------------------------------------------------------------- /assets/nix3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/nix3.png -------------------------------------------------------------------------------- /assets/nix4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/nix4.png -------------------------------------------------------------------------------- /assets/nix5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/nix5.png -------------------------------------------------------------------------------- /assets/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/preview.gif -------------------------------------------------------------------------------- /assets/swappy-20240810_031322.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20240810_031322.png -------------------------------------------------------------------------------- /assets/swappy-20240810_031551.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20240810_031551.png -------------------------------------------------------------------------------- /assets/swappy-20240810_031610.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20240810_031610.png -------------------------------------------------------------------------------- /assets/swappy-20240810_031628.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20240810_031628.png -------------------------------------------------------------------------------- /assets/swappy-20240810_031657.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20240810_031657.png -------------------------------------------------------------------------------- /assets/swappy-20240924_214828.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20240924_214828.png -------------------------------------------------------------------------------- /assets/swappy-20241011_013212.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20241011_013212.png -------------------------------------------------------------------------------- /assets/swappy-20241011_013305.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20241011_013305.png -------------------------------------------------------------------------------- /assets/swappy-20241011_013320.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20241011_013320.png -------------------------------------------------------------------------------- /assets/swappy-20241011_013333.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20241011_013333.png -------------------------------------------------------------------------------- /assets/swappy-20241011_013405.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20241011_013405.png -------------------------------------------------------------------------------- /assets/swappy-20241011_013421.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20241011_013421.png -------------------------------------------------------------------------------- /assets/swappy-20241011_013439.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20241011_013439.png -------------------------------------------------------------------------------- /assets/swappy-20241011_013456.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20241011_013456.png -------------------------------------------------------------------------------- /assets/swappy-20241011_013514.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20241011_013514.png -------------------------------------------------------------------------------- /assets/swappy-20241011_013532.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/assets/swappy-20241011_013532.png -------------------------------------------------------------------------------- /build-themecord.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -xe 4 | 5 | TARGET=themecord 6 | 7 | echo "#!/usr/bin/env sh" > themecord 8 | echo -e "\n#This is generated by themecord builder!" >> themecord 9 | 10 | # first filler 11 | echo "themecordFiller=\$(cat << 'EOF'" >> themecord 12 | cat ./css/ThemecordFiller.css >> themecord 13 | echo -e "EOF\n)\n" >> themecord 14 | 15 | # dark theme variable 16 | echo "dark_theme=\$(cat << 'EOF'" >> themecord 17 | cat ./css/dark_theme.css >> themecord 18 | echo -e "EOF\n)\n" >> themecord 19 | 20 | # light theme variable 21 | echo "light_theme=\$(cat << 'EOF'" >> themecord 22 | cat ./css/light_theme.css >> themecord 23 | echo -e "EOF\n)\n" >> themecord 24 | 25 | # filler after root { css section 26 | echo "themecordFiller2=\$(cat << 'EOF'" >> themecord 27 | cat ./css/ThemecordFiller2nd.css >> themecord 28 | echo -e "EOF\n)\n" >> themecord 29 | 30 | echo "themecordBase=\$(cat << 'EOF'" >> themecord 31 | cat ./css/Themecord.css >> themecord 32 | echo -e "EOF\n)\n" >> themecord 33 | 34 | cat ./scripts/themecord.sh >> themecord 35 | 36 | chmod +x themecord 37 | -------------------------------------------------------------------------------- /css/Themecord.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Themecord 3 | * @author danihek 4 | * @version 1.1.0 5 | * @description Discord theme compatible with your wallpaper! 6 | * @authorId 518107210803576852 7 | * @source https://github.com/danihek/Themecord 8 | */ 9 | -------------------------------------------------------------------------------- /css/ThemecordFiller.css: -------------------------------------------------------------------------------- 1 | } 2 | 3 | /* main.css */ 4 | @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 5 | 6 | :root { 7 | container-name: root; 8 | --custom-guild-list-padding: 12px; 9 | --panel-backdrop-filter: none; 10 | } 11 | 12 | body { 13 | container-name: body; 14 | 15 | /* font, change to '' for default discord font */ 16 | --font: 'figtree'; 17 | 18 | /* sizes */ 19 | --gap: 12px; /* spacing between panels */ 20 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 21 | } 22 | 23 | .visual-refresh { 24 | /* panel separation */ 25 | .guilds_c48ade /* server list */, 26 | .sidebarList_c48ade /* channel list (includes dm list) */, 27 | .panels_c48ade /* user panel */, 28 | .chat_f75fb0 > .subtitleContainer_f75fb0 /* chat titlebar */, 29 | .chatContent_f75fb0 /* chat */, 30 | .container_c8ffbb /* member list */, 31 | .content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */, 32 | .container__133bf > .container__9293f /* friends titlebar */, 33 | .container_f391e3 > .container__9293f /* message requests titlebar */, 34 | .homeWrapper__0920e > .container__9293f /* nitro page titlebar */, 35 | .container__01ae2 > .container__9293f /* vc chat titlebar */, 36 | .container_fb64c9 > .container__9293f /* new thread panel */, 37 | .peopleColumn__133bf /* online friends */, 38 | .nowPlayingColumn__133bf /* active now */, 39 | .scroller_c880e8 /* nitro page */, 40 | .container_f391e3 > .content_f75fb0 /* message requests */, 41 | .shop__6db1d /* shop */, 42 | .outer_c0bea0.panel_c0bea0 /* dm user panel */, 43 | .searchResultsWrap_a9e706 /* search results */, 44 | .container_f369db /* forum */, 45 | .chat_fb64c9 /* new thread panel */, 46 | .container_a592e1 /* server discovery */, 47 | .callContainer_cb9592 /* vc container */, 48 | .callContainer__722ff /* stage */ { 49 | background-color: var(--background-base-lower); 50 | border-radius: var(--radius-lg); 51 | border: 1px solid var(--border-subtle); 52 | backdrop-filter: var(--panel-backdrop-filter); 53 | } 54 | 55 | .base_c48ade /* base grid */ { 56 | display: grid; 57 | grid-template-columns: [start] min-content [guildsEnd] min-content [channelsEnd] 1fr [end]; 58 | grid-template-rows: [top] var(--custom-app-top-bar-height) [titleBarEnd] min-content [noticeEnd] 1fr [contentEnd] min-content [end]; 59 | grid-template-areas: 60 | 'titleBar titleBar titleBar' 61 | 'guildsList notice notice' 62 | 'guildsList channelsList page' 63 | 'userPanel userPanel page'; 64 | gap: 0 var(--gap); 65 | } 66 | 67 | .panels_c48ade /* user panel */ { 68 | width: 100%; 69 | position: static; 70 | grid-area: userPanel; 71 | margin: var(--gap) 0 0 0; 72 | overflow: hidden; 73 | max-width: calc(var(--custom-guild-sidebar-width) + var(--gap) + 4px); 74 | } 75 | 76 | .sidebar_c48ade /* server list + channel list + user panel group */ { 77 | margin: 0 0 var(--gap) var(--gap); 78 | } 79 | 80 | .guilds_c48ade /* server list */ { 81 | margin-bottom: 0; 82 | } 83 | .scroller_ef3116 /* server list inner scroller */ { 84 | padding-top: var(--custom-guild-list-padding); 85 | } 86 | 87 | .container__2637a /* channel list inner */ { 88 | padding-bottom: 0; 89 | } 90 | .clickable_f37cb1, 91 | .container__2637a /* channel list inner */, 92 | .header_f37cb1 /* server name */ { 93 | background: none; 94 | } 95 | 96 | /* fix discord's idiotic server banners */ 97 | .bannerImage_f37cb1, 98 | .bannerImg_f37cb1 { 99 | width: 100%; 100 | } 101 | .bannerVisible_f37cb1 .headerEllipseBackdrop_f37cb1 { 102 | display: none; 103 | } 104 | .headerGlass_f37cb1 { 105 | top: 0; 106 | left: 0; 107 | right: 0; 108 | width: auto; 109 | border-radius: var(--radius-lg) var(--radius-lg) 0 0; 110 | } 111 | 112 | .sidebar_c48ade:after /* server list + channel list bottom shadow */ { 113 | display: none; 114 | } 115 | 116 | .chat_f75fb0 /* chat group outer */ { 117 | border: none !important; 118 | background: none; 119 | } 120 | .container__133bf /* friends page group outer */, 121 | .page_c48ade { 122 | padding-bottom: var(--gap); 123 | padding-right: var(--gap); 124 | border: none !important; 125 | background: none; 126 | } 127 | .page_c48ade > .chat_f75fb0, 128 | .page_c48ade > .container__133bf { 129 | padding: 0; 130 | } 131 | 132 | .container__9293f /* friends, message requests, + other stuff titlebar */ { 133 | margin-bottom: var(--gap); 134 | } 135 | 136 | .subtitleContainer_f75fb0 /* chat titlebar */ { 137 | margin-bottom: var(--gap); 138 | } 139 | .title_f75fb0 /* chat titlebar inner */ { 140 | border: none; 141 | background: none; 142 | margin-bottom: 0; 143 | } 144 | 145 | .chatContent_f75fb0 /* chat */ { 146 | overflow: hidden; 147 | } 148 | 149 | .container_c8ffbb /* member list */ { 150 | margin-left: var(--gap); 151 | overflow: hidden; 152 | height: auto; 153 | min-width: var(--custom-member-list-width); 154 | } 155 | .content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */ { 156 | margin-left: var(--gap); 157 | overflow: hidden; 158 | height: auto; 159 | } 160 | .members_c8ffbb /* member list inner */, 161 | .member_c8ffbb /* member list item */ { 162 | background: none; 163 | } 164 | 165 | .resizeHandle__01ae2 /* resize handle */ { 166 | background: transparent; 167 | } 168 | 169 | .privateChannels__35e86 /* dm list */, 170 | .scroller__99e7c /* dm list inner */ { 171 | background: none; 172 | } 173 | .scroller__99e7c /* dm list inner */ { 174 | margin-bottom: 0; 175 | } 176 | 177 | .tabBody__133bf /* online friends + active now group outer */ { 178 | background: none; 179 | } 180 | 181 | .nowPlayingColumn__133bf /* active now */ { 182 | margin-left: var(--gap); 183 | } 184 | .container__7d20c /* active now inner */ { 185 | background: none; 186 | } 187 | .scroller__7d20c /* active now inner */ { 188 | border: none; 189 | } 190 | 191 | .homeWrapper__0920e /* nitro page group inner */ { 192 | border: none; 193 | background: none; 194 | } 195 | .applicationStore_f07d62 /* nitro page group outer */ { 196 | background: none; 197 | } 198 | 199 | .shop__6db1d /* shop */ { 200 | overflow: hidden; 201 | height: auto; 202 | } 203 | .shop__08415 /* shop inner scroller */ { 204 | margin-top: calc(var(--custom-channel-header-height) * -1 - 16px); 205 | } 206 | 207 | .outer_c0bea0.panel_c0bea0 /* dm user panel */ { 208 | margin-left: var(--gap); 209 | overflow: hidden; 210 | height: auto; 211 | min-width: 340px; 212 | } 213 | 214 | .searchResultsWrap_a9e706 /* search results */ { 215 | margin-left: var(--gap); 216 | } 217 | 218 | .notice__6e2b9 /* notice banner */ { 219 | margin: 0 var(--gap) var(--gap) 0; 220 | border-radius: var(--radius-md); 221 | } 222 | 223 | .container__01ae2 /* vc chat + titlebar group */ { 224 | border: none; 225 | background: none; 226 | } 227 | .chat_ee72fa::before /* vc chat shadow */ { 228 | display: none; 229 | } 230 | .channelChatWrapper_cb9592 /* vc chat + titlebar group outer */ { 231 | background: none; 232 | } 233 | 234 | .page_c48ade > div > .chatLayerWrapper__01ae2 /* forum/thread chat outer */ { 235 | margin: 0 var(--gap) var(--gap) 0; 236 | height: calc(100% - var(--gap)); 237 | } 238 | .container__01ae2 /* forum/thread chat */ { 239 | padding-left: calc((var(--gap) - var(--chat-resize-handle-width))); 240 | } 241 | 242 | .container_fb64c9 /* new thread panel */ { 243 | background: none; 244 | } 245 | .chat_fb64c9::before /* new thread panel chat shadow */ { 246 | display: none; 247 | } 248 | 249 | .container_a592e1 /* server discovery */ { 250 | overflow: hidden; 251 | } 252 | .backdrop__8a7fc /* server discovery top bar */ { 253 | background-color: var(--background-base-lower); 254 | } 255 | 256 | .wrapper_cb9592 /* dm vc wrapper */ { 257 | background: none; 258 | margin-bottom: var(--gap); 259 | } 260 | 261 | /* remove excess background from settings */ 262 | .standardSidebarView__23e6b, 263 | .contentRegion__23e6b, 264 | .sidebarRegionScroller__23e6b, 265 | .contentRegionScroller__23e6b { 266 | background: none; 267 | } 268 | .standardSidebarView__23e6b { 269 | backdrop-filter: var(--panel-backdrop-filter); 270 | } 271 | 272 | /* remove excess backgrounds */ 273 | .wrapper_d852db /* message loading placeholders */, 274 | .wrapper_d852db > .wrapper_fc8177 { 275 | background: none; 276 | } 277 | 278 | .newMessagesBar__0f481 /* unread messages bar */ { 279 | top: 12px; 280 | left: 12px; 281 | right: 12px; 282 | border-radius: var(--radius-sm); 283 | padding: 0 8px; 284 | } 285 | 286 | .bottom__7aaec /* channel list new unreads pill */ { 287 | bottom: 12px; 288 | } 289 | 290 | .unreadMentionsIndicatorBottom_ef3116 /* server list new pill */, 291 | .unreadMentionsIndicatorTop_ef3116 { 292 | width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2); 293 | padding: calc(var(--custom-guild-list-padding) / 2); 294 | } 295 | 296 | /* jank ass solution to only apply padding to treatment 3 */ 297 | .form_f75fb0 /* chat bar outer form */ { 298 | --space-8: 16px; 299 | } 300 | .channelBottomBarArea_f75fb0 /* chat bar inner */ { 301 | --space-8: 8px; 302 | } 303 | 304 | /* get rid of extra space in treatment 2 */ 305 | .accessoryBar__74017 { 306 | padding-top: 0; 307 | } 308 | 309 | /* general chat bar improvements */ 310 | .channelTextArea_f75fb0 /* chat bar */ { 311 | border-radius: var(--radius-md); 312 | } 313 | .themedBackground__74017 /* chat bar inner */ { 314 | background: none; 315 | } 316 | .slateTextArea_ec4baf /* actual typing area */ { 317 | margin-left: 2px; 318 | } 319 | 320 | /* improve unread divider */ 321 | .divider__908e2 { 322 | border-width: var(--divider-thickness); 323 | border-radius: var(--divider-thickness); 324 | } 325 | .endCap__908e2 { 326 | margin-top: calc(var(--divider-thickness) / -2); 327 | } 328 | .divider__908e2 .content__908e2 { 329 | margin-top: calc(var(--divider-thickness) - var(--divider-thickness) * 2); 330 | } 331 | 332 | /* improve highlight message left edge */ 333 | .message__5126c.mentioned__5126c::before, 334 | .replying__5126c::before, 335 | .ephemeral__5126c::before { 336 | width: var(--divider-thickness); 337 | border-radius: var(--divider-thickness); 338 | height: calc(100% - 2 * var(--radius-sm)); 339 | top: var(--radius-sm); 340 | left: calc(var(--divider-thickness) / -2 + 1px); 341 | left: calc(var(--radius-sm) / 2); 342 | } 343 | 344 | .message__5126c { 345 | border-radius: var(--radius-md); 346 | margin-left: 4px; 347 | } 348 | 349 | /* improve server selected marker */ 350 | .pill_e5445c.wrapper__58105 { 351 | width: calc((var(--custom-guild-list-padding) - 4px) / 2 + 4px); 352 | } 353 | .item__58105 { 354 | width: 4px; 355 | border-radius: 4px; 356 | margin-left: calc((var(--custom-guild-list-padding) - 4px) / 2); 357 | } 358 | 359 | /* improve embeds */ 360 | .embedFull__623de { 361 | border: 4px solid var(--border-normal); 362 | border-top-color: var(--border-subtle) !important; 363 | border-top-width: 1px; 364 | border-bottom-color: var(--border-subtle) !important; 365 | border-bottom-width: 1px; 366 | border-right-color: var(--border-subtle) !important; 367 | border-right-width: 1px; 368 | } 369 | 370 | /* improve borders */ 371 | .reaction__23977 /* message reactions */, 372 | .reactionBtn__23977.forceShow__23977 /* add reaction button */ { 373 | border-width: 2px; 374 | } 375 | 376 | /* roundness */ 377 | .embedFull__623de /* embeds */, 378 | .hljs /* code block */, 379 | .imageWrapper_af017a /* image */, 380 | .container__9271d /* thread link */ { 381 | border-radius: var(--radius-md); 382 | } 383 | 384 | .outer_c0bea0 /* profile outer */, 385 | .contentWrapper__08434 /* gif panel */ { 386 | border-radius: var(--radius-lg); 387 | } 388 | .inner_c0bea0 /* profile inner */ { 389 | border-radius: calc(var(--radius-lg) - 4px); 390 | } 391 | 392 | .outer_c0bea0 /* profile outer */ { 393 | border: 1px solid var(--border-subtle); 394 | } 395 | .root__24502 { 396 | background: none; 397 | } 398 | 399 | /* remove unnecessary backgrounds */ 400 | .app__160d8, 401 | #app-mount, 402 | body { 403 | background: transparent !important; 404 | } 405 | } 406 | 407 | body { 408 | --font-primary: var(--font), 'gg sans'; 409 | --font-display: var(--font), 'gg sans'; 410 | } 411 | 412 | [class*='scroll'] { 413 | will-change: scroll-position; 414 | } 415 | .burstGlow__23977 { 416 | display: none; 417 | } 418 | 419 | /* animations.css */ 420 | @property --animations { 421 | syntax: 'on | off'; 422 | inherits: false; 423 | initial-value: on; 424 | } 425 | 426 | body { 427 | --list-item-transition: 0.2s ease; /* transition for list items */ 428 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 429 | } 430 | 431 | @container body style(--animations: on) { 432 | .visual-refresh { 433 | /* list hover animations */ 434 | .wrapper__2ea32 .link__2ea32 /* channels */, 435 | .container__91a9d /* members */, 436 | .channel__972a0 /* dms */, 437 | .side_b3f026 .item_b3f026 /* settings */ { 438 | transition: margin-left var(--list-item-transition); 439 | will-change: margin-left; 440 | } 441 | .wrapper__2ea32:hover .link__2ea32, 442 | .side_b3f026 .item_b3f026:hover { 443 | margin-left: 10px; 444 | } 445 | .container__91a9d:hover, 446 | .channel__972a0:hover { 447 | margin-left: 18px; 448 | } 449 | /* list hover channel dot */ 450 | .unread__2ea32 { 451 | border-radius: 50%; 452 | width: 8px; 453 | height: 8px; 454 | margin-left: -4px; 455 | transition: var(--list-item-transition); 456 | will-change: margin-left; 457 | } 458 | .wrapper__2ea32:hover .unread__2ea32 { 459 | margin-left: 4px; 460 | } 461 | .typeThread__2ea32 .unread__2ea32 { 462 | left: -31px; 463 | } 464 | } 465 | } 466 | 467 | /* background-image.css */ 468 | @property --background-image { 469 | syntax: 'on | off'; 470 | inherits: false; 471 | initial-value: off; 472 | } 473 | 474 | body { 475 | --background-image-url: url(''); 476 | } 477 | 478 | @container body style(--background-image: on) { 479 | .visual-refresh .bg__960e4 { 480 | background: var(--background-image-url); 481 | background-size: cover; 482 | background-position: center; 483 | } 484 | } 485 | 486 | /* colors.css */ 487 | @property --colors { 488 | syntax: 'on | off'; 489 | inherits: false; 490 | initial-value: on; 491 | } 492 | 493 | -------------------------------------------------------------------------------- /css/ThemecordFiller2nd.css: -------------------------------------------------------------------------------- 1 | @container root style(--colors: on) { 2 | .visual-refresh body, 3 | .visual-refresh .theme-dark, 4 | .visual-refresh .theme-light:not(.custom-profile-theme) { 5 | --activity-card-background: red; 6 | --alert-bg: red; 7 | --autocomplete-bg: var(--bg-3); 8 | 9 | --background-accent: var(--bg-2); 10 | --background-floating: var(--bg-3); 11 | --background-nested-floating: var(--bg-4); 12 | --background-mentioned: var(--mention); 13 | --background-mentioned-hover: var(--mention-hover); 14 | --background-message-automod: red; 15 | --background-message-automod-hover: red; 16 | --background-message-highlight: var(--reply); 17 | --background-message-highlight-hover: var(--reply-hover); 18 | --background-message-hover: var(--message-hover); 19 | 20 | --background-primary: var(--bg-4); 21 | --background-secondary: var(--bg-3); 22 | --background-secondary-alt: var(--bg-3); 23 | --background-tertiary: var(--bg-4); 24 | 25 | --bg-base-primary: var(--bg-4); /* screenshare window? */ 26 | --bg-base-secondary: var(--bg-4); 27 | --bg-base-tertiary: var(--bg-3); 28 | --background-mod-subtle: var(--bg-3); 29 | --background-mod-normal: var(--bg-3); 30 | --background-mod-strong: var(--bg-3); 31 | --background-base-low: var(--bg-4); 32 | --background-base-lower: var(--bg-4); 33 | --background-base-lowest: var(--bg-4); 34 | --background-surface-high: var(--bg-3); 35 | --background-surface-higher: var(--bg-3); 36 | --background-surface-highest: var(--bg-3); 37 | --bg-surface-overlay: var(--bg-4); 38 | --bg-surface-raised: var(--bg-3); 39 | --chat-background-default: var(--bg-3); 40 | --input-background: var(--bg-3); 41 | --modal-background: var(--bg-4); 42 | --modal-footer-background: var(--bg-4); 43 | 44 | --background-modifier-accent: var(--hover); 45 | --background-modifier-active: var(--active); 46 | --background-modifier-hover: var(--hover); 47 | --background-modifier-selected: var(--active); 48 | 49 | --bg-mod-faint: var(--hover); 50 | --bg-mod-subtle: var(--bg-2); 51 | --bg-mod-strong: var(--bg-2); 52 | --bg-brand: var(--accent-2); 53 | 54 | --border-faint: var(--border-light); 55 | --border-subtle: var(--border); 56 | --border-normal: var(--border); 57 | --border-strong: var(--border); 58 | --input-border: var(--border); 59 | 60 | --button-danger-background: var(--red-3); 61 | --button-danger-background-active: var(--red-5); 62 | --button-danger-background-hover: var(--red-4); 63 | --button-danger-background-disabled: var(--red-5); 64 | --button-danger-border: var(--button-border); 65 | 66 | --button-filled-brand-text: var(--text-0); 67 | --button-filled-brand-background: var(--accent-3); 68 | --button-filled-brand-background-active: var(--accent-5); 69 | --button-filled-brand-background-hover: var(--accent-4); 70 | --button-filled-brand-border: var(--button-border); 71 | 72 | --button-filled-brand-inverted-background: var(--text-1); 73 | --button-filled-brand-inverted-background-active: var(--text-3); 74 | --button-filled-brand-inverted-background-hover: var(--text-2); 75 | --button-filled-brand-inverted-text: var(--bg-4); 76 | --button-filled-white-background: var(--text-1); 77 | --button-filled-white-background-active: var(--text-3); 78 | --button-filled-white-background-hover: var(--text-2); 79 | --button-filled-white-text: var(--bg-4); 80 | 81 | --button-outline-danger-background: var(--bg-2); 82 | --button-outline-danger-background-active: var(--text-5); 83 | --button-outline-danger-background-hover: var(--bg-1); 84 | --button-outline-danger-border: var(--border-light); 85 | --button-outline-danger-border-active: var(--border-light); 86 | --button-outline-danger-border-hover: var(--border-light); 87 | --button-outline-danger-text: var(--red-1); 88 | --button-outline-danger-text-active: var(--red-1); 89 | --button-outline-danger-text-hover: var(--red-1); 90 | 91 | --button-outline-primary-background: red; 92 | --button-outline-primary-background-active: var(--active); 93 | --button-outline-primary-background-hover: var(--hover); 94 | --button-outline-primary-border: var(--text-5); 95 | --button-outline-primary-border-active: var(--text-5); 96 | --button-outline-primary-border-hover: var(--text-5); 97 | --button-outline-primary-text: var(--text-3); 98 | --button-outline-primary-text-active: var(--text-3); 99 | --button-outline-primary-text-hover: var(--text-3); 100 | 101 | --button-outline-positive-background: red; 102 | --button-outline-positive-background-active: var(--green-4); 103 | --button-outline-positive-background-hover: var(--green-3); 104 | --button-outline-positive-border: var(--green-2); 105 | --button-outline-positive-border-active: var(--green-4); 106 | --button-outline-positive-border-hover: var(--green-3); 107 | --button-outline-positive-text: var(--text-3); 108 | --button-outline-positive-text-active: var(--text-0); 109 | --button-outline-positive-text-hover: var(--text-0); 110 | 111 | --button-positive-background: var(--green-2); 112 | --button-positive-background-active: var(--green-4); 113 | --button-positive-background-hover: var(--green-3); 114 | --button-positive-background-disabled: var(--green-4); 115 | --button-positive-border: var(--button-border); 116 | 117 | --button-secondary-background: var(--bg-2); 118 | --button-secondary-background-active: var(--text-5); 119 | --button-secondary-background-hover: var(--bg-1); 120 | --button-secondary-background-disabled: var(--bg-3); 121 | --button-secondary-text: var(--text-3); 122 | 123 | --button-transparent-background: var(--hover); 124 | --button-transparent-background-active: var(--active-2); 125 | --button-transparent-background-hover: var(--active); 126 | --button-transparent-text: var(--text-3); 127 | 128 | --redesign-button-secondary-text: var(--text-3); 129 | 130 | --polls-voted-fill: color-mix(in hsl, var(--accent-2), transparent 90%); 131 | --polls-victor-fill: color-mix(in hsl, var(--green-2), transparent 90%); 132 | 133 | --card-primary-bg: var(--bg-3); 134 | --card-secondary-bg: var(--bg-2); 135 | --channel-icon: var(--text-4); 136 | --channels-default: var(--text-4); 137 | 138 | --embed-title: var(--text-2); 139 | 140 | --header-primary: var(--text-2); 141 | --header-secondary: var(--text-4); 142 | --header-muted: var(--text-4); 143 | 144 | --icon-muted: var(--text-5); 145 | --icon-primary: var(--text-3); 146 | --icon-secondary: var(--text-4); 147 | --icon-tertiary: var(--text-4); 148 | 149 | --info-danger-background: red; 150 | --info-danger-text: red; 151 | --info-help-background: color-mix(in hsl, var(--blue-2), transparent 80%); 152 | --info-help-foreground: var(--blue-1); 153 | --info-help-text: var(--blue-1); 154 | --info-positive-background: color-mix(in hsl, var(--yellow-1), transparent 80%); 155 | --info-positive-text: var(--green-1); 156 | --info-warning-background: color-mix(in hsl, var(--yellow-2), transparent 80%); 157 | --info-warning-text: var(--yellow-1); 158 | 159 | --text-brand: var(--accent-1); 160 | --text-danger: var(--red-1); 161 | --text-link: var(--accent-1); 162 | --text-link-low-saturation: red; 163 | --text-low-contrast: var(--text-4); 164 | --text-message-preview-low-sat: red; 165 | --text-muted: var(--text-5); 166 | --text-muted-on-default: var(--text-4); 167 | --text-normal: var(--text-3); 168 | --text-positive: var(--green-1); 169 | --text-primary: var(--text-3); 170 | --text-secondary: var(--text-4); 171 | --text-warning: var(--yellow-1); 172 | --text-default: var(--text-3); 173 | --text-feedback-critical: var(--red-1); 174 | --text-feedback-positive: var(--green-1); 175 | --text-feedback-info: red; 176 | --text-feedback-warning: red; 177 | --text-tertiary: var(--text-4); 178 | 179 | --status-danger: var(--red-2); 180 | --status-danger-background: var(--red-3); 181 | --status-danger-text: var(--white); 182 | --status-dnd: var(--dnd); /* server profiles */ 183 | --status-idle: var(--idle); 184 | --status-offline: var(--offline); 185 | --status-online: var(--online); 186 | --status-positive: var(--green-2); 187 | --status-positive-background: var(--green-2); 188 | --status-positive-text: var(--white); 189 | --status-speaking: var(--green-2); 190 | --status-warning: var(--yellow-2); 191 | --status-warning-background: red; 192 | --status-warning-text: var(--black); 193 | 194 | --background-feedback-critical: color-mix(in hsl, var(--red-2), transparent 80%); 195 | --background-feedback-info: color-mix(in hsl, var(--blue-2), transparent 80%); 196 | --background-feedback-positive: color-mix(in hsl, var(--green-2), transparent 80%); 197 | --background-feedback-warning: color-mix(in hsl, var(--yellow-2), transparent 80%); 198 | 199 | --interactive-normal: var(--text-4); 200 | --interactive-hover: var(--text-3); 201 | --interactive-active: var(--text-3); 202 | --interactive-muted: var(--text-5); 203 | 204 | --mention-foreground: var(--accent-1); 205 | --mention-background: color-mix(in hsl, var(--accent-2), transparent 90%); 206 | 207 | --channel-text-area-placeholder: var(--text-5); 208 | 209 | --message-reacted-text: var(--text-2); 210 | --message-reacted-background: color-mix(in hsl, var(--accent-2), transparent 80%); 211 | 212 | --custom-channel-members-bg: var(--bg-4); 213 | 214 | --redesign-input-control-selected: var(--accent-2); 215 | 216 | --scrollbar-auto-thumb: var(--bg-3); 217 | --scrollbar-auto-track: transparent; 218 | --scrollbar-thin-thumb: var(--bg-3); 219 | --scrollbar-thin-track: transparent; 220 | 221 | --white: var(--text-0); 222 | --white-500: var(--text-0); 223 | --redesign-button-overlay-alpha-text: var(--text-2); 224 | 225 | --brand-360: var(--accent-2); 226 | --brand-500: var(--accent-2); 227 | --blurple-50: var(--accent-2); 228 | 229 | --red-400: var(--red-2); 230 | --red-500: var(--red-3); 231 | 232 | --green-360: var(--green-2); /* seems to be mostly used by vencord plugins */ 233 | --primary-400: var(--text-4); 234 | } 235 | 236 | .visual-refresh { 237 | ::placeholder { 238 | color: var(--text-5); 239 | } 240 | 241 | .modeUnreadImportant__2ea32 .icon__2ea32, 242 | .wrapper__2ea32:hover .icon__2ea32 /* correct channel icon color */ { 243 | color: var(--text-3); 244 | } 245 | 246 | .text_b88801 > strong /* xxx is typing.. */ { 247 | color: var(--text-3); 248 | } 249 | 250 | .folder__48112[aria-expanded="false"] > .folderIconWrapper__48112 /* collapsed folders */ { 251 | --background-primary: var(--bg-3); 252 | } 253 | 254 | .panel__5dec7 /* game activity panel */, 255 | #vc-spotify-player /* vencord spotify plugin */, 256 | .container__722ff /* background between vc and vc chat */ { 257 | background: none; 258 | } 259 | 260 | .side_b3f026 .item_b3f026:hover /* settings tab */ { 261 | background-color: var(--bg-3) !important; 262 | } 263 | .side_b3f026 .item_b3f026:active, 264 | .side_b3f026 .item_b3f026.selected_b3f026 { 265 | background-color: var(--bg-2) !important; 266 | } 267 | 268 | .quickSelectPopout_ebaca5 /* dm vc region select popout */, 269 | .participantsButton__211d1 /* vc participants button */, 270 | .voiceBar__7aaec /* n in voice bar (channel list) */, 271 | .mainCard_f369db /* form posts */ { 272 | background-color: var(--bg-3); 273 | } 274 | 275 | .colorable_f1ceac.primaryDark_f1ceac, 276 | .reaction_f8896c /* forum post reaction */ { 277 | background-color: var(--bg-2); 278 | } 279 | 280 | .expandedFolderIconWrapper__48112 > svg[style="color: rgb(88, 101, 242);"] /* folder icon */ { 281 | color: var(--accent-2) !important; 282 | } 283 | .colorPickerSwatch__459fb[style="background-color: rgb(88, 101, 242);"] /* folder color picker swatch */, 284 | .newBadge_faa96b /* forum post new badge */, 285 | .mentioned__5126c:before /* mention message left edge */ { 286 | background-color: var(--accent-2) !important; 287 | } 288 | .replying__5126c:before /* reply message left edge */ { 289 | background-color: var(--text-2) !important; 290 | } 291 | 292 | #app-mount .message__5126c.replying__5126c:hover /* override fix for message reply hover */ { 293 | background: var(--reply-hover); 294 | } 295 | 296 | .visual-refresh .voiceBar__7aaec .barText__7aaec, .visual-refresh .voiceChannelsIcon__7aaec /* x in voice bar text */ { 297 | color: var(--accent-2); 298 | } 299 | 300 | .ephemeral__5126c /* ephemeral messages */ { 301 | background: var(--mention) !important; 302 | } 303 | .ephemeral__5126c:hover { 304 | background: var(--mention-hover) !important; 305 | } 306 | 307 | .botTagRegular__82f07 /* bot tag */ { 308 | background-color: var(--accent-2); 309 | } 310 | .botTagOP__82f07 /* forum post op tag */ { 311 | color: var(--text-0); 312 | } 313 | 314 | .container__87bf1 /* settings checkbutton background */ { 315 | background-color: var(--bg-1) !important; 316 | transition: background-color 0.2s ease; 317 | } 318 | .container__87bf1.checked__87bf1 /* settings checkbutton background */ { 319 | background-color: var(--accent-2) !important; 320 | } 321 | .container__87bf1 .slider__87bf1 > svg > path /* settings checkbutton check */ { 322 | fill: var(--bg-1) !important; 323 | transition: fill 0.2s ease; 324 | } 325 | .container__87bf1.checked__87bf1 .slider__87bf1 > svg > path /* settings checkbutton check */ { 326 | fill: var(--accent-2) !important; 327 | } 328 | .container__87bf1 rect[fill='white'] /* settings checkbutton slider */ { 329 | fill: var(--text-3) !important; 330 | transition: fill 0.2s ease; 331 | } 332 | .container__87bf1.checked__87bf1 rect[fill='white'] /* settings checkbutton slider */ { 333 | fill: var(--text-0) !important; 334 | } 335 | 336 | .refreshIcon__001a7 /* settings radiobutton center */ { 337 | fill: var(--text-0); 338 | } 339 | 340 | .categoryText_d02962 /* gif chooser category names */, 341 | .bannerColor_fb7f94 /* profile banner button */, 342 | .backButton_e4cb9a /* stream preview back button */, 343 | .viewersIcon_d6b206 /* stream preview viewers icon */, 344 | .bottomControls_e4cb9a /* stream preview viewer number */, 345 | .pictureInPictureVideo_e4cb9a .controlIcon_f1ceac /* stream preview control icon */, 346 | .bannerVisible_f37cb1 .name_f37cb1 /* server name over banner image */, 347 | .dropdownButtonBannerVisible__2637a /* server name over banner dropdown button */ { 348 | color: var(--text-1); 349 | } 350 | .headerText_e4cb9a.base_eb1a4c /* stream preview header text */, 351 | .participantName__2cdb8 /* stream preview participant name */ { 352 | color: var(--text-1) !important; 353 | } 354 | .playPausePopIcon_cf09d8 > path /* video play/pause popup */ { 355 | fill: var(--text-1); 356 | } 357 | .headerTitle_e4cb9a:hover /* stream preview header title hover underline */ { 358 | border-color: var(--text-1) !important; 359 | } 360 | .controlIcon_cf09d8 /* video play button */, 361 | .wrapper_cf09d8 /* video time */, 362 | .iconWrapper__6eb54 /* video initial play button */, 363 | .wrapper__926d7 /* youtube embed play button */, 364 | .viewersIcon_d6b206:hover /* stream preview viewers icon */ , 365 | .headerTitle_e4cb9a:hover .backButton_e4cb9a /* stream preview back button hover */, 366 | .viewersIcon_d6b206:hover /* stream preview viewers icon */, 367 | .pictureInPictureVideo_e4cb9a .controlIcon_f1ceac:hover /* stream preview control icon */ { 368 | color: var(--text-2); 369 | } 370 | .wrapper__926d7 a:link, 371 | .wrapper__926d7 a:visited, 372 | .headerTitle_e4cb9a:hover .headerText_e4cb9a.base_eb1a4c /* stream preview back button hover */ { 373 | color: var(--text-2) !important; 374 | } 375 | .downloadHoverButtonIcon__6c706 /* video download button */, 376 | .iconContainer__211d1>svg /* vc participants button icon */, 377 | .selectedIcon__2f4f7 /* vc selected camera icon */, 378 | .colorable_f1ceac.primaryDark_f1ceac .centerIcon_f1ceac /* vc icon button */, 379 | .colorable_f1ceac.primaryDark_f1ceac /* vc icon button nub */, 380 | .iconBadge__650eb.base__2b1f5 /* server vc badge */, 381 | #app-mount .akaBadge__488b1 /* aka badge */, 382 | .message_fcf29c /* you have unsaved settings message */, 383 | .friendRequestsButton__523aa .base__2b1f5 /* inbox friend request number */, 384 | .textBadge__2b1f5[style='background-color: var(--background-accent);'], 385 | .tooltipBlack__382e7 /* server boost tooltip */, 386 | .colorable_f1ceac.experimentDark_f1ceac, .colorable_f1ceac.experimentDark_f1ceac .centerIcon_f1ceac /* vc buttons */ { 387 | color: var(--text-3); 388 | } 389 | .status__2f4f7 path[fill='var(--white)'], 390 | .emptyChannelIcon__00de6 path[fill='var(--white)'] /* channel start icon */ { 391 | fill: var(--text-3); 392 | } 393 | .grabber_a562c8 /* vc volume slider grabber */ { 394 | background-color: var(--text-3); 395 | } 396 | .textBadge__2b1f5 /* new text badge (right click on person in vc) */ { 397 | color: var(--text-0); 398 | } 399 | 400 | .unread__3b95d /* new unreads bar (channel list */ { 401 | color: var(--text-4); 402 | } 403 | 404 | .colorable_f1ceac.white_f1ceac /* vc icon button nub when white */ { 405 | background-color: var(--primary-130); 406 | color: var(--bg-4); 407 | } 408 | 409 | .iconBadge__650eb.isCurrentUserConnected__650eb /* green vc badge when connected */ { 410 | color: var(--text-0); 411 | } 412 | 413 | .container__37e49 /* user panel buttons */, 414 | .numberBadge__2b1f5 /* unread number badge */, 415 | .toolbar__9293f /* toolbar button strikethroughs */ { 416 | --status-danger: var(--accent-new); 417 | } 418 | 419 | .container__37e49 .button__67645.redGlow__67645 /* user panel button backgrounds*/ { 420 | background-color: color-mix(in hsl, var(--accent-new), transparent 90%); 421 | } 422 | .container__37e49 .button__67645.enabled__67645.redGlow__67645:hover /* user panel button backgrounds hover */ { 423 | background-color: color-mix(in hsl, var(--accent-new), transparent 80%); 424 | } 425 | 426 | .divider__5126c /* unread divider */ { 427 | --divider-color: var(--accent-new); 428 | } 429 | 430 | .iconBadge__9293f /* icon badge */, 431 | .mentionsBar__7aaec /* new mention pill */, 432 | .mention__3b95d /* server list new mention pill */ { 433 | background-color: var(--accent-new); 434 | } 435 | 436 | .newMessagesBar__0f481 /* unread bar */ { 437 | background-color: var(--accent-3); 438 | } 439 | .barButtonAlt__0f481 /* unread bar mark as read button */ { 440 | --button-secondary-background: var(--accent-3); 441 | --button-secondary-background-hover: var(--accent-4); 442 | } 443 | 444 | .updateIconForeground__49676 /* update button */ { 445 | fill: var(--green-1); 446 | } 447 | 448 | .colorable_f1ceac.red_f1ceac:hover /* vc disconnect button hover */ { 449 | background-color: var(--red-4); 450 | } 451 | .button_f7ecac.dangerous_f7ecac:hover /* image attachment delete button hover in chat bar */ { 452 | color: var(--red-4); 453 | } 454 | .contentWrapper__08434 ::-webkit-scrollbar-thumb /* gif picker scrollbar */ { 455 | background-color: var(--bg-1); 456 | } 457 | 458 | .circleIconButton__5bc7e /* new server button */ { 459 | color: var(--text-3); 460 | } 461 | .circleIconButton__5bc7e:hover { 462 | color: var(--bg-4); 463 | } 464 | 465 | .tooltipGrey__382e7 /* spotify plugin time tooltip */ { 466 | color: var(--text-3); 467 | background-color: var(--bg-3); 468 | } 469 | 470 | .textContentFooter__9a337 /* forum post image fade */ { 471 | background: linear-gradient(0deg, var(--bg-4), transparent); 472 | } 473 | 474 | .result__2dc39:after /* remove gif hover overlay */ { 475 | display: none; 476 | } 477 | .result__2dc39:hover /* gif hover */ { 478 | outline: 2px solid var(--accent-2); 479 | } 480 | 481 | .reactionBtn__23977.forceShow__23977:hover /* fix add reaction button border hover */ { 482 | border-color: var(--bg-2); 483 | } 484 | 485 | .flash__03436[data-flash=true] /* reply message flash */ { 486 | background: var(--background-message-highlight); 487 | } 488 | 489 | /* status indicators */ 490 | rect[fill='#83838b'] { 491 | fill: var(--offline); 492 | } 493 | .status_a423bd[style='background-color: rgb(131, 131, 139);'] { 494 | background-color: var(--offline) !important; 495 | } 496 | rect[fill='#43a25a'], 497 | path[fill='#43a25a'] /* status activity icon */, 498 | .vc-platform-indicator > svg[fill="#43a25a"] { 499 | fill: var(--online); 500 | } 501 | .status_a423bd[style='background-color: rgb(67, 162, 90);'] { 502 | background-color: var(--online) !important; 503 | } 504 | rect[fill='#ca9654'], 505 | .vc-platform-indicator > svg[fill='#ca9654'] { 506 | fill: var(--idle); 507 | } 508 | .status_a423bd[style='background-color: rgb(201, 150, 86);'] { 509 | background-color: var(--idle) !important; 510 | } 511 | rect[fill='#d83a42'], 512 | .vc-platform-indicator > svg[fill='#d83a42'] { 513 | fill: var(--dnd); 514 | } 515 | .status_a423bd[style='background-color: rgb(216, 58, 66);'] { 516 | background-color: var(--dnd) !important; 517 | } 518 | rect[fill='#9147ff'] { 519 | fill: var(--streaming); 520 | } 521 | div[style='display: flex; justify-content: center; align-items: center; border-radius: 5px; background-color: rgb(67, 162, 90); height: 10px; width: 25px;'] { 522 | background-color: var(--online) !important; 523 | } 524 | 525 | /* fix radio bar button colors */ 526 | .radioBar__001a7[style='--radio-bar-accent-color: var(--yellow-360); padding: 10px;'] { 527 | --radio-bar-accent-color: var(--yellow-2) !important; 528 | } 529 | .radioBar__001a7[style='--radio-bar-accent-color: var(--green-360); padding: 10px;'] { 530 | --radio-bar-accent-color: var(--green-2) !important; 531 | } 532 | .radioBar__001a7[style='--radio-bar-accent-color: var(--red-400); padding: 10px;'] { 533 | --radio-bar-accent-color: var(--red-2) !important; 534 | } 535 | 536 | #vc-spotify-player { 537 | --vc-spotify-green: var(--accent-2); 538 | } 539 | 540 | ::selection, 541 | .highlight { 542 | background: var(--accent-3); 543 | color: var(--text-0); 544 | } 545 | } 546 | } 547 | 548 | /* dms-button.css */ 549 | @property --dms-icon { 550 | syntax: 'default | off | on'; 551 | inherits: false; 552 | initial-value: on; 553 | } 554 | 555 | body { 556 | --dms-icon-svg-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* icon svg url. MUST BE A SVG. */ 557 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size) */ 558 | --dms-icon-color-before: var(--icon-secondary); 559 | --dms-icon-color-after: var(--white); 560 | --dms-background-image-url: url('https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png'); 561 | --dms-background-image-size: cover; /* size of the background image (css background-size) */ 562 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* color of the background image (css background) */ 563 | } 564 | 565 | @container body style(--dms-icon: on) { 566 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 > svg { 567 | display: none; 568 | } 569 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8::before { 570 | content: ''; 571 | display: block; 572 | position: absolute; 573 | width: 65%; 574 | height: 65%; 575 | background: var(--dms-icon-color-before); 576 | mask-image: var(--dms-icon-svg-url); 577 | mask-size: var(--dms-icon-svg-size); 578 | mask-position: center; 579 | mask-repeat: no-repeat; 580 | transition: background-color 0.15s ease-out; 581 | } 582 | .wrapper__6e9f8[data-list-item-id='guildsnav___home']:hover > .childWrapper__6e9f8::before { 583 | transform: rotate(0deg) scale(1); 584 | } 585 | .wrapper__6e9f8[data-list-item-id='guildsnav___home']:hover > .childWrapper__6e9f8::before, 586 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'].selected__6e9f8 > .childWrapper__6e9f8::before { 587 | background: var(--dms-icon-color-after); 588 | transform: rotate(-360deg) scale(0.8); 589 | } 590 | 591 | @container body style(--animations: on) { 592 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] .childWrapper__6e9f8::before { 593 | transition: background-color 0.15s ease-out, transform var(--dms-icon-svg-transition); 594 | } 595 | } 596 | } 597 | 598 | @container body style(--dms-icon: off) { 599 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 > svg { 600 | display: none; 601 | } 602 | } 603 | 604 | @property --dms-background { 605 | syntax: 'off | image | color'; 606 | inherits: false; 607 | initial-value: off; 608 | } 609 | 610 | @container body style(--dms-background: image) { 611 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 { 612 | background-image: var(--dms-background-image-url); 613 | background-color: transparent !important; 614 | background-size: var(--dms-background-image-size); 615 | background-position: center; 616 | background-repeat: no-repeat; 617 | } 618 | } 619 | 620 | @container body style(--dms-background: color) { 621 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 { 622 | background: var(--dms-background-color); 623 | } 624 | } 625 | 626 | /* flipped-chatbar.css */ 627 | @property --flipped-chatbar { 628 | syntax: 'on | off'; 629 | inherits: false; 630 | initial-value: on; 631 | } 632 | 633 | body { 634 | --chatbar-height: 47px; /* height of the chatbar */ 635 | --chatbar-padding: 8px; /* padding of the chatbar */ 636 | --custom-channel-textarea-text-area-height: var(--chatbar-height); 637 | } 638 | 639 | @container body style(--flipped-chatbar: on) { 640 | .visual-refresh { 641 | .form_f75fb0 { 642 | margin: 0 var(--chatbar-padding) var(--chatbar-padding) var(--chatbar-padding); 643 | padding: 0; 644 | --chatbar-border-color: var(--border-faint); 645 | } 646 | .channelTextArea_f75fb0 { 647 | margin: 0; 648 | border-color: var(--chatbar-border-color); 649 | transition: none; 650 | } 651 | .base_b88801 { 652 | top: -24px; 653 | left: 0; 654 | right: 0; 655 | background-color: var(--chat-background-default); 656 | padding: 0 8px; 657 | border-radius: var(--radius-md) var(--radius-md) 0 0; 658 | border: 1px solid var(--chatbar-border-color); 659 | border-bottom: none; 660 | transition: none; 661 | box-sizing: border-box; 662 | } 663 | .stackedBars__74017, 664 | .threadSuggestionBar__841c8 { 665 | border-color: var(--chatbar-border-color) !important; 666 | } 667 | .stackedBars__74017 { 668 | background: none !important; 669 | } 670 | .form_f75fb0:has(.base_b88801) { 671 | .channelTextArea_f75fb0, 672 | .wrapper__44df5 { 673 | border-radius: 0 0 var(--radius-md) var(--radius-md); 674 | } 675 | } 676 | .form_f75fb0:has(.channelTextArea__74017:focus-within) { 677 | --chatbar-border-color: var(--border-subtle); 678 | } 679 | .scrollerSpacer__36d07 { 680 | height: calc(24px + var(--chatbar-padding)); 681 | } 682 | .scroller__36d07::-webkit-scrollbar-track { 683 | margin-bottom: calc(20px + var(--chatbar-padding)); 684 | } 685 | .bottomBar__0f481 { 686 | margin-bottom: 24px; 687 | } 688 | .wrapper__44df5 /* phone verification bar */ { 689 | margin: 0; 690 | border-radius: var(--radius-md); 691 | } 692 | } 693 | } 694 | 695 | /* top-bar.css */ 696 | @property --move-top-bar-buttons { 697 | syntax: 'on | off'; 698 | inherits: false; 699 | initial-value: off; 700 | } 701 | 702 | @container body style(--move-top-bar-buttons: on) { 703 | .visual-refresh { 704 | /* remove help button */ 705 | .trailing_c38106 > a[href="https://support.discord.com"] 706 | { 707 | display: none; 708 | } 709 | 710 | /* make server list inner scroll */ 711 | .stack_dbd263 { 712 | overflow: hidden scroll; 713 | scrollbar-width: none; 714 | } 715 | /* create space for inbox button */ 716 | .tutorialContainer__1f388 { 717 | margin-bottom: 48px; 718 | } 719 | /* move inbox button */ 720 | .recentsIcon_c99c29 { 721 | position: fixed; 722 | width: 40px; 723 | height: 40px; 724 | top: calc(var(--custom-app-top-bar-height) + 1px + var(--custom-guild-list-padding) + 48px); 725 | left: calc(var(--gap) + 1px + var(--custom-guild-list-padding)); 726 | } 727 | /* style inbox button */ 728 | .recentsIcon_c99c29 .button__85643 { 729 | width: 100%; 730 | height: 100%; 731 | background-color: var(--background-surface-higher); 732 | border-radius: var(--radius-md); 733 | transition: background-color 0.15s ease-out; 734 | 735 | &:hover { 736 | background-color: var(--bg-brand); 737 | 738 | .icon__9293f { 739 | color: var(--white); 740 | } 741 | } 742 | } 743 | .recentsIcon_c99c29 .svg__2338f { 744 | transition: color 0.15s ease-out; 745 | width: 24px; 746 | height: 24px; 747 | } 748 | /* shift inbox popup panel into view */ 749 | .recentMentionsPopout__95796 { 750 | transform: translateX(100%); 751 | } 752 | /* move top bar title */ 753 | .title_c38106 { 754 | padding-left: var(--gap); 755 | justify-content: flex-start; 756 | } 757 | .title__85643 { 758 | gap: 4px; 759 | } 760 | /* style top bar title */ 761 | .title__85643 .icon_f34534 { 762 | width: 16px; 763 | height: 16px; 764 | display: none; 765 | } 766 | .title__85643 .text-sm\/medium_cf4812 { 767 | line-height: 90%; 768 | color: var(--text-muted); 769 | font-weight: 700; 770 | } 771 | 772 | /* fix settings animation transform */ 773 | .layer__960e4.baseLayer__960e4 { 774 | transform: none !important; 775 | } 776 | .layers__960e4 > .layer__960e4.animating__960e4 { 777 | will-change: opacity; 778 | } 779 | 780 | /* unread icon */ 781 | .recentsIcon_c99c29 .iconBadge__9293f { 782 | --custom-icon-offset: 8px; 783 | width: 10px; 784 | height: 10px; 785 | transition: background 0.15s ease-out; 786 | } 787 | 788 | .recentsIcon_c99c29:hover .iconBadge__9293f { 789 | background: var(--white); 790 | } 791 | } 792 | } 793 | 794 | /* transparency-blur.css */ 795 | @property --panel-blur { 796 | syntax: 'on | off'; 797 | inherits: false; 798 | initial-value: off; 799 | } 800 | 801 | @container body style(--panel-blur: on) { 802 | .visual-refresh { 803 | #app-mount { 804 | --panel-backdrop-filter: blur(var(--blur-amount)); 805 | } 806 | 807 | .popoverReactionHoverBar_f84418 /* message hover quick action bar */, 808 | .tooltip__382e7 /* tooltips */ { 809 | background: var(--bg-floating); 810 | } 811 | .menu_c1e9c4 /* context menus */, 812 | .contentWrapper__08434 /* emoji/gif panel */, 813 | .root__49fc1 /* modals like invite */, 814 | .outer_c0bea0.biteSize_c0bea0:not(.custom-theme-background) /* small profile popup */, 815 | .autocomplete__6b0e0 /* autocomplete */, 816 | .container__55c99 /* search suggestions */, 817 | .messagesPopoutWrap__45690 /* inbox */, 818 | .popout__76f04 /* channel hover popout */ { 819 | background: var(--bg-floating); 820 | } 821 | } 822 | } 823 | 824 | @property --transparency-tweaks { 825 | syntax: 'on | off'; 826 | inherits: false; 827 | initial-value: off; 828 | } 829 | 830 | @container body style(--transparency-tweaks: on) { 831 | .visual-refresh { 832 | .formWithLoadedChatInput_f75fb0:before, 833 | .children__9293f:after { 834 | display: none; 835 | } 836 | } 837 | } 838 | 839 | @property --remove-bg-layer { 840 | syntax: 'on | off'; 841 | inherits: false; 842 | initial-value: off; 843 | } 844 | 845 | @container body style(--remove-bg-layer: on) { 846 | .bg__960e4 { 847 | background: transparent !important; 848 | } 849 | } 850 | 851 | /* user-panel.css */ 852 | @property --small-user-panel { 853 | syntax: 'on | off'; 854 | inherits: false; 855 | initial-value: off; 856 | } 857 | 858 | @container body style(--small-user-panel: on) { 859 | .visual-refresh { 860 | .base_c48ade { 861 | grid-template-areas: 862 | 'titleBar titleBar titleBar' 863 | 'guildsList notice notice' 864 | 'guildsList channelsList page' 865 | 'guildsList userPanel page'; 866 | } 867 | .panels_c48ade { 868 | max-width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width)); 869 | } 870 | } 871 | } 872 | 873 | /* window-controls.css */ 874 | @property --custom-window-controls { 875 | syntax: 'on | off'; 876 | inherits: false; 877 | initial-value: off; 878 | } 879 | 880 | body { 881 | --window-control-size: 14px; 882 | } 883 | 884 | @container body style(--custom-window-controls: on) { 885 | .winButtons_c38106 { 886 | gap: 0; 887 | padding-right: calc(var(--gap) - (var(--window-control-size) / 2) + 1px); 888 | } 889 | .winButtons_c38106::before { 890 | margin-right: calc(var(--custom-app-top-bar-height) / 4); 891 | } 892 | .winButton_c38106 > svg { 893 | display: none; 894 | } 895 | .winButton_c38106 { 896 | background: none !important; 897 | width: calc(var(--window-control-size) * 2); 898 | height: var(--custom-app-top-bar-height); 899 | } 900 | .winButton_c38106::after { 901 | display: block; 902 | content: ''; 903 | height: var(--window-control-size); 904 | width: var(--window-control-size); 905 | border-radius: 50%; 906 | } 907 | .winButton_c38106:hover::after { 908 | filter: brightness(0.7); 909 | } 910 | .winButton_c38106:active::after { 911 | transform: scale(0.9); 912 | } 913 | .winButtonClose_c38106::after { 914 | background-color: var(--dnd) !important; 915 | } 916 | .winButtonMinMax_c38106:nth-child(1)::after { 917 | background-color: var(--idle) !important; 918 | } 919 | .winButtonMinMax_c38106:nth-child(2)::after { 920 | background-color: var(--online) !important; 921 | } 922 | } 923 | -------------------------------------------------------------------------------- /css/dark_theme.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | /* text colors */ 4 | --text-0: var(--color13); 5 | --text-1: var(--color13); 6 | --text-2: var(--color14); 7 | --text-3: var(--color15); 8 | --text-4: var(--color15); 9 | --text-5: var(--color14); 10 | 11 | /* background and dark colors */ 12 | --bg-1: var(--color5); 13 | --bg-2: var(--color4); 14 | --bg-3: var(--color2); 15 | --bg-4: var(--color8); 16 | 17 | /* hover and active states, smoother for better user experience */ 18 | --hover: color-mix(in srgb, var(--color14) 20%, transparent); 19 | --active: color-mix(in srgb, var(--color14) 30%, transparent); 20 | --active-2: color-mix(in srgb, var(--color14) 50%, transparent); 21 | --message-hover: color-mix(in srgb, white 15%, transparent); 22 | 23 | /* accent colors (muted and balanced) */ 24 | --red-1: color-mix(in srgb, #fff 50%, var(--color6)); 25 | --red-2: color-mix(in srgb, #ff4d4d 50%, transparent); 26 | --red-3: color-mix(in srgb, #ff4d4d 40%, var(--color5)); 27 | --red-4: color-mix(in srgb, #ff4d4d 30%, var(--color5)); 28 | --red-5: color-mix(in srgb, #ff4d4d 20%, var(--color5)); 29 | 30 | --green-1: color-mix(in srgb, #b2f2bb 30%, var(--color1)); 31 | --green-2: color-mix(in srgb, #70e09c 30%, var(--color2)); 32 | --green-3: color-mix(in srgb, #43a25a 30%, var(--color3)); 33 | --green-4: color-mix(in srgb, #33834a 30%, var(--color4)); 34 | --green-5: color-mix(in srgb, #2c6d3e 30%, var(--color5)); 35 | 36 | --blue-1: var(--color3); 37 | --blue-2: var(--color4); 38 | --blue-3: var(--color5); 39 | --blue-4: var(--color6); 40 | --blue-5: var(--color7); 41 | 42 | /* yellow tones, subtly muted for dark mode */ 43 | --yellow-1: color-mix(in srgb, #ffe29a 40%, var(--color2)); 44 | --yellow-2: color-mix(in srgb, #ffd166 40%, var(--color3)); 45 | --yellow-3: color-mix(in srgb, #e6b34f 40%, var(--color4)); 46 | --yellow-4: color-mix(in srgb, #ca9654 40%, var(--color5)); 47 | --yellow-5: color-mix(in srgb, #a57433 40%, var(--color6)); 48 | 49 | --purple-1: color-mix(in srgb, #d3b3ff 60%, var(--color2)); 50 | --purple-2: color-mix(in srgb, #b47aff 40%, var(--color3)); 51 | --purple-3: color-mix(in srgb, #8c4dff 40%, var(--color4)); 52 | --purple-4: color-mix(in srgb, #6a36d9 40%, var(--color5)); 53 | --purple-5: color-mix(in srgb, #593695 40%, var(--color6)); 54 | 55 | /* status indicator colors */ 56 | --online: var(--green-2); 57 | --dnd: var(--red-2); 58 | --idle: var(--yellow-2); 59 | --streaming: var(--purple-2); 60 | --offline: var(--text-4); 61 | 62 | /* border colors (light but defined) */ 63 | --border-light: color-mix(in srgb, var(--color15) 15%, transparent); /* Soft border */ 64 | --border: color-mix(in srgb, var(--color15) 25%, transparent); 65 | --button-border: color-mix(in srgb, var(--color15) 15%, transparent); 66 | 67 | /* accent colors */ 68 | --accent-1: var(--blue-5); 69 | --accent-2: var(--blue-2); 70 | --accent-3: var(--blue-3); 71 | --accent-4: var(--blue-4); 72 | --accent-5: var(--blue-1); 73 | --accent-new: var(--blue-2); 74 | 75 | /* gradients (subtle, soft tones) */ 76 | --mention: linear-gradient(to right, color-mix(in srgb, var(--blue-2) 15%, transparent) 50%, transparent); 77 | --mention-hover: linear-gradient(to right, color-mix(in srgb, var(--blue-2) 10%, transparent) 50%, transparent); 78 | --reply: linear-gradient(to right, color-mix(in srgb, var(--text-3) 15%, transparent) 50%, transparent); 79 | --reply-hover: linear-gradient(to right, color-mix(in srgb, var(--text-3) 10%, transparent) 50%, transparent); 80 | } 81 | -------------------------------------------------------------------------------- /css/hellwal/discord-colors.css: -------------------------------------------------------------------------------- 1 | --background: #%% background.hex %%; 2 | --foreground: #%% foreground.hex %%; 3 | --cursor: #%% cursor.hex %%; 4 | --border: #%% border.hex %%; 5 | 6 | --color0: #%% color0.hex %%; 7 | --color1: #%% color1.hex %%; 8 | --color2: #%% color2.hex %%; 9 | --color3: #%% color3.hex %%; 10 | --color4: #%% color4.hex %%; 11 | --color5: #%% color5.hex %%; 12 | --color6: #%% color6.hex %%; 13 | --color7: #%% color7.hex %%; 14 | --color8: #%% color8.hex %%; 15 | --color9: #%% color9.hex %%; 16 | --color10: #%% color10.hex %%; 17 | --color11: #%% color11.hex %%; 18 | --color12: #%% color12.hex %%; 19 | --color13: #%% color13.hex %%; 20 | --color14: #%% color14.hex %%; 21 | --color15: #%% color15.hex %%; 22 | -------------------------------------------------------------------------------- /css/light_theme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* text colors */ 3 | --text-0: var(--color1); 4 | --text-1: var(--color5); 5 | --text-2: var(--color3); 6 | --text-3: var(--color2); 7 | --text-4: var(--color1); 8 | --text-5: var(--color0); 9 | 10 | /* background */ 11 | --bg-1: var(--color9); 12 | --bg-2: var(--color8); 13 | --bg-3: var(--color7); 14 | --bg-4: var(--color6); 15 | --hover: color-mix(in srgb, var(--color4) 15%, transparent); 16 | --active: color-mix(in srgb, var(--color4) 25%, transparent); 17 | --active-2: color-mix(in srgb, var(--color4) 35%, transparent); 18 | --message-hover: color-mix(in srgb, black 10%, transparent); 19 | 20 | --red-1: color-mix(in srgb, #fff 40%, var(--color6)); 21 | --red-2: color-mix(in srgb, #ff4d4d 85%, transparent); 22 | --red-3: color-mix(in srgb, #ff4d4d 70%, var(--color10)); 23 | --red-4: color-mix(in srgb, #ff4d4d 55%, var(--color10)); 24 | --red-5: color-mix(in srgb, #ff4d4d 40%, var(--color10)); 25 | 26 | --green-1: color-mix(in srgb, #b2f2bb 80%, var(--color1)); 27 | --green-2: color-mix(in srgb, #70e09c 80%, var(--color2)); 28 | --green-3: color-mix(in srgb, #43a25a 80%, var(--color3)); 29 | --green-4: color-mix(in srgb, #33834a 80%, var(--color4)); 30 | --green-5: color-mix(in srgb, #2c6d3e 80%, var(--color5)); 31 | 32 | --blue-1: var(--color2); 33 | --blue-2: var(--color3); 34 | --blue-3: var(--color4); 35 | --blue-4: var(--color5); 36 | --blue-5: var(--color6); 37 | 38 | --yellow-1: color-mix(in srgb, #ffe29a 100%, var(--color2)); 39 | --yellow-2: color-mix(in srgb, #ffd166 80%, var(--color3)); 40 | --yellow-3: color-mix(in srgb, #e6b34f 80%, var(--color4)); 41 | --yellow-4: color-mix(in srgb, #ca9654 80%, var(--color5)); 42 | --yellow-5: color-mix(in srgb, #a57433 80%, var(--color6)); 43 | 44 | --purple-1: color-mix(in srgb, #d3b3ff 100%, var(--color2)); 45 | --purple-2: color-mix(in srgb, #b47aff 80%, var(--color3)); 46 | --purple-3: color-mix(in srgb, #8c4dff 80%, var(--color4)); 47 | --purple-4: color-mix(in srgb, #6a36d9 80%, var(--color5)); 48 | --purple-5: color-mix(in srgb, #593695 80%, var(--color6)); 49 | 50 | /* status indicator colors */ 51 | --online: var(--green-2); 52 | --dnd: var(--red-2); 53 | --idle: var(--yellow-2); 54 | --streaming: var(--purple-2); 55 | --offline: var(--text-4); 56 | 57 | /* border colors */ 58 | --border-light: color-mix(in srgb, var(--color3) 20%, transparent); 59 | --border: color-mix(in srgb, var(--color3) 30%, transparent); 60 | --button-border: color-mix(in srgb, var(--color0) 15%, transparent); 61 | 62 | /* accent colors */ 63 | --accent-1: var(--blue-1); 64 | --accent-2: var(--blue-2); 65 | --accent-3: var(--blue-3); 66 | --accent-4: var(--blue-4); 67 | --accent-5: var(--blue-5); 68 | --accent-new: var(--blue-2); 69 | 70 | /* gradients */ 71 | --mention: linear-gradient(to right, color-mix(in srgb, var(--blue-2) 20%, transparent) 40%, transparent); 72 | --mention-hover: linear-gradient(to right, color-mix(in srgb, var(--blue-2) 15%, transparent) 40%, transparent); 73 | --reply: linear-gradient(to right, color-mix(in srgb, var(--text-3) 20%, transparent) 40%, transparent); 74 | --reply-hover: linear-gradient(to right, color-mix(in srgb, var(--text-3) 15%, transparent) 40%, transparent); 75 | } 76 | 77 | -------------------------------------------------------------------------------- /css/pywal/discord-colors.css: -------------------------------------------------------------------------------- 1 | --color0: {color0}; 2 | --color1: {color1}; 3 | --color2: {color2}; 4 | --color3: {color3}; 5 | --color4: {color4}; 6 | --color5: {color5}; 7 | --color6: {color6}; 8 | --color7: {color7}; 9 | --color8: {color8}; 10 | --color9: {color9}; 11 | --color10: {color10}; 12 | --color11: {color11}; 13 | --color12: {color12}; 14 | --color13: {color13}; 15 | --color14: {color14}; 16 | --color15: {color15}; 17 | -------------------------------------------------------------------------------- /css/wallust/discord-colors.css: -------------------------------------------------------------------------------- 1 | --color0: {{ color0 }}; 2 | --color1: {{ color1 }}; 3 | --color2: {{ color2 }}; 4 | --color3: {{ color3 }}; 5 | --color4: {{ color4 }}; 6 | --color5: {{ color5 }}; 7 | --color6: {{ color6 }}; 8 | --color7: {{ color7 }}; 9 | --color8: {{ color8 }}; 10 | --color9: {{ color9 }}; 11 | --color10: {{ color10 }}; 12 | --color11: {{ color11 }}; 13 | --color12: {{ color12 }}; 14 | --color13: {{color13 }}; 15 | --color14: {{color14 }}; 16 | --color15: {{color15 }}; 17 | -------------------------------------------------------------------------------- /css/wallust/wallust.toml: -------------------------------------------------------------------------------- 1 | [templates] 2 | themecord.template = "colors-discord.css" 3 | themecord.target = '~/.cache/wallust/colors-discord.css' 4 | -------------------------------------------------------------------------------- /default.nix: -------------------------------------------------------------------------------- 1 | { pkgs, ... }: 2 | 3 | let 4 | themecordFiller = builtins.readFile ./css/ThemecordFiller.css; 5 | themecordFiller2 = builtins.readFile ./css/ThemecordFiller2nd.css; 6 | 7 | dark_theme = builtins.readFile ./css/dark_theme.css; 8 | light_theme = builtins.readFile ./css/light_theme.css; 9 | 10 | themecordBase = builtins.readFile ./css/Themecord.css; 11 | discordColorsContent = builtins.readFile ./scripts/themecord.sh; 12 | 13 | pywalTemplate = pkgs.writeTextFile { 14 | name = "pywal-template"; 15 | destination = "~/.config/wal/templates/colors-discord.css"; 16 | text = builtins.readFile ./css/pywal/colors-discord.css; 17 | }; 18 | 19 | wallustConfig = pkgs.writeTextFile { 20 | name = "wallust-config"; 21 | destination = "~/.config/wallust/wallust.toml"; 22 | text = builtins.readFile ./css/wallust/wallust.toml; 23 | }; 24 | 25 | wallustTemplate = pkgs.writeTextFile { 26 | name = "wallust-template"; 27 | destination = "~/.config/wallust/templates/colors-discord.css"; 28 | text = builtins.readFile ./css/wallust/colors-discord.css; 29 | }; 30 | 31 | in 32 | pkgs.writeScriptBin "themecord" '' 33 | #!/usr/bin/env bash 34 | 35 | # Generated by nix 36 | themecordFiller=$(cat << 'EOF' 37 | ${themecordFiller} 38 | EOF 39 | ) 40 | themecordFiller2=$(cat << 'EOF' 41 | ${themecordFiller2} 42 | EOF 43 | ) 44 | dark_theme=$(cat << 'EOF' 45 | ${dark_theme} 46 | EOF 47 | ) 48 | light_theme=$(cat << 'EOF' 49 | ${light_theme} 50 | EOF 51 | ) 52 | themecordBase=$(cat << 'EOF' 53 | ${themecordBase} 54 | EOF 55 | ) 56 | ${discordColorsContent} 57 | '' 58 | 59 | -------------------------------------------------------------------------------- /example/example.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # pick some wallpaper (for example this one) 4 | wallpaper=./test-wallpaper.jpg 5 | 6 | # Use hellwal 7 | hellwal -i $wallpaper 8 | themecord -g # -g for hellwal - Generate Themecord.css from new color palette 9 | 10 | 11 | 12 | # Use pywal 13 | wal -i $wallpaper 14 | themecord -p # -p for pywal - Generate Themecord.css from new color palette 15 | 16 | 17 | 18 | # Use wallust 19 | wallust run $wallpaper 20 | themecord -w # -w for wallust - Generate Themecord.css from new color palette 21 | 22 | 23 | 24 | # Use wallpaper daemon of your choice and change wallpaper 25 | 26 | # WAYLAND 27 | # swww img $wallpaper 28 | # swaybg -i $wallpaper 29 | # hyprpaper wallpaper $wallpaper 30 | 31 | # X 32 | # feh --bg-scale $wallpaper 33 | 34 | # next reload your bar, wm etc. etc. 35 | -------------------------------------------------------------------------------- /example/test-wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danihek/Themecord/2117717f830c4847eafc450319de26ae09ac9277/example/test-wallpaper.jpg -------------------------------------------------------------------------------- /flake.lock: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": { 3 | "nixpkgs": { 4 | "locked": { 5 | "lastModified": 1730200266, 6 | "narHash": "sha256-l253w0XMT8nWHGXuXqyiIC/bMvh1VRszGXgdpQlfhvU=", 7 | "owner": "nixos", 8 | "repo": "nixpkgs", 9 | "rev": "807e9154dcb16384b1b765ebe9cd2bba2ac287fd", 10 | "type": "github" 11 | }, 12 | "original": { 13 | "owner": "nixos", 14 | "ref": "nixos-unstable", 15 | "repo": "nixpkgs", 16 | "type": "github" 17 | } 18 | }, 19 | "root": { 20 | "inputs": { 21 | "nixpkgs": "nixpkgs" 22 | } 23 | } 24 | }, 25 | "root": "root", 26 | "version": 7 27 | } 28 | -------------------------------------------------------------------------------- /flake.nix: -------------------------------------------------------------------------------- 1 | { 2 | description = "Themecord flake.nix"; 3 | 4 | inputs = 5 | { 6 | nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable"; 7 | }; 8 | 9 | outputs = { self, nixpkgs }: 10 | let 11 | system = "x86_64-linux"; 12 | pkgs = nixpkgs.legacyPackages.${system}; 13 | in 14 | { 15 | packages.${system}.default = (import ./default.nix { 16 | inherit pkgs; 17 | }); 18 | }; 19 | } 20 | 21 | -------------------------------------------------------------------------------- /midnight.css: -------------------------------------------------------------------------------- 1 | /* main.css */ 2 | @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 3 | 4 | :root { 5 | container-name: root; 6 | --custom-guild-list-padding: 12px; 7 | --panel-backdrop-filter: none; 8 | } 9 | 10 | body { 11 | container-name: body; 12 | 13 | /* font, change to '' for default discord font */ 14 | --font: 'figtree'; 15 | 16 | /* sizes */ 17 | --gap: 12px; /* spacing between panels */ 18 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 19 | } 20 | 21 | .visual-refresh { 22 | /* panel separation */ 23 | .guilds_c48ade /* server list */, 24 | .sidebarList_c48ade /* channel list (includes dm list) */, 25 | .panels_c48ade /* user panel */, 26 | .chat_f75fb0 > .subtitleContainer_f75fb0 /* chat titlebar */, 27 | .chatContent_f75fb0 /* chat */, 28 | .container_c8ffbb /* member list */, 29 | .content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */, 30 | .container__133bf > .container__9293f /* friends titlebar */, 31 | .container_f391e3 > .container__9293f /* message requests titlebar */, 32 | .homeWrapper__0920e > .container__9293f /* nitro page titlebar */, 33 | .container__01ae2 > .container__9293f /* vc chat titlebar */, 34 | .container_fb64c9 > .container__9293f /* new thread panel */, 35 | .peopleColumn__133bf /* online friends */, 36 | .nowPlayingColumn__133bf /* active now */, 37 | .scroller_c880e8 /* nitro page */, 38 | .container_f391e3 > .content_f75fb0 /* message requests */, 39 | .shop__6db1d /* shop */, 40 | .outer_c0bea0.panel_c0bea0 /* dm user panel */, 41 | .searchResultsWrap_a9e706 /* search results */, 42 | .container_f369db /* forum */, 43 | .chat_fb64c9 /* new thread panel */, 44 | .container_a592e1 /* server discovery */, 45 | .callContainer_cb9592 /* vc container */, 46 | .callContainer__722ff /* stage */ { 47 | background-color: var(--background-base-lower); 48 | border-radius: var(--radius-lg); 49 | border: 1px solid var(--border-subtle); 50 | backdrop-filter: var(--panel-backdrop-filter); 51 | } 52 | 53 | .base_c48ade /* base grid */ { 54 | display: grid; 55 | grid-template-columns: [start] min-content [guildsEnd] min-content [channelsEnd] 1fr [end]; 56 | grid-template-rows: [top] var(--custom-app-top-bar-height) [titleBarEnd] min-content [noticeEnd] 1fr [contentEnd] min-content [end]; 57 | grid-template-areas: 58 | 'titleBar titleBar titleBar' 59 | 'guildsList notice notice' 60 | 'guildsList channelsList page' 61 | 'userPanel userPanel page'; 62 | gap: 0 var(--gap); 63 | } 64 | 65 | .panels_c48ade /* user panel */ { 66 | width: 100%; 67 | position: static; 68 | grid-area: userPanel; 69 | margin: var(--gap) 0 0 0; 70 | overflow: hidden; 71 | max-width: calc(var(--custom-guild-sidebar-width) + var(--gap) + 4px); 72 | } 73 | 74 | .sidebar_c48ade /* server list + channel list + user panel group */ { 75 | margin: 0 0 var(--gap) var(--gap); 76 | } 77 | 78 | .guilds_c48ade /* server list */ { 79 | margin-bottom: 0; 80 | } 81 | .scroller_ef3116 /* server list inner scroller */ { 82 | padding-top: var(--custom-guild-list-padding); 83 | } 84 | 85 | .container__2637a /* channel list inner */ { 86 | padding-bottom: 0; 87 | } 88 | .clickable_f37cb1, 89 | .container__2637a /* channel list inner */, 90 | .header_f37cb1 /* server name */ { 91 | background: none; 92 | } 93 | 94 | /* fix discord's idiotic server banners */ 95 | .bannerImage_f37cb1, 96 | .bannerImg_f37cb1 { 97 | width: 100%; 98 | } 99 | .bannerVisible_f37cb1 .headerEllipseBackdrop_f37cb1 { 100 | display: none; 101 | } 102 | .headerGlass_f37cb1 { 103 | top: 0; 104 | left: 0; 105 | right: 0; 106 | width: auto; 107 | border-radius: var(--radius-lg) var(--radius-lg) 0 0; 108 | } 109 | 110 | .sidebar_c48ade:after /* server list + channel list bottom shadow */ { 111 | display: none; 112 | } 113 | 114 | .chat_f75fb0 /* chat group outer */ { 115 | border: none !important; 116 | background: none; 117 | } 118 | .container__133bf /* friends page group outer */, 119 | .page_c48ade { 120 | padding-bottom: var(--gap); 121 | padding-right: var(--gap); 122 | border: none !important; 123 | background: none; 124 | } 125 | .page_c48ade > .chat_f75fb0, 126 | .page_c48ade > .container__133bf { 127 | padding: 0; 128 | } 129 | 130 | .container__9293f /* friends, message requests, + other stuff titlebar */ { 131 | margin-bottom: var(--gap); 132 | } 133 | 134 | .subtitleContainer_f75fb0 /* chat titlebar */ { 135 | margin-bottom: var(--gap); 136 | } 137 | .title_f75fb0 /* chat titlebar inner */ { 138 | border: none; 139 | background: none; 140 | margin-bottom: 0; 141 | } 142 | 143 | .chatContent_f75fb0 /* chat */ { 144 | overflow: hidden; 145 | } 146 | 147 | .container_c8ffbb /* member list */ { 148 | margin-left: var(--gap); 149 | overflow: hidden; 150 | height: auto; 151 | min-width: var(--custom-member-list-width); 152 | } 153 | .content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */ { 154 | margin-left: var(--gap); 155 | overflow: hidden; 156 | height: auto; 157 | } 158 | .members_c8ffbb /* member list inner */, 159 | .member_c8ffbb /* member list item */ { 160 | background: none; 161 | } 162 | 163 | .resizeHandle__01ae2 /* resize handle */ { 164 | background: transparent; 165 | } 166 | 167 | .privateChannels__35e86 /* dm list */, 168 | .scroller__99e7c /* dm list inner */ { 169 | background: none; 170 | } 171 | .scroller__99e7c /* dm list inner */ { 172 | margin-bottom: 0; 173 | } 174 | 175 | .tabBody__133bf /* online friends + active now group outer */ { 176 | background: none; 177 | } 178 | 179 | .nowPlayingColumn__133bf /* active now */ { 180 | margin-left: var(--gap); 181 | } 182 | .container__7d20c /* active now inner */ { 183 | background: none; 184 | } 185 | .scroller__7d20c /* active now inner */ { 186 | border: none; 187 | } 188 | 189 | .homeWrapper__0920e /* nitro page group inner */ { 190 | border: none; 191 | background: none; 192 | } 193 | .applicationStore_f07d62 /* nitro page group outer */ { 194 | background: none; 195 | } 196 | 197 | .shop__6db1d /* shop */ { 198 | overflow: hidden; 199 | height: auto; 200 | } 201 | .shop__08415 /* shop inner scroller */ { 202 | margin-top: calc(var(--custom-channel-header-height) * -1 - 16px); 203 | } 204 | 205 | .outer_c0bea0.panel_c0bea0 /* dm user panel */ { 206 | margin-left: var(--gap); 207 | overflow: hidden; 208 | height: auto; 209 | min-width: 340px; 210 | } 211 | 212 | .searchResultsWrap_a9e706 /* search results */ { 213 | margin-left: var(--gap); 214 | } 215 | 216 | .notice__6e2b9 /* notice banner */ { 217 | margin: 0 var(--gap) var(--gap) 0; 218 | border-radius: var(--radius-md); 219 | } 220 | 221 | .container__01ae2 /* vc chat + titlebar group */ { 222 | border: none; 223 | background: none; 224 | } 225 | .chat_ee72fa::before /* vc chat shadow */ { 226 | display: none; 227 | } 228 | .channelChatWrapper_cb9592 /* vc chat + titlebar group outer */ { 229 | background: none; 230 | } 231 | 232 | .page_c48ade > div > .chatLayerWrapper__01ae2 /* forum/thread chat outer */ { 233 | margin: 0 var(--gap) var(--gap) 0; 234 | height: calc(100% - var(--gap)); 235 | } 236 | .container__01ae2 /* forum/thread chat */ { 237 | padding-left: calc((var(--gap) - var(--chat-resize-handle-width))); 238 | } 239 | 240 | .container_fb64c9 /* new thread panel */ { 241 | background: none; 242 | } 243 | .chat_fb64c9::before /* new thread panel chat shadow */ { 244 | display: none; 245 | } 246 | 247 | .container_a592e1 /* server discovery */ { 248 | overflow: hidden; 249 | } 250 | .backdrop__8a7fc /* server discovery top bar */ { 251 | background-color: var(--background-base-lower); 252 | } 253 | 254 | .wrapper_cb9592 /* dm vc wrapper */ { 255 | background: none; 256 | margin-bottom: var(--gap); 257 | } 258 | 259 | /* remove excess background from settings */ 260 | .standardSidebarView__23e6b, 261 | .contentRegion__23e6b, 262 | .sidebarRegionScroller__23e6b, 263 | .contentRegionScroller__23e6b { 264 | background: none; 265 | } 266 | .standardSidebarView__23e6b { 267 | backdrop-filter: var(--panel-backdrop-filter); 268 | } 269 | 270 | /* remove excess backgrounds */ 271 | .wrapper_d852db /* message loading placeholders */, 272 | .wrapper_d852db > .wrapper_fc8177 { 273 | background: none; 274 | } 275 | 276 | .newMessagesBar__0f481 /* unread messages bar */ { 277 | top: 12px; 278 | left: 12px; 279 | right: 12px; 280 | border-radius: var(--radius-sm); 281 | padding: 0 8px; 282 | } 283 | 284 | .bottom__7aaec /* channel list new unreads pill */ { 285 | bottom: 12px; 286 | } 287 | 288 | .unreadMentionsIndicatorBottom_ef3116 /* server list new pill */, 289 | .unreadMentionsIndicatorTop_ef3116 { 290 | width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2); 291 | padding: calc(var(--custom-guild-list-padding) / 2); 292 | } 293 | 294 | /* jank ass solution to only apply padding to treatment 3 */ 295 | .form_f75fb0 /* chat bar outer form */ { 296 | --space-8: 16px; 297 | } 298 | .channelBottomBarArea_f75fb0 /* chat bar inner */ { 299 | --space-8: 8px; 300 | } 301 | 302 | /* get rid of extra space in treatment 2 */ 303 | .accessoryBar__74017 { 304 | padding-top: 0; 305 | } 306 | 307 | /* general chat bar improvements */ 308 | .channelTextArea_f75fb0 /* chat bar */ { 309 | border-radius: var(--radius-md); 310 | } 311 | .themedBackground__74017 /* chat bar inner */ { 312 | background: none; 313 | } 314 | .slateTextArea_ec4baf /* actual typing area */ { 315 | margin-left: 2px; 316 | } 317 | 318 | /* improve unread divider */ 319 | .divider__908e2 { 320 | border-width: var(--divider-thickness); 321 | border-radius: var(--divider-thickness); 322 | } 323 | .endCap__908e2 { 324 | margin-top: calc(var(--divider-thickness) / -2); 325 | } 326 | .divider__908e2 .content__908e2 { 327 | margin-top: calc(var(--divider-thickness) - var(--divider-thickness) * 2); 328 | } 329 | 330 | /* improve highlight message left edge */ 331 | .message__5126c.mentioned__5126c::before, 332 | .replying__5126c::before, 333 | .ephemeral__5126c::before { 334 | width: var(--divider-thickness); 335 | border-radius: var(--divider-thickness); 336 | height: calc(100% - 2 * var(--radius-sm)); 337 | top: var(--radius-sm); 338 | left: calc(var(--divider-thickness) / -2 + 1px); 339 | left: calc(var(--radius-sm) / 2); 340 | } 341 | 342 | .message__5126c { 343 | border-radius: var(--radius-md); 344 | margin-left: 4px; 345 | } 346 | 347 | /* improve server selected marker */ 348 | .pill_e5445c.wrapper__58105 { 349 | width: calc((var(--custom-guild-list-padding) - 4px) / 2 + 4px); 350 | } 351 | .item__58105 { 352 | width: 4px; 353 | border-radius: 4px; 354 | margin-left: calc((var(--custom-guild-list-padding) - 4px) / 2); 355 | } 356 | 357 | /* improve embeds */ 358 | .embedFull__623de { 359 | border: 4px solid var(--border-normal); 360 | border-top-color: var(--border-subtle) !important; 361 | border-top-width: 1px; 362 | border-bottom-color: var(--border-subtle) !important; 363 | border-bottom-width: 1px; 364 | border-right-color: var(--border-subtle) !important; 365 | border-right-width: 1px; 366 | } 367 | 368 | /* improve borders */ 369 | .reaction__23977 /* message reactions */, 370 | .reactionBtn__23977.forceShow__23977 /* add reaction button */ { 371 | border-width: 2px; 372 | } 373 | 374 | /* roundness */ 375 | .embedFull__623de /* embeds */, 376 | .hljs /* code block */, 377 | .imageWrapper_af017a /* image */, 378 | .container__9271d /* thread link */ { 379 | border-radius: var(--radius-md); 380 | } 381 | 382 | .outer_c0bea0 /* profile outer */, 383 | .contentWrapper__08434 /* gif panel */ { 384 | border-radius: var(--radius-lg); 385 | } 386 | .inner_c0bea0 /* profile inner */ { 387 | border-radius: calc(var(--radius-lg) - 4px); 388 | } 389 | 390 | .outer_c0bea0 /* profile outer */ { 391 | border: 1px solid var(--border-subtle); 392 | } 393 | .root__24502 { 394 | background: none; 395 | } 396 | 397 | /* remove unnecessary backgrounds */ 398 | .app__160d8, 399 | #app-mount, 400 | body { 401 | background: transparent !important; 402 | } 403 | } 404 | 405 | body { 406 | --font-primary: var(--font), 'gg sans'; 407 | --font-display: var(--font), 'gg sans'; 408 | } 409 | 410 | [class*='scroll'] { 411 | will-change: scroll-position; 412 | } 413 | .burstGlow__23977 { 414 | display: none; 415 | } 416 | 417 | /* animations.css */ 418 | @property --animations { 419 | syntax: 'on | off'; 420 | inherits: false; 421 | initial-value: on; 422 | } 423 | 424 | body { 425 | --list-item-transition: 0.2s ease; /* transition for list items */ 426 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 427 | } 428 | 429 | @container body style(--animations: on) { 430 | .visual-refresh { 431 | /* list hover animations */ 432 | .wrapper__2ea32 .link__2ea32 /* channels */, 433 | .container__91a9d /* members */, 434 | .channel__972a0 /* dms */, 435 | .side_b3f026 .item_b3f026 /* settings */ { 436 | transition: margin-left var(--list-item-transition); 437 | will-change: margin-left; 438 | } 439 | .wrapper__2ea32:hover .link__2ea32, 440 | .side_b3f026 .item_b3f026:hover { 441 | margin-left: 10px; 442 | } 443 | .container__91a9d:hover, 444 | .channel__972a0:hover { 445 | margin-left: 18px; 446 | } 447 | /* list hover channel dot */ 448 | .unread__2ea32 { 449 | border-radius: 50%; 450 | width: 8px; 451 | height: 8px; 452 | margin-left: -4px; 453 | transition: var(--list-item-transition); 454 | will-change: margin-left; 455 | } 456 | .wrapper__2ea32:hover .unread__2ea32 { 457 | margin-left: 4px; 458 | } 459 | .typeThread__2ea32 .unread__2ea32 { 460 | left: -31px; 461 | } 462 | } 463 | } 464 | 465 | /* background-image.css */ 466 | @property --background-image { 467 | syntax: 'on | off'; 468 | inherits: false; 469 | initial-value: off; 470 | } 471 | 472 | body { 473 | --background-image-url: url(''); 474 | } 475 | 476 | @container body style(--background-image: on) { 477 | .visual-refresh .bg__960e4 { 478 | background: var(--background-image-url); 479 | background-size: cover; 480 | background-position: center; 481 | } 482 | } 483 | 484 | /* colors.css */ 485 | @property --colors { 486 | syntax: 'on | off'; 487 | inherits: false; 488 | initial-value: on; 489 | } 490 | 491 | :root { 492 | /* text colors */ 493 | --text-0: var(--bg-4); /* text on colored elements */ 494 | --text-1: hsl(220, 45%, 95%); /* other normally white text */ 495 | --text-2: hsl(220, 25%, 70%); /* headings and important text */ 496 | --text-3: hsl(220, 20%, 60%); /* normal text */ 497 | --text-4: hsl(220, 15%, 40%); /* icon buttons and channels */ 498 | --text-5: hsl(220, 15%, 25%); /* muted channels/chats and timestamps */ 499 | 500 | /* background and dark colors */ 501 | --bg-1: hsl(220, 15%, 20%); /* dark buttons when clicked */ 502 | --bg-2: hsl(220, 15%, 16%); /* dark buttons */ 503 | --bg-3: hsl(220, 15%, 13%); /* spacing, secondary elements */ 504 | --bg-4: hsl(220, 15%, 10%); /* main background color */ 505 | --hover: hsla(221, 19%, 40%, 0.1); /* channels and buttons when hovered */ 506 | --active: hsla(220, 19%, 40%, 0.2); /* channels and buttons when clicked or selected */ 507 | --active-2: hsla(220, 19%, 40%, 0.3); /* extra state for transparent buttons */ 508 | --message-hover: hsla(230, 0%, 0%, 0.1); /* messages when hovered */ 509 | 510 | /* accent colors */ 511 | --accent-1: var(--blue-1); /* links and other accent text */ 512 | --accent-2: var(--blue-2); /* small accent elements */ 513 | --accent-3: var(--blue-3); /* accent buttons */ 514 | --accent-4: var(--blue-4); /* accent buttons when hovered */ 515 | --accent-5: var(--blue-5); /* accent buttons when clicked */ 516 | --accent-new: var(--blue-2); /* stuff that's normally red like mute/deafen buttons */ 517 | --mention: linear-gradient(to right, color-mix(in hsl, var(--blue-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 518 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--blue-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 519 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 520 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 521 | 522 | /* status indicator colors */ 523 | --online: var(--green-2); /* change to #43a25a for default */ 524 | --dnd: var(--red-2); /* change to #d83a42 for default */ 525 | --idle: var(--yellow-2); /* change to #ca9654 for default */ 526 | --streaming: var(--purple-2); /* change to #593695 for default */ 527 | --offline: var(--text-4); /* change to #83838b for default offline color */ 528 | 529 | /* border colors */ 530 | --border-light: hsl(230, 20%, 40%, 0.1); /* light border color */ 531 | --border: hsl(230, 20%, 40%, 0.2); /* normal border color */ 532 | --button-border: hsl(0, 0%, 100%, 0.1); /* neutral border color of buttons */ 533 | 534 | /* base colors */ 535 | --red-1: oklch(76% 0.12 0); 536 | --red-2: oklch(70% 0.12 0); 537 | --red-3: oklch(64% 0.12 0); 538 | --red-4: oklch(58% 0.12 0); 539 | --red-5: oklch(52% 0.12 0); 540 | 541 | --green-1: oklch(76% 0.11 170); 542 | --green-2: oklch(70% 0.11 170); 543 | --green-3: oklch(64% 0.11 170); 544 | --green-4: oklch(58% 0.11 170); 545 | --green-5: oklch(52% 0.11 160); 546 | 547 | --blue-1: oklch(76% 0.1 215); 548 | --blue-2: oklch(70% 0.1 215); 549 | --blue-3: oklch(64% 0.1 215); 550 | --blue-4: oklch(58% 0.1 215); 551 | --blue-5: oklch(52% 0.1 215); 552 | 553 | --yellow-1: oklch(80% 0.11 90); 554 | --yellow-2: oklch(74% 0.11 90); 555 | --yellow-3: oklch(68% 0.11 90); 556 | --yellow-4: oklch(62% 0.11 90); 557 | --yellow-5: oklch(56% 0.11 90); 558 | 559 | --purple-1: oklch(76% 0.11 310); 560 | --purple-2: oklch(70% 0.11 310); 561 | --purple-3: oklch(64% 0.11 310); 562 | --purple-4: oklch(58% 0.11 310); 563 | --purple-5: oklch(52% 0.11 310); 564 | } 565 | 566 | @container root style(--colors: on) { 567 | .visual-refresh body, 568 | .visual-refresh .theme-dark, 569 | .visual-refresh .theme-light:not(.custom-profile-theme) { 570 | --activity-card-background: red; 571 | --alert-bg: red; 572 | --autocomplete-bg: var(--bg-3); 573 | 574 | --background-accent: var(--bg-2); 575 | --background-floating: var(--bg-3); 576 | --background-nested-floating: var(--bg-4); 577 | --background-mentioned: var(--mention); 578 | --background-mentioned-hover: var(--mention-hover); 579 | --background-message-automod: red; 580 | --background-message-automod-hover: red; 581 | --background-message-highlight: var(--reply); 582 | --background-message-highlight-hover: var(--reply-hover); 583 | --background-message-hover: var(--message-hover); 584 | 585 | --background-primary: var(--bg-4); 586 | --background-secondary: var(--bg-3); 587 | --background-secondary-alt: var(--bg-3); 588 | --background-tertiary: var(--bg-4); 589 | 590 | --bg-base-primary: var(--bg-4); /* screenshare window? */ 591 | --bg-base-secondary: var(--bg-4); 592 | --bg-base-tertiary: var(--bg-3); 593 | --background-mod-subtle: var(--bg-3); 594 | --background-mod-normal: var(--bg-3); 595 | --background-mod-strong: var(--bg-3); 596 | --background-base-low: var(--bg-4); 597 | --background-base-lower: var(--bg-4); 598 | --background-base-lowest: var(--bg-4); 599 | --background-surface-high: var(--bg-3); 600 | --background-surface-higher: var(--bg-3); 601 | --background-surface-highest: var(--bg-3); 602 | --bg-surface-overlay: var(--bg-4); 603 | --bg-surface-raised: var(--bg-3); 604 | --chat-background-default: var(--bg-3); 605 | --input-background: var(--bg-3); 606 | --modal-background: var(--bg-4); 607 | --modal-footer-background: var(--bg-4); 608 | 609 | --background-modifier-accent: var(--hover); 610 | --background-modifier-active: var(--active); 611 | --background-modifier-hover: var(--hover); 612 | --background-modifier-selected: var(--active); 613 | 614 | --bg-mod-faint: var(--hover); 615 | --bg-mod-subtle: var(--bg-2); 616 | --bg-mod-strong: var(--bg-2); 617 | --bg-brand: var(--accent-2); 618 | 619 | --border-faint: var(--border-light); 620 | --border-subtle: var(--border); 621 | --border-normal: var(--border); 622 | --border-strong: var(--border); 623 | --input-border: var(--border); 624 | 625 | --button-danger-background: var(--red-3); 626 | --button-danger-background-active: var(--red-5); 627 | --button-danger-background-hover: var(--red-4); 628 | --button-danger-background-disabled: var(--red-5); 629 | --button-danger-border: var(--button-border); 630 | 631 | --button-filled-brand-text: var(--text-0); 632 | --button-filled-brand-background: var(--accent-3); 633 | --button-filled-brand-background-active: var(--accent-5); 634 | --button-filled-brand-background-hover: var(--accent-4); 635 | --button-filled-brand-border: var(--button-border); 636 | 637 | --button-filled-brand-inverted-background: var(--text-1); 638 | --button-filled-brand-inverted-background-active: var(--text-3); 639 | --button-filled-brand-inverted-background-hover: var(--text-2); 640 | --button-filled-brand-inverted-text: var(--bg-4); 641 | --button-filled-white-background: var(--text-1); 642 | --button-filled-white-background-active: var(--text-3); 643 | --button-filled-white-background-hover: var(--text-2); 644 | --button-filled-white-text: var(--bg-4); 645 | 646 | --button-outline-danger-background: var(--bg-2); 647 | --button-outline-danger-background-active: var(--text-5); 648 | --button-outline-danger-background-hover: var(--bg-1); 649 | --button-outline-danger-border: var(--border-light); 650 | --button-outline-danger-border-active: var(--border-light); 651 | --button-outline-danger-border-hover: var(--border-light); 652 | --button-outline-danger-text: var(--red-1); 653 | --button-outline-danger-text-active: var(--red-1); 654 | --button-outline-danger-text-hover: var(--red-1); 655 | 656 | --button-outline-primary-background: red; 657 | --button-outline-primary-background-active: var(--active); 658 | --button-outline-primary-background-hover: var(--hover); 659 | --button-outline-primary-border: var(--text-5); 660 | --button-outline-primary-border-active: var(--text-5); 661 | --button-outline-primary-border-hover: var(--text-5); 662 | --button-outline-primary-text: var(--text-3); 663 | --button-outline-primary-text-active: var(--text-3); 664 | --button-outline-primary-text-hover: var(--text-3); 665 | 666 | --button-outline-positive-background: red; 667 | --button-outline-positive-background-active: var(--green-4); 668 | --button-outline-positive-background-hover: var(--green-3); 669 | --button-outline-positive-border: var(--green-2); 670 | --button-outline-positive-border-active: var(--green-4); 671 | --button-outline-positive-border-hover: var(--green-3); 672 | --button-outline-positive-text: var(--text-3); 673 | --button-outline-positive-text-active: var(--text-0); 674 | --button-outline-positive-text-hover: var(--text-0); 675 | 676 | --button-positive-background: var(--green-2); 677 | --button-positive-background-active: var(--green-4); 678 | --button-positive-background-hover: var(--green-3); 679 | --button-positive-background-disabled: var(--green-4); 680 | --button-positive-border: var(--button-border); 681 | 682 | --button-secondary-background: var(--bg-2); 683 | --button-secondary-background-active: var(--text-5); 684 | --button-secondary-background-hover: var(--bg-1); 685 | --button-secondary-background-disabled: var(--bg-3); 686 | --button-secondary-text: var(--text-3); 687 | 688 | --button-transparent-background: var(--hover); 689 | --button-transparent-background-active: var(--active-2); 690 | --button-transparent-background-hover: var(--active); 691 | --button-transparent-text: var(--text-3); 692 | 693 | --redesign-button-secondary-text: var(--text-3); 694 | 695 | --polls-voted-fill: color-mix(in hsl, var(--accent-2), transparent 90%); 696 | --polls-victor-fill: color-mix(in hsl, var(--green-2), transparent 90%); 697 | 698 | --card-primary-bg: var(--bg-3); 699 | --card-secondary-bg: var(--bg-2); 700 | --channel-icon: var(--text-4); 701 | --channels-default: var(--text-4); 702 | 703 | --embed-title: var(--text-2); 704 | 705 | --header-primary: var(--text-2); 706 | --header-secondary: var(--text-4); 707 | --header-muted: var(--text-4); 708 | 709 | --icon-muted: var(--text-5); 710 | --icon-primary: var(--text-3); 711 | --icon-secondary: var(--text-4); 712 | --icon-tertiary: var(--text-4); 713 | 714 | --info-danger-background: red; 715 | --info-danger-text: red; 716 | --info-help-background: color-mix(in hsl, var(--blue-2), transparent 80%); 717 | --info-help-foreground: var(--blue-1); 718 | --info-help-text: var(--blue-1); 719 | --info-positive-background: color-mix(in hsl, var(--yellow-1), transparent 80%); 720 | --info-positive-text: var(--green-1); 721 | --info-warning-background: color-mix(in hsl, var(--yellow-2), transparent 80%); 722 | --info-warning-text: var(--yellow-1); 723 | 724 | --text-brand: var(--accent-1); 725 | --text-danger: var(--red-1); 726 | --text-link: var(--accent-1); 727 | --text-link-low-saturation: red; 728 | --text-low-contrast: var(--text-4); 729 | --text-message-preview-low-sat: red; 730 | --text-muted: var(--text-5); 731 | --text-muted-on-default: var(--text-4); 732 | --text-normal: var(--text-3); 733 | --text-positive: var(--green-1); 734 | --text-primary: var(--text-3); 735 | --text-secondary: var(--text-4); 736 | --text-warning: var(--yellow-1); 737 | --text-default: var(--text-3); 738 | --text-feedback-critical: var(--red-1); 739 | --text-feedback-positive: var(--green-1); 740 | --text-feedback-info: red; 741 | --text-feedback-warning: red; 742 | --text-tertiary: var(--text-4); 743 | 744 | --status-danger: var(--red-2); 745 | --status-danger-background: var(--red-3); 746 | --status-danger-text: var(--white); 747 | --status-dnd: var(--dnd); /* server profiles */ 748 | --status-idle: var(--idle); 749 | --status-offline: var(--offline); 750 | --status-online: var(--online); 751 | --status-positive: var(--green-2); 752 | --status-positive-background: var(--green-2); 753 | --status-positive-text: var(--white); 754 | --status-speaking: var(--green-2); 755 | --status-warning: var(--yellow-2); 756 | --status-warning-background: red; 757 | --status-warning-text: var(--black); 758 | 759 | --background-feedback-critical: color-mix(in hsl, var(--red-2), transparent 80%); 760 | --background-feedback-info: color-mix(in hsl, var(--blue-2), transparent 80%); 761 | --background-feedback-positive: color-mix(in hsl, var(--green-2), transparent 80%); 762 | --background-feedback-warning: color-mix(in hsl, var(--yellow-2), transparent 80%); 763 | 764 | --interactive-normal: var(--text-4); 765 | --interactive-hover: var(--text-3); 766 | --interactive-active: var(--text-3); 767 | --interactive-muted: var(--text-5); 768 | 769 | --mention-foreground: var(--accent-1); 770 | --mention-background: color-mix(in hsl, var(--accent-2), transparent 90%); 771 | 772 | --channel-text-area-placeholder: var(--text-5); 773 | 774 | --message-reacted-text: var(--text-2); 775 | --message-reacted-background: color-mix(in hsl, var(--accent-2), transparent 80%); 776 | 777 | --custom-channel-members-bg: var(--bg-4); 778 | 779 | --redesign-input-control-selected: var(--accent-2); 780 | 781 | --scrollbar-auto-thumb: var(--bg-3); 782 | --scrollbar-auto-track: transparent; 783 | --scrollbar-thin-thumb: var(--bg-3); 784 | --scrollbar-thin-track: transparent; 785 | 786 | --white: var(--text-0); 787 | --white-500: var(--text-0); 788 | --redesign-button-overlay-alpha-text: var(--text-2); 789 | 790 | --brand-360: var(--accent-2); 791 | --brand-500: var(--accent-2); 792 | --blurple-50: var(--accent-2); 793 | 794 | --red-400: var(--red-2); 795 | --red-500: var(--red-3); 796 | 797 | --green-360: var(--green-2); /* seems to be mostly used by vencord plugins */ 798 | --primary-400: var(--text-4); 799 | } 800 | 801 | .visual-refresh { 802 | ::placeholder { 803 | color: var(--text-5); 804 | } 805 | 806 | .modeUnreadImportant__2ea32 .icon__2ea32, 807 | .wrapper__2ea32:hover .icon__2ea32 /* correct channel icon color */ { 808 | color: var(--text-3); 809 | } 810 | 811 | .text_b88801 > strong /* xxx is typing.. */ { 812 | color: var(--text-3); 813 | } 814 | 815 | .folder__48112[aria-expanded="false"] > .folderIconWrapper__48112 /* collapsed folders */ { 816 | --background-primary: var(--bg-3); 817 | } 818 | 819 | .panel__5dec7 /* game activity panel */, 820 | #vc-spotify-player /* vencord spotify plugin */, 821 | .container__722ff /* background between vc and vc chat */ { 822 | background: none; 823 | } 824 | 825 | .side_b3f026 .item_b3f026:hover /* settings tab */ { 826 | background-color: var(--bg-3) !important; 827 | } 828 | .side_b3f026 .item_b3f026:active, 829 | .side_b3f026 .item_b3f026.selected_b3f026 { 830 | background-color: var(--bg-2) !important; 831 | } 832 | 833 | .quickSelectPopout_ebaca5 /* dm vc region select popout */, 834 | .participantsButton__211d1 /* vc participants button */, 835 | .voiceBar__7aaec /* n in voice bar (channel list) */, 836 | .mainCard_f369db /* form posts */ { 837 | background-color: var(--bg-3); 838 | } 839 | 840 | .colorable_f1ceac.primaryDark_f1ceac, 841 | .reaction_f8896c /* forum post reaction */ { 842 | background-color: var(--bg-2); 843 | } 844 | 845 | .expandedFolderIconWrapper__48112 > svg[style="color: rgb(88, 101, 242);"] /* folder icon */ { 846 | color: var(--accent-2) !important; 847 | } 848 | .colorPickerSwatch__459fb[style="background-color: rgb(88, 101, 242);"] /* folder color picker swatch */, 849 | .newBadge_faa96b /* forum post new badge */, 850 | .mentioned__5126c:before /* mention message left edge */ { 851 | background-color: var(--accent-2) !important; 852 | } 853 | .replying__5126c:before /* reply message left edge */ { 854 | background-color: var(--text-2) !important; 855 | } 856 | 857 | #app-mount .message__5126c.replying__5126c:hover /* override fix for message reply hover */ { 858 | background: var(--reply-hover); 859 | } 860 | 861 | .visual-refresh .voiceBar__7aaec .barText__7aaec, .visual-refresh .voiceChannelsIcon__7aaec /* x in voice bar text */ { 862 | color: var(--accent-2); 863 | } 864 | 865 | .ephemeral__5126c /* ephemeral messages */ { 866 | background: var(--mention) !important; 867 | } 868 | .ephemeral__5126c:hover { 869 | background: var(--mention-hover) !important; 870 | } 871 | 872 | .botTagRegular__82f07 /* bot tag */ { 873 | background-color: var(--accent-2); 874 | } 875 | .botTagOP__82f07 /* forum post op tag */ { 876 | color: var(--text-0); 877 | } 878 | 879 | .container__87bf1 /* settings checkbutton background */ { 880 | background-color: var(--bg-1) !important; 881 | transition: background-color 0.2s ease; 882 | } 883 | .container__87bf1.checked__87bf1 /* settings checkbutton background */ { 884 | background-color: var(--accent-2) !important; 885 | } 886 | .container__87bf1 .slider__87bf1 > svg > path /* settings checkbutton check */ { 887 | fill: var(--bg-1) !important; 888 | transition: fill 0.2s ease; 889 | } 890 | .container__87bf1.checked__87bf1 .slider__87bf1 > svg > path /* settings checkbutton check */ { 891 | fill: var(--accent-2) !important; 892 | } 893 | .container__87bf1 rect[fill='white'] /* settings checkbutton slider */ { 894 | fill: var(--text-3) !important; 895 | transition: fill 0.2s ease; 896 | } 897 | .container__87bf1.checked__87bf1 rect[fill='white'] /* settings checkbutton slider */ { 898 | fill: var(--text-0) !important; 899 | } 900 | 901 | .refreshIcon__001a7 /* settings radiobutton center */ { 902 | fill: var(--text-0); 903 | } 904 | 905 | .categoryText_d02962 /* gif chooser category names */, 906 | .bannerColor_fb7f94 /* profile banner button */, 907 | .backButton_e4cb9a /* stream preview back button */, 908 | .viewersIcon_d6b206 /* stream preview viewers icon */, 909 | .bottomControls_e4cb9a /* stream preview viewer number */, 910 | .pictureInPictureVideo_e4cb9a .controlIcon_f1ceac /* stream preview control icon */, 911 | .bannerVisible_f37cb1 .name_f37cb1 /* server name over banner image */, 912 | .dropdownButtonBannerVisible__2637a /* server name over banner dropdown button */ { 913 | color: var(--text-1); 914 | } 915 | .headerText_e4cb9a.base_eb1a4c /* stream preview header text */, 916 | .participantName__2cdb8 /* stream preview participant name */ { 917 | color: var(--text-1) !important; 918 | } 919 | .playPausePopIcon_cf09d8 > path /* video play/pause popup */ { 920 | fill: var(--text-1); 921 | } 922 | .headerTitle_e4cb9a:hover /* stream preview header title hover underline */ { 923 | border-color: var(--text-1) !important; 924 | } 925 | .controlIcon_cf09d8 /* video play button */, 926 | .wrapper_cf09d8 /* video time */, 927 | .iconWrapper__6eb54 /* video initial play button */, 928 | .wrapper__926d7 /* youtube embed play button */, 929 | .viewersIcon_d6b206:hover /* stream preview viewers icon */ , 930 | .headerTitle_e4cb9a:hover .backButton_e4cb9a /* stream preview back button hover */, 931 | .viewersIcon_d6b206:hover /* stream preview viewers icon */, 932 | .pictureInPictureVideo_e4cb9a .controlIcon_f1ceac:hover /* stream preview control icon */ { 933 | color: var(--text-2); 934 | } 935 | .wrapper__926d7 a:link, 936 | .wrapper__926d7 a:visited, 937 | .headerTitle_e4cb9a:hover .headerText_e4cb9a.base_eb1a4c /* stream preview back button hover */ { 938 | color: var(--text-2) !important; 939 | } 940 | .downloadHoverButtonIcon__6c706 /* video download button */, 941 | .iconContainer__211d1>svg /* vc participants button icon */, 942 | .selectedIcon__2f4f7 /* vc selected camera icon */, 943 | .colorable_f1ceac.primaryDark_f1ceac .centerIcon_f1ceac /* vc icon button */, 944 | .colorable_f1ceac.primaryDark_f1ceac /* vc icon button nub */, 945 | .iconBadge__650eb.base__2b1f5 /* server vc badge */, 946 | #app-mount .akaBadge__488b1 /* aka badge */, 947 | .message_fcf29c /* you have unsaved settings message */, 948 | .friendRequestsButton__523aa .base__2b1f5 /* inbox friend request number */, 949 | .textBadge__2b1f5[style='background-color: var(--background-accent);'], 950 | .tooltipBlack__382e7 /* server boost tooltip */, 951 | .colorable_f1ceac.experimentDark_f1ceac, .colorable_f1ceac.experimentDark_f1ceac .centerIcon_f1ceac /* vc buttons */ { 952 | color: var(--text-3); 953 | } 954 | .status__2f4f7 path[fill='var(--white)'], 955 | .emptyChannelIcon__00de6 path[fill='var(--white)'] /* channel start icon */ { 956 | fill: var(--text-3); 957 | } 958 | .grabber_a562c8 /* vc volume slider grabber */ { 959 | background-color: var(--text-3); 960 | } 961 | .textBadge__2b1f5 /* new text badge (right click on person in vc) */ { 962 | color: var(--text-0); 963 | } 964 | 965 | .unread__3b95d /* new unreads bar (channel list */ { 966 | color: var(--text-4); 967 | } 968 | 969 | .colorable_f1ceac.white_f1ceac /* vc icon button nub when white */ { 970 | background-color: var(--primary-130); 971 | color: var(--bg-4); 972 | } 973 | 974 | .iconBadge__650eb.isCurrentUserConnected__650eb /* green vc badge when connected */ { 975 | color: var(--text-0); 976 | } 977 | 978 | .container__37e49 /* user panel buttons */, 979 | .numberBadge__2b1f5 /* unread number badge */, 980 | .toolbar__9293f /* toolbar button strikethroughs */ { 981 | --status-danger: var(--accent-new); 982 | } 983 | 984 | .container__37e49 .button__67645.redGlow__67645 /* user panel button backgrounds*/ { 985 | background-color: color-mix(in hsl, var(--accent-new), transparent 90%); 986 | } 987 | .container__37e49 .button__67645.enabled__67645.redGlow__67645:hover /* user panel button backgrounds hover */ { 988 | background-color: color-mix(in hsl, var(--accent-new), transparent 80%); 989 | } 990 | 991 | .divider__5126c /* unread divider */ { 992 | --divider-color: var(--accent-new); 993 | } 994 | 995 | .iconBadge__9293f /* icon badge */, 996 | .mentionsBar__7aaec /* new mention pill */, 997 | .mention__3b95d /* server list new mention pill */ { 998 | background-color: var(--accent-new); 999 | } 1000 | 1001 | .newMessagesBar__0f481 /* unread bar */ { 1002 | background-color: var(--accent-3); 1003 | } 1004 | .barButtonAlt__0f481 /* unread bar mark as read button */ { 1005 | --button-secondary-background: var(--accent-3); 1006 | --button-secondary-background-hover: var(--accent-4); 1007 | } 1008 | 1009 | .updateIconForeground__49676 /* update button */ { 1010 | fill: var(--green-1); 1011 | } 1012 | 1013 | .colorable_f1ceac.red_f1ceac:hover /* vc disconnect button hover */ { 1014 | background-color: var(--red-4); 1015 | } 1016 | .button_f7ecac.dangerous_f7ecac:hover /* image attachment delete button hover in chat bar */ { 1017 | color: var(--red-4); 1018 | } 1019 | .contentWrapper__08434 ::-webkit-scrollbar-thumb /* gif picker scrollbar */ { 1020 | background-color: var(--bg-1); 1021 | } 1022 | 1023 | .circleIconButton__5bc7e /* new server button */ { 1024 | color: var(--text-3); 1025 | } 1026 | .circleIconButton__5bc7e:hover { 1027 | color: var(--bg-4); 1028 | } 1029 | 1030 | .tooltipGrey__382e7 /* spotify plugin time tooltip */ { 1031 | color: var(--text-3); 1032 | background-color: var(--bg-3); 1033 | } 1034 | 1035 | .textContentFooter__9a337 /* forum post image fade */ { 1036 | background: linear-gradient(0deg, var(--bg-4), transparent); 1037 | } 1038 | 1039 | .result__2dc39:after /* remove gif hover overlay */ { 1040 | display: none; 1041 | } 1042 | .result__2dc39:hover /* gif hover */ { 1043 | outline: 2px solid var(--accent-2); 1044 | } 1045 | 1046 | .reactionBtn__23977.forceShow__23977:hover /* fix add reaction button border hover */ { 1047 | border-color: var(--bg-2); 1048 | } 1049 | 1050 | .flash__03436[data-flash=true] /* reply message flash */ { 1051 | background: var(--background-message-highlight); 1052 | } 1053 | 1054 | /* status indicators */ 1055 | rect[fill='#83838b'] { 1056 | fill: var(--offline); 1057 | } 1058 | .status_a423bd[style='background-color: rgb(131, 131, 139);'] { 1059 | background-color: var(--offline) !important; 1060 | } 1061 | rect[fill='#43a25a'], 1062 | path[fill='#43a25a'] /* status activity icon */, 1063 | .vc-platform-indicator > svg[fill="#43a25a"] { 1064 | fill: var(--online); 1065 | } 1066 | .status_a423bd[style='background-color: rgb(67, 162, 90);'] { 1067 | background-color: var(--online) !important; 1068 | } 1069 | rect[fill='#ca9654'], 1070 | .vc-platform-indicator > svg[fill='#ca9654'] { 1071 | fill: var(--idle); 1072 | } 1073 | .status_a423bd[style='background-color: rgb(201, 150, 86);'] { 1074 | background-color: var(--idle) !important; 1075 | } 1076 | rect[fill='#d83a42'], 1077 | .vc-platform-indicator > svg[fill='#d83a42'] { 1078 | fill: var(--dnd); 1079 | } 1080 | .status_a423bd[style='background-color: rgb(216, 58, 66);'] { 1081 | background-color: var(--dnd) !important; 1082 | } 1083 | rect[fill='#9147ff'] { 1084 | fill: var(--streaming); 1085 | } 1086 | div[style='display: flex; justify-content: center; align-items: center; border-radius: 5px; background-color: rgb(67, 162, 90); height: 10px; width: 25px;'] { 1087 | background-color: var(--online) !important; 1088 | } 1089 | 1090 | /* fix radio bar button colors */ 1091 | .radioBar__001a7[style='--radio-bar-accent-color: var(--yellow-360); padding: 10px;'] { 1092 | --radio-bar-accent-color: var(--yellow-2) !important; 1093 | } 1094 | .radioBar__001a7[style='--radio-bar-accent-color: var(--green-360); padding: 10px;'] { 1095 | --radio-bar-accent-color: var(--green-2) !important; 1096 | } 1097 | .radioBar__001a7[style='--radio-bar-accent-color: var(--red-400); padding: 10px;'] { 1098 | --radio-bar-accent-color: var(--red-2) !important; 1099 | } 1100 | 1101 | #vc-spotify-player { 1102 | --vc-spotify-green: var(--accent-2); 1103 | } 1104 | 1105 | ::selection, 1106 | .highlight { 1107 | background: var(--accent-3); 1108 | color: var(--text-0); 1109 | } 1110 | } 1111 | } 1112 | 1113 | /* dms-button.css */ 1114 | @property --dms-icon { 1115 | syntax: 'default | off | on'; 1116 | inherits: false; 1117 | initial-value: on; 1118 | } 1119 | 1120 | body { 1121 | --dms-icon-svg-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* icon svg url. MUST BE A SVG. */ 1122 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size) */ 1123 | --dms-icon-color-before: var(--icon-secondary); 1124 | --dms-icon-color-after: var(--white); 1125 | --dms-background-image-url: url('https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png'); 1126 | --dms-background-image-size: cover; /* size of the background image (css background-size) */ 1127 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* color of the background image (css background) */ 1128 | } 1129 | 1130 | @container body style(--dms-icon: on) { 1131 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 > svg { 1132 | display: none; 1133 | } 1134 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8::before { 1135 | content: ''; 1136 | display: block; 1137 | position: absolute; 1138 | width: 65%; 1139 | height: 65%; 1140 | background: var(--dms-icon-color-before); 1141 | mask-image: var(--dms-icon-svg-url); 1142 | mask-size: var(--dms-icon-svg-size); 1143 | mask-position: center; 1144 | mask-repeat: no-repeat; 1145 | transition: background-color 0.15s ease-out; 1146 | } 1147 | .wrapper__6e9f8[data-list-item-id='guildsnav___home']:hover > .childWrapper__6e9f8::before { 1148 | transform: rotate(0deg) scale(1); 1149 | } 1150 | .wrapper__6e9f8[data-list-item-id='guildsnav___home']:hover > .childWrapper__6e9f8::before, 1151 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'].selected__6e9f8 > .childWrapper__6e9f8::before { 1152 | background: var(--dms-icon-color-after); 1153 | transform: rotate(-360deg) scale(0.8); 1154 | } 1155 | 1156 | @container body style(--animations: on) { 1157 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] .childWrapper__6e9f8::before { 1158 | transition: background-color 0.15s ease-out, transform var(--dms-icon-svg-transition); 1159 | } 1160 | } 1161 | } 1162 | 1163 | @container body style(--dms-icon: off) { 1164 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 > svg { 1165 | display: none; 1166 | } 1167 | } 1168 | 1169 | @property --dms-background { 1170 | syntax: 'off | image | color'; 1171 | inherits: false; 1172 | initial-value: off; 1173 | } 1174 | 1175 | @container body style(--dms-background: image) { 1176 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 { 1177 | background-image: var(--dms-background-image-url); 1178 | background-color: transparent !important; 1179 | background-size: var(--dms-background-image-size); 1180 | background-position: center; 1181 | background-repeat: no-repeat; 1182 | } 1183 | } 1184 | 1185 | @container body style(--dms-background: color) { 1186 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 { 1187 | background: var(--dms-background-color); 1188 | } 1189 | } 1190 | 1191 | /* flipped-chatbar.css */ 1192 | @property --flipped-chatbar { 1193 | syntax: 'on | off'; 1194 | inherits: false; 1195 | initial-value: on; 1196 | } 1197 | 1198 | body { 1199 | --chatbar-height: 47px; /* height of the chatbar */ 1200 | --chatbar-padding: 8px; /* padding of the chatbar */ 1201 | --custom-channel-textarea-text-area-height: var(--chatbar-height); 1202 | } 1203 | 1204 | @container body style(--flipped-chatbar: on) { 1205 | .visual-refresh { 1206 | .form_f75fb0 { 1207 | margin: 0 var(--chatbar-padding) var(--chatbar-padding) var(--chatbar-padding); 1208 | padding: 0; 1209 | --chatbar-border-color: var(--border-faint); 1210 | } 1211 | .channelTextArea_f75fb0 { 1212 | margin: 0; 1213 | border-color: var(--chatbar-border-color); 1214 | transition: none; 1215 | } 1216 | .base_b88801 { 1217 | top: -24px; 1218 | left: 0; 1219 | right: 0; 1220 | background-color: var(--chat-background-default); 1221 | padding: 0 8px; 1222 | border-radius: var(--radius-md) var(--radius-md) 0 0; 1223 | border: 1px solid var(--chatbar-border-color); 1224 | border-bottom: none; 1225 | transition: none; 1226 | box-sizing: border-box; 1227 | } 1228 | .stackedBars__74017, 1229 | .threadSuggestionBar__841c8 { 1230 | border-color: var(--chatbar-border-color) !important; 1231 | } 1232 | .stackedBars__74017 { 1233 | background: none !important; 1234 | } 1235 | .form_f75fb0:has(.base_b88801) { 1236 | .channelTextArea_f75fb0, 1237 | .wrapper__44df5 { 1238 | border-radius: 0 0 var(--radius-md) var(--radius-md); 1239 | } 1240 | } 1241 | .form_f75fb0:has(.channelTextArea__74017:focus-within) { 1242 | --chatbar-border-color: var(--border-subtle); 1243 | } 1244 | .scrollerSpacer__36d07 { 1245 | height: calc(24px + var(--chatbar-padding)); 1246 | } 1247 | .scroller__36d07::-webkit-scrollbar-track { 1248 | margin-bottom: calc(20px + var(--chatbar-padding)); 1249 | } 1250 | .bottomBar__0f481 { 1251 | margin-bottom: 24px; 1252 | } 1253 | .wrapper__44df5 /* phone verification bar */ { 1254 | margin: 0; 1255 | border-radius: var(--radius-md); 1256 | } 1257 | } 1258 | } 1259 | 1260 | /* top-bar.css */ 1261 | @property --move-top-bar-buttons { 1262 | syntax: 'on | off'; 1263 | inherits: false; 1264 | initial-value: off; 1265 | } 1266 | 1267 | @container body style(--move-top-bar-buttons: on) { 1268 | .visual-refresh { 1269 | /* remove help button */ 1270 | .trailing_c38106 > a[href="https://support.discord.com"] 1271 | { 1272 | display: none; 1273 | } 1274 | 1275 | /* make server list inner scroll */ 1276 | .stack_dbd263 { 1277 | overflow: hidden scroll; 1278 | scrollbar-width: none; 1279 | } 1280 | /* create space for inbox button */ 1281 | .tutorialContainer__1f388 { 1282 | margin-bottom: 48px; 1283 | } 1284 | /* move inbox button */ 1285 | .recentsIcon_c99c29 { 1286 | position: fixed; 1287 | width: 40px; 1288 | height: 40px; 1289 | top: calc(var(--custom-app-top-bar-height) + 1px + var(--custom-guild-list-padding) + 48px); 1290 | left: calc(var(--gap) + 1px + var(--custom-guild-list-padding)); 1291 | } 1292 | /* style inbox button */ 1293 | .recentsIcon_c99c29 .button__85643 { 1294 | width: 100%; 1295 | height: 100%; 1296 | background-color: var(--background-surface-higher); 1297 | border-radius: var(--radius-md); 1298 | transition: background-color 0.15s ease-out; 1299 | 1300 | &:hover { 1301 | background-color: var(--bg-brand); 1302 | 1303 | .icon__9293f { 1304 | color: var(--white); 1305 | } 1306 | } 1307 | } 1308 | .recentsIcon_c99c29 .svg__2338f { 1309 | transition: color 0.15s ease-out; 1310 | width: 24px; 1311 | height: 24px; 1312 | } 1313 | /* shift inbox popup panel into view */ 1314 | .recentMentionsPopout__95796 { 1315 | transform: translateX(100%); 1316 | } 1317 | /* move top bar title */ 1318 | .title_c38106 { 1319 | padding-left: var(--gap); 1320 | justify-content: flex-start; 1321 | } 1322 | .title__85643 { 1323 | gap: 4px; 1324 | } 1325 | /* style top bar title */ 1326 | .title__85643 .icon_f34534 { 1327 | width: 16px; 1328 | height: 16px; 1329 | display: none; 1330 | } 1331 | .title__85643 .text-sm\/medium_cf4812 { 1332 | line-height: 90%; 1333 | color: var(--text-muted); 1334 | font-weight: 700; 1335 | } 1336 | 1337 | /* fix settings animation transform */ 1338 | .layer__960e4.baseLayer__960e4 { 1339 | transform: none !important; 1340 | } 1341 | .layers__960e4 > .layer__960e4.animating__960e4 { 1342 | will-change: opacity; 1343 | } 1344 | 1345 | /* unread icon */ 1346 | .recentsIcon_c99c29 .iconBadge__9293f { 1347 | --custom-icon-offset: 8px; 1348 | width: 10px; 1349 | height: 10px; 1350 | transition: background 0.15s ease-out; 1351 | } 1352 | 1353 | .recentsIcon_c99c29:hover .iconBadge__9293f { 1354 | background: var(--white); 1355 | } 1356 | } 1357 | } 1358 | 1359 | /* transparency-blur.css */ 1360 | @property --panel-blur { 1361 | syntax: 'on | off'; 1362 | inherits: false; 1363 | initial-value: off; 1364 | } 1365 | 1366 | @container body style(--panel-blur: on) { 1367 | .visual-refresh { 1368 | #app-mount { 1369 | --panel-backdrop-filter: blur(var(--blur-amount)); 1370 | } 1371 | 1372 | .popoverReactionHoverBar_f84418 /* message hover quick action bar */, 1373 | .tooltip__382e7 /* tooltips */ { 1374 | background: var(--bg-floating); 1375 | } 1376 | .menu_c1e9c4 /* context menus */, 1377 | .contentWrapper__08434 /* emoji/gif panel */, 1378 | .root__49fc1 /* modals like invite */, 1379 | .outer_c0bea0.biteSize_c0bea0:not(.custom-theme-background) /* small profile popup */, 1380 | .autocomplete__6b0e0 /* autocomplete */, 1381 | .container__55c99 /* search suggestions */, 1382 | .messagesPopoutWrap__45690 /* inbox */, 1383 | .popout__76f04 /* channel hover popout */ { 1384 | background: var(--bg-floating); 1385 | } 1386 | } 1387 | } 1388 | 1389 | @property --transparency-tweaks { 1390 | syntax: 'on | off'; 1391 | inherits: false; 1392 | initial-value: off; 1393 | } 1394 | 1395 | @container body style(--transparency-tweaks: on) { 1396 | .visual-refresh { 1397 | .formWithLoadedChatInput_f75fb0:before, 1398 | .children__9293f:after { 1399 | display: none; 1400 | } 1401 | } 1402 | } 1403 | 1404 | @property --remove-bg-layer { 1405 | syntax: 'on | off'; 1406 | inherits: false; 1407 | initial-value: off; 1408 | } 1409 | 1410 | @container body style(--remove-bg-layer: on) { 1411 | .bg__960e4 { 1412 | background: transparent !important; 1413 | } 1414 | } 1415 | 1416 | /* user-panel.css */ 1417 | @property --small-user-panel { 1418 | syntax: 'on | off'; 1419 | inherits: false; 1420 | initial-value: off; 1421 | } 1422 | 1423 | @container body style(--small-user-panel: on) { 1424 | .visual-refresh { 1425 | .base_c48ade { 1426 | grid-template-areas: 1427 | 'titleBar titleBar titleBar' 1428 | 'guildsList notice notice' 1429 | 'guildsList channelsList page' 1430 | 'guildsList userPanel page'; 1431 | } 1432 | .panels_c48ade { 1433 | max-width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width)); 1434 | } 1435 | } 1436 | } 1437 | 1438 | /* window-controls.css */ 1439 | @property --custom-window-controls { 1440 | syntax: 'on | off'; 1441 | inherits: false; 1442 | initial-value: off; 1443 | } 1444 | 1445 | body { 1446 | --window-control-size: 14px; 1447 | } 1448 | 1449 | @container body style(--custom-window-controls: on) { 1450 | .winButtons_c38106 { 1451 | gap: 0; 1452 | padding-right: calc(var(--gap) - (var(--window-control-size) / 2) + 1px); 1453 | } 1454 | .winButtons_c38106::before { 1455 | margin-right: calc(var(--custom-app-top-bar-height) / 4); 1456 | } 1457 | .winButton_c38106 > svg { 1458 | display: none; 1459 | } 1460 | .winButton_c38106 { 1461 | background: none !important; 1462 | width: calc(var(--window-control-size) * 2); 1463 | height: var(--custom-app-top-bar-height); 1464 | } 1465 | .winButton_c38106::after { 1466 | display: block; 1467 | content: ''; 1468 | height: var(--window-control-size); 1469 | width: var(--window-control-size); 1470 | border-radius: 50%; 1471 | } 1472 | .winButton_c38106:hover::after { 1473 | filter: brightness(0.7); 1474 | } 1475 | .winButton_c38106:active::after { 1476 | transform: scale(0.9); 1477 | } 1478 | .winButtonClose_c38106::after { 1479 | background-color: var(--dnd) !important; 1480 | } 1481 | .winButtonMinMax_c38106:nth-child(1)::after { 1482 | background-color: var(--idle) !important; 1483 | } 1484 | .winButtonMinMax_c38106:nth-child(2)::after { 1485 | background-color: var(--online) !important; 1486 | } 1487 | } 1488 | 1489 | -------------------------------------------------------------------------------- /nix/hellwal.nix: -------------------------------------------------------------------------------- 1 | { pkgs, ... }: 2 | 3 | let 4 | discord-colors = '' 5 | --background: #%% background.hex %%; 6 | --foreground: #%% foreground.hex %%; 7 | --cursor: #%% cursor.hex %%; 8 | --border: #%% border.hex %%; 9 | 10 | --color0: #%% color0.hex %%; 11 | --color1: #%% color1.hex %%; 12 | --color2: #%% color2.hex %%; 13 | --color3: #%% color3.hex %%; 14 | --color4: #%% color4.hex %%; 15 | --color5: #%% color5.hex %%; 16 | --color6: #%% color6.hex %%; 17 | --color7: #%% color7.hex %%; 18 | --color8: #%% color8.hex %%; 19 | --color9: #%% color9.hex %%; 20 | --color10: #%% color10.hex %%; 21 | --color11: #%% color11.hex %%; 22 | --color12: #%% color12.hex %%; 23 | --color13: #%% color13.hex %%; 24 | --color14: #%% color14.hex %%; 25 | --color15: #%% color15.hex %%; 26 | ''; 27 | in { 28 | home.file = { 29 | ".config/hellwal/templates/discord-colors.css".text = ''${discord-colors}''; 30 | }; 31 | } 32 | -------------------------------------------------------------------------------- /nix/pywal.nix: -------------------------------------------------------------------------------- 1 | { pkgs, ... }: 2 | 3 | let 4 | discord-colors = '' 5 | --color0: {color0}; 6 | --color1: {color1}; 7 | --color2: {color2}; 8 | --color3: {color3}; 9 | --color4: {color4}; 10 | --color5: {color5}; 11 | --color6: {color6}; 12 | --color7: {color7}; 13 | --color8: {color8}; 14 | --color9: {color9}; 15 | --color10: {color10}; 16 | --color11: {color11}; 17 | --color12: {color12}; 18 | --color13: {color13}; 19 | --color14: {color14}; 20 | --color15: {color15}; 21 | ''; 22 | in { 23 | home.file = { 24 | ".config/wal/templates/discord-colors.css".text = ''${discord-colors}''; 25 | }; 26 | } 27 | -------------------------------------------------------------------------------- /nix/wallust.nix: -------------------------------------------------------------------------------- 1 | { pkgs, lib, ... }: 2 | 3 | { 4 | home.packages = [ pkgs.wallust ]; 5 | 6 | home.file.".config/wallust/wallust.toml".text = '' 7 | [templates] 8 | themecord.template = "discord-colors.css" 9 | themecord.target = '~/.cache/wallust/discord-colors.css' 10 | ''; 11 | 12 | home.file.".config/wallust/templates/discord-colors.css" .text = '' 13 | --color0: {{ color0 }}; 14 | --color1: {{ color1 }}; 15 | --color2: {{ color2 }}; 16 | --color3: {{ color3 }}; 17 | --color4: {{ color4 }}; 18 | --color5: {{ color5 }}; 19 | --color6: {{ color6 }}; 20 | --color7: {{ color7 }}; 21 | --color8: {{ color8 }}; 22 | --color9: {{ color9 }}; 23 | --color10: {{ color10 }}; 24 | --color11: {{ color11 }}; 25 | --color12: {{ color12 }}; 26 | --color13: {{ color13 }}; 27 | --color14: {{ color14 }}; 28 | --color15: {{ color15 }}; 29 | ''; 30 | } 31 | -------------------------------------------------------------------------------- /scripts/themecord.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # RUN THIS SCRIPT RIGHT AFTER ONE OF THE FOLLOWING: 4 | # - hellwal 5 | # - pywal 6 | # - wallust 7 | # 8 | # TO PROPERLY APPLY COLORS! 9 | 10 | confPath="/home/$USER/.config" 11 | supportedClients=("Vencord" "vesktop") 12 | availableClients=() 13 | generatedColors="hellwal" # default option is hellwal 14 | colosPath="" 15 | themeFiller="$dark_theme" 16 | 17 | show_help() { 18 | echo "Usage: themecord [OPTION]" 19 | echo "Discord theme will always match your wallpaper! " 20 | echo 21 | echo "Options:" 22 | echo " -h Display this message and exit" 23 | echo " -l use light mode instead of dark mode" 24 | echo 25 | echo "Select wallpaper palette backend:" 26 | echo " -g Use hellwal" 27 | echo " -p Use pywal" 28 | echo " -w Use wallust" 29 | echo 30 | echo " -f Provide path to generated discord colors" 31 | echo 32 | } 33 | 34 | while getopts ":hlwpgf:" opt; do 35 | case ${opt} in 36 | h ) 37 | show_help 38 | exit 0 39 | ;; 40 | l ) 41 | themeFiller="$light_theme" 42 | ;; 43 | w ) 44 | generatedColors="wallust" 45 | ;; 46 | p ) 47 | generatedColors="wal" 48 | ;; 49 | g ) 50 | generatedColors="hellwal" 51 | colorsPath="$OPTARG" 52 | ;; 53 | f ) 54 | colorsPath="$OPTARG" 55 | ;; 56 | \? ) 57 | echo "Invalid option: -$OPTARG" 1>&2 58 | echo 59 | show_help 60 | exit 1 61 | ;; 62 | esac 63 | done 64 | 65 | function print_err() { 66 | echo "[ERROR] $1" 67 | echo "Exitting..." 68 | } 69 | 70 | for client in "${supportedClients[@]}"; do 71 | client_path=~/.config/$client 72 | if test -d $(realpath "$client_path"); then 73 | echo "[SUCCESS] $client DETECTED (path: $client_path)" 74 | availableClients+=("$client") 75 | continue 76 | else 77 | echo "[FAILURE] $client not DETECTED (path: $client_path)" 78 | continue 79 | fi 80 | done 81 | 82 | if [ -z "$availableClients" ]; then 83 | print_err "No compatible clients detected! In order to use this script you have to use compatible discord clients! Check out github page for more info: https://github.com/danihek/Themecord" 84 | exit 85 | fi 86 | 87 | for client in "${availableClients[@]}"; do 88 | themecordPath="/home/$USER/.config/$client/themes/Themecord.css" 89 | 90 | if test -f "$themecordPath"; then 91 | echo "[INFO] Themecord found in $client" 92 | else 93 | echo :root { > $themecordPath 94 | echo "}" >> $themecordPath 95 | printf '%s\n' "$themecordBase" >> $themecordPath 96 | echo "[INFO] Added themecord base to: $themecordPath" 97 | fi 98 | done 99 | 100 | if [ "$colorsPath" == "" ]; then 101 | colorsPath="/home/$USER/.cache/$generatedColors/discord-colors.css" 102 | fi 103 | 104 | if [ ! -f "$colorsPath" ]; then 105 | print_err "Cannot access $colorsPath" 106 | exit 107 | fi 108 | echo "[INFO] discord-colors.css path: $colorsPath" 109 | 110 | for client in "${availableClients[@]}"; do 111 | themecordPath="/home/$USER/.config/$client/themes/Themecord.css" 112 | 113 | echo "/* This discord theme is generated by Themecord! */" > $themecordPath 114 | echo :root { >> $themecordPath 115 | cat $colorsPath | while IFS= read -r line; do echo -e "\n\t"$line >> $themecordPath; done 116 | 117 | if [[ -v themecordFiller ]]; then 118 | printf '%s\n' "$themecordFiller" >> $themecordPath 119 | else 120 | print_err "Cannot access \$themecordFiller content." 121 | fi 122 | 123 | if [[ -v themeFiller ]]; then 124 | printf '%s\n' "$themeFiller " >> $themecordPath 125 | else 126 | print_err "Cannot access \$themeFiller content." 127 | fi 128 | 129 | if [[ -v themecordFiller2 ]]; then 130 | printf '%s\n' "$themecordFiller2" >> $themecordPath 131 | else 132 | print_err "Cannot access \$themecordFiller2 content." 133 | fi 134 | 135 | printf "%s\n" "$themecordBase" >> $themecordPath 136 | done 137 | -------------------------------------------------------------------------------- /themecord: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | #This is generated by themecord builder! 4 | themecordFiller=$(cat << 'EOF' 5 | } 6 | 7 | /* main.css */ 8 | @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 9 | 10 | :root { 11 | container-name: root; 12 | --custom-guild-list-padding: 12px; 13 | --panel-backdrop-filter: none; 14 | } 15 | 16 | body { 17 | container-name: body; 18 | 19 | /* font, change to '' for default discord font */ 20 | --font: 'figtree'; 21 | 22 | /* sizes */ 23 | --gap: 12px; /* spacing between panels */ 24 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 25 | } 26 | 27 | .visual-refresh { 28 | /* panel separation */ 29 | .guilds_c48ade /* server list */, 30 | .sidebarList_c48ade /* channel list (includes dm list) */, 31 | .panels_c48ade /* user panel */, 32 | .chat_f75fb0 > .subtitleContainer_f75fb0 /* chat titlebar */, 33 | .chatContent_f75fb0 /* chat */, 34 | .container_c8ffbb /* member list */, 35 | .content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */, 36 | .container__133bf > .container__9293f /* friends titlebar */, 37 | .container_f391e3 > .container__9293f /* message requests titlebar */, 38 | .homeWrapper__0920e > .container__9293f /* nitro page titlebar */, 39 | .container__01ae2 > .container__9293f /* vc chat titlebar */, 40 | .container_fb64c9 > .container__9293f /* new thread panel */, 41 | .peopleColumn__133bf /* online friends */, 42 | .nowPlayingColumn__133bf /* active now */, 43 | .scroller_c880e8 /* nitro page */, 44 | .container_f391e3 > .content_f75fb0 /* message requests */, 45 | .shop__6db1d /* shop */, 46 | .outer_c0bea0.panel_c0bea0 /* dm user panel */, 47 | .searchResultsWrap_a9e706 /* search results */, 48 | .container_f369db /* forum */, 49 | .chat_fb64c9 /* new thread panel */, 50 | .container_a592e1 /* server discovery */, 51 | .callContainer_cb9592 /* vc container */, 52 | .callContainer__722ff /* stage */ { 53 | background-color: var(--background-base-lower); 54 | border-radius: var(--radius-lg); 55 | border: 1px solid var(--border-subtle); 56 | backdrop-filter: var(--panel-backdrop-filter); 57 | } 58 | 59 | .base_c48ade /* base grid */ { 60 | display: grid; 61 | grid-template-columns: [start] min-content [guildsEnd] min-content [channelsEnd] 1fr [end]; 62 | grid-template-rows: [top] var(--custom-app-top-bar-height) [titleBarEnd] min-content [noticeEnd] 1fr [contentEnd] min-content [end]; 63 | grid-template-areas: 64 | 'titleBar titleBar titleBar' 65 | 'guildsList notice notice' 66 | 'guildsList channelsList page' 67 | 'userPanel userPanel page'; 68 | gap: 0 var(--gap); 69 | } 70 | 71 | .panels_c48ade /* user panel */ { 72 | width: 100%; 73 | position: static; 74 | grid-area: userPanel; 75 | margin: var(--gap) 0 0 0; 76 | overflow: hidden; 77 | max-width: calc(var(--custom-guild-sidebar-width) + var(--gap) + 4px); 78 | } 79 | 80 | .sidebar_c48ade /* server list + channel list + user panel group */ { 81 | margin: 0 0 var(--gap) var(--gap); 82 | } 83 | 84 | .guilds_c48ade /* server list */ { 85 | margin-bottom: 0; 86 | } 87 | .scroller_ef3116 /* server list inner scroller */ { 88 | padding-top: var(--custom-guild-list-padding); 89 | } 90 | 91 | .container__2637a /* channel list inner */ { 92 | padding-bottom: 0; 93 | } 94 | .clickable_f37cb1, 95 | .container__2637a /* channel list inner */, 96 | .header_f37cb1 /* server name */ { 97 | background: none; 98 | } 99 | 100 | /* fix discord's idiotic server banners */ 101 | .bannerImage_f37cb1, 102 | .bannerImg_f37cb1 { 103 | width: 100%; 104 | } 105 | .bannerVisible_f37cb1 .headerEllipseBackdrop_f37cb1 { 106 | display: none; 107 | } 108 | .headerGlass_f37cb1 { 109 | top: 0; 110 | left: 0; 111 | right: 0; 112 | width: auto; 113 | border-radius: var(--radius-lg) var(--radius-lg) 0 0; 114 | } 115 | 116 | .sidebar_c48ade:after /* server list + channel list bottom shadow */ { 117 | display: none; 118 | } 119 | 120 | .chat_f75fb0 /* chat group outer */ { 121 | border: none !important; 122 | background: none; 123 | } 124 | .container__133bf /* friends page group outer */, 125 | .page_c48ade { 126 | padding-bottom: var(--gap); 127 | padding-right: var(--gap); 128 | border: none !important; 129 | background: none; 130 | } 131 | .page_c48ade > .chat_f75fb0, 132 | .page_c48ade > .container__133bf { 133 | padding: 0; 134 | } 135 | 136 | .container__9293f /* friends, message requests, + other stuff titlebar */ { 137 | margin-bottom: var(--gap); 138 | } 139 | 140 | .subtitleContainer_f75fb0 /* chat titlebar */ { 141 | margin-bottom: var(--gap); 142 | } 143 | .title_f75fb0 /* chat titlebar inner */ { 144 | border: none; 145 | background: none; 146 | margin-bottom: 0; 147 | } 148 | 149 | .chatContent_f75fb0 /* chat */ { 150 | overflow: hidden; 151 | } 152 | 153 | .container_c8ffbb /* member list */ { 154 | margin-left: var(--gap); 155 | overflow: hidden; 156 | height: auto; 157 | min-width: var(--custom-member-list-width); 158 | } 159 | .content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */ { 160 | margin-left: var(--gap); 161 | overflow: hidden; 162 | height: auto; 163 | } 164 | .members_c8ffbb /* member list inner */, 165 | .member_c8ffbb /* member list item */ { 166 | background: none; 167 | } 168 | 169 | .resizeHandle__01ae2 /* resize handle */ { 170 | background: transparent; 171 | } 172 | 173 | .privateChannels__35e86 /* dm list */, 174 | .scroller__99e7c /* dm list inner */ { 175 | background: none; 176 | } 177 | .scroller__99e7c /* dm list inner */ { 178 | margin-bottom: 0; 179 | } 180 | 181 | .tabBody__133bf /* online friends + active now group outer */ { 182 | background: none; 183 | } 184 | 185 | .nowPlayingColumn__133bf /* active now */ { 186 | margin-left: var(--gap); 187 | } 188 | .container__7d20c /* active now inner */ { 189 | background: none; 190 | } 191 | .scroller__7d20c /* active now inner */ { 192 | border: none; 193 | } 194 | 195 | .homeWrapper__0920e /* nitro page group inner */ { 196 | border: none; 197 | background: none; 198 | } 199 | .applicationStore_f07d62 /* nitro page group outer */ { 200 | background: none; 201 | } 202 | 203 | .shop__6db1d /* shop */ { 204 | overflow: hidden; 205 | height: auto; 206 | } 207 | .shop__08415 /* shop inner scroller */ { 208 | margin-top: calc(var(--custom-channel-header-height) * -1 - 16px); 209 | } 210 | 211 | .outer_c0bea0.panel_c0bea0 /* dm user panel */ { 212 | margin-left: var(--gap); 213 | overflow: hidden; 214 | height: auto; 215 | min-width: 340px; 216 | } 217 | 218 | .searchResultsWrap_a9e706 /* search results */ { 219 | margin-left: var(--gap); 220 | } 221 | 222 | .notice__6e2b9 /* notice banner */ { 223 | margin: 0 var(--gap) var(--gap) 0; 224 | border-radius: var(--radius-md); 225 | } 226 | 227 | .container__01ae2 /* vc chat + titlebar group */ { 228 | border: none; 229 | background: none; 230 | } 231 | .chat_ee72fa::before /* vc chat shadow */ { 232 | display: none; 233 | } 234 | .channelChatWrapper_cb9592 /* vc chat + titlebar group outer */ { 235 | background: none; 236 | } 237 | 238 | .page_c48ade > div > .chatLayerWrapper__01ae2 /* forum/thread chat outer */ { 239 | margin: 0 var(--gap) var(--gap) 0; 240 | height: calc(100% - var(--gap)); 241 | } 242 | .container__01ae2 /* forum/thread chat */ { 243 | padding-left: calc((var(--gap) - var(--chat-resize-handle-width))); 244 | } 245 | 246 | .container_fb64c9 /* new thread panel */ { 247 | background: none; 248 | } 249 | .chat_fb64c9::before /* new thread panel chat shadow */ { 250 | display: none; 251 | } 252 | 253 | .container_a592e1 /* server discovery */ { 254 | overflow: hidden; 255 | } 256 | .backdrop__8a7fc /* server discovery top bar */ { 257 | background-color: var(--background-base-lower); 258 | } 259 | 260 | .wrapper_cb9592 /* dm vc wrapper */ { 261 | background: none; 262 | margin-bottom: var(--gap); 263 | } 264 | 265 | /* remove excess background from settings */ 266 | .standardSidebarView__23e6b, 267 | .contentRegion__23e6b, 268 | .sidebarRegionScroller__23e6b, 269 | .contentRegionScroller__23e6b { 270 | background: none; 271 | } 272 | .standardSidebarView__23e6b { 273 | backdrop-filter: var(--panel-backdrop-filter); 274 | } 275 | 276 | /* remove excess backgrounds */ 277 | .wrapper_d852db /* message loading placeholders */, 278 | .wrapper_d852db > .wrapper_fc8177 { 279 | background: none; 280 | } 281 | 282 | .newMessagesBar__0f481 /* unread messages bar */ { 283 | top: 12px; 284 | left: 12px; 285 | right: 12px; 286 | border-radius: var(--radius-sm); 287 | padding: 0 8px; 288 | } 289 | 290 | .bottom__7aaec /* channel list new unreads pill */ { 291 | bottom: 12px; 292 | } 293 | 294 | .unreadMentionsIndicatorBottom_ef3116 /* server list new pill */, 295 | .unreadMentionsIndicatorTop_ef3116 { 296 | width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2); 297 | padding: calc(var(--custom-guild-list-padding) / 2); 298 | } 299 | 300 | /* jank ass solution to only apply padding to treatment 3 */ 301 | .form_f75fb0 /* chat bar outer form */ { 302 | --space-8: 16px; 303 | } 304 | .channelBottomBarArea_f75fb0 /* chat bar inner */ { 305 | --space-8: 8px; 306 | } 307 | 308 | /* get rid of extra space in treatment 2 */ 309 | .accessoryBar__74017 { 310 | padding-top: 0; 311 | } 312 | 313 | /* general chat bar improvements */ 314 | .channelTextArea_f75fb0 /* chat bar */ { 315 | border-radius: var(--radius-md); 316 | } 317 | .themedBackground__74017 /* chat bar inner */ { 318 | background: none; 319 | } 320 | .slateTextArea_ec4baf /* actual typing area */ { 321 | margin-left: 2px; 322 | } 323 | 324 | /* improve unread divider */ 325 | .divider__908e2 { 326 | border-width: var(--divider-thickness); 327 | border-radius: var(--divider-thickness); 328 | } 329 | .endCap__908e2 { 330 | margin-top: calc(var(--divider-thickness) / -2); 331 | } 332 | .divider__908e2 .content__908e2 { 333 | margin-top: calc(var(--divider-thickness) - var(--divider-thickness) * 2); 334 | } 335 | 336 | /* improve highlight message left edge */ 337 | .message__5126c.mentioned__5126c::before, 338 | .replying__5126c::before, 339 | .ephemeral__5126c::before { 340 | width: var(--divider-thickness); 341 | border-radius: var(--divider-thickness); 342 | height: calc(100% - 2 * var(--radius-sm)); 343 | top: var(--radius-sm); 344 | left: calc(var(--divider-thickness) / -2 + 1px); 345 | left: calc(var(--radius-sm) / 2); 346 | } 347 | 348 | .message__5126c { 349 | border-radius: var(--radius-md); 350 | margin-left: 4px; 351 | } 352 | 353 | /* improve server selected marker */ 354 | .pill_e5445c.wrapper__58105 { 355 | width: calc((var(--custom-guild-list-padding) - 4px) / 2 + 4px); 356 | } 357 | .item__58105 { 358 | width: 4px; 359 | border-radius: 4px; 360 | margin-left: calc((var(--custom-guild-list-padding) - 4px) / 2); 361 | } 362 | 363 | /* improve embeds */ 364 | .embedFull__623de { 365 | border: 4px solid var(--border-normal); 366 | border-top-color: var(--border-subtle) !important; 367 | border-top-width: 1px; 368 | border-bottom-color: var(--border-subtle) !important; 369 | border-bottom-width: 1px; 370 | border-right-color: var(--border-subtle) !important; 371 | border-right-width: 1px; 372 | } 373 | 374 | /* improve borders */ 375 | .reaction__23977 /* message reactions */, 376 | .reactionBtn__23977.forceShow__23977 /* add reaction button */ { 377 | border-width: 2px; 378 | } 379 | 380 | /* roundness */ 381 | .embedFull__623de /* embeds */, 382 | .hljs /* code block */, 383 | .imageWrapper_af017a /* image */, 384 | .container__9271d /* thread link */ { 385 | border-radius: var(--radius-md); 386 | } 387 | 388 | .outer_c0bea0 /* profile outer */, 389 | .contentWrapper__08434 /* gif panel */ { 390 | border-radius: var(--radius-lg); 391 | } 392 | .inner_c0bea0 /* profile inner */ { 393 | border-radius: calc(var(--radius-lg) - 4px); 394 | } 395 | 396 | .outer_c0bea0 /* profile outer */ { 397 | border: 1px solid var(--border-subtle); 398 | } 399 | .root__24502 { 400 | background: none; 401 | } 402 | 403 | /* remove unnecessary backgrounds */ 404 | .app__160d8, 405 | #app-mount, 406 | body { 407 | background: transparent !important; 408 | } 409 | } 410 | 411 | body { 412 | --font-primary: var(--font), 'gg sans'; 413 | --font-display: var(--font), 'gg sans'; 414 | } 415 | 416 | [class*='scroll'] { 417 | will-change: scroll-position; 418 | } 419 | .burstGlow__23977 { 420 | display: none; 421 | } 422 | 423 | /* animations.css */ 424 | @property --animations { 425 | syntax: 'on | off'; 426 | inherits: false; 427 | initial-value: on; 428 | } 429 | 430 | body { 431 | --list-item-transition: 0.2s ease; /* transition for list items */ 432 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 433 | } 434 | 435 | @container body style(--animations: on) { 436 | .visual-refresh { 437 | /* list hover animations */ 438 | .wrapper__2ea32 .link__2ea32 /* channels */, 439 | .container__91a9d /* members */, 440 | .channel__972a0 /* dms */, 441 | .side_b3f026 .item_b3f026 /* settings */ { 442 | transition: margin-left var(--list-item-transition); 443 | will-change: margin-left; 444 | } 445 | .wrapper__2ea32:hover .link__2ea32, 446 | .side_b3f026 .item_b3f026:hover { 447 | margin-left: 10px; 448 | } 449 | .container__91a9d:hover, 450 | .channel__972a0:hover { 451 | margin-left: 18px; 452 | } 453 | /* list hover channel dot */ 454 | .unread__2ea32 { 455 | border-radius: 50%; 456 | width: 8px; 457 | height: 8px; 458 | margin-left: -4px; 459 | transition: var(--list-item-transition); 460 | will-change: margin-left; 461 | } 462 | .wrapper__2ea32:hover .unread__2ea32 { 463 | margin-left: 4px; 464 | } 465 | .typeThread__2ea32 .unread__2ea32 { 466 | left: -31px; 467 | } 468 | } 469 | } 470 | 471 | /* background-image.css */ 472 | @property --background-image { 473 | syntax: 'on | off'; 474 | inherits: false; 475 | initial-value: off; 476 | } 477 | 478 | body { 479 | --background-image-url: url(''); 480 | } 481 | 482 | @container body style(--background-image: on) { 483 | .visual-refresh .bg__960e4 { 484 | background: var(--background-image-url); 485 | background-size: cover; 486 | background-position: center; 487 | } 488 | } 489 | 490 | /* colors.css */ 491 | @property --colors { 492 | syntax: 'on | off'; 493 | inherits: false; 494 | initial-value: on; 495 | } 496 | 497 | EOF 498 | ) 499 | 500 | dark_theme=$(cat << 'EOF' 501 | 502 | :root { 503 | /* text colors */ 504 | --text-0: var(--color13); 505 | --text-1: var(--color13); 506 | --text-2: var(--color14); 507 | --text-3: var(--color15); 508 | --text-4: var(--color15); 509 | --text-5: var(--color14); 510 | 511 | /* background and dark colors */ 512 | --bg-1: var(--color5); 513 | --bg-2: var(--color4); 514 | --bg-3: var(--color2); 515 | --bg-4: var(--color8); 516 | 517 | /* hover and active states, smoother for better user experience */ 518 | --hover: color-mix(in srgb, var(--color14) 20%, transparent); 519 | --active: color-mix(in srgb, var(--color14) 30%, transparent); 520 | --active-2: color-mix(in srgb, var(--color14) 50%, transparent); 521 | --message-hover: color-mix(in srgb, white 15%, transparent); 522 | 523 | /* accent colors (muted and balanced) */ 524 | --red-1: color-mix(in srgb, #fff 50%, var(--color6)); 525 | --red-2: color-mix(in srgb, #ff4d4d 50%, transparent); 526 | --red-3: color-mix(in srgb, #ff4d4d 40%, var(--color5)); 527 | --red-4: color-mix(in srgb, #ff4d4d 30%, var(--color5)); 528 | --red-5: color-mix(in srgb, #ff4d4d 20%, var(--color5)); 529 | 530 | --green-1: color-mix(in srgb, #b2f2bb 30%, var(--color1)); 531 | --green-2: color-mix(in srgb, #70e09c 30%, var(--color2)); 532 | --green-3: color-mix(in srgb, #43a25a 30%, var(--color3)); 533 | --green-4: color-mix(in srgb, #33834a 30%, var(--color4)); 534 | --green-5: color-mix(in srgb, #2c6d3e 30%, var(--color5)); 535 | 536 | --blue-1: var(--color3); 537 | --blue-2: var(--color4); 538 | --blue-3: var(--color5); 539 | --blue-4: var(--color6); 540 | --blue-5: var(--color7); 541 | 542 | /* yellow tones, subtly muted for dark mode */ 543 | --yellow-1: color-mix(in srgb, #ffe29a 40%, var(--color2)); 544 | --yellow-2: color-mix(in srgb, #ffd166 40%, var(--color3)); 545 | --yellow-3: color-mix(in srgb, #e6b34f 40%, var(--color4)); 546 | --yellow-4: color-mix(in srgb, #ca9654 40%, var(--color5)); 547 | --yellow-5: color-mix(in srgb, #a57433 40%, var(--color6)); 548 | 549 | --purple-1: color-mix(in srgb, #d3b3ff 60%, var(--color2)); 550 | --purple-2: color-mix(in srgb, #b47aff 40%, var(--color3)); 551 | --purple-3: color-mix(in srgb, #8c4dff 40%, var(--color4)); 552 | --purple-4: color-mix(in srgb, #6a36d9 40%, var(--color5)); 553 | --purple-5: color-mix(in srgb, #593695 40%, var(--color6)); 554 | 555 | /* status indicator colors */ 556 | --online: var(--green-2); 557 | --dnd: var(--red-2); 558 | --idle: var(--yellow-2); 559 | --streaming: var(--purple-2); 560 | --offline: var(--text-4); 561 | 562 | /* border colors (light but defined) */ 563 | --border-light: color-mix(in srgb, var(--color15) 15%, transparent); /* Soft border */ 564 | --border: color-mix(in srgb, var(--color15) 25%, transparent); 565 | --button-border: color-mix(in srgb, var(--color15) 15%, transparent); 566 | 567 | /* accent colors */ 568 | --accent-1: var(--blue-5); 569 | --accent-2: var(--blue-2); 570 | --accent-3: var(--blue-3); 571 | --accent-4: var(--blue-4); 572 | --accent-5: var(--blue-1); 573 | --accent-new: var(--blue-2); 574 | 575 | /* gradients (subtle, soft tones) */ 576 | --mention: linear-gradient(to right, color-mix(in srgb, var(--blue-2) 15%, transparent) 50%, transparent); 577 | --mention-hover: linear-gradient(to right, color-mix(in srgb, var(--blue-2) 10%, transparent) 50%, transparent); 578 | --reply: linear-gradient(to right, color-mix(in srgb, var(--text-3) 15%, transparent) 50%, transparent); 579 | --reply-hover: linear-gradient(to right, color-mix(in srgb, var(--text-3) 10%, transparent) 50%, transparent); 580 | } 581 | EOF 582 | ) 583 | 584 | light_theme=$(cat << 'EOF' 585 | :root { 586 | /* text colors */ 587 | --text-0: var(--color1); 588 | --text-1: var(--color5); 589 | --text-2: var(--color3); 590 | --text-3: var(--color2); 591 | --text-4: var(--color1); 592 | --text-5: var(--color0); 593 | 594 | /* background */ 595 | --bg-1: var(--color9); 596 | --bg-2: var(--color8); 597 | --bg-3: var(--color7); 598 | --bg-4: var(--color6); 599 | --hover: color-mix(in srgb, var(--color4) 15%, transparent); 600 | --active: color-mix(in srgb, var(--color4) 25%, transparent); 601 | --active-2: color-mix(in srgb, var(--color4) 35%, transparent); 602 | --message-hover: color-mix(in srgb, black 10%, transparent); 603 | 604 | --red-1: color-mix(in srgb, #fff 40%, var(--color6)); 605 | --red-2: color-mix(in srgb, #ff4d4d 85%, transparent); 606 | --red-3: color-mix(in srgb, #ff4d4d 70%, var(--color10)); 607 | --red-4: color-mix(in srgb, #ff4d4d 55%, var(--color10)); 608 | --red-5: color-mix(in srgb, #ff4d4d 40%, var(--color10)); 609 | 610 | --green-1: color-mix(in srgb, #b2f2bb 80%, var(--color1)); 611 | --green-2: color-mix(in srgb, #70e09c 80%, var(--color2)); 612 | --green-3: color-mix(in srgb, #43a25a 80%, var(--color3)); 613 | --green-4: color-mix(in srgb, #33834a 80%, var(--color4)); 614 | --green-5: color-mix(in srgb, #2c6d3e 80%, var(--color5)); 615 | 616 | --blue-1: var(--color2); 617 | --blue-2: var(--color3); 618 | --blue-3: var(--color4); 619 | --blue-4: var(--color5); 620 | --blue-5: var(--color6); 621 | 622 | --yellow-1: color-mix(in srgb, #ffe29a 100%, var(--color2)); 623 | --yellow-2: color-mix(in srgb, #ffd166 80%, var(--color3)); 624 | --yellow-3: color-mix(in srgb, #e6b34f 80%, var(--color4)); 625 | --yellow-4: color-mix(in srgb, #ca9654 80%, var(--color5)); 626 | --yellow-5: color-mix(in srgb, #a57433 80%, var(--color6)); 627 | 628 | --purple-1: color-mix(in srgb, #d3b3ff 100%, var(--color2)); 629 | --purple-2: color-mix(in srgb, #b47aff 80%, var(--color3)); 630 | --purple-3: color-mix(in srgb, #8c4dff 80%, var(--color4)); 631 | --purple-4: color-mix(in srgb, #6a36d9 80%, var(--color5)); 632 | --purple-5: color-mix(in srgb, #593695 80%, var(--color6)); 633 | 634 | /* status indicator colors */ 635 | --online: var(--green-2); 636 | --dnd: var(--red-2); 637 | --idle: var(--yellow-2); 638 | --streaming: var(--purple-2); 639 | --offline: var(--text-4); 640 | 641 | /* border colors */ 642 | --border-light: color-mix(in srgb, var(--color3) 20%, transparent); 643 | --border: color-mix(in srgb, var(--color3) 30%, transparent); 644 | --button-border: color-mix(in srgb, var(--color0) 15%, transparent); 645 | 646 | /* accent colors */ 647 | --accent-1: var(--blue-1); 648 | --accent-2: var(--blue-2); 649 | --accent-3: var(--blue-3); 650 | --accent-4: var(--blue-4); 651 | --accent-5: var(--blue-5); 652 | --accent-new: var(--blue-2); 653 | 654 | /* gradients */ 655 | --mention: linear-gradient(to right, color-mix(in srgb, var(--blue-2) 20%, transparent) 40%, transparent); 656 | --mention-hover: linear-gradient(to right, color-mix(in srgb, var(--blue-2) 15%, transparent) 40%, transparent); 657 | --reply: linear-gradient(to right, color-mix(in srgb, var(--text-3) 20%, transparent) 40%, transparent); 658 | --reply-hover: linear-gradient(to right, color-mix(in srgb, var(--text-3) 15%, transparent) 40%, transparent); 659 | } 660 | 661 | EOF 662 | ) 663 | 664 | themecordFiller2=$(cat << 'EOF' 665 | @container root style(--colors: on) { 666 | .visual-refresh body, 667 | .visual-refresh .theme-dark, 668 | .visual-refresh .theme-light:not(.custom-profile-theme) { 669 | --activity-card-background: red; 670 | --alert-bg: red; 671 | --autocomplete-bg: var(--bg-3); 672 | 673 | --background-accent: var(--bg-2); 674 | --background-floating: var(--bg-3); 675 | --background-nested-floating: var(--bg-4); 676 | --background-mentioned: var(--mention); 677 | --background-mentioned-hover: var(--mention-hover); 678 | --background-message-automod: red; 679 | --background-message-automod-hover: red; 680 | --background-message-highlight: var(--reply); 681 | --background-message-highlight-hover: var(--reply-hover); 682 | --background-message-hover: var(--message-hover); 683 | 684 | --background-primary: var(--bg-4); 685 | --background-secondary: var(--bg-3); 686 | --background-secondary-alt: var(--bg-3); 687 | --background-tertiary: var(--bg-4); 688 | 689 | --bg-base-primary: var(--bg-4); /* screenshare window? */ 690 | --bg-base-secondary: var(--bg-4); 691 | --bg-base-tertiary: var(--bg-3); 692 | --background-mod-subtle: var(--bg-3); 693 | --background-mod-normal: var(--bg-3); 694 | --background-mod-strong: var(--bg-3); 695 | --background-base-low: var(--bg-4); 696 | --background-base-lower: var(--bg-4); 697 | --background-base-lowest: var(--bg-4); 698 | --background-surface-high: var(--bg-3); 699 | --background-surface-higher: var(--bg-3); 700 | --background-surface-highest: var(--bg-3); 701 | --bg-surface-overlay: var(--bg-4); 702 | --bg-surface-raised: var(--bg-3); 703 | --chat-background-default: var(--bg-3); 704 | --input-background: var(--bg-3); 705 | --modal-background: var(--bg-4); 706 | --modal-footer-background: var(--bg-4); 707 | 708 | --background-modifier-accent: var(--hover); 709 | --background-modifier-active: var(--active); 710 | --background-modifier-hover: var(--hover); 711 | --background-modifier-selected: var(--active); 712 | 713 | --bg-mod-faint: var(--hover); 714 | --bg-mod-subtle: var(--bg-2); 715 | --bg-mod-strong: var(--bg-2); 716 | --bg-brand: var(--accent-2); 717 | 718 | --border-faint: var(--border-light); 719 | --border-subtle: var(--border); 720 | --border-normal: var(--border); 721 | --border-strong: var(--border); 722 | --input-border: var(--border); 723 | 724 | --button-danger-background: var(--red-3); 725 | --button-danger-background-active: var(--red-5); 726 | --button-danger-background-hover: var(--red-4); 727 | --button-danger-background-disabled: var(--red-5); 728 | --button-danger-border: var(--button-border); 729 | 730 | --button-filled-brand-text: var(--text-0); 731 | --button-filled-brand-background: var(--accent-3); 732 | --button-filled-brand-background-active: var(--accent-5); 733 | --button-filled-brand-background-hover: var(--accent-4); 734 | --button-filled-brand-border: var(--button-border); 735 | 736 | --button-filled-brand-inverted-background: var(--text-1); 737 | --button-filled-brand-inverted-background-active: var(--text-3); 738 | --button-filled-brand-inverted-background-hover: var(--text-2); 739 | --button-filled-brand-inverted-text: var(--bg-4); 740 | --button-filled-white-background: var(--text-1); 741 | --button-filled-white-background-active: var(--text-3); 742 | --button-filled-white-background-hover: var(--text-2); 743 | --button-filled-white-text: var(--bg-4); 744 | 745 | --button-outline-danger-background: var(--bg-2); 746 | --button-outline-danger-background-active: var(--text-5); 747 | --button-outline-danger-background-hover: var(--bg-1); 748 | --button-outline-danger-border: var(--border-light); 749 | --button-outline-danger-border-active: var(--border-light); 750 | --button-outline-danger-border-hover: var(--border-light); 751 | --button-outline-danger-text: var(--red-1); 752 | --button-outline-danger-text-active: var(--red-1); 753 | --button-outline-danger-text-hover: var(--red-1); 754 | 755 | --button-outline-primary-background: red; 756 | --button-outline-primary-background-active: var(--active); 757 | --button-outline-primary-background-hover: var(--hover); 758 | --button-outline-primary-border: var(--text-5); 759 | --button-outline-primary-border-active: var(--text-5); 760 | --button-outline-primary-border-hover: var(--text-5); 761 | --button-outline-primary-text: var(--text-3); 762 | --button-outline-primary-text-active: var(--text-3); 763 | --button-outline-primary-text-hover: var(--text-3); 764 | 765 | --button-outline-positive-background: red; 766 | --button-outline-positive-background-active: var(--green-4); 767 | --button-outline-positive-background-hover: var(--green-3); 768 | --button-outline-positive-border: var(--green-2); 769 | --button-outline-positive-border-active: var(--green-4); 770 | --button-outline-positive-border-hover: var(--green-3); 771 | --button-outline-positive-text: var(--text-3); 772 | --button-outline-positive-text-active: var(--text-0); 773 | --button-outline-positive-text-hover: var(--text-0); 774 | 775 | --button-positive-background: var(--green-2); 776 | --button-positive-background-active: var(--green-4); 777 | --button-positive-background-hover: var(--green-3); 778 | --button-positive-background-disabled: var(--green-4); 779 | --button-positive-border: var(--button-border); 780 | 781 | --button-secondary-background: var(--bg-2); 782 | --button-secondary-background-active: var(--text-5); 783 | --button-secondary-background-hover: var(--bg-1); 784 | --button-secondary-background-disabled: var(--bg-3); 785 | --button-secondary-text: var(--text-3); 786 | 787 | --button-transparent-background: var(--hover); 788 | --button-transparent-background-active: var(--active-2); 789 | --button-transparent-background-hover: var(--active); 790 | --button-transparent-text: var(--text-3); 791 | 792 | --redesign-button-secondary-text: var(--text-3); 793 | 794 | --polls-voted-fill: color-mix(in hsl, var(--accent-2), transparent 90%); 795 | --polls-victor-fill: color-mix(in hsl, var(--green-2), transparent 90%); 796 | 797 | --card-primary-bg: var(--bg-3); 798 | --card-secondary-bg: var(--bg-2); 799 | --channel-icon: var(--text-4); 800 | --channels-default: var(--text-4); 801 | 802 | --embed-title: var(--text-2); 803 | 804 | --header-primary: var(--text-2); 805 | --header-secondary: var(--text-4); 806 | --header-muted: var(--text-4); 807 | 808 | --icon-muted: var(--text-5); 809 | --icon-primary: var(--text-3); 810 | --icon-secondary: var(--text-4); 811 | --icon-tertiary: var(--text-4); 812 | 813 | --info-danger-background: red; 814 | --info-danger-text: red; 815 | --info-help-background: color-mix(in hsl, var(--blue-2), transparent 80%); 816 | --info-help-foreground: var(--blue-1); 817 | --info-help-text: var(--blue-1); 818 | --info-positive-background: color-mix(in hsl, var(--yellow-1), transparent 80%); 819 | --info-positive-text: var(--green-1); 820 | --info-warning-background: color-mix(in hsl, var(--yellow-2), transparent 80%); 821 | --info-warning-text: var(--yellow-1); 822 | 823 | --text-brand: var(--accent-1); 824 | --text-danger: var(--red-1); 825 | --text-link: var(--accent-1); 826 | --text-link-low-saturation: red; 827 | --text-low-contrast: var(--text-4); 828 | --text-message-preview-low-sat: red; 829 | --text-muted: var(--text-5); 830 | --text-muted-on-default: var(--text-4); 831 | --text-normal: var(--text-3); 832 | --text-positive: var(--green-1); 833 | --text-primary: var(--text-3); 834 | --text-secondary: var(--text-4); 835 | --text-warning: var(--yellow-1); 836 | --text-default: var(--text-3); 837 | --text-feedback-critical: var(--red-1); 838 | --text-feedback-positive: var(--green-1); 839 | --text-feedback-info: red; 840 | --text-feedback-warning: red; 841 | --text-tertiary: var(--text-4); 842 | 843 | --status-danger: var(--red-2); 844 | --status-danger-background: var(--red-3); 845 | --status-danger-text: var(--white); 846 | --status-dnd: var(--dnd); /* server profiles */ 847 | --status-idle: var(--idle); 848 | --status-offline: var(--offline); 849 | --status-online: var(--online); 850 | --status-positive: var(--green-2); 851 | --status-positive-background: var(--green-2); 852 | --status-positive-text: var(--white); 853 | --status-speaking: var(--green-2); 854 | --status-warning: var(--yellow-2); 855 | --status-warning-background: red; 856 | --status-warning-text: var(--black); 857 | 858 | --background-feedback-critical: color-mix(in hsl, var(--red-2), transparent 80%); 859 | --background-feedback-info: color-mix(in hsl, var(--blue-2), transparent 80%); 860 | --background-feedback-positive: color-mix(in hsl, var(--green-2), transparent 80%); 861 | --background-feedback-warning: color-mix(in hsl, var(--yellow-2), transparent 80%); 862 | 863 | --interactive-normal: var(--text-4); 864 | --interactive-hover: var(--text-3); 865 | --interactive-active: var(--text-3); 866 | --interactive-muted: var(--text-5); 867 | 868 | --mention-foreground: var(--accent-1); 869 | --mention-background: color-mix(in hsl, var(--accent-2), transparent 90%); 870 | 871 | --channel-text-area-placeholder: var(--text-5); 872 | 873 | --message-reacted-text: var(--text-2); 874 | --message-reacted-background: color-mix(in hsl, var(--accent-2), transparent 80%); 875 | 876 | --custom-channel-members-bg: var(--bg-4); 877 | 878 | --redesign-input-control-selected: var(--accent-2); 879 | 880 | --scrollbar-auto-thumb: var(--bg-3); 881 | --scrollbar-auto-track: transparent; 882 | --scrollbar-thin-thumb: var(--bg-3); 883 | --scrollbar-thin-track: transparent; 884 | 885 | --white: var(--text-0); 886 | --white-500: var(--text-0); 887 | --redesign-button-overlay-alpha-text: var(--text-2); 888 | 889 | --brand-360: var(--accent-2); 890 | --brand-500: var(--accent-2); 891 | --blurple-50: var(--accent-2); 892 | 893 | --red-400: var(--red-2); 894 | --red-500: var(--red-3); 895 | 896 | --green-360: var(--green-2); /* seems to be mostly used by vencord plugins */ 897 | --primary-400: var(--text-4); 898 | } 899 | 900 | .visual-refresh { 901 | ::placeholder { 902 | color: var(--text-5); 903 | } 904 | 905 | .modeUnreadImportant__2ea32 .icon__2ea32, 906 | .wrapper__2ea32:hover .icon__2ea32 /* correct channel icon color */ { 907 | color: var(--text-3); 908 | } 909 | 910 | .text_b88801 > strong /* xxx is typing.. */ { 911 | color: var(--text-3); 912 | } 913 | 914 | .folder__48112[aria-expanded="false"] > .folderIconWrapper__48112 /* collapsed folders */ { 915 | --background-primary: var(--bg-3); 916 | } 917 | 918 | .panel__5dec7 /* game activity panel */, 919 | #vc-spotify-player /* vencord spotify plugin */, 920 | .container__722ff /* background between vc and vc chat */ { 921 | background: none; 922 | } 923 | 924 | .side_b3f026 .item_b3f026:hover /* settings tab */ { 925 | background-color: var(--bg-3) !important; 926 | } 927 | .side_b3f026 .item_b3f026:active, 928 | .side_b3f026 .item_b3f026.selected_b3f026 { 929 | background-color: var(--bg-2) !important; 930 | } 931 | 932 | .quickSelectPopout_ebaca5 /* dm vc region select popout */, 933 | .participantsButton__211d1 /* vc participants button */, 934 | .voiceBar__7aaec /* n in voice bar (channel list) */, 935 | .mainCard_f369db /* form posts */ { 936 | background-color: var(--bg-3); 937 | } 938 | 939 | .colorable_f1ceac.primaryDark_f1ceac, 940 | .reaction_f8896c /* forum post reaction */ { 941 | background-color: var(--bg-2); 942 | } 943 | 944 | .expandedFolderIconWrapper__48112 > svg[style="color: rgb(88, 101, 242);"] /* folder icon */ { 945 | color: var(--accent-2) !important; 946 | } 947 | .colorPickerSwatch__459fb[style="background-color: rgb(88, 101, 242);"] /* folder color picker swatch */, 948 | .newBadge_faa96b /* forum post new badge */, 949 | .mentioned__5126c:before /* mention message left edge */ { 950 | background-color: var(--accent-2) !important; 951 | } 952 | .replying__5126c:before /* reply message left edge */ { 953 | background-color: var(--text-2) !important; 954 | } 955 | 956 | #app-mount .message__5126c.replying__5126c:hover /* override fix for message reply hover */ { 957 | background: var(--reply-hover); 958 | } 959 | 960 | .visual-refresh .voiceBar__7aaec .barText__7aaec, .visual-refresh .voiceChannelsIcon__7aaec /* x in voice bar text */ { 961 | color: var(--accent-2); 962 | } 963 | 964 | .ephemeral__5126c /* ephemeral messages */ { 965 | background: var(--mention) !important; 966 | } 967 | .ephemeral__5126c:hover { 968 | background: var(--mention-hover) !important; 969 | } 970 | 971 | .botTagRegular__82f07 /* bot tag */ { 972 | background-color: var(--accent-2); 973 | } 974 | .botTagOP__82f07 /* forum post op tag */ { 975 | color: var(--text-0); 976 | } 977 | 978 | .container__87bf1 /* settings checkbutton background */ { 979 | background-color: var(--bg-1) !important; 980 | transition: background-color 0.2s ease; 981 | } 982 | .container__87bf1.checked__87bf1 /* settings checkbutton background */ { 983 | background-color: var(--accent-2) !important; 984 | } 985 | .container__87bf1 .slider__87bf1 > svg > path /* settings checkbutton check */ { 986 | fill: var(--bg-1) !important; 987 | transition: fill 0.2s ease; 988 | } 989 | .container__87bf1.checked__87bf1 .slider__87bf1 > svg > path /* settings checkbutton check */ { 990 | fill: var(--accent-2) !important; 991 | } 992 | .container__87bf1 rect[fill='white'] /* settings checkbutton slider */ { 993 | fill: var(--text-3) !important; 994 | transition: fill 0.2s ease; 995 | } 996 | .container__87bf1.checked__87bf1 rect[fill='white'] /* settings checkbutton slider */ { 997 | fill: var(--text-0) !important; 998 | } 999 | 1000 | .refreshIcon__001a7 /* settings radiobutton center */ { 1001 | fill: var(--text-0); 1002 | } 1003 | 1004 | .categoryText_d02962 /* gif chooser category names */, 1005 | .bannerColor_fb7f94 /* profile banner button */, 1006 | .backButton_e4cb9a /* stream preview back button */, 1007 | .viewersIcon_d6b206 /* stream preview viewers icon */, 1008 | .bottomControls_e4cb9a /* stream preview viewer number */, 1009 | .pictureInPictureVideo_e4cb9a .controlIcon_f1ceac /* stream preview control icon */, 1010 | .bannerVisible_f37cb1 .name_f37cb1 /* server name over banner image */, 1011 | .dropdownButtonBannerVisible__2637a /* server name over banner dropdown button */ { 1012 | color: var(--text-1); 1013 | } 1014 | .headerText_e4cb9a.base_eb1a4c /* stream preview header text */, 1015 | .participantName__2cdb8 /* stream preview participant name */ { 1016 | color: var(--text-1) !important; 1017 | } 1018 | .playPausePopIcon_cf09d8 > path /* video play/pause popup */ { 1019 | fill: var(--text-1); 1020 | } 1021 | .headerTitle_e4cb9a:hover /* stream preview header title hover underline */ { 1022 | border-color: var(--text-1) !important; 1023 | } 1024 | .controlIcon_cf09d8 /* video play button */, 1025 | .wrapper_cf09d8 /* video time */, 1026 | .iconWrapper__6eb54 /* video initial play button */, 1027 | .wrapper__926d7 /* youtube embed play button */, 1028 | .viewersIcon_d6b206:hover /* stream preview viewers icon */ , 1029 | .headerTitle_e4cb9a:hover .backButton_e4cb9a /* stream preview back button hover */, 1030 | .viewersIcon_d6b206:hover /* stream preview viewers icon */, 1031 | .pictureInPictureVideo_e4cb9a .controlIcon_f1ceac:hover /* stream preview control icon */ { 1032 | color: var(--text-2); 1033 | } 1034 | .wrapper__926d7 a:link, 1035 | .wrapper__926d7 a:visited, 1036 | .headerTitle_e4cb9a:hover .headerText_e4cb9a.base_eb1a4c /* stream preview back button hover */ { 1037 | color: var(--text-2) !important; 1038 | } 1039 | .downloadHoverButtonIcon__6c706 /* video download button */, 1040 | .iconContainer__211d1>svg /* vc participants button icon */, 1041 | .selectedIcon__2f4f7 /* vc selected camera icon */, 1042 | .colorable_f1ceac.primaryDark_f1ceac .centerIcon_f1ceac /* vc icon button */, 1043 | .colorable_f1ceac.primaryDark_f1ceac /* vc icon button nub */, 1044 | .iconBadge__650eb.base__2b1f5 /* server vc badge */, 1045 | #app-mount .akaBadge__488b1 /* aka badge */, 1046 | .message_fcf29c /* you have unsaved settings message */, 1047 | .friendRequestsButton__523aa .base__2b1f5 /* inbox friend request number */, 1048 | .textBadge__2b1f5[style='background-color: var(--background-accent);'], 1049 | .tooltipBlack__382e7 /* server boost tooltip */, 1050 | .colorable_f1ceac.experimentDark_f1ceac, .colorable_f1ceac.experimentDark_f1ceac .centerIcon_f1ceac /* vc buttons */ { 1051 | color: var(--text-3); 1052 | } 1053 | .status__2f4f7 path[fill='var(--white)'], 1054 | .emptyChannelIcon__00de6 path[fill='var(--white)'] /* channel start icon */ { 1055 | fill: var(--text-3); 1056 | } 1057 | .grabber_a562c8 /* vc volume slider grabber */ { 1058 | background-color: var(--text-3); 1059 | } 1060 | .textBadge__2b1f5 /* new text badge (right click on person in vc) */ { 1061 | color: var(--text-0); 1062 | } 1063 | 1064 | .unread__3b95d /* new unreads bar (channel list */ { 1065 | color: var(--text-4); 1066 | } 1067 | 1068 | .colorable_f1ceac.white_f1ceac /* vc icon button nub when white */ { 1069 | background-color: var(--primary-130); 1070 | color: var(--bg-4); 1071 | } 1072 | 1073 | .iconBadge__650eb.isCurrentUserConnected__650eb /* green vc badge when connected */ { 1074 | color: var(--text-0); 1075 | } 1076 | 1077 | .container__37e49 /* user panel buttons */, 1078 | .numberBadge__2b1f5 /* unread number badge */, 1079 | .toolbar__9293f /* toolbar button strikethroughs */ { 1080 | --status-danger: var(--accent-new); 1081 | } 1082 | 1083 | .container__37e49 .button__67645.redGlow__67645 /* user panel button backgrounds*/ { 1084 | background-color: color-mix(in hsl, var(--accent-new), transparent 90%); 1085 | } 1086 | .container__37e49 .button__67645.enabled__67645.redGlow__67645:hover /* user panel button backgrounds hover */ { 1087 | background-color: color-mix(in hsl, var(--accent-new), transparent 80%); 1088 | } 1089 | 1090 | .divider__5126c /* unread divider */ { 1091 | --divider-color: var(--accent-new); 1092 | } 1093 | 1094 | .iconBadge__9293f /* icon badge */, 1095 | .mentionsBar__7aaec /* new mention pill */, 1096 | .mention__3b95d /* server list new mention pill */ { 1097 | background-color: var(--accent-new); 1098 | } 1099 | 1100 | .newMessagesBar__0f481 /* unread bar */ { 1101 | background-color: var(--accent-3); 1102 | } 1103 | .barButtonAlt__0f481 /* unread bar mark as read button */ { 1104 | --button-secondary-background: var(--accent-3); 1105 | --button-secondary-background-hover: var(--accent-4); 1106 | } 1107 | 1108 | .updateIconForeground__49676 /* update button */ { 1109 | fill: var(--green-1); 1110 | } 1111 | 1112 | .colorable_f1ceac.red_f1ceac:hover /* vc disconnect button hover */ { 1113 | background-color: var(--red-4); 1114 | } 1115 | .button_f7ecac.dangerous_f7ecac:hover /* image attachment delete button hover in chat bar */ { 1116 | color: var(--red-4); 1117 | } 1118 | .contentWrapper__08434 ::-webkit-scrollbar-thumb /* gif picker scrollbar */ { 1119 | background-color: var(--bg-1); 1120 | } 1121 | 1122 | .circleIconButton__5bc7e /* new server button */ { 1123 | color: var(--text-3); 1124 | } 1125 | .circleIconButton__5bc7e:hover { 1126 | color: var(--bg-4); 1127 | } 1128 | 1129 | .tooltipGrey__382e7 /* spotify plugin time tooltip */ { 1130 | color: var(--text-3); 1131 | background-color: var(--bg-3); 1132 | } 1133 | 1134 | .textContentFooter__9a337 /* forum post image fade */ { 1135 | background: linear-gradient(0deg, var(--bg-4), transparent); 1136 | } 1137 | 1138 | .result__2dc39:after /* remove gif hover overlay */ { 1139 | display: none; 1140 | } 1141 | .result__2dc39:hover /* gif hover */ { 1142 | outline: 2px solid var(--accent-2); 1143 | } 1144 | 1145 | .reactionBtn__23977.forceShow__23977:hover /* fix add reaction button border hover */ { 1146 | border-color: var(--bg-2); 1147 | } 1148 | 1149 | .flash__03436[data-flash=true] /* reply message flash */ { 1150 | background: var(--background-message-highlight); 1151 | } 1152 | 1153 | /* status indicators */ 1154 | rect[fill='#83838b'] { 1155 | fill: var(--offline); 1156 | } 1157 | .status_a423bd[style='background-color: rgb(131, 131, 139);'] { 1158 | background-color: var(--offline) !important; 1159 | } 1160 | rect[fill='#43a25a'], 1161 | path[fill='#43a25a'] /* status activity icon */, 1162 | .vc-platform-indicator > svg[fill="#43a25a"] { 1163 | fill: var(--online); 1164 | } 1165 | .status_a423bd[style='background-color: rgb(67, 162, 90);'] { 1166 | background-color: var(--online) !important; 1167 | } 1168 | rect[fill='#ca9654'], 1169 | .vc-platform-indicator > svg[fill='#ca9654'] { 1170 | fill: var(--idle); 1171 | } 1172 | .status_a423bd[style='background-color: rgb(201, 150, 86);'] { 1173 | background-color: var(--idle) !important; 1174 | } 1175 | rect[fill='#d83a42'], 1176 | .vc-platform-indicator > svg[fill='#d83a42'] { 1177 | fill: var(--dnd); 1178 | } 1179 | .status_a423bd[style='background-color: rgb(216, 58, 66);'] { 1180 | background-color: var(--dnd) !important; 1181 | } 1182 | rect[fill='#9147ff'] { 1183 | fill: var(--streaming); 1184 | } 1185 | div[style='display: flex; justify-content: center; align-items: center; border-radius: 5px; background-color: rgb(67, 162, 90); height: 10px; width: 25px;'] { 1186 | background-color: var(--online) !important; 1187 | } 1188 | 1189 | /* fix radio bar button colors */ 1190 | .radioBar__001a7[style='--radio-bar-accent-color: var(--yellow-360); padding: 10px;'] { 1191 | --radio-bar-accent-color: var(--yellow-2) !important; 1192 | } 1193 | .radioBar__001a7[style='--radio-bar-accent-color: var(--green-360); padding: 10px;'] { 1194 | --radio-bar-accent-color: var(--green-2) !important; 1195 | } 1196 | .radioBar__001a7[style='--radio-bar-accent-color: var(--red-400); padding: 10px;'] { 1197 | --radio-bar-accent-color: var(--red-2) !important; 1198 | } 1199 | 1200 | #vc-spotify-player { 1201 | --vc-spotify-green: var(--accent-2); 1202 | } 1203 | 1204 | ::selection, 1205 | .highlight { 1206 | background: var(--accent-3); 1207 | color: var(--text-0); 1208 | } 1209 | } 1210 | } 1211 | 1212 | /* dms-button.css */ 1213 | @property --dms-icon { 1214 | syntax: 'default | off | on'; 1215 | inherits: false; 1216 | initial-value: on; 1217 | } 1218 | 1219 | body { 1220 | --dms-icon-svg-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* icon svg url. MUST BE A SVG. */ 1221 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size) */ 1222 | --dms-icon-color-before: var(--icon-secondary); 1223 | --dms-icon-color-after: var(--white); 1224 | --dms-background-image-url: url('https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png'); 1225 | --dms-background-image-size: cover; /* size of the background image (css background-size) */ 1226 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* color of the background image (css background) */ 1227 | } 1228 | 1229 | @container body style(--dms-icon: on) { 1230 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 > svg { 1231 | display: none; 1232 | } 1233 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8::before { 1234 | content: ''; 1235 | display: block; 1236 | position: absolute; 1237 | width: 65%; 1238 | height: 65%; 1239 | background: var(--dms-icon-color-before); 1240 | mask-image: var(--dms-icon-svg-url); 1241 | mask-size: var(--dms-icon-svg-size); 1242 | mask-position: center; 1243 | mask-repeat: no-repeat; 1244 | transition: background-color 0.15s ease-out; 1245 | } 1246 | .wrapper__6e9f8[data-list-item-id='guildsnav___home']:hover > .childWrapper__6e9f8::before { 1247 | transform: rotate(0deg) scale(1); 1248 | } 1249 | .wrapper__6e9f8[data-list-item-id='guildsnav___home']:hover > .childWrapper__6e9f8::before, 1250 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'].selected__6e9f8 > .childWrapper__6e9f8::before { 1251 | background: var(--dms-icon-color-after); 1252 | transform: rotate(-360deg) scale(0.8); 1253 | } 1254 | 1255 | @container body style(--animations: on) { 1256 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] .childWrapper__6e9f8::before { 1257 | transition: background-color 0.15s ease-out, transform var(--dms-icon-svg-transition); 1258 | } 1259 | } 1260 | } 1261 | 1262 | @container body style(--dms-icon: off) { 1263 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 > svg { 1264 | display: none; 1265 | } 1266 | } 1267 | 1268 | @property --dms-background { 1269 | syntax: 'off | image | color'; 1270 | inherits: false; 1271 | initial-value: off; 1272 | } 1273 | 1274 | @container body style(--dms-background: image) { 1275 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 { 1276 | background-image: var(--dms-background-image-url); 1277 | background-color: transparent !important; 1278 | background-size: var(--dms-background-image-size); 1279 | background-position: center; 1280 | background-repeat: no-repeat; 1281 | } 1282 | } 1283 | 1284 | @container body style(--dms-background: color) { 1285 | .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 { 1286 | background: var(--dms-background-color); 1287 | } 1288 | } 1289 | 1290 | /* flipped-chatbar.css */ 1291 | @property --flipped-chatbar { 1292 | syntax: 'on | off'; 1293 | inherits: false; 1294 | initial-value: on; 1295 | } 1296 | 1297 | body { 1298 | --chatbar-height: 47px; /* height of the chatbar */ 1299 | --chatbar-padding: 8px; /* padding of the chatbar */ 1300 | --custom-channel-textarea-text-area-height: var(--chatbar-height); 1301 | } 1302 | 1303 | @container body style(--flipped-chatbar: on) { 1304 | .visual-refresh { 1305 | .form_f75fb0 { 1306 | margin: 0 var(--chatbar-padding) var(--chatbar-padding) var(--chatbar-padding); 1307 | padding: 0; 1308 | --chatbar-border-color: var(--border-faint); 1309 | } 1310 | .channelTextArea_f75fb0 { 1311 | margin: 0; 1312 | border-color: var(--chatbar-border-color); 1313 | transition: none; 1314 | } 1315 | .base_b88801 { 1316 | top: -24px; 1317 | left: 0; 1318 | right: 0; 1319 | background-color: var(--chat-background-default); 1320 | padding: 0 8px; 1321 | border-radius: var(--radius-md) var(--radius-md) 0 0; 1322 | border: 1px solid var(--chatbar-border-color); 1323 | border-bottom: none; 1324 | transition: none; 1325 | box-sizing: border-box; 1326 | } 1327 | .stackedBars__74017, 1328 | .threadSuggestionBar__841c8 { 1329 | border-color: var(--chatbar-border-color) !important; 1330 | } 1331 | .stackedBars__74017 { 1332 | background: none !important; 1333 | } 1334 | .form_f75fb0:has(.base_b88801) { 1335 | .channelTextArea_f75fb0, 1336 | .wrapper__44df5 { 1337 | border-radius: 0 0 var(--radius-md) var(--radius-md); 1338 | } 1339 | } 1340 | .form_f75fb0:has(.channelTextArea__74017:focus-within) { 1341 | --chatbar-border-color: var(--border-subtle); 1342 | } 1343 | .scrollerSpacer__36d07 { 1344 | height: calc(24px + var(--chatbar-padding)); 1345 | } 1346 | .scroller__36d07::-webkit-scrollbar-track { 1347 | margin-bottom: calc(20px + var(--chatbar-padding)); 1348 | } 1349 | .bottomBar__0f481 { 1350 | margin-bottom: 24px; 1351 | } 1352 | .wrapper__44df5 /* phone verification bar */ { 1353 | margin: 0; 1354 | border-radius: var(--radius-md); 1355 | } 1356 | } 1357 | } 1358 | 1359 | /* top-bar.css */ 1360 | @property --move-top-bar-buttons { 1361 | syntax: 'on | off'; 1362 | inherits: false; 1363 | initial-value: off; 1364 | } 1365 | 1366 | @container body style(--move-top-bar-buttons: on) { 1367 | .visual-refresh { 1368 | /* remove help button */ 1369 | .trailing_c38106 > a[href="https://support.discord.com"] 1370 | { 1371 | display: none; 1372 | } 1373 | 1374 | /* make server list inner scroll */ 1375 | .stack_dbd263 { 1376 | overflow: hidden scroll; 1377 | scrollbar-width: none; 1378 | } 1379 | /* create space for inbox button */ 1380 | .tutorialContainer__1f388 { 1381 | margin-bottom: 48px; 1382 | } 1383 | /* move inbox button */ 1384 | .recentsIcon_c99c29 { 1385 | position: fixed; 1386 | width: 40px; 1387 | height: 40px; 1388 | top: calc(var(--custom-app-top-bar-height) + 1px + var(--custom-guild-list-padding) + 48px); 1389 | left: calc(var(--gap) + 1px + var(--custom-guild-list-padding)); 1390 | } 1391 | /* style inbox button */ 1392 | .recentsIcon_c99c29 .button__85643 { 1393 | width: 100%; 1394 | height: 100%; 1395 | background-color: var(--background-surface-higher); 1396 | border-radius: var(--radius-md); 1397 | transition: background-color 0.15s ease-out; 1398 | 1399 | &:hover { 1400 | background-color: var(--bg-brand); 1401 | 1402 | .icon__9293f { 1403 | color: var(--white); 1404 | } 1405 | } 1406 | } 1407 | .recentsIcon_c99c29 .svg__2338f { 1408 | transition: color 0.15s ease-out; 1409 | width: 24px; 1410 | height: 24px; 1411 | } 1412 | /* shift inbox popup panel into view */ 1413 | .recentMentionsPopout__95796 { 1414 | transform: translateX(100%); 1415 | } 1416 | /* move top bar title */ 1417 | .title_c38106 { 1418 | padding-left: var(--gap); 1419 | justify-content: flex-start; 1420 | } 1421 | .title__85643 { 1422 | gap: 4px; 1423 | } 1424 | /* style top bar title */ 1425 | .title__85643 .icon_f34534 { 1426 | width: 16px; 1427 | height: 16px; 1428 | display: none; 1429 | } 1430 | .title__85643 .text-sm\/medium_cf4812 { 1431 | line-height: 90%; 1432 | color: var(--text-muted); 1433 | font-weight: 700; 1434 | } 1435 | 1436 | /* fix settings animation transform */ 1437 | .layer__960e4.baseLayer__960e4 { 1438 | transform: none !important; 1439 | } 1440 | .layers__960e4 > .layer__960e4.animating__960e4 { 1441 | will-change: opacity; 1442 | } 1443 | 1444 | /* unread icon */ 1445 | .recentsIcon_c99c29 .iconBadge__9293f { 1446 | --custom-icon-offset: 8px; 1447 | width: 10px; 1448 | height: 10px; 1449 | transition: background 0.15s ease-out; 1450 | } 1451 | 1452 | .recentsIcon_c99c29:hover .iconBadge__9293f { 1453 | background: var(--white); 1454 | } 1455 | } 1456 | } 1457 | 1458 | /* transparency-blur.css */ 1459 | @property --panel-blur { 1460 | syntax: 'on | off'; 1461 | inherits: false; 1462 | initial-value: off; 1463 | } 1464 | 1465 | @container body style(--panel-blur: on) { 1466 | .visual-refresh { 1467 | #app-mount { 1468 | --panel-backdrop-filter: blur(var(--blur-amount)); 1469 | } 1470 | 1471 | .popoverReactionHoverBar_f84418 /* message hover quick action bar */, 1472 | .tooltip__382e7 /* tooltips */ { 1473 | background: var(--bg-floating); 1474 | } 1475 | .menu_c1e9c4 /* context menus */, 1476 | .contentWrapper__08434 /* emoji/gif panel */, 1477 | .root__49fc1 /* modals like invite */, 1478 | .outer_c0bea0.biteSize_c0bea0:not(.custom-theme-background) /* small profile popup */, 1479 | .autocomplete__6b0e0 /* autocomplete */, 1480 | .container__55c99 /* search suggestions */, 1481 | .messagesPopoutWrap__45690 /* inbox */, 1482 | .popout__76f04 /* channel hover popout */ { 1483 | background: var(--bg-floating); 1484 | } 1485 | } 1486 | } 1487 | 1488 | @property --transparency-tweaks { 1489 | syntax: 'on | off'; 1490 | inherits: false; 1491 | initial-value: off; 1492 | } 1493 | 1494 | @container body style(--transparency-tweaks: on) { 1495 | .visual-refresh { 1496 | .formWithLoadedChatInput_f75fb0:before, 1497 | .children__9293f:after { 1498 | display: none; 1499 | } 1500 | } 1501 | } 1502 | 1503 | @property --remove-bg-layer { 1504 | syntax: 'on | off'; 1505 | inherits: false; 1506 | initial-value: off; 1507 | } 1508 | 1509 | @container body style(--remove-bg-layer: on) { 1510 | .bg__960e4 { 1511 | background: transparent !important; 1512 | } 1513 | } 1514 | 1515 | /* user-panel.css */ 1516 | @property --small-user-panel { 1517 | syntax: 'on | off'; 1518 | inherits: false; 1519 | initial-value: off; 1520 | } 1521 | 1522 | @container body style(--small-user-panel: on) { 1523 | .visual-refresh { 1524 | .base_c48ade { 1525 | grid-template-areas: 1526 | 'titleBar titleBar titleBar' 1527 | 'guildsList notice notice' 1528 | 'guildsList channelsList page' 1529 | 'guildsList userPanel page'; 1530 | } 1531 | .panels_c48ade { 1532 | max-width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width)); 1533 | } 1534 | } 1535 | } 1536 | 1537 | /* window-controls.css */ 1538 | @property --custom-window-controls { 1539 | syntax: 'on | off'; 1540 | inherits: false; 1541 | initial-value: off; 1542 | } 1543 | 1544 | body { 1545 | --window-control-size: 14px; 1546 | } 1547 | 1548 | @container body style(--custom-window-controls: on) { 1549 | .winButtons_c38106 { 1550 | gap: 0; 1551 | padding-right: calc(var(--gap) - (var(--window-control-size) / 2) + 1px); 1552 | } 1553 | .winButtons_c38106::before { 1554 | margin-right: calc(var(--custom-app-top-bar-height) / 4); 1555 | } 1556 | .winButton_c38106 > svg { 1557 | display: none; 1558 | } 1559 | .winButton_c38106 { 1560 | background: none !important; 1561 | width: calc(var(--window-control-size) * 2); 1562 | height: var(--custom-app-top-bar-height); 1563 | } 1564 | .winButton_c38106::after { 1565 | display: block; 1566 | content: ''; 1567 | height: var(--window-control-size); 1568 | width: var(--window-control-size); 1569 | border-radius: 50%; 1570 | } 1571 | .winButton_c38106:hover::after { 1572 | filter: brightness(0.7); 1573 | } 1574 | .winButton_c38106:active::after { 1575 | transform: scale(0.9); 1576 | } 1577 | .winButtonClose_c38106::after { 1578 | background-color: var(--dnd) !important; 1579 | } 1580 | .winButtonMinMax_c38106:nth-child(1)::after { 1581 | background-color: var(--idle) !important; 1582 | } 1583 | .winButtonMinMax_c38106:nth-child(2)::after { 1584 | background-color: var(--online) !important; 1585 | } 1586 | } 1587 | EOF 1588 | ) 1589 | 1590 | themecordBase=$(cat << 'EOF' 1591 | /** 1592 | * @name Themecord 1593 | * @author danihek 1594 | * @version 1.1.0 1595 | * @description Discord theme compatible with your wallpaper! 1596 | * @authorId 518107210803576852 1597 | * @source https://github.com/danihek/Themecord 1598 | */ 1599 | EOF 1600 | ) 1601 | 1602 | #!/usr/bin/env sh 1603 | 1604 | # RUN THIS SCRIPT RIGHT AFTER ONE OF THE FOLLOWING: 1605 | # - hellwal 1606 | # - pywal 1607 | # - wallust 1608 | # 1609 | # TO PROPERLY APPLY COLORS! 1610 | 1611 | confPath="/home/$USER/.config" 1612 | supportedClients=("Vencord" "vesktop") 1613 | availableClients=() 1614 | generatedColors="hellwal" # default option is hellwal 1615 | colosPath="" 1616 | themeFiller="$dark_theme" 1617 | 1618 | show_help() { 1619 | echo "Usage: themecord [OPTION]" 1620 | echo "Discord theme will always match your wallpaper! " 1621 | echo 1622 | echo "Options:" 1623 | echo " -h Display this message and exit" 1624 | echo " -l use light mode instead of dark mode" 1625 | echo 1626 | echo "Select wallpaper palette backend:" 1627 | echo " -g Use hellwal" 1628 | echo " -p Use pywal" 1629 | echo " -w Use wallust" 1630 | echo 1631 | echo " -f Provide path to generated discord colors" 1632 | echo 1633 | } 1634 | 1635 | while getopts ":hlwpgf:" opt; do 1636 | case ${opt} in 1637 | h ) 1638 | show_help 1639 | exit 0 1640 | ;; 1641 | l ) 1642 | themeFiller="$light_theme" 1643 | ;; 1644 | w ) 1645 | generatedColors="wallust" 1646 | ;; 1647 | p ) 1648 | generatedColors="wal" 1649 | ;; 1650 | g ) 1651 | generatedColors="hellwal" 1652 | colorsPath="$OPTARG" 1653 | ;; 1654 | f ) 1655 | colorsPath="$OPTARG" 1656 | ;; 1657 | \? ) 1658 | echo "Invalid option: -$OPTARG" 1>&2 1659 | echo 1660 | show_help 1661 | exit 1 1662 | ;; 1663 | esac 1664 | done 1665 | 1666 | function print_err() { 1667 | echo "[ERROR] $1" 1668 | echo "Exitting..." 1669 | } 1670 | 1671 | for client in "${supportedClients[@]}"; do 1672 | client_path=~/.config/$client 1673 | if test -d $(realpath "$client_path"); then 1674 | echo "[SUCCESS] $client DETECTED (path: $client_path)" 1675 | availableClients+=("$client") 1676 | continue 1677 | else 1678 | echo "[FAILURE] $client not DETECTED (path: $client_path)" 1679 | continue 1680 | fi 1681 | done 1682 | 1683 | if [ -z "$availableClients" ]; then 1684 | print_err "No compatible clients detected! In order to use this script you have to use compatible discord clients! Check out github page for more info: https://github.com/danihek/Themecord" 1685 | exit 1686 | fi 1687 | 1688 | for client in "${availableClients[@]}"; do 1689 | themecordPath="/home/$USER/.config/$client/themes/Themecord.css" 1690 | 1691 | if test -f "$themecordPath"; then 1692 | echo "[INFO] Themecord found in $client" 1693 | else 1694 | echo :root { > $themecordPath 1695 | echo "}" >> $themecordPath 1696 | printf '%s\n' "$themecordBase" >> $themecordPath 1697 | echo "[INFO] Added themecord base to: $themecordPath" 1698 | fi 1699 | done 1700 | 1701 | if [ "$colorsPath" == "" ]; then 1702 | colorsPath="/home/$USER/.cache/$generatedColors/discord-colors.css" 1703 | fi 1704 | 1705 | if [ ! -f "$colorsPath" ]; then 1706 | print_err "Cannot access $colorsPath" 1707 | exit 1708 | fi 1709 | echo "[INFO] discord-colors.css path: $colorsPath" 1710 | 1711 | for client in "${availableClients[@]}"; do 1712 | themecordPath="/home/$USER/.config/$client/themes/Themecord.css" 1713 | 1714 | echo "/* This discord theme is generated by Themecord! */" > $themecordPath 1715 | echo :root { >> $themecordPath 1716 | cat $colorsPath | while IFS= read -r line; do echo -e "\n\t"$line >> $themecordPath; done 1717 | 1718 | if [[ -v themecordFiller ]]; then 1719 | printf '%s\n' "$themecordFiller" >> $themecordPath 1720 | else 1721 | print_err "Cannot access \$themecordFiller content." 1722 | fi 1723 | 1724 | if [[ -v themeFiller ]]; then 1725 | printf '%s\n' "$themeFiller " >> $themecordPath 1726 | else 1727 | print_err "Cannot access \$themeFiller content." 1728 | fi 1729 | 1730 | if [[ -v themecordFiller2 ]]; then 1731 | printf '%s\n' "$themecordFiller2" >> $themecordPath 1732 | else 1733 | print_err "Cannot access \$themecordFiller2 content." 1734 | fi 1735 | 1736 | printf "%s\n" "$themecordBase" >> $themecordPath 1737 | done 1738 | --------------------------------------------------------------------------------