├── src ├── assets │ ├── preview.png │ ├── emoji-dark.png │ └── emoji-light.png ├── addons │ ├── username-background.css │ ├── square-avatar.css │ ├── monospace-fonts.css │ ├── mac-titlebar.css │ ├── compact-mode.css │ ├── vscode-user-area.css │ ├── syntax-highlight.css │ └── revert-rebrand.css └── main.css ├── LICENSE ├── README.md └── themes ├── tokyo-night.user.css └── tokyo-night.theme.css /src/assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashtrath/Tokyo-Night/HEAD/src/assets/preview.png -------------------------------------------------------------------------------- /src/assets/emoji-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashtrath/Tokyo-Night/HEAD/src/assets/emoji-dark.png -------------------------------------------------------------------------------- /src/assets/emoji-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashtrath/Tokyo-Night/HEAD/src/assets/emoji-light.png -------------------------------------------------------------------------------- /src/addons/username-background.css: -------------------------------------------------------------------------------- 1 | /* Compact Mode */ 2 | .compact_ec86aa .headerText_ec86aa > .username_ec86aa::before { 3 | content: ''; 4 | width: calc(100% + 6px); 5 | height: 100%; 6 | border-radius: 5px; 7 | background-color: currentColor; 8 | opacity: 0.3; 9 | position: absolute; 10 | top: 0; 11 | left: -4px; 12 | z-index: -1; 13 | } 14 | .compact_ec86aa .headerText_ec86aa > .username_ec86aa::after { 15 | content: ":"; 16 | } 17 | 18 | /* Cozy Mode */ 19 | .cozy_ec86aa .headerText_ec86aa > .username_ec86aa::before { 20 | content: ''; 21 | width: calc(100% + 7px); 22 | height: 100%; 23 | border-radius: 5px; 24 | background-color: currentColor; 25 | opacity: 0.3; 26 | position: absolute; 27 | top: 0; 28 | z-index: -1; 29 | /* repairs left shift*/ 30 | left: -3px; 31 | } 32 | .cozy_ec86aa .headerText_ec86aa > .username_ec86aa::after { 33 | content: ":"; 34 | } 35 | /* repairs left shift */ 36 | .cozy_ec86aa .headerText_ec86aa > .username_ec86aa { 37 | margin-left: 3px; 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Ashtrath 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 | -------------------------------------------------------------------------------- /src/addons/square-avatar.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --avatar-radius: 5px; 3 | } 4 | 5 | .avatar-2Vndt_, 6 | .userInfo_f3939d .avatar_f3939d svg foreignObject, /* Friend list avatars */ 7 | .avatar_e9f61e svg:not(.linkButtonIcon_c91bad) foreignObject, /* Server members avatars */ 8 | .avatar-2Vndt_ foreignObject, /* User card avatar */ 9 | .wrapper-1VLyxH svg foreignObject, 10 | .avatarHint_f89da9 foreignObject, 11 | .container_b2ca13 .avatar_b2ca13 svg foreignObject, /* Status bar avatar */ 12 | .headerAvatar_cd82a7 svg foreignObject, /* Active now avatars */ 13 | .avatar-3QF_VA svg foreignObject { 14 | /* Profile modal avatar */ 15 | mask: none; 16 | border-radius: var(--avatar-radius); 17 | } 18 | .wrapper-1VLyxH, /* user popout */ 19 | .avatar-2Vndt_, 20 | .avatar_ec86aa.clickable_ec86aa, /* Chat avatar */ 21 | .repliedMessage_ec86aa .replyAvatar_ec86aa { 22 | /* Replying to avatar */ 23 | border-radius: var(--avatar-radius); 24 | } 25 | 26 | /* Status Pill */ 27 | .wrapper-1VLyxH > svg > rect, 28 | .avatar_b69b77 > .mask-1FEkla > rect, 29 | .avatar-2Vndt_ > svg > rect, 30 | .avatar-3QF_VA > svg > rect, 31 | .listAvatar_e4be58 > svg > rect { 32 | rx: var(--avatar-radius); 33 | mask: none; 34 | stroke: var(--background-floating); 35 | stroke-width: 3px; 36 | } 37 | .avatar_b69b77 > .mask-1FEkla > rect, 38 | .avatar-2Vndt_ > svg > rect, 39 | .avatar-3QF_VA > svg > rect, 40 | .listAvatar_e4be58 > svg > rect { 41 | width: 20px !important; 42 | height: 20px !important; 43 | } 44 | -------------------------------------------------------------------------------- /src/addons/monospace-fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'JetBrainsMono Nerd Font'; 3 | src: local('JetBrainsMono Nerd Font'), url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@12a523c32d55bdde88074e5b09e2b2e1eb9b5342/patched-fonts/JetBrainsMono/Ligatures/Regular/complete/JetBrains%20Mono%20Regular%20Nerd%20Font%20Complete.ttf') format('truetype'); 4 | } 5 | 6 | :root { 7 | --font-primary: 'JetBrainsMono Nerd Font'; 8 | --font-code: 'JetBrainsMono Nerd Font'; 9 | --font-display: var(--font-primary); 10 | } 11 | 12 | /* Settings Menu Title */ 13 | .bd-settings-title, 14 | .customScroller_c25c6d div h1, 15 | .contentColumnDefault_c25c6d .marginBottom4_f7730b h1, 16 | .sectionTitle-3j2YI1 h1, 17 | .alignCenter_ec1a20 h1 { 18 | font-style: italic; 19 | font-weight: 600; 20 | } 21 | 22 | /* Server Name */ 23 | .header_fd6364 .name_fd6364 { 24 | font-style: italic; 25 | font-weight: 500; 26 | } 27 | 28 | /* Category Name */ 29 | .name_a08117.container-q97qHp .overflow_c74e70 { 30 | font-weight: 600; 31 | } 32 | 33 | /* Username on userpopout */ 34 | .bot_be84f0, .username_be84f0, 35 | .nameTag-2Nlmsy .discriminator-1bqsd3, 36 | .headerText-1-WmDq .nickname-t08Mck, 37 | .headerTagUsernameNoNickname-1TjuLc, 38 | .headerTagDiscriminatorNoNickname-dfcvHa { 39 | font-style: italic; 40 | font-weight: 500; 41 | } 42 | 43 | /* Link text */ 44 | .anchor-1MIwyf { 45 | font-style: italic; 46 | } 47 | 48 | /* Timestamp */ 49 | .compact_ec86aa .timestamp_ec86aa, 50 | .cozy_ec86aa .timestamp_ec86aa { 51 | font-style: italic; 52 | font-weight: 500; 53 | font-size: 0.7rem; 54 | } 55 | -------------------------------------------------------------------------------- /src/addons/mac-titlebar.css: -------------------------------------------------------------------------------- 1 | /* Mac Like Titlebar */ 2 | :root { 3 | --close-button-color: #e92a2ade; 4 | --minimize-button-color: #f7bc1bde; 5 | --maximize-button-color: #12db33de; 6 | --button-position: row; 7 | } 8 | 9 | .withFrame_a934d8 { 10 | margin: 0; 11 | height: 24px; 12 | } 13 | .typeWindows_a934d8 { 14 | flex-direction: var(--button-position); 15 | margin-left: 3px !important; 16 | } 17 | .withFrame_a934d8 .winButton_a934d8 > svg { 18 | display: none; 19 | } 20 | .withFrame_a934d8 .winButton_a934d8:hover { 21 | background-color: var(--background-teritary); 22 | } 23 | .withFrame_a934d8 .winButton_a934d8 { 24 | pointer-events: none; 25 | margin-left: -4px; 26 | top: 0; 27 | } 28 | .withFrame_a934d8 .winButton_a934d8::after { 29 | content: ""; 30 | padding: 7px; 31 | border-radius: 50px; 32 | pointer-events: fill; 33 | transition-duration: 200ms; 34 | } 35 | .withFrame_a934d8 .winButtonClose_a934d8::after { 36 | background-color: var(--close-button-color) !important; 37 | margin-top: 0px; 38 | } 39 | .withFrame_a934d8 .winButtonMinMax_a934d8:nth-child(3)::after { 40 | background-color: var(--maximize-button-color) !important; 41 | margin-top: 0px; 42 | } 43 | .withFrame_a934d8 .winButtonMinMax_a934d8:nth-child(4):after { 44 | background-color: var(--minimize-button-color) !important; 45 | margin-top: 0px; 46 | } 47 | .typeWindows_a934d8 > div:hover::after { 48 | transform: scale(1.1); 49 | } 50 | 51 | .withFrame_a934d8 .winButton_a934d8:nth-last-child(1) { 52 | order: 2; 53 | } 54 | .withFrame_a934d8 .winButton_a934d8:nth-last-child(2) { 55 | order: 3; 56 | } 57 | .withFrame_a934d8 .winButton_a934d8:nth-last-child(3) { 58 | order: 1; 59 | } 60 | -------------------------------------------------------------------------------- /src/addons/compact-mode.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 601px) and (max-width: 920px) { 2 | /* Minimize channels sidebar */ 3 | .wrapper_a7e7a8.guilds__2b93a[aria-label] { 4 | z-index: 30 !important; 5 | } 6 | 7 | .base__3e6af .sidebar_ded4b5 { 8 | position: fixed; 9 | z-index: 20; 10 | top: 0; 11 | bottom: 0; 12 | left: -240px; 13 | border-radius: 0; 14 | transition: left 200ms; 15 | transition-delay: 150ms; 16 | } 17 | 18 | .sidebar_ded4b5:hover, 19 | .wrapper_a7e7a8:hover + .base__3e6af > .content__4bf10 > .sidebar_ded4b5{ 20 | left: 72px; 21 | } 22 | 23 | /* Hide member list */ 24 | .membersWrap__90226 { 25 | display: none; 26 | } 27 | 28 | /* Compact Top bar */ 29 | .toolbar__88c63 > :nth-child(2), 30 | .toolbar__88c63 > :nth-child(4) { 31 | display: none; 32 | } 33 | 34 | /* Compact Search */ 35 | .searchBar-zdmu7v { 36 | width: 28px; 37 | transition: width 0.2s ease-in-out; 38 | } 39 | .searchBar-zdmu7v .iconContainer__8fa9c { 40 | width: 24px !important; 41 | height: 24px; 42 | cursor: pointer !important; 43 | } 44 | .searchBar-zdmu7v svg { 45 | color: var(--interactive-normal); 46 | width: 24px !important; 47 | height: 24px; 48 | padding: 0.5px; 49 | } 50 | .searchBar-zdmu7v:hover svg { 51 | color: var(--interactive-hover) 52 | } 53 | .search-1FM8Qc .public-DraftEditorPlaceholder-inner { 54 | transition: opacity 0.25s ease-in-out; 55 | opacity: 0; 56 | } 57 | .search-1FM8Qc.open-3y3yI_ .public-DraftEditorPlaceholder-inner { 58 | opacity: 1; 59 | } 60 | .search-1FM8Qc.open-3y3yI_ .searchBar-zdmu7v svg { 61 | color: var(--interactive-muted); 62 | transform: scale(0.8); 63 | } 64 | } 65 | 66 | /* Very Compact (chat only) */ 67 | @media screen and (min-width: 0px) and (max-width: 600px) { 68 | .panels__58331 { position: fixed; bottom: -999px; } 69 | .chat__52833 { margin-left: 0px; } 70 | .sidebar_ded4b5 { width: 0px; } 71 | .sidebar_ded4b5 .thin_b1c063 { display: none; } 72 | .sidebar_ded4b5 { padding: 0px !important; } 73 | .toolbar__88c63 { display: none; } 74 | .children__32014 { margin-right: 10px; } 75 | .wrapper_a7e7a8 { display: none; } 76 | .membersWrap__90226 { display: none; } 77 | } 78 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # IMPORTANT! THIS THEME IS NOT ACTIVELY MAINTAINED ANYMORE BECAUSE IM NOT INTERESTED ON DISCORD THEMING ANYMORE, FORK AND PRs ARE STILL APPRECIATED AND WELCOMED! 2 |

Tokyo Night

3 | 4 | ![](https://github.com/Dyzean/Tokyo-Night/blob/main/src/assets/preview.png?raw=true) 5 | 6 |

A clean, dark, Discord port of the V.S. Code Tokyo Night theme.

7 | 8 | --- 9 | 10 | ## Installation 11 | 12 | ### [BetterDiscord](https://betterdiscord.app) 13 | 14 | 1. Download the theme file [here](https://betterdiscord.app/Download?id=439) 15 | 2. Place it in the BetterDiscord themes folder 16 | 3. Go to user settings (CTRL + ,) 17 | 4. Go to the "BetterDiscord" category and select the "Themes" tab. 18 | 5. Enable Tokyo Night in the themes tab 19 | 20 | ### [Vencord](https://vencord.dev) 21 | 22 | ##### Online Theme Method 23 | 24 | 1. Go to user settings (CTRL + ,) 25 | 2. Go to the "Vencord" category and select the "Themes" tab, then go to the "Online Themes" section. 26 | 3. In the input field under "THEMES" paste the following URL. 27 | ``` 28 | https://raw.githubusercontent.com/Dyzean/Tokyo-Night/main/themes/tokyo-night.theme.css 29 | ``` 30 | 31 | ##### Local Theme Method 32 | 33 | 1. Go [here](https://github.com/Dyzean/Tokyo-Night/blob/main/themes/tokyo-night.theme.css) and download the theme file. 34 | 2. Place it in the Vencord themes folder 35 | 3. Go to user settings (CTRL + ,) 36 | 4. Go to the "Vencord" category and select the "Themes" tab, then go to the "Local Themes" section. 37 | 5. Enable Tokyo Night in the themes tab 38 | 39 | ### Stylus | Extension: [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)/[Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us) 40 | 41 | > [!Note] 42 | > To be able to customize this theme, please fork using [this link](https://github.com/Dyzean/Tokyo-Night/fork) and follow the instructions in `tokyo-night.user.css` starting at line 12. 43 | 44 | 1. Open [this link](https://github.com/Dyzean/Tokyo-Night/blob/main/themes/tokyo-night.user.css) in a new browser tab. 45 | 2. Press the `Install Style` button. 46 | 47 | ## Credits 48 | 49 | - [LuckFire](https://github.com/LuckFire) for [Better Quotes](https://github.com/LuckFire/CSS-Snippets/tree/master/BetterQuotes) 50 | - [NYRI4](https://github.com/NYRI4) for [Discolored](https://github.com/NYRI4/Discolored) 51 | - [GooseNest](https://github.com/Goose-Nest) for [Revert Rebrand](https://github.com/Goose-Nest/GT-RevertRebrand) 52 | - Also Huge thanks for BD & Powercord servers for snippets and help! 53 | -------------------------------------------------------------------------------- /src/addons/vscode-user-area.css: -------------------------------------------------------------------------------- 1 | /* === User Menu, Credit to Strencher#1044 for this === */ 2 | /* === Disabled cuz broken with the new discord update === */ 3 | 4 | /* .guilds-2JjMmN { 5 | height: calc(100% - 128px); 6 | } 7 | .guilds-2JjMmN .scroller-3X7KbA { 8 | background: var(--background-tertiary); 9 | } */ 10 | 11 | /* added :not(.powercord-spotify) so it doesn't break powercord spotify panel plugin. 12 | (make a issue or pr if you found a better way to do this.) */ 13 | 14 | /* :not(.powercord-spotify) > .container-YkUktl { 15 | position: absolute; 16 | left: -62px; 17 | bottom: 39px; 18 | z-index: 1; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | :not(.powercord-spotify) > .container-YkUktl::before { 23 | content: ""; 24 | display: block; 25 | position: fixed; 26 | width: 72px; 27 | height: 128px; 28 | bottom: 0; 29 | left: 0; 30 | pointer-events: none; 31 | z-index: 1; 32 | background: var(--background-tertiary); 33 | } 34 | .button-12Fmur { 35 | color: var(--interactive-normal) !important; 36 | transition: color 150ms ease-in; 37 | } 38 | .button-12Fmur:hover { 39 | color: var(--interactive-hover) !important; 40 | } 41 | .title-338goq { 42 | color: var(--accent-color); 43 | font-weight: 650; 44 | } 45 | .sidebar-1tnWFu { 46 | overflow: visible !important; 47 | } 48 | .base-2jDfDU { 49 | overflow: visible !important; 50 | max-width: calc(100% - 72px); 51 | } 52 | .panels-3wFtMD { 53 | background-color: var(--background-tertiary); 54 | padding-bottom: 25px; 55 | } 56 | .panel-j1Uci_ .powercord-spotify { 57 | padding-bottom: none; 58 | } 59 | :not(.powercord-spotify) > .container-YkUktl .nameTag-sc-gpq { 60 | position: absolute; 61 | bottom: -37px; 62 | align-items: center; 63 | display: flex; 64 | left: 5px; 65 | z-index: 2; 66 | } 67 | :not(.powercord-spotify) > .container-YkUktl .flex-2S1XBF { 68 | left: 140px; 69 | bottom: -64px; 70 | position: relative; 71 | } 72 | :not(.powercord-spotify) > .container-YkUktl .flex-2S1XBF button:last-of-type { 73 | position: fixed; 74 | bottom: 38px; 75 | transform: scale(1.7); 76 | left: 21px; 77 | z-index: 2; 78 | } 79 | :not(.powercord-spotify) > .container-YkUktl .flex-2S1XBF button:last-of-type:hover { 80 | background: none; 81 | } 82 | :not(.powercord-spotify) > .container-YkUktl .flex-2S1XBF button:not(:last-of-type) { 83 | background: none; 84 | left: 60px; 85 | transform: scale(0.7); 86 | } 87 | :not(.powercord-spotify) > .container-YkUktl .avatarWrapper-1B9FTW { 88 | position: absolute; 89 | left: 10px; 90 | z-index: 2; 91 | top: -25px; 92 | } 93 | :not(.powercord-spotify) > .container-YkUktl .subtext-2HDqJ7 { 94 | font-size: 14px; 95 | margin-left: 3px; 96 | } 97 | :not(.powercord-spotify) > .container-YkUktl .hoverRoll-2XwpoF { 98 | width: 140px; 99 | } 100 | :not(.powercord-spotify) > .container-YkUktl .hovered-20u3oh { 101 | text-overflow: unset; 102 | } */ 103 | 104 | /* Fix Status picker position */ 105 | /* #status-picker { 106 | bottom: -8em; 107 | left: 4.3em; 108 | } */ 109 | -------------------------------------------------------------------------------- /themes/tokyo-night.user.css: -------------------------------------------------------------------------------- 1 | @-moz-document domain("discord.com") { 2 | /* ==UserStyle== 3 | @name Tokyo Night 4 | @description A Discord port of the V.S. Code "Tokyo Night" theme. 5 | @author Ashtrath 6 | @namespace https://github.com/Dyzean/Tokyo-Night/ 7 | @version 2.1.0 8 | ==/UserStyle== */ 9 | 10 | @import url("https://dyzean.github.io/Tokyo-Night/src/main.css");} 11 | 12 | /* Read this before editing stuff!!! 13 | * 14 | * > To comment or uncomment a line you need to put those "/" and "*" characters as you can see at the beginning and ending of my comments. 15 | * (You don't need to put a * at each line like I do, it's just for readability). See more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Comments 16 | * 17 | * > You can play with the values and see how it goes, don't delete "px" after the value if you don't have knowledges in CSS. 18 | * 19 | * > To change the colors, replace the HEX code with the one you picked here : https://htmlcolorcodes.com 20 | */ 21 | 22 | /* ====== Optional Addons ====== */ 23 | @import url("https://dyzean.github.io/Tokyo-Night/src/addons/revert-rebrand.css"); 24 | @import url("https://nyri4.github.io/Discolored/main.css"); 25 | 26 | /* VSCode User Area, get Visual Studio like user area (Enabled by default) 27 | note: this addons doesn't works well with Compact Mode addon, 28 | please disable this when using Compact Mode addon */ 29 | @import url("https://dyzean.github.io/Tokyo-Night/src/addons/vscode-user-area.css"); 30 | 31 | /* Syntax Highlight, get hljs styling with Tokyo Night scheme (Enabled by default) */ 32 | @import url("https://dyzean.github.io/Tokyo-Night/src/addons/syntax-highlight.css"); 33 | 34 | /* Username Background, get colorful background behind username on chat, works best with Monospace addon. (Disabled by default) */ 35 | /* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/username-background.css"); */ 36 | 37 | /* Compact Mode, hide some UI part on specific windows size, 38 | <920px Channel sidebar and member list get hidden, <600px Chat window only. (Disabled by default) */ 39 | /* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/compact-mode.css"); */ 40 | 41 | /* Monospace, use monospaced font (JetBrains Mono) instead the default one (Disabled by default) */ 42 | /* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/monospace-fonts.css"); */ 43 | 44 | /* Square Avatar, get square avatar on chat memberlist and user area (Disabled by default) */ 45 | /* @import url("https://dyzean.github.io/Tokyo-Night/src/addons/square-avatar.css"); */ 46 | 47 | 48 | /* ==== Discord Variables ==== */ 49 | .theme-dark { /* Dark Mode */ 50 | 51 | /* Header Color */ 52 | --header-primary: var(--text-normal); 53 | --header-secondary: var(--text-muted); 54 | 55 | /* Text Color */ 56 | --text-normal: #b1bae6; 57 | --text-muted: #565f89; 58 | --interactive-normal: #5f647e; 59 | --interactive-hover: #a2a6c2; 60 | --interactive-active: #b5bad1; 61 | --interactive-muted: #55576b; 62 | 63 | /* Background Color */ 64 | --background-primary: #1a1b26; 65 | --background-secondary: #171722; 66 | --background-secondary-alt: #13131a; 67 | --background-tertiary: #16161e; 68 | --background-tertiary-alt: var(--background-secondary-alt); 69 | --background-accent: #434461; 70 | --background-floating: #161620; 71 | --background-modifier-hover: #212331c0; 72 | --background-modifier-active: #282a3680; 73 | --background-modifier-selected: #24263171; 74 | --background-modifier-accent: #1e1e29; 75 | --background-mentioned: #252836; 76 | --border-mentioned: #474c64; 77 | --background-mentioned-hover: #2f3344; 78 | --accent-color: #7aa2f7; 79 | 80 | /* Folder Color */ 81 | --folder-color: #202332d0; 82 | --folder-color-light: #2f3342d0; 83 | 84 | /* Scrollbars Color */ 85 | --scrollbar-thin-thumb: transparent; 86 | --scrollbar-thin-track: transparent; 87 | --scrollbar-auto-thumb: #2b2b46af; 88 | --scrollbar-auto-thumb-hover: #27273d85; 89 | --scrollba-auto-track: transparent; 90 | --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb); 91 | --scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track); 92 | 93 | /* Chat Box Color */ 94 | --channeltextarea-background: var(--background-secondary); 95 | --channeltextarea-background-hover: var(--background-tertiary); 96 | 97 | /* Square avatar addons */ 98 | --avatar-roundess: 5px; 99 | } 100 | 101 | .theme-light { /* Light Mode */ 102 | 103 | /* Header Color */ 104 | --header-primary: var(--text-normal); 105 | --header-secondary: var(--text-muted); 106 | 107 | /* Text Color */ 108 | --text-normal: #2e3338; 109 | --text-muted: #747f8d; 110 | --interactive-normal: #4c505e; 111 | --interactive-hover: #404350; 112 | --interactive-active: #373a44; 113 | --interactive-muted: #77797c; 114 | 115 | /* Background Color */ 116 | --background-primary: #d5d6db; 117 | --background-secondary: #cecfd4; 118 | --background-secondary-alt: #b6b7bd; 119 | --background-tertiary: #c5c6cc; 120 | --background-tertiary-alt: #bbbbc2; 121 | --background-accent: #9ca3bb; 122 | --background-floating: #c2c2c9; 123 | --background-mentioned: #c4c7da; 124 | --background-modifier-hover: #2c2a2a25; 125 | --background-modifier-active: #5a525229; 126 | --background-modifier-selected: #555e693d; 127 | --background-modifier-accent: #06060714; 128 | --border-mentioned: #a9afcf; 129 | --background-mentioned-hover: #cfd2e9; 130 | --accent-color: #365aaa; 131 | 132 | /* Folder Color */ 133 | --folder-color: #a7a6a6d0; 134 | --folder-color-light: #afafafd0; 135 | 136 | /* Input Box Color */ 137 | --input-box-bg: #c2c2c7; 138 | --input-box-border: #b3b4b8; 139 | --input-box-border-focus: #959699; 140 | 141 | /* Scrollbars Color */ 142 | --scrollbar-thin-thumb: transparent; 143 | --scrollbar-thin-track: transparent; 144 | --scrollbar-auto-thumb: #a0a0a0af; 145 | --scrollbar-auto-thumb-hover: #77777785; 146 | --scrollbar-auto-track: transparent; 147 | --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb); 148 | --scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track); 149 | 150 | /* Chat Box Color */ 151 | --channeltextarea-background: var(--background-secondary); 152 | --channeltextarea-background-hover: var(--background-tertiary); 153 | 154 | /* Square avatar addons */ 155 | --avatar-roundess: 5px; 156 | } -------------------------------------------------------------------------------- /themes/tokyo-night.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Tokyo Night 3 | * @author Ashtrath 4 | * @version 2.1.0 5 | * @description A Discord port of the V.S. Code "Tokyo Night" theme. 6 | * @source https://github.com/Dyzean/Tokyo-Night/ 7 | * @authorId 2354831939099688962 8 | */ 9 | 10 | /* DONT TOUCH THIS!!! */ 11 | @import url("https://raw.githubusercontent.com/ashtrath/Tokyo-Night/refs/heads/main/src/main.css"); 12 | 13 | /* Read this before editing stuff!!! 14 | * 15 | * > To comment or uncomment a line you need to put those "/" and "*" characters as you can see at the beginning and ending of my comments. 16 | * (You don't need to put a * at each line like I do, it's just for readability). See more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Comments 17 | * 18 | * > You can play with the values and see how it goes, don't delete "px" after the value if you don't have knowledges in CSS. 19 | * 20 | * > To change the colors, replace the HEX code with the one you picked here : https://htmlcolorcodes.com 21 | */ 22 | 23 | /* ====== Optional Addons ====== */ 24 | @import url("https://raw.githubusercontent.com/ashtrath/Tokyo-Night/refs/heads/main/src/addons/revert-rebrand.css"); 25 | @import url("https://nyri4.github.io/Discolored/main.css"); 26 | 27 | /* VSCode User Area, get Visual Studio like user area (Enabled by default) 28 | note: this addons doesn't works well with Compact Mode addon, 29 | please disable this when using Compact Mode addon */ 30 | @import url("https://raw.githubusercontent.com/ashtrath/Tokyo-Night/refs/heads/main/src/addons/vscode-user-area.css"); 31 | 32 | /* Syntax Highlight, get hljs styling with Tokyo Night scheme (Enabled by default) */ 33 | @import url("https://raw.githubusercontent.com/ashtrath/Tokyo-Night/refs/heads/main/src/addons/syntax-highlight.css"); 34 | 35 | /* Username Background, get colorful background behind username on chat, works best with Monospace addon. (Disabled by default) */ 36 | /* @import url("https://raw.githubusercontent.com/ashtrath/Tokyo-Night/refs/heads/main/src/addons/username-background.css"); */ 37 | 38 | /* Mac Like Titlebar (windows only), get mac style titlebar on windows client (Enabled by default) */ 39 | @import url("https://raw.githubusercontent.com/ashtrath/Tokyo-Night/refs/heads/main/src/addons/mac-titlebar.css"); 40 | 41 | /* Compact Mode, hide some UI part on specific windows size, 42 | <920px Channel sidebar and member list get hidden, <600px Chat window only. (Disabled by default) */ 43 | /* @import url("https://raw.githubusercontent.com/ashtrath/Tokyo-Night/refs/heads/main/src/addons/compact-mode.css"); */ 44 | 45 | /* Monospace, use monospaced font (JetBrains Mono) instead the default one (Disabled by default) */ 46 | /* @import url("https://raw.githubusercontent.com/ashtrath/Tokyo-Night/refs/heads/main/src/addons/monospace-fonts.css"); */ 47 | 48 | /* Square Avatar, get square avatar on chat memberlist and user area (Disabled by default) */ 49 | /* @import url("https://raw.githubusercontent.com/ashtrath/Tokyo-Night/refs/heads/main/src/addons/square-avatar.css"); */ 50 | 51 | 52 | /* ==== Discord Variables ==== */ 53 | .theme-dark { /* Dark Mode */ 54 | 55 | /* Header Color */ 56 | --header-primary: var(--text-normal); 57 | --header-secondary: var(--text-muted); 58 | 59 | /* Text Color */ 60 | --text-normal: #b1bae6; 61 | --text-muted: #565f89; 62 | --interactive-normal: #5f647e; 63 | --interactive-hover: #a2a6c2; 64 | --interactive-active: #b5bad1; 65 | --interactive-muted: #55576b; 66 | 67 | /* Background Color */ 68 | --background-primary: #1a1b26; 69 | --background-secondary: #171722; 70 | --background-secondary-alt: #13131a; 71 | --background-tertiary: #16161e; 72 | --background-tertiary-alt: var(--background-secondary-alt); 73 | --background-accent: #434461; 74 | --background-floating: #161620; 75 | --background-modifier-hover: #212331c0; 76 | --background-modifier-active: #282a3680; 77 | --background-modifier-selected: #24263171; 78 | --background-modifier-accent: #1e1e29; 79 | --background-mentioned: #252836; 80 | --border-mentioned: #474c64; 81 | --background-mentioned-hover: #2f3344; 82 | --accent-color: #7aa2f7; 83 | 84 | /* Folder Color */ 85 | --folder-color: #202332d0; 86 | --folder-color-light: #2f3342d0; 87 | 88 | /* Scrollbars Color */ 89 | --scrollbar-thin-thumb: transparent; 90 | --scrollbar-thin-track: transparent; 91 | --scrollbar-auto-thumb: #2b2b46af; 92 | --scrollbar-auto-thumb-hover: #27273d85; 93 | --scrollbar-auto-track: transparent; 94 | --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb); 95 | --scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track); 96 | 97 | /* Chat Box Color */ 98 | --channeltextarea-background: var(--background-secondary); 99 | --channeltextarea-background-hover: var(--background-tertiary); 100 | 101 | /* Square avatar addons */ 102 | --avatar-roundess: 5px; 103 | 104 | /* Mac Titlebar addons */ 105 | --close-button-color: #e92a2ade; 106 | --maximize-button-color: #f7bc1bde; 107 | --minimize-button-color: #12db33de; 108 | } 109 | 110 | .theme-light { /* Light Mode */ 111 | 112 | /* Header Color */ 113 | --header-primary: var(--text-normal); 114 | --header-secondary: var(--text-muted); 115 | 116 | /* Text Color */ 117 | --text-normal: #2e3338; 118 | --text-muted: #747f8d; 119 | --interactive-normal: #4c505e; 120 | --interactive-hover: #404350; 121 | --interactive-active: #373a44; 122 | --interactive-muted: #77797c; 123 | 124 | /* Background Color */ 125 | --background-primary: #d5d6db; 126 | --background-secondary: #cecfd4; 127 | --background-secondary-alt: #b6b7bd; 128 | --background-tertiary: #c5c6cc; 129 | --background-tertiary-alt: #bbbbc2; 130 | --background-accent: #9ca3bb; 131 | --background-floating: #c2c2c9; 132 | --background-mentioned: #c4c7da; 133 | --background-modifier-hover: #2c2a2a25; 134 | --background-modifier-active: #5a525229; 135 | --background-modifier-selected: #555e693d; 136 | --background-modifier-accent: #06060714; 137 | --border-mentioned: #a9afcf; 138 | --background-mentioned-hover: #cfd2e9; 139 | --accent-color: #365aaa; 140 | 141 | /* Folder Color */ 142 | --folder-color: #a7a6a6d0; 143 | --folder-color-light: #afafafd0; 144 | 145 | /* Input Box Color */ 146 | --input-box-bg: #c2c2c7; 147 | --input-box-border: #b3b4b8; 148 | --input-box-border-focus: #959699; 149 | 150 | /* Scrollbars Color */ 151 | --scrollbar-thin-thumb: transparent; 152 | --scrollbar-thin-track: transparent; 153 | --scrollbar-auto-thumb: #a0a0a0af; 154 | --scrollbar-auto-thumb-hover: #77777785; 155 | --scrollbar-auto-track: transparent; 156 | --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb); 157 | --scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track); 158 | 159 | /* Chat Box Color */ 160 | --channeltextarea-background: var(--background-secondary); 161 | --channeltextarea-background-hover: var(--background-tertiary); 162 | 163 | /* Square avatar addons */ 164 | --avatar-roundess: 5px; 165 | 166 | /* Mac Titlebar addons */ 167 | --close-button-color: #e92a2ade; 168 | --maximize-button-color: #f7bc1bde; 169 | --minimize-button-color: #12db33de; 170 | --button-position: row; 171 | 172 | } 173 | -------------------------------------------------------------------------------- /src/addons/syntax-highlight.css: -------------------------------------------------------------------------------- 1 | /* stolen from https://github.com/x6r/dracula/blob/main/addons/hljs-styling.scss :D */ 2 | :root { 3 | /* ---- Default Colors -- */ 4 | --background: var(--background-secondary); 5 | --text-default: #a9b1d6; 6 | --color-1: #f7768e; 7 | --color-2: #ff9e64; 8 | --color-3: #e0af68; 9 | --color-4: #9ece6a; 10 | --color-5: #73daca; 11 | --color-6: #b4f9f8; 12 | --color-7: #2ac3de; 13 | --color-8: #7dcfff; 14 | --color-9: #7aa2f7; 15 | --color-10: #bb9af7; 16 | --color-11: #c0caf5; 17 | /* ---- HLJS Default -- */ 18 | --hljs-attribute: var(--color-7); 19 | --hljs-nomarkup: var(--color-8); 20 | --hljs-variable: var(--color-11); 21 | --hljs-meta: var(--color-8); 22 | --hljs-meta-string: var(--color-4); 23 | --hljs-meta-keyword: var(--hljs-meta); 24 | --hljs-literal: var(--color-2); 25 | --hljs-section: var(--color-9); 26 | --hljs-number: var(--color-2); 27 | --hljs-name: var(--color-4); 28 | --hljs-selector-tag: var(--color-4); 29 | --hljs-selector-class: var(--color-9); 30 | --hljs-selector-attr: var(--color-7); 31 | --hljs-selector-pseudo: var(--color-7); 32 | --hljs-selector-id: var(--hljs-selector-class); 33 | --hljs-keyword: var(--color-10); 34 | --hljs-built_in: var(--color-3); 35 | --hljs-title: var(--color-9); 36 | --hljs-link: var(--color-5); 37 | --hljs-bullet: var(--color-10); 38 | --hljs-symbol: var(--color-1); 39 | --hljs-addition: var(--color-1); 40 | --hljs-deletion: var(--color-5); 41 | --hljs-attr: var(--color-2); 42 | --hljs-punctuation: var(--text-default); 43 | --hljs-regexp: var(--color-6); 44 | --hljs-type: var(--color-10); 45 | --hljs-operator: var(--color-10); 46 | --hljs-rest_arg: var(--text-default); 47 | --hljs-template-variable: var(--color-11); 48 | /* ---- HLJS Specific -- */ 49 | /* --> Params */ 50 | --hljs-params: var(--text-default); 51 | --hljs-params-attr: var(--hljs-params); 52 | /* --> Comment */ 53 | --hljs-comment: #565f89; 54 | --hljs-comment-doctag: var(--hljs-comment); 55 | /* --> String */ 56 | --hljs-string: var(--color-4); 57 | --hljs-string-subst: var(--color-5); 58 | --hljs-string-template-variable: var(--color-2); 59 | /* --> Tag */ 60 | --hljs-tag: var(--color-7); 61 | --hljs-tag-name: var(--color-10); 62 | --hljs-tag-attr: var(--color-5); 63 | /* --> Function */ 64 | --hljs-function: var(--text-default); 65 | --hljs-function-keyword: var(--hljs-keyword); 66 | --hljs-function-title: var(--hljs-title); 67 | --hljs-function-params: var(--hljs-params); 68 | --hljs-function-literal: var(--hljs-literal); 69 | --hljs-function-operator: var(--hljs-operator); 70 | /* --> Class */ 71 | --hljs-class: var(--text-default); 72 | --hljs-class-keyword: var(--color-6); 73 | --hljs-class-title: var(--color-7); 74 | } 75 | 76 | #app-mount .hljs { 77 | font-family: 'JetBrainsMono Nerd Font', 'JetBrains Mono', var(--font-code), monospace; 78 | background: var(--background-secondary); 79 | color: var(--text-normal); 80 | padding: 15px 20px; 81 | border-radius: 5px; 82 | } 83 | 84 | #app-mount .codeLine-3a3dbd { 85 | color: var(--text-default); 86 | } 87 | 88 | #app-mount .hljs-comment { 89 | color: var(--hljs-comment); 90 | } 91 | 92 | #app-mount .hljs-attribute { 93 | color: var(--hljs-attribute); 94 | } 95 | 96 | #app-mount .hljs-nomarkup { 97 | color: var(--hljs-nomarkup); 98 | } 99 | 100 | #app-mount .hljs-variable { 101 | color: var(--hljs-variable); 102 | } 103 | 104 | #app-mount .hljs-meta { 105 | color: var(--hljs-meta); 106 | } 107 | 108 | #app-mount .hljs-meta-string { 109 | color: var(--hljs-meta-string); 110 | } 111 | 112 | #app-mount .hljs-meta-keyword { 113 | color: var(--hljs-meta-keyword); 114 | } 115 | 116 | #app-mount .hljs-literal { 117 | color: var(--hljs-literal); 118 | } 119 | 120 | #app-mount .hljs-string { 121 | color: var(--hljs-string); 122 | } 123 | 124 | #app-mount .hljs-section { 125 | color: var(--hljs-section); 126 | } 127 | 128 | #app-mount .hljs-number { 129 | color: var(--hljs-number); 130 | } 131 | 132 | #app-mount .hljs-tag { 133 | color: var(--hljs-tag); 134 | } 135 | 136 | #app-mount .hljs-name { 137 | color: var(--hljs-name); 138 | } 139 | 140 | #app-mount .hljs-selector-tag { 141 | color: var(--hljs-selector-tag); 142 | } 143 | 144 | #app-mount .hljs-selector-class { 145 | color: var(--hljs-selector-class); 146 | } 147 | 148 | #app-mount .hljs-selector-attr { 149 | color: var(--hljs-selector-attr); 150 | } 151 | 152 | #app-mount .hljs-selector-pseudo { 153 | color: var(--hljs-selector-pseudo); 154 | } 155 | 156 | #app-mount :not(.hljs-function) > .hljs-keyword { 157 | color: #9f81d6; 158 | font-style: italic; 159 | } 160 | 161 | #app-mount .hljs-function { 162 | color: var(--hljs-function); 163 | } 164 | 165 | #app-mount .hljs-built_in { 166 | color: var(--hljsbuilt_in); 167 | } 168 | 169 | #app-mount .hljs-title { 170 | color: var(--hljs-title); 171 | } 172 | 173 | #app-mount .hljs-link { 174 | color: var(--hljs-link); 175 | } 176 | 177 | #app-mount .hljs-bullet { 178 | color: var(--hljs-bullet); 179 | } 180 | 181 | #app-mount .hljs-symbol { 182 | color: var(--hljs-symbol); 183 | } 184 | 185 | #app-mount .hljs-addition { 186 | color: var(--hljs-addition); 187 | } 188 | 189 | #app-mount .hljs-deletion { 190 | color: var(--hljs-deletion); 191 | } 192 | 193 | #app-mount .hljs-attr { 194 | color: var(--hljs-attr); 195 | } 196 | 197 | #app-mount .hljs-punctuation { 198 | color: var(--hljs-punctuation); 199 | } 200 | 201 | #app-mount .hljs-regexp { 202 | color: var(--hljs-regexp); 203 | } 204 | 205 | #app-mount .hljs-type { 206 | color: var(--hljs-type); 207 | } 208 | 209 | #app-mount .hljs-selector-id { 210 | color: var(--hljs-selector-id); 211 | } 212 | 213 | #app-mount .hljs-params { 214 | color: var(--hljs-params); 215 | } 216 | 217 | #app-mount .hljs-operator { 218 | color: var(--hljs-operator); 219 | } 220 | 221 | #app-mount .hljs-rest_arg { 222 | color: var(--hljs-rest_arg); 223 | } 224 | 225 | #app-mount .hljs-template-variable { 226 | color: var(--hljs-template-variable); 227 | } 228 | 229 | #app-mount .hljs-comment .hljs-doctag { 230 | color: var(--hljs-comment-doctag); 231 | } 232 | 233 | #app-mount .hljs-params .hljs-attr { 234 | color: var(--hljs-params-attr); 235 | } 236 | 237 | #app-mount .hljs-string .hljs-subst { 238 | color: var(--hljs-string-subst); 239 | } 240 | 241 | #app-mount .hljs-string .hljs-template-variable { 242 | color: var(--hljs-string-template-variable); 243 | } 244 | 245 | #app-mount .hljs-tag .hljs-name { 246 | color: var(--hljs-tag-name); 247 | } 248 | 249 | #app-mount .hljs-tag .hljs-attr { 250 | color: var(--hljs-tag-attr); 251 | } 252 | 253 | #app-mount .hljs-function .hljs-keyword { 254 | color: var(--hljs-function-keyword); 255 | } 256 | 257 | #app-mount .hljs-function .hljs-title { 258 | color: var(--hljs-function-title); 259 | } 260 | 261 | #app-mount .hljs-function .hljs-literal { 262 | color: var(--hljs-function-literal); 263 | } 264 | 265 | #app-mount .hljs-function .hljs-params { 266 | color: var(--hljs-function-params); 267 | } 268 | 269 | #app-mount .hljs-function .hljs-operator { 270 | color: var(--hljs-function-operator); 271 | } 272 | 273 | #app-mount .hljs-class .hljs-keyword { 274 | color: var(--hljs-class-keyword); 275 | } 276 | 277 | #app-mount .hljs-class .hljs-title { 278 | color: var(--hljs-class-title); 279 | } 280 | 281 | /* Haskell Specific Syntax */ 282 | #app-mount .hs .hljs-type { 283 | color: var(--color-7); 284 | } 285 | 286 | /* Lua Specific Syntax */ 287 | #app-mount .lua .hljs-built_in { 288 | color: var(--color-7); 289 | } 290 | 291 | /* Clang Specific Syntax */ 292 | #app-mount .c .hljs-keyword { 293 | color: var(--color-7); 294 | } 295 | #app-mount .c .hljs-built_in { 296 | color: var(--color-9); 297 | } 298 | #app-mount .c > .hljs-keyword { 299 | color: var(--color-10); 300 | } 301 | 302 | /* CSS Specific Syntax */ 303 | #app-mount .css .hljs-built_in { 304 | color: var(--color-5); 305 | } 306 | 307 | /* Rust Specific Syntax */ 308 | #app-mount .rust .hljs-built_in { 309 | color: var(--color-7); 310 | } 311 | 312 | /* PHP Specific Syntax */ 313 | #app-mount .php .hljs-variable { 314 | color: var(--color-10); 315 | } 316 | -------------------------------------------------------------------------------- /src/addons/revert-rebrand.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Revert Rebrand by Ducko with some tweak from me. 3 | **/ 4 | 5 | /* Variables revert but without old red and green */ 6 | body { 7 | /* Revert to old font var */ 8 | --font-display: var(--font-primary); 9 | 10 | /* Found in Discord's CSS file: oldBrand vs newBrand HTML class - here we force old brand vars via copying */ 11 | --brand-experiment-100: #f8f9fd; 12 | --brand-experiment-130: #f2f4fc; 13 | --brand-experiment-160: #ebeefa; 14 | --brand-experiment-200: #e3e7f8; 15 | --brand-experiment-230: #dae0f5; 16 | --brand-experiment-260: #d1d9f3; 17 | --brand-experiment-300: #c7d0f0; 18 | --brand-experiment-330: #b5c1ec; 19 | --brand-experiment-360: #a5b3e7; 20 | --brand-experiment-400: #8ea1e1; 21 | --brand-experiment-430: #869adf; 22 | --brand-experiment-460: #7d92dd; 23 | 24 | --brand-experiment: #7289da; 25 | 26 | --brand-experiment-500: #7289da; 27 | --brand-experiment-530: #687dc6; 28 | --brand-experiment-560: #5c6fb1; 29 | --brand-experiment-600: #4e5d94; 30 | --brand-experiment-630: #435180; 31 | --brand-experiment-660: #3b4770; 32 | --brand-experiment-700: #2e3757; 33 | --brand-experiment-730: #2b3352; 34 | --brand-experiment-760: #272f4b; 35 | --brand-experiment-800: #222941; 36 | --brand-experiment-830: #1a2032; 37 | --brand-experiment-860: #111521; 38 | --brand-experiment-900: #06070b; 39 | 40 | --brand-experiment-05a: rgba(114,137,218,0.05); 41 | --brand-experiment-10a: rgba(114,137,218,0.1); 42 | --brand-experiment-15a: rgba(114,137,218,0.15); 43 | --brand-experiment-20a: rgba(114,137,218,0.2); 44 | --brand-experiment-25a: rgba(114,137,218,0.25); 45 | --brand-experiment-30a: rgba(114,137,218,0.3); 46 | --brand-experiment-35a: rgba(114,137,218,0.35); 47 | --brand-experiment-40a: rgba(114,137,218,0.4); 48 | --brand-experiment-45a: rgba(114,137,218,0.45); 49 | --brand-experiment-50a: rgba(114,137,218,0.5); 50 | --brand-experiment-55a: rgba(114,137,218,0.55); 51 | --brand-experiment-60a: rgba(114,137,218,0.6); 52 | --brand-experiment-65a: rgba(114,137,218,0.65); 53 | --brand-experiment-70a: rgba(114,137,218,0.7); 54 | --brand-experiment-75a: rgba(114,137,218,0.75); 55 | --brand-experiment-80a: rgba(114,137,218,0.8); 56 | --brand-experiment-85a: rgba(114,137,218,0.85); 57 | --brand-experiment-90a: rgba(114,137,218,0.9); 58 | --brand-experiment-95a: rgba(114,137,218,0.95); 59 | } 60 | 61 | /* Change folder icons color */ 62 | .expandedFolderIconWrapper-Huv7rA > svg[style="color: rgb(88, 101, 242);"] { 63 | color: var(--brand-experiment) !important; 64 | } 65 | 66 | /* Color BD specific settings elements */ 67 | #bd-pub-button, .bd-addon-views .bd-view-button.selected, .bd-button { 68 | background-color: var(--brand-experiment); 69 | } 70 | .bd-button:hover { 71 | background-color: var(--brand-experiment-560); 72 | } 73 | .bd-button:active { 74 | background-color: var(--brand-experiment-600); 75 | } 76 | 77 | /* Verified check mark color */ 78 | .verified-1eC5dy { 79 | color: var(--old-green); 80 | } 81 | 82 | /* Revert new Nitro icon by setting item */ 83 | .premiumTabItem-1QTfBr .icon-Zc-uZZ { 84 | display: none; 85 | } 86 | 87 | /* Fix the color of the spotify play icon on the upload button when playing on spotify */ 88 | .attachButtonPlay-3iJ0mf { 89 | color: var(--old-green); 90 | } 91 | 92 | /* Revert the command names and 'dismiss message' button to blurple */ 93 | .commandName-1klrjB.clickable-1bVtEA, .ephemeralMessage-1fEWtQ .anchor-3Z-8Bb.anchorUnderlineOnHover-2ESHQB[role=button] { 94 | color: var(--brand-experiment); 95 | } 96 | 97 | /* Revert SVG path data */ 98 | .wordmarkWindows_a934d8 path { 99 | d: path("M3.57642276,0.141304348 L0,0.141304348 L0,4.22826087 L2.38069106,6.40217391 L2.38069106,2.43478261 L3.66260163,2.43478261 C4.47052846,2.43478261 4.86910569,2.83695652 4.86910569,3.4673913 L4.86910569,6.5 C4.86910569,7.13043478 4.49207317,7.55434783 3.66260163,7.55434783 L0,7.55434783 L0,9.85869565 L3.57642276,9.85869565 C5.49390244,9.86956522 7.29288618,8.90217391 7.29288618,6.66304348 L7.29288618,3.39130435 C7.29288618,1.13043478 5.49390244,0.141304348 3.57642276,0.141304348 Z M22.3310976,6.67391304 L22.3310976,3.32608696 C22.3310976,2.11956522 24.4640244,1.83695652 25.1103659,3.05434783 L27.0817073,2.23913043 C26.3168699,0.510869565 24.8949187,0 23.7207317,0 C21.803252,0 19.9073171,1.13043478 19.9073171,3.32608696 L19.9073171,6.67391304 C19.9073171,8.88043478 21.803252,10 23.6776423,10 C24.8841463,10 26.3276423,9.39130435 27.1247967,7.81521739 L25.0134146,6.82608696 C24.4963415,8.17391304 22.3310976,7.84782609 22.3310976,6.67391304 Z M15.8030488,3.7826087 C15.0597561,3.61956522 14.5642276,3.34782609 14.5319106,2.88043478 C14.575,1.75 16.2878049,1.7173913 17.2896341,2.79347826 L18.8731707,1.55434783 C17.8821138,0.326086957 16.7617886,0 15.598374,0 C13.8424797,0 12.1404472,1 12.1404472,2.91304348 C12.1404472,4.77173913 13.5408537,5.76086957 15.0813008,6 C15.8676829,6.10869565 16.7402439,6.42391304 16.7186992,6.97826087 C16.654065,8.02173913 14.5426829,7.9673913 13.5839431,6.7826087 L12.0650407,8.23913043 C12.9591463,9.40217391 14.1764228,10 15.3182927,10 C17.074187,10 19.0239837,8.9673913 19.0993902,7.08695652 C19.2071138,4.69565217 17.5050813,4.09782609 15.8030488,3.7826087 Z M8.59634146,9.85869565 L11.0093496,9.85869565 L11.0093496,0.141304348 L8.59634146,0.141304348 L8.59634146,9.85869565 Z M49.2835366,0.141304348 L45.7071138,0.141304348 L45.7071138,4.22826087 L48.0878049,6.40217391 L48.0878049,2.43478261 L49.3589431,2.43478261 C50.1668699,2.43478261 50.5654472,2.83695652 50.5654472,3.4673913 L50.5654472,6.5 C50.5654472,7.13043478 50.1884146,7.55434783 49.3589431,7.55434783 L45.6963415,7.55434783 L45.6963415,9.85869565 L49.2727642,9.85869565 C51.1902439,9.86956522 52.9892276,8.90217391 52.9892276,6.66304348 L52.9892276,3.39130435 C53,1.13043478 51.2010163,0.141304348 49.2835366,0.141304348 Z M31.7353659,0 C29.753252,0 27.7819106,1.09782609 27.7819106,3.33695652 L27.7819106,6.66304348 C27.7819106,8.89130435 29.7640244,10 31.7569106,10 C33.7390244,10 35.7103659,8.89130435 35.7103659,6.66304348 L35.7103659,3.33695652 C35.7103659,1.10869565 33.7174797,0 31.7353659,0 Z M33.2865854,6.66304348 C33.2865854,7.35869565 32.5109756,7.7173913 31.7461382,7.7173913 C30.9705285,7.7173913 30.1949187,7.36956522 30.1949187,6.66304348 L30.1949187,3.33695652 C30.1949187,2.61956522 30.9489837,2.23913043 31.7030488,2.23913043 C32.4894309,2.23913043 33.2865854,2.58695652 33.2865854,3.33695652 L33.2865854,6.66304348 Z M44.3605691,3.33695652 C44.3067073,1.05434783 42.7770325,0.141304348 40.8056911,0.141304348 L36.9815041,0.141304348 L36.9815041,9.86956522 L39.4268293,9.86956522 L39.4268293,6.77173913 L39.8577236,6.77173913 L42.0768293,9.85869565 L45.0930894,9.85869565 L42.4861789,6.52173913 C43.6495935,6.15217391 44.3605691,5.14130435 44.3605691,3.33695652 Z M40.8487805,4.65217391 L39.4268293,4.65217391 L39.4268293,2.43478261 L40.8487805,2.43478261 C42.3784553,2.43478261 42.3784553,4.65217391 40.8487805,4.65217391 Z"); 100 | } 101 | .wordmarkWindows_a934d8 path:not(:first-child) { 102 | display: none; 103 | } 104 | /* Tweak positioning */ 105 | .wordmarkWindows_a934d8 g { 106 | transform: translateY(3px); 107 | } 108 | 109 | /* On switches to old green */ 110 | .container-2nx-BQ[style="opacity: 1; background-color: rgb(59, 165, 92);"] { 111 | background-color: var(--text-positive) !important; 112 | } 113 | 114 | /* Text input focus border color is now focus / link, change back to original brand color */ 115 | .input-2g-os5.focused-1AtTHC, .input-2g-os5:focus { 116 | border-color: var(--accent-color); 117 | } 118 | 119 | /* Revert home icon */ 120 | .homeIcon-FuNwkv > path { 121 | d: path("M 20.6644 20 C 20.6644 20 19.8014 18.9762 19.0822 18.0714 C 22.2226 17.1905 23.4212 15.2381 23.4212 15.2381 C 22.4384 15.881 21.5034 16.3334 20.6644 16.6429 C 19.4658 17.1429 18.3151 17.4762 17.1884 17.6667 C 14.887 18.0953 12.7774 17.9762 10.9795 17.6429 C 9.61301 17.381 8.43836 17 7.45548 16.6191 C 6.90411 16.4048 6.30479 16.1429 5.70548 15.8096 C 5.63356 15.7619 5.56164 15.7381 5.48973 15.6905 C 5.44178 15.6667 5.41781 15.6429 5.39384 15.6191 C 4.96233 15.381 4.7226 15.2143 4.7226 15.2143 C 4.7226 15.2143 5.87329 17.1191 8.91781 18.0238 C 8.19863 18.9286 7.31164 20 7.31164 20 C 2.0137 19.8333 0 16.381 0 16.381 C 0 8.7144 3.45205 2.50017 3.45205 2.50017 C 6.90411 -0.07123 10.1884 0.000197861 10.1884 0.000197861 L 10.4281 0.285909 C 6.11301 1.52399 4.12329 3.40493 4.12329 3.40493 C 4.12329 3.40493 4.65068 3.11921 5.53767 2.71446 C 8.10274 1.59542 10.1404 1.2859 10.9795 1.21447 C 11.1233 1.19066 11.2432 1.16685 11.387 1.16685 C 12.8493 0.976379 14.5034 0.92876 16.2295 1.11923 C 18.5068 1.38114 20.9521 2.0478 23.4452 3.40493 C 23.4452 3.40493 21.5514 1.61923 17.476 0.381146 L 17.8116 0.000197861 C 17.8116 0.000197861 21.0959 -0.07123 24.5479 2.50017 C 24.5479 2.50017 28 8.7144 28 16.381 C 28 16.381 25.9623 19.8333 20.6644 20 Z M 9.51712 8.88106 C 8.15068 8.88106 7.07192 10.0715 7.07192 11.5239 C 7.07192 12.9763 8.17466 14.1667 9.51712 14.1667 C 10.8836 14.1667 11.9623 12.9763 11.9623 11.5239 C 11.9863 10.0715 10.8836 8.88106 9.51712 8.88106 Z M 18.2671 8.88106 C 16.9007 8.88106 15.8219 10.0715 15.8219 11.5239 C 15.8219 12.9763 16.9247 14.1667 18.2671 14.1667 C 19.6336 14.1667 20.7123 12.9763 20.7123 11.5239 C 20.7123 10.0715 19.6336 8.88106 18.2671 8.88106 Z"); 122 | } 123 | 124 | /* Revert mentions and channel links */ 125 | #app-mount .wrapper_d4fa29 { 126 | color: var(--brand-experiment-460); 127 | background: var(--brand-experiment-10a); 128 | 129 | text-decoration: none !important; 130 | padding: 0 1px; 131 | } 132 | 133 | #app-mount .wrapper_d4fa29:hover { 134 | background: var(--brand-experiment); 135 | color: var(--brand-experiment-100); 136 | } 137 | 138 | /* Read left padding for icons in mentions as our own padding removes it and breaks look */ 139 | #app-mount .mention.iconMentionText-1_WCtN { 140 | padding-left: 1.2rem; 141 | } 142 | 143 | #app-mount .mention.iconMention-3WxjBe { 144 | padding-left: 1.3rem; 145 | } 146 | -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | /* ---- Discord Variables ---- */ 2 | .theme-dark { 3 | --header-primary: var(--text-normal); 4 | --header-secondary: var(--text-muted); 5 | --text-normal: #b1bae6; 6 | --text-muted: #565f89; 7 | --text-positive: hsl(89, calc(var(--saturation-factor, 1)*51%),61%) !important; 8 | --text-warning: hsl(39, calc(var(--saturation-factor, 1)*66%), 64%) !important; 9 | --text-danger: hsl(349, calc(var(--saturation-factor, 1)*89%), 72%) !important; 10 | --text-link: hsl(217, calc(var(--saturation-factor, 1)*40%), 56%) !important; 11 | --info-positive-background: hsla(89,calc(var(--saturation-factor, 1)*51%),61%,0.8) !important; 12 | --info-positive-foreground: var(--text-positive); 13 | --info-warning-background: hsla(39,calc(var(--saturation-factor, 1)*66%),64%,0.8) !important; 14 | --info-warning-foreground: var(--text-warning); 15 | --info-danger-background: hsla(349,calc(var(--saturation-factor, 1)*89%),72%,0.8) !important; 16 | --info-danger-foreground: var(--text-danger); 17 | --status-danger: var(--text-danger); 18 | --status-warning: var(--text-warning); 19 | --status-positive: var(--text-positive); 20 | --status-positive-background: var(--info-positive-background); 21 | --status-warning-background: var(--info-warning-background); 22 | --status-danger-background: var(--info-danger-background); 23 | --interactive-normal: #5f647e; 24 | --interactive-hover: #a2a6c2; 25 | --interactive-active: #b5bad1; 26 | --interactive-muted: #55576b; 27 | --channels-default: var(--text-muted); 28 | --background-primary: #1a1b26; 29 | --background-secondary: #171722; 30 | --background-secondary-alt: #13131a; 31 | --background-tertiary: #16161e; 32 | --background-accent: #434461; 33 | --background-floating: #161620; 34 | --background-modifier-hover: #212331c0; 35 | --background-modifier-active: #282a3680; 36 | --background-modifier-selected: #24263171; 37 | --background-modifier-accent: #1e1e29; 38 | --background-mentioned: #252836; 39 | --border-mentioned: #474c64; 40 | --background-mentioned-hover: #2f3344; 41 | --accent-color: #7aa2f7; 42 | --folder-color: #202332d0; 43 | --folder-color-light: #2f3342d0; 44 | --scrollbar-thin-thumb: transparent; 45 | --scrollbar-thin-track: transparent; 46 | --scrollbar-auto-thumb: #2b2b46af; 47 | --scrollbar-auto-thumb-hover: #27273d85; 48 | --scrollbar-auto-track: transparent; 49 | --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb); 50 | --scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track); 51 | --channeltextarea-background: var(--background-secondary); 52 | --input-background: var(--background-secondary); 53 | } 54 | 55 | .theme-light { 56 | --header-primary: var(--text-normal); 57 | --header-secondary: var(--text-muted); 58 | --text-normal: #2e3338; 59 | --text-muted: #747f8d; 60 | --text-positive: hsl(89, calc(var(--saturation-factor, 1)*32%), 28%); 61 | --text-warning: hsl(36, calc(var(--saturation-factor, 1)*74%), 32%); 62 | --text-danger: hsl(348, calc(var(--saturation-factor, 1)*35%), 31%); 63 | --info-positive-background: hsla(89,calc(var(--saturation-factor, 1)*32%),28%,0.8) !important; 64 | --info-positive-foreground: var(--text-positive); 65 | --info-warning-background: hsla(36,calc(var(--saturation-factor, 1)*74%),32%,0.8) !important; 66 | --info-warning-foreground: var(--text-warning); 67 | --info-danger-background: hsla(349,calc(var(--saturation-factor, 1)*35%),31%,0.8) !important; 68 | --info-danger-foreground: var(--text-danger); 69 | --status-danger: var(--text-danger); 70 | --status-warning: var(--text-warning); 71 | --status-positive: var(--text-positive); 72 | --status-positive-background: var(--info-positive-background); 73 | --status-warning-background: var(--info-warning-background); 74 | --status-danger-background: var(--info-danger-background); 75 | --interactive-normal: #4c505e; 76 | --interactive-hover: #404350; 77 | --interactive-active: #373a44; 78 | --interactive-muted: #77797c; 79 | --background-primary: #d5d6db; 80 | --background-secondary: #cecfd4; 81 | --background-secondary-alt: #b6b7bd; 82 | --background-tertiary: #c5c6cc; 83 | --background-accent: #9ca3bb; 84 | --background-floating: #c2c2c9; 85 | --background-mentioned: #c4c7da; 86 | --background-modifier-hover: #2c2a2a25; 87 | --background-modifier-active: #5a525229; 88 | --background-modifier-selected: #555e693d; 89 | --background-modifier-accent: #06060714; 90 | --border-mentioned: #a9afcf; 91 | --background-mentioned-hover: #cfd2e9; 92 | --accent-color: #34548a; 93 | --folder-color: #a7a6a6d0; 94 | --folder-color-light: #afafafd0; 95 | --input-box-bg: #c2c2c7; 96 | --input-box-border: #b3b4b8; 97 | --input-box-border-focus: #959699; 98 | --scrollbar-thin-thumb: transparent; 99 | --scrollbar-thin-track: transparent; 100 | --scrollbar-auto-thumb: #a0a0a0af; 101 | --scrollbar-auto-thumb-hover: #77777785; 102 | --scrollbar-auto-track: transparent; 103 | --scrollbar-auto-scrollbar-color-thumb: var(--scrollbar-auto-thumb); 104 | --scrollbar-auto-scrollbar-color-track: var(--scrollbar-auto-track); 105 | --channeltextarea-background: var(--background-secondary); 106 | --input-background: var(--background-secondary); 107 | } 108 | 109 | /* ~~~~ General ~~~~ */ 110 | .theme-dark ::selection { 111 | background-color: #515c7e40; 112 | color: #a9b1d6; 113 | } 114 | .theme-light ::selection { 115 | background-color: #fafbff55; 116 | color: #4c505e; 117 | } 118 | 119 | /* Input Box Placeholder Text */ 120 | ::placeholder { 121 | color: var(--text-muted) !important; 122 | } 123 | 124 | /* Scrollbar */ 125 | .auto-2K3UW5::-webkit-scrollbar-thumb, 126 | .auto-2K3UW5::-webkit-scrollbar-track { 127 | height: 100px; 128 | border-right: 0px solid transparent; 129 | border-left: 8px solid transparent; 130 | border-radius: 0px; 131 | } 132 | .auto-2K3UW5::-webkit-scrollbar-thumb:hover { 133 | background-color: var(--scrollbar-auto-thumb-hover); 134 | } 135 | 136 | /* Tooltips */ 137 | .tooltipPrimary-3qLMbS, 138 | .toolbar_de3e42 { 139 | background-color: var(--background-secondary-alt) !important; 140 | } 141 | .toolbar_de3e42:before { 142 | border-top-color: var(--background-secondary-alt); 143 | } 144 | .tooltipPrimary-3qLMbS .tooltipPointer-3L49xb { 145 | border-top-color: var(--background-secondary-alt) !important; 146 | } 147 | 148 | /* Friend list tab */ 149 | .friendSelected_ebf869 { 150 | background-color: var(--background-tertiary) !important; 151 | } 152 | .outer_c0f6a6.interactive_c0f6a6:hover { 153 | background-color: var(--background-tertiary) !important; 154 | } 155 | .inset_c0f6a6, 156 | .separator_cd82a7 { 157 | background-color: var(--background-secondary) !important; 158 | } 159 | .pageWrapper_a3a4ce, 160 | .container_c2739c { 161 | background-color: var(--background-primary) !important; 162 | } 163 | 164 | /* Chat Box */ 165 | .buttons_d0696b { 166 | opacity: 0; 167 | transition: opacity .15s; 168 | } 169 | .channelTextArea_a7d72e:hover .buttons_d0696b { 170 | opacity: 1; 171 | } 172 | .placeholder_a552a6 { 173 | color: var(--text-muted) !important; 174 | } 175 | .lookFilled-1GseHa.colorPrimary-2AuQVo { 176 | color: var(--text-normal) !important; 177 | background-color: var(--background-primary) !important; 178 | } 179 | .mentionButton_b11c5e { 180 | color: var(--accent-color); 181 | } 182 | .scrollableContainer_d0696b { 183 | border-radius: 5px; 184 | border-bottom: 2px var(--background-tertiary) solid; 185 | transition: border-color .15s ease; 186 | } 187 | .scrollableContainer_d0696b:hover, 188 | .scrollableContainer_d0696b:focus-within { 189 | border-bottom-color: var(--accent-color); 190 | } 191 | .emptyChannelIcon_c2668b { 192 | background-color: var(--background-tertiary); 193 | } 194 | .theme-dark .spriteContainer_af14ca:not(:hover) { 195 | filter: none !important; 196 | background: url("https://dyzean.github.io/Tokyo-Night/src/assets/emoji-dark.png") center/contain no-repeat !important; 197 | } 198 | .theme-light .spriteContainer_af14ca:not(:hover) { 199 | filter: none !important; 200 | background: url("https://dyzean.github.io/Tokyo-Night/src/assets/emoji-light.png") center/contain no-repeat !important; 201 | } 202 | 203 | /* Home Channel */ 204 | .background_c54132 { 205 | background-color: var(--background-primary) !important; 206 | } 207 | .interactiveCard_d92364, 208 | .containerCard__95c7a { 209 | background-color: var(--background-secondary); 210 | border: 1px solid var(--background-tertiary); 211 | } 212 | .scrollIcon__0a383 { 213 | background-color: var(--background-tertiary); 214 | } 215 | 216 | /* Forum Channel */ 217 | .grid_a6d69a, .list_a6d69a, .auto_eed6a8 { 218 | background-color: var(--background-primary) !important; 219 | } 220 | 221 | .container_d331f1 { 222 | background-color: var(--background-tertiary) !important; 223 | } 224 | 225 | .mainCard_a6d69a { 226 | background-color: var(--background-secondary) !important; 227 | } 228 | 229 | .forumOrHome_ff5f90 { 230 | --__header-bar-background: var(--background-primary) !important; 231 | } 232 | 233 | /* Jump to present & New message bar */ 234 | .newMessagesBar_cf58b5 { 235 | background-color: var(--background-accent); 236 | border-radius: 50px; 237 | margin-top: 5px; 238 | } 239 | .jumpToPresentBar_cf58b5, 240 | .jumpToPresentBar_cf58b5:active { 241 | margin-bottom: 13px; 242 | border-radius: 20px; 243 | padding: 0; 244 | } 245 | 246 | /* Top Bar */ 247 | #app-mount .children_e44302 > .iconWrapper_e44302 svg, 248 | #app-mount .base-21yXnu { 249 | color: var(--header-primary); 250 | } 251 | 252 | /* Voice Call Tab */ 253 | .callContainer_d880dc { 254 | background-color: var(--background-floating) !important; 255 | } 256 | .tile_dc5fc4 { 257 | background-color: var(--background-secondary); 258 | } 259 | .header_e5cc00 { 260 | color: var(--text-normal) 261 | } 262 | .button_e5cc00 { 263 | color: #fff; 264 | background-color: var(--accent-color); 265 | } 266 | 267 | /* Thread Spine */ 268 | .hasThread_ec86aa:after { 269 | border-left: 2px solid var(--interactive-normal) !important; 270 | border-bottom: 2px solid var(--interactive-normal) !important; 271 | } 272 | 273 | /* Fix some svg color */ 274 | svg[fill="hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"] { 275 | fill: var(--text-positive); 276 | } 277 | svg[fill="hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%)"] { 278 | fill: var(--text-warning); 279 | } 280 | svg[fill="hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%)"] { 281 | fill: var(--text-danger); 282 | } 283 | 284 | /* Bot Tag */ 285 | .botTagRegular_a02df3 { 286 | background: var(--accent-color) !important; 287 | } 288 | 289 | /* ~~~~ Messages ~~~~ */ 290 | 291 | /* Quotes */ 292 | .blockquoteContainer_d6076c { 293 | padding: 2px 0 2px 0; 294 | } 295 | .blockquoteContainer_d6076c blockquote { 296 | background-color: var(--background-secondary); 297 | border: 1px solid var(--background-secondary); 298 | color: var(--text-normal); 299 | border-radius: 0 4px 4px 0; 300 | padding: 4px 11px 4px; 301 | } 302 | .blockquoteContainer_d6076c > .blockquoteDivider_d6076c { 303 | background-color: var(--accent-color); 304 | border-radius: 4px 0 0 4px; 305 | } 306 | .after_inlineCode-WydEur, 307 | .before_inlineCode-xn8Llh, 308 | .inlineCode-2auMQi { 309 | background-color: var(--background-secondary-alt); 310 | } 311 | 312 | /* Reply text */ 313 | .repliedMessage_ec86aa .repliedTextPreview_ec86aa { 314 | color: var(--text-normal); 315 | opacity: 0.64; 316 | } 317 | .repliedMessage_ec86aa .repliedTextPreview_ec86aa:hover { 318 | opacity: 1; 319 | } 320 | 321 | /* Embeds */ 322 | .wrapperAudio_f316dd { 323 | width: auto !important; 324 | min-width: 400px; 325 | } 326 | .embedWrapper_b558d0.embedFull_ad0b71 { 327 | border-radius: 4px; 328 | border-left: 4px solid var(--accent-color); 329 | box-shadow: var(--elevation-high); 330 | } 331 | 332 | /* Nitro Gift */ 333 | .tile_ab47a1 { 334 | background-color: var(--background-secondary) !important; 335 | } 336 | .lookFilled-1GseHa.colorPrimary-2AuQVo:disabled { 337 | background-color: var(--background-primary) !important; 338 | } 339 | 340 | /* Mentions */ 341 | .replying_d5deea::before, 342 | .mentioned_d5deea::before { 343 | background-color: var(--border-mentioned); 344 | } 345 | 346 | /* Quick Button */ 347 | .wrapper_ef319f { 348 | background-color: var(--background-secondary); 349 | } 350 | 351 | /* Polls */ 352 | .pollContainer_b558d0 { 353 | background-color: var(--background-secondary) !important; 354 | } 355 | 356 | .answerInner_cf2c85 { 357 | background-color: var(--background-primary) !important; 358 | } 359 | 360 | /* ~~~~ Popouts ~~~~ */ 361 | 362 | /* User Popouts */ 363 | .userTagUsernameNoNickname-2e_xaO { 364 | color: var(--text-normal); 365 | } 366 | .rolePill-2IJ1vo { 367 | background-color: var(--profile-role-pill-background-color); 368 | border: 0px solid; /* Remove role pill's border */ 369 | border-color: var(--profile-role-pill-border-color); 370 | } 371 | .messageInput-1KI8l8 { 372 | background-color: var(--background-secondary-alt); 373 | } 374 | .messageInputContainer-2rGDH8 { 375 | border: 1px solid var(--background-tertiary); 376 | } 377 | 378 | /* Add Role Popouts */ 379 | .container-2O1UgZ { 380 | background-color: var(--background-floating); 381 | border-color: var(--background-secondary-alt); 382 | } 383 | 384 | /* Search Popouts */ 385 | .container_eedf95 { 386 | background-color: var(--background-floating) !important; 387 | border-radius: 10px !important; 388 | box-shadow: var(--elevation-high) !important; 389 | } 390 | .option_b0286e::after { 391 | display: none !important; 392 | } 393 | .option_b0286e.selected-rZcOL-, 394 | .input_f4e139 { 395 | background-color: var(--background-secondary-alt) !important; 396 | } 397 | .focused_eedf95 { 398 | background-color: var(--background-secondary-alt) !important; 399 | } 400 | .searchAnswer_b0fa94, 401 | .searchFilter_b0fa94 { 402 | background-color: var(--background-primary) !important; 403 | color: var(--header-primary) !important; 404 | } 405 | .option-2KkUJO[aria-selected=true] { 406 | background-color: var(--background-modifier-hover) !important; 407 | } 408 | .searchOption_b0286e .filter_b0286e, 409 | .option_b0286e:not([group="SEARCH_OPTIONS"]) .answer_b0286e, 410 | .option_b0286e .nonText_b0286e, 411 | .queryContainer_eedf95 strong, 412 | .option_b0286e strong { 413 | color: var(--text-normal) !important; 414 | } 415 | .option_b0286e .filter_b0286e, 416 | .searchOption_b0286e .answer_b0286e { 417 | color: var(--text-muted) !important; 418 | } 419 | .resultsGroup_b0286e .header_b0286e, 420 | .resultsGroup_b0286e .plusIcon_b0286e, 421 | .resultsGroup_b0286e .searchClearHistory_b0286e, 422 | .resultsGroup_b0286e .searchLearnMore-7__o_n a { 423 | color: var(--channels-default) !important; 424 | } 425 | 426 | /* Calendar */ 427 | .calendarPicker__47c85 .react-datepicker__navigation.react-datepicker__navigation--previous { 428 | border: none !important; 429 | } 430 | .calendarPicker__47c85 .react-datepicker__current-month, 431 | .calendarPicker__47c85 .react-datepicker__day-name { 432 | color: var(--text-normal) !important; 433 | } 434 | .calendarPicker__47c85 .react-datepicker__day { 435 | border-top: 1px solid var(--background-modifier-accent) !important; 436 | border-left: 1px solid var(--background-modifier-accent) !important; 437 | } 438 | .calendarPicker__47c85 .react-datepicker__day--disabled, 439 | .calendarPicker__47c85 .react-datepicker__day--outside-month, 440 | .calendarPicker__47c85 .react-datepicker__day.react-datepicker__day--disabled, 441 | .calendarPicker__47c85 .react-datepicker__day.react-datepicker__day--disabled:hover { 442 | background-color: var(--background-secondary-alt) !important; 443 | color: var(--text-muted) !important; 444 | } 445 | .calendarPicker__47c85 .react-datepicker__day.react-datepicker__day--keyboard-selected, 446 | .calendarPicker__47c85 .react-datepicker__day.react-datepicker__day--selected:hover, 447 | .calendarPicker__47c85 .react-datepicker__day:hover, 448 | .calendarPicker__47c85 .react-datepicker__day { 449 | color: var(--text-normal) !important; 450 | } 451 | .calendarPicker__47c85 .react-datepicker__header, 452 | .calendarPicker__47c85 .react-datepicker { 453 | background-color: var(--background-floating) !important; 454 | } 455 | 456 | /* Stream Preview Popouts */ 457 | .protip-13raHg { 458 | display: none; 459 | } 460 | .streamPreview-3qoMP4 { 461 | background-color: var(--background-tertiary) !important; 462 | } 463 | .previewContainer-12U1H1 { 464 | background-color: var(--background-secondary) !important; 465 | } 466 | 467 | /* Emoji Popouts */ 468 | .autocompleteInner_f23da8, .autocompleteInner_bea0d0 { 469 | background-color: var(--background-floating) !important; 470 | } 471 | .selected-3H3-RC { 472 | background-color: var(--background-primary) !important; 473 | } 474 | 475 | /* Slash Command Popouts */ 476 | .categoryHeader_fe2299 { 477 | background-color: var(--background-floating) !important; 478 | } 479 | .option_bea3ee, 480 | .pill-1HLSrc { 481 | background-color: var(--background-primary) !important; 482 | } 483 | 484 | /* ~~~~ Sidebar ~~~~ */ 485 | 486 | /* Server List */ 487 | .folder_bc7085, 488 | .expandedFolderBackground_bc7085, 489 | .folder_bc7085 > .folderIconWrapper_bc7085[style="background-color: rgba(88, 101, 242, 0.4);"] { 490 | background-color: var(--folder-color) !important; 491 | } 492 | .folderIconWrapper_bc7085[style="background-color: rgba(88, 101, 242, 0.4);"]:hover, 493 | .folder_bc7085:hover { 494 | background-color: var(--folder-color-light); 495 | } 496 | 497 | .folder_bc7085 > .folderIconWrapper_bc7085 > .expandedFolderIconWrapper_bc7085 > svg[style="color: rgb(88, 101, 242);"] { 498 | color: var(--accent-color) !important; 499 | } 500 | 501 | .numberBadge_df8943 { 502 | background-color: var(--accent-color) !important; 503 | } 504 | .item_fd07a3 { 505 | background-color: var(--interactive-normal); 506 | } 507 | 508 | /* Add Server Button */ 509 | .circleIconButton_db6521 { 510 | color: var(--interactive-normal) !important; 511 | background-color: transparent !important; 512 | } 513 | .circleIconButton_db6521:hover { 514 | color: var(--interactive-hover) !important; 515 | background-color: var(--background-primary) !important; 516 | } 517 | 518 | /* Channel List */ 519 | .children_e44302:after { 520 | background: linear-gradient(90deg, rgba(54, 57, 63, 0) 0, var(--background-tertiary)) !important; 521 | } 522 | .container_e44302.themed_e44302 { 523 | background-color: var(--background-tertiary); 524 | } 525 | .container_ee69e0 { 526 | background-color: var(--background-tertiary) !important; 527 | } 528 | .sidebar_a4d4d9 { 529 | background: var(--background-tertiary) !important; 530 | } 531 | .unread_d8bfb3 { 532 | top: 50%; 533 | left: 0; 534 | width: 6px; 535 | height: 6px; 536 | z-index: 1; 537 | border-radius: 10px; 538 | margin-top: 0px; 539 | transform: translateY(-50%) 540 | } 541 | .wrapper_d8bfb3:hover .icon_d8bfb3, 542 | .modeSelected_d8bfb3 .icon_d8bfb3, 543 | .modeUnreadImportant_d8bfb3 .icon_d8bfb3 { 544 | color: var(--interactive-active); 545 | } 546 | .wrapper_d8bfb3:not(.modeUnreadImportant_d8bfb3):not(:hover):not(.modeSelected_d8bfb3) .icon_d8bfb3 { 547 | color: var(--channels-default); 548 | } 549 | .spine_e1e976 { 550 | color: var(--channels-default); 551 | } 552 | .total_a5bc92 { 553 | background-color: var(--background-secondary-alt); 554 | } 555 | .total_a5bc92:after { 556 | border-right-color: var(--background-secondary-alt); 557 | } 558 | .subtitle_d8bfb3 { 559 | color: var(--brand-experiment) !important; 560 | } 561 | 562 | /* New Mention bar*/ 563 | .mention_c10249 { 564 | background-color: var(--text-danger); 565 | opacity: 1; 566 | } 567 | 568 | /* ~~~~ Settings Modal ~~~~ */ 569 | 570 | .theme-light .closeButton_df5532 { 571 | border-color: var(--background-secondary-alt); 572 | } 573 | .theme-light .closeButton_df5532:hover { 574 | background-color: var(--background-secondary); 575 | } 576 | .theme-light .keybind_df5532 { 577 | color: var(--background-secondary-alt); 578 | } 579 | .theme-light .gameName-Uw4dbt { 580 | color: #4f545c !important; 581 | } 582 | .theme-light .lastPlayed-3aHvxk { 583 | color: #72767d !important; 584 | } 585 | .accountProfileCard_b69b77 { 586 | background-color: var(--background-secondary-alt); 587 | } 588 | .notDetected_fd966d { 589 | background-color: var(--background-tertiary) !important; 590 | } 591 | .addGamePopout_fd966d { 592 | background-color: var(--background-secondary) !important; 593 | box-shadow: none !important; 594 | } 595 | .game_fd966d { 596 | box-shadow: 0 1px 0 0 var(--background-tertiary) !important; 597 | } 598 | .cardPrimary-3qRT__ { 599 | background: var(--background-secondary); 600 | } 601 | .gemIndicatorContainer_b03ca0 { 602 | background-color: var(--background-primary) !important; 603 | } 604 | .cardWrapper-CyvwQv { 605 | background: var(--background-secondary); 606 | } 607 | .card-2gdrYL:hover { 608 | background: var(--background-floating); 609 | } 610 | .gameVerifiedIcon_fd966d .flowerStar_ff7d90 > path { 611 | fill: var(--brand-experiment); 612 | } 613 | .markValue-2U_-UG { 614 | color: var(--interactive-muted); 615 | } 616 | 617 | /* Buttons Color */ 618 | .bar-1Bhnl9 { 619 | background: var(--background-secondary) !important; 620 | } 621 | .userSettingsVoice-1_dzjw .previewOverlay-2reuWf { 622 | background-color: var(--background-floating) !important; 623 | border-color: var(--background-secondary-alt) !important; 624 | } 625 | .premiumTab_c10c74[aria-selected="true"] { 626 | color: #fff !important; 627 | background-color: #b466c2 !important; 628 | } 629 | .button_adcaac.buttonColor_adcaac.buttonActive_adcaac, 630 | .button_adcaac .buttonColor_adcaac.buttonActive_adcaac { 631 | color: #fff !important; 632 | } 633 | .buttons-19uowm .lookFilled-1GseHa.colorPrimary-2AuQVo, 634 | .colorable_ef18ee.primaryDark_ef18ee.active_ef18ee, 635 | .colorable_ef18ee.primaryDark_ef18ee:hover { 636 | background: var(--background-secondary) !important; 637 | } 638 | .colorable_ef18ee.primaryDark_ef18ee { 639 | background: var(--background-primary); 640 | } 641 | .dim-2Uxgxb span, 642 | .keybindShortcut-3zF1P9 span { 643 | background-color: var(--background-floating) !important; 644 | box-shadow: inset 0 -4px 0 var(--background-secondary) !important; 645 | } 646 | .lookFilled-yCfaCM.colorYellow-Pgtmch { 647 | color: #fff !important; 648 | background-color: var(--text-warning) !important; 649 | } 650 | .lookFilled-yCfaCM.colorGreen-3y-Z79 { 651 | color: #fff !important; 652 | background-color: var(--text-positive) !important; 653 | } 654 | .lookFilled-yCfaCM.colorRed-rQXKgM { 655 | color: #fff !important; 656 | background-color: var(--text-danger) !important; 657 | } 658 | 659 | /* My Account Page */ 660 | .lookFilled-yCfaCM.colorPrimary-2AuQVo { 661 | background-color: var(--brand-experiment); 662 | } 663 | .lookFilled-yCfaCM.colorPrimary-2AuQVo:hover { 664 | background-color: var(--brand-experiment-560); 665 | } 666 | .lookLink-15mFoz.colorPrimary-2AuQVo { 667 | color: var(--interactive-normal) !important; 668 | } 669 | .lookLink-15mFoz.colorPrimary-2AuQVo:hover { 670 | color: var(--interactive-hover) !important; 671 | } 672 | 673 | /* Dropdown */ 674 | .lookFilled-1GseHa.select-1Ia3hD { 675 | background-color: var(--background-secondary); 676 | border-color: var(--background-tertiary); 677 | } 678 | .select-1Ia3hD { 679 | color: var(--interactive-active); 680 | } 681 | 682 | /* Registered Game Page */ 683 | .gameName_fd966d { 684 | color: var(--header-primary) !important; 685 | } 686 | .lastPlayed_fd966d, 687 | .nowPlayingAdd_fd966d, 688 | .overlayStatusText__668e1 { 689 | color: var(--header-secondary) !important; 690 | } 691 | .overlayToggleIconOff-ps4gGp .fill_fd966d ~ rect { 692 | fill: var(--status-danger) !important; 693 | } 694 | .overlayToggleIconOn-21NN2N .fill_fd966d { 695 | fill: var(--status-positive) !important; 696 | } 697 | 698 | /* Server Settings */ 699 | .default_a467ac, 700 | .headerExpanded_eebd33, 701 | .divider-1pnAR2 { 702 | background-color: var(--background-tertiary) !important; 703 | } 704 | .container__33507 { 705 | background-color: var(--background-secondary); 706 | } 707 | .auditLog_eebd33 { 708 | border-color: var(--background-tertiary) !important; 709 | } 710 | .card-o7rAq- { 711 | background-color: var(--background-secondary) !important; 712 | border-color: var(--background-secondary-alt) !important; 713 | } 714 | .cardPrimaryOutline-1ofwVz { 715 | background-color: var(--background-secondary); 716 | border-color: var(--background-secondary-alt); 717 | } 718 | .changeDetails_eebd33 { 719 | background-color: var(--background-secondary) !important; 720 | } 721 | .headerDefault_eebd33, 722 | .headerClickable_eebd33 { 723 | background-color: var(--background-secondary) !important; 724 | } 725 | .elevationHigh__08882 { 726 | background-color: var(--background-floating) !important; 727 | } 728 | .css-gvi9bl-control, 729 | .css-6fzn47-control, 730 | .css-3vaxre-menu { 731 | background-color: var(--background-secondary); 732 | border-color: var(--background-secondary-alt); 733 | } 734 | .background_a4fd01 { 735 | color: var(--background-secondary) !important; 736 | } 737 | .tierInProgress_a4fd01 { 738 | background-color: var(--background-secondary) !important; 739 | } 740 | .tierBody_da77bd { 741 | background-color: var(--background-secondary) !important; 742 | } 743 | .tierHeaderContent_da77bd { 744 | background: var(--background-tertiary); 745 | } 746 | .cardPrimaryEditable-2mz_3i { 747 | background: var(--background-secondary); 748 | } 749 | .editCircle-ityklj, 750 | .iconWrapper-lS1uig { 751 | background-color: var(--background-primary); 752 | } 753 | .theme-light .card_ffe375:before { 754 | background-color: var(--background-primary); 755 | } 756 | 757 | /* Server Boost Modal */ 758 | .perksModal-CLcR1c { 759 | background-color: var(--background-primary) !important; 760 | } 761 | .tierMarkerBackground-G8FoN4, 762 | .expandedInfo_a28a08, 763 | .tierBody-3ju-rc, 764 | .perk-19D_HN { 765 | background-color: var(--background-tertiary) !important; 766 | } 767 | .roleIcon-286ZWG { 768 | color: var(--background-accent); 769 | } 770 | 771 | /* Reaction Modal */ 772 | .reactors_f2bfbb { 773 | background-color: var(--background-primary) !important; 774 | } 775 | .reactorDefault_f2bfbb { 776 | box-shadow: inset 0 -1px 0 var(--background-modifier-accent) !important; 777 | } 778 | .scroller_f2bfbb { 779 | background: var(--background-secondary) !important; 780 | } 781 | .reactionSelected_f2bfbb { 782 | background-color: var(--background-modifier-selected) !important; 783 | } 784 | 785 | /* Pin Message Modal */ 786 | .message_ddcc45 { 787 | background-color: var(--background-secondary) !important; 788 | box-shadow: none !important; 789 | border-radius: 10px; 790 | } 791 | 792 | /* Connections Modal */ 793 | .focusLock-2tveLW[aria-label="Add Connection"] .root_f9a4c9 { 794 | background-color: var(--background-secondary-alt) !important; 795 | box-shadow: none !important; 796 | } 797 | .connectionsContainer-crWFPm .accountBtnInner-1DCgBm { 798 | background-color: var(--background-primary); 799 | } 800 | 801 | /* Payment Modal */ 802 | .root_f9a4c9 { 803 | background-color: var(--background-primary) !important; 804 | box-shadow: none; 805 | } 806 | .modalHeader-gQTY3L, 807 | .root-2s1-ri > * { 808 | background-color: transparent !important; 809 | } 810 | .paymentPane_f66684 { 811 | background-color: var(--background-secondary-alt) !important; 812 | } 813 | .bottomDivider_f66684 { 814 | border-bottom-color: var(--background-secondary-alt) !important; 815 | } 816 | .expandedInfo_a28a08 { 817 | background-color: var(--background-primary) !important; 818 | } 819 | .paginator_f66684, 820 | .payment_a28a08, 821 | .codeRedemptionRedirect_cb70f4 { 822 | background-color: var(--background-secondary) !important; 823 | border-color: var(--background-secondary-alt) !important; 824 | } 825 | .footerSeparator-VzAYwb { 826 | -webkit-box-shadow: inset 0 1px 0 var(--background-secondary-alt) !important; 827 | box-shadow: inset 0 1px 0 var(--background-secondary-alt) !important; 828 | } 829 | .footer-31IekZ, 830 | .footer_f82cc7 { 831 | background-color: var(--background-tertiary) !important; 832 | } 833 | 834 | /* ~~~~ Watermark ~~~~ */ 835 | 836 | .wordmarkWindows_a934d8 svg { 837 | position: fixed; 838 | top: 3px; 839 | left: 50%; 840 | transform: translate(-50%); 841 | } 842 | .typeWindows_a934d8 { 843 | z-index: 1; 844 | background-color: var(--background-secondary-alt); 845 | } 846 | 847 | /* ~~~~ BD Support ~~~~ */ 848 | #bd-editor-controls { 849 | background: var(--background-secondary-alt); 850 | color: var(--interactive-normal); 851 | } 852 | #floating-editor-window { 853 | border-radius: 10px; 854 | } 855 | .floating-window-titlebar { 856 | background-color: var(--background-secondary-alt); 857 | } 858 | .floating-window #bd-editor-controls { 859 | background-color: var(--background-tertiary) !important; 860 | border-bottom: 1px solid var(--background-tertiary); 861 | box-shadow: none; 862 | } 863 | .monaco-editor, 864 | .monaco-editor-background, 865 | .monaco-editor .inputarea.ime-input, 866 | .monaco-editor .margin { 867 | background-color: var(--background-secondary) !important; 868 | } 869 | .monaco-editor .minimap, 870 | .monaco-editor .decorationsOverviewRuler { 871 | display: none !important; 872 | } 873 | .bd-tab-item.selected { 874 | cursor: default; 875 | background: var(--background-accent); 876 | } 877 | .bd-addon-error { 878 | border-color: var(--background-tertiary) !important; 879 | background: var(--background-secondary) !important; 880 | } 881 | .bd-addon-error-icon { 882 | display: flex; 883 | align-items: center; 884 | background-color: var(--background-primary); 885 | } 886 | .bd-addon-modal-footer .bd-button { 887 | background-color: var(--brand-experiment); 888 | } 889 | .bd-addon-modal-footer .bd-button:hover { 890 | background-color: var(--brand-experiment-560) !important; 891 | } 892 | 893 | /* ~~~~ Powercord Support ~~~~ */ 894 | .powercord-toast-container { 895 | --toast-background: var(--background-secondary); 896 | --toast-header: var(--background-tertiary); 897 | --toast-contents: var(--background-primary); 898 | --toast-box-shadow: var(--elevation-stroke), var(--elevation-high); 899 | --toast-border: transparent; 900 | } 901 | 902 | .modal_ec75c1 { 903 | background-color: var(--background-primary) !important; 904 | } 905 | .powercord-product-footer .lookLink-15mFoz.colorTransparent-13Bvvi { 906 | color: var(--text-link) !important; 907 | } 908 | 909 | /* ~~~~ Plugin Support ~~~~ */ 910 | 911 | /* Better Codeblocks */ 912 | #app-mount .hljs { 913 | background-color: var(--background-secondary) !important; 914 | border: 1px solid var(--background-tertiary); 915 | color: var(--text-normal); 916 | } 917 | .powercord-codeblock-lang { 918 | font-size: 1em !important; 919 | font-family: 'JetBrainsMono Nerd Font', 'Raleway', var(--font-code), monospace !important; 920 | } 921 | 922 | /* Channel Tabs */ 923 | .channelTabs-tab.channelTabs-selected { 924 | margin-top: 5px; 925 | } 926 | [class*="channelTabs-"] .channelTabs-closeTab { 927 | color: var(--text-normal) !important; 928 | background-color: transparent !important; 929 | } 930 | [class*="channelTabs-"] .channelTabs-closeTab:hover { 931 | color: var(--text-danger) !important; 932 | } 933 | .channelTabs-tabContainer { 934 | background-color: var(--background-secondary-alt); 935 | } 936 | .channelTabs-newTab { 937 | bottom: calc(var(--channelTabs-tabHeight) / 2) !important; 938 | } 939 | #channelTabs-settingsMenu { 940 | background: transparent !important; 941 | } 942 | 943 | /* Better Formatting Redux */ 944 | .bf-toolbar::before { 945 | background: var(--background-secondary) !important; 946 | } 947 | .tooltipBlack-vMYxvw { 948 | background-color: var(--background-floating) !important; 949 | } 950 | .tooltipPointer-3L49xb { 951 | border-top-color: var(--background-floating) !important; 952 | } 953 | 954 | /* Powercord Spotify Modal. */ 955 | .fa-forward, .fa-backward{ 956 | transition-duration: 0.3s; 957 | } 958 | button:hover .fa-forward:hover{ 959 | transform: translate(2px); 960 | } 961 | button:hover .fa-backward:hover{ 962 | transform: translate(-2px); 963 | } 964 | 965 | /* ----------------------------- END OF THEME ----------------------------- */ 966 | 967 | /* ~~~~ CSS Snippets ~~~~ */ 968 | 969 | /* Better name colors in chat & list light mode */ 970 | .theme-light .username_ec86aa.desaturateUserColors-1O-G89.clickable_ec86aa, 971 | .theme-light .roleColor-nA7BqX.desaturateUserColors-1O-G89 { 972 | filter: contrast(50%); 973 | transition: filter 0.25s; 974 | } 975 | .theme-light .username_ec86aa.desaturateUserColors-1O-G89.clickable_ec86aa:hover, 976 | .theme-light .roleColor-nA7BqX.desaturateUserColors-1O-G89:hover { 977 | filter: contrast(100%); 978 | } 979 | 980 | /* Hide unused things */ 981 | .banner_c3e427:hover .premiumIconWrapper_c3e427 .textBadge_f05120, 982 | .banner_c3e427:hover .bannerOverlay-1uIerX, 983 | .banner_c3e427:hover .pencilIcon_e00224, 984 | button[aria-label="Send a gift"], 985 | [href="/discovery"], 986 | .toolbar_e44302 a, 987 | .gifTag_c3e427 { 988 | display: none; 989 | } 990 | 991 | /* Consistent Account and Server Join Date */ 992 | .discordMemberCreatedAtIconContainer__09d4a { 993 | padding: 0px; 994 | background-color: var(--background-tertiary); 995 | } 996 | .discordMemberCreatedAtIcon__6a752 { 997 | width: 24px; 998 | height: 24px; 999 | } 1000 | .discordMemberCreatedAtText_b9ff49 > div { 1001 | display: none; 1002 | } 1003 | .discordMemberCreatedAt_bd7014 > .discordMemberCreatedAtText_b9ff49 > h3 { 1004 | font-size: 16px; 1005 | font-family: inherit; 1006 | font-weight: 600; 1007 | user-select: text; 1008 | } 1009 | 1010 | /* Replaces Message Links with "Jump to Message" */ 1011 | [title^="https://discord.com/channels/"], 1012 | [title^="https://ptb.discord.com/channels/"], 1013 | [title^="https://canary.discord.com/channels/"] { 1014 | line-height:0; 1015 | font-size:0; 1016 | } 1017 | [title^="https://discord.com/channels/"]::before, 1018 | [title^="https://ptb.discord.com/channels/"]::before, 1019 | [title^="https://canary.discord.com/channels/"]::before { 1020 | content: "Jump to Message"; 1021 | font-size: 16px; 1022 | font-weight: 500; 1023 | } 1024 | --------------------------------------------------------------------------------