├── README.md ├── discord-pywal.css ├── discord-wallust-beta.css └── discord-wallust.css /README.md: -------------------------------------------------------------------------------- 1 | Currently doesn't work cause of the discord redesign. 2 | But maybe one day i'll get to it again. 3 | 4 | 5 | A pywal and [wallust](https://codeberg.org/explosion-mental/wallust) template for [Vencord](https://github.com/Vendicated/Vencord) (or probably any other client capable of loading css, no guarantees). 6 | 7 | Does not modify any discord styling outside of colors - it is just a recolored, vanilla discord. 8 | 9 | Is uses the same formula for generating background color shades as [Pywalfox](https://github.com/Frewacom/pywalfox/tree/master), so the colors will match :) 10 | 11 | (Just set `"color0": "{{background}}",` in the colors.json template for pywalfox if using wallust) 12 | 13 | Dark theme only, sorry, I don't really use light themes, though it might work ok with `pywal -l`. If you edit the template because you use light themes with wal - feel free to PR! 14 | 15 | ## Usage 16 | 17 | ### pywal 18 | Add the `discord-pywal.css` file to your `$HOME\.config\wal\templates`. After generating a pallette with `wal` there will be a `discord-pywal.css` file in your `$HOME\.cache\wal` directory. 19 | See [https://github.com/dylanaraps/pywal/wiki/User-Template-Files](https://github.com/dylanaraps/pywal/wiki/User-Template-Files) for more information 20 | 21 | You can then copy the cached theme to `$HOME\AppData\Roaming\Vencord\themes\pywal.css` in the script you run to update things after running wal or w/e. Then you can enable it in the Vencord settings. 22 | 23 | ### wallust 24 | When using wallust you first need to check which version you have. You can do that by running this command: 25 | ```sh 26 | wallust --version 27 | ``` 28 | 29 |
30 | Should your version be >= than 3.0.0 follow this guide 31 | 32 | Copy `discord-wallust-beta.css` to `%appdata%\wallust` and 33 | add this line to your `%appdata%\wallust\wallust.toml` 34 | 35 | ```toml 36 | [templates] 37 | vencord = { template = 'discord-wallust-beta.css', target = 'C:/Users/Username/AppData/Roaming/Vencord/themes/wallust.css' } 38 | ``` 39 | 40 | Note that for toml, that *has* to be on one line. As an alternative, you can also write: 41 | 42 | ```toml 43 | [templates.vencord] 44 | template = 'discord-wallust.css' 45 | target = 'C:/Users/Username/AppData/Roaming/Vencord/themes/wallust.css' 46 | ``` 47 |
48 | 49 |
50 | Otherwise please follow these instructions 51 | 52 | Copy `discord-wallust.css` to `%appdata%\wallust` and 53 | add this to your `%appdata%\wallust\wallust.toml` 54 | 55 | ```toml 56 | [templates] 57 | vencord = { template = 'discord-wallust-beta.css', target = 'C:/Users/Username/AppData/Roaming/Vencord/themes/wallust.css' } 58 | ``` 59 | 60 | Note that for toml, that *has* to be on one line. As an alternative, you can also write: 61 | 62 | 63 | ```toml 64 | [templates.vencord] 65 | template = 'discord-wallust-beta.css' 66 | target = 'C:/Users/Username/AppData/Roaming/Vencord/themes/wallust.css' 67 | ``` 68 |
69 | 70 | ## Editing 71 | I have left a bunch of notes and commented styles, and the color variable names are pretty self-explanatory: feel free to tinker around! 72 | 73 | If you want e.g. comfycord/material/etc. support, you can edit the theme/template directly (e.g. in Vencord's "Open QuickCSS File") and import your favorite theme before the colors. Don't shy away from DIYing with the theme/template, it is not difficult. 74 | -------------------------------------------------------------------------------- /discord-pywal.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Wal Theme 3 | * @author Gremious (and You! (and pywal)) 4 | * @version 1.0.0 5 | * @description Generated by pywal. 6 | * @source https://github.com/Gremious/discord-wal-theme-template 7 | */ 8 | 9 | :root {{ 10 | /* Colors are written this way so that you can do e.g. */ 11 | /* rgba(var(--wal-color-5-purple), 0.75); for opaticy */ 12 | 13 | /* Background is defined later, with various luminosities. */ 14 | --wal-foreground: {foreground.rgb}; 15 | --wal-cursor: {cursor.rgb}; 16 | 17 | --wal-color-0-black: {color0.rgb}; 18 | --wal-color-1-red: {color1.rgb}; 19 | --wal-color-2-green: {color2.rgb}; 20 | --wal-color-3-yellow: {color3.rgb}; 21 | --wal-color-4-blue: {color4.rgb}; 22 | --wal-color-5-purple: {color5.rgb}; 23 | --wal-color-6-cyan: {color6.rgb}; 24 | --wal-color-7-white: {color7.rgb}; 25 | 26 | --wal-color-8-bright-black: {color8.rgb}; 27 | --wal-color-9-bright-red: {color9.rgb}; 28 | --wal-color-10-bright-green: {color10.rgb}; 29 | --wal-color-11-bright-yellow: {color11.rgb}; 30 | --wal-color-12-bright-blue: {color12.rgb}; 31 | --wal-color-13-bright-purple: {color13.rgb}; 32 | --wal-color-14-bright-cyan: {color14.rgb}; 33 | --wal-color-15-bright-white: {color15.rgb}; 34 | 35 | /* 36 | https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/ 37 | feat. 38 | https://github.com/Frewacom/walfox/blob/master/src/utils/colors.ts#L21C50-L21C50 39 | (which itself refers to) 40 | https://www.sitepoint.com/javascript-generate-lighter-darker-color/ 41 | */ 42 | 43 | /* pywalfox values, so that it's nice and matching */ 44 | --background-light-luminance: 1.25; 45 | --background-extra-light-luminance: 1.85; 46 | 47 | --wal-bg-red: calc({background.red} * 255); 48 | --wal-bg-green: calc({background.green} * 255); 49 | --wal-bg-blue: calc({background.blue} * 255); 50 | 51 | --wal-red-light: min(max(0, calc(var(--wal-bg-red) + (var(--wal-bg-red) * var(--background-light-luminance)))), 255); 52 | --wal-green-light: min(max(0, calc(var(--wal-bg-green) + (var(--wal-bg-green) * var(--background-light-luminance)))), 255); 53 | --wal-blue-light: min(max(0, calc((var(--wal-bg-blue) + var(--wal-bg-blue) * var(--background-light-luminance)))), 255); 54 | 55 | --wal-red-extra-light: min(max(0, calc(var(--wal-bg-red) + (var(--wal-bg-red) * var(--background-extra-light-luminance)))), 255); 56 | --wal-green-extra-light: min(max(0, calc(var(--wal-bg-green) + (var(--wal-bg-green) * var(--background-extra-light-luminance)))), 255); 57 | --wal-blue-extra-light: min(max(0, calc((var(--wal-bg-blue) + var(--wal-bg-blue) * var(--background-extra-light-luminance)))), 255); 58 | 59 | --wal-background: var(--wal-bg-red), var(--wal-bg-green), var(--wal-bg-blue); 60 | --wal-background-light: var(--wal-red-light), var(--wal-green-light), var(--wal-blue-light); 61 | --wal-background-extra-light: var(--wal-red-extra-light), var(--wal-green-extra-light), var(--wal-blue-extra-light); 62 | }} 63 | 64 | /* Text selection color, I just think it's cool. */ 65 | ::selection {{ 66 | color: rgb(var(--wal-foreground)); 67 | background: rgb(var(--wal-background-extra-light)); 68 | }} 69 | 70 | 71 | /* There is a weird shadow on the top buttons buttons. */ 72 | /* You can't actually see it in vanilla but it's there on colored. */ 73 | /* Can't seem to set --__header-bar-background which it uses, so selector it is. */ 74 | /* This feels like a generated name, hopefully it persists through updates. */ 75 | .theme-dark .children-3xh0VB:after {{ 76 | background: none; 77 | }} 78 | 79 | .theme-dark {{ 80 | /* This is nice, but I find it a bit harder to read text if it's any darker. */ 81 | /* --text-normal: rgb(var(--wal-foreground)); */ 82 | 83 | /* channel/dm names in sidebar */ 84 | --channels-default: rgb(var(--wal-foreground)); 85 | 86 | --background-primary: rgb(var(--wal-background)); 87 | /* forums/members page bg, maybe others */ 88 | --home-background: rgb(var(--wal-background)); 89 | /* Don't see it used much, but it's at least the bg in the app directory page in the server settings */ 90 | --primary-600: rgb(var(--wal-background)); 91 | 92 | /* Interactive buttons - pins, emote, channel settings cog, etc. */ 93 | --interactive-normal: rgb(var(--wal-foreground)); 94 | /* Interactable things with more attention - undread channel names, 95 | * and text that you can click (thread message) */ 96 | --interactive-active: rgb(var(--wal-foreground)); 97 | 98 | /* Mostly default username color, 99 | * and some little dots like the unread server indicator */ 100 | --header-primary: rgb(var(--wal-foreground)); 101 | 102 | /* Alternative gradient background, but you need to fix the top overlay too. */ 103 | /* --background-primary: linear-gradient(to top, rgb(var(--wal-background)), rgb(var(--wal-background-light))); */ 104 | /* --bg-overlay-2: rgb(var(--wal-foreground)); */ 105 | 106 | /* Lighter top bar also looks nice. Normally the same color as background primary. */ 107 | /* But you may need to disable overlay-3 below and color the searchbox. */ 108 | /* --bg-overlay-2: rgb(var(--wal-background-light)); */ 109 | 110 | /* The "Discord blue" color - main setting buttons, "x unread messages" tooltip, etc. */ 111 | /* pywalfox uses color 10 and 13 (as primary and secondary) on default settings, if you want parity. */ 112 | --brand-experiment: rgb(var(--wal-color-10-bright-green)); 113 | --button-secondary-background: rgb(var(--wal-background)); 114 | 115 | /* This guy just kinda overrides a bunch of stuff consistently, for free. */ 116 | /* Sidebar, search box, text box, etc. */ 117 | /* However, it makes the searchbox blend in if --bg-overlay-2 is set to the same light color. */ 118 | --bg-overlay-3: rgb(var(--wal-background-light)); 119 | 120 | /* Chat text box, overriden by the guy above if you use em. */ 121 | /* --channeltextarea-background: rgb(var(--wal-background-light)); */ 122 | /* Used for at least the searchbox, also overriden. */ 123 | /* --background-tertiary: rgb(var(--wal-background)); */ 124 | 125 | /* Still used for e.g. video embed/server folder background */ 126 | --background-secondary: rgb(var(--wal-background-light)); 127 | --background-secondary-alt: rgb(var(--wal-background-extra-light)); 128 | --background-floating: rgb(var(--wal-background)); 129 | 130 | --background-modifier-hover: rgba(0, 0, 0, 0.20); 131 | --background-modifier-active: rgba(0, 0, 0, 0.25); 132 | --background-modifier-selected: rgba(0, 0, 0, 0.30); 133 | 134 | /* The scrollbar thumb may also looks good if you set it to e.g. pruple or blue. */ 135 | /* --scrollbar-auto-thumb: rgb(var(--wal-color-2-green)); */ 136 | --scrollbar-auto-thumb: rgb(var(--wal-background-extra-light)); 137 | 138 | /* The scrollbar track may also looks good if you set it to e.g. pruple or blue. */ 139 | /* --scrollbar-auto-track: rgba(var(--wal-color-2-green), 0.75); */ 140 | --scrollbar-auto-track: rgba(var(--wal-red-light), var(--wal-green-light), var(--wal-blue-light), 0.75); 141 | 142 | /* Used in settings, left side */ 143 | --scrollbar-thin-thumb: rgb(var(--wal-foreground)); 144 | 145 | /* Little dark side-bit when you click the search bar.*/ 146 | /* You can't actually see it in the default Discord theme? */ 147 | /* So we hide it cause you can deffo see it on any other color theme and it looks bad.*/ 148 | --search-popout-option-fade: 0; 149 | /* Original noted here, cause it was a paint to get. */ 150 | /* --search-popout-option-fade: linear-gradient(90deg,hsl(var(--primary-800-hsl)/0),hsl(var(--primary-800-hsl)/1) 80%); */ 151 | 152 | --search-popout-option-fade-hover: linear-gradient(90deg, rgba(var(--wal-red-extra-light), var(--wal-green-extra-light), var(--wal-blue-extra-light), 0), var(--wal-background-extra-light) 50%); 153 | /* original */ 154 | /* --search-popout-option-fade-hover: linear-gradient(90deg,hsl(var(--primary-600-hsl)/0),var(--primary-600) 50%); */ 155 | 156 | /* Idk anything abt these */ 157 | --background-mobile-primary: rgb(var(--wal-background)); 158 | --background-mobile-secondary: rgb(var(--wal-background-light)); 159 | }} 160 | 161 | /* idk i don't use light theme sorry */ 162 | .theme-light {{ 163 | --text-normal: rgb(var(--wal-foreground)); 164 | }} 165 | -------------------------------------------------------------------------------- /discord-wallust-beta.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Wal Theme 3 | * @author Gremious (and You! (and wallust)) 4 | * @version 1.0.0 5 | * @description Generated by wallust. 6 | * @source https://github.com/Gremious/discord-wal-theme-template 7 | */ 8 | 9 | :root { 10 | /* Colors are written this way so that you can do e.g. */ 11 | /* rgba(var(--wal-color-5-purple), 0.75); for opaticy */ 12 | 13 | /* Background is defined later, with various luminosities. */ 14 | --wal-foreground: {{ foreground | rgb }}; 15 | --wal-cursor: {{ cursor | rgb }}; 16 | 17 | --wal-color-0-black: {{ color0 | rgb }}; 18 | --wal-color-1-red: {{ color1 | rgb }}; 19 | --wal-color-2-green: {{ color2 | rgb }}; 20 | --wal-color-3-yellow: {{ color3 | rgb }}; 21 | --wal-color-4-blue: {{ color4 | rgb }}; 22 | --wal-color-5-purple: {{ color5 | rgb }}; 23 | --wal-color-6-cyan: {{ color6 | rgb }}; 24 | --wal-color-7-white: {{ color7 | rgb }}; 25 | 26 | --wal-color-8-bright-black: {{ color8 | rgb }}; 27 | --wal-color-9-bright-red: {{ color9 | rgb }}; 28 | --wal-color-10-bright-green: {{ color10 | rgb }}; 29 | --wal-color-11-bright-yellow: {{ color11 | rgb }}; 30 | --wal-color-12-bright-blue: {{ color12 | rgb }}; 31 | --wal-color-13-bright-purple: {{ color13 | rgb }}; 32 | --wal-color-14-bright-cyan: {{ color14 | rgb }}; 33 | --wal-color-15-bright-white: {{ color15 | rgb }}; 34 | 35 | 36 | /* 37 | https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/ 38 | feat. 39 | https://github.com/Frewacom/walfox/blob/master/src/utils/colors.ts#L21C50-L21C50 40 | (which itself refers to) 41 | https://www.sitepoint.com/javascript-generate-lighter-darker-color/ 42 | */ 43 | 44 | /* pywalfox values, so that it's nice and matching */ 45 | --background-light-luminance: 1.25; 46 | --background-extra-light-luminance: 1.85; 47 | 48 | --wal-bg-red: calc({{ background | red }}); 49 | --wal-bg-green: calc({{ background | green }}); 50 | --wal-bg-blue: calc({{ background | blue }}); 51 | 52 | 53 | --wal-red-light: min(max(0, calc(var(--wal-bg-red) + (var(--wal-bg-red) * var(--background-light-luminance)))), 255); 54 | --wal-green-light: min(max(0, calc(var(--wal-bg-green) + (var(--wal-bg-green) * var(--background-light-luminance)))), 255); 55 | --wal-blue-light: min(max(0, calc((var(--wal-bg-blue) + var(--wal-bg-blue) * var(--background-light-luminance)))), 255); 56 | 57 | --wal-red-extra-light: min(max(0, calc(var(--wal-bg-red) + (var(--wal-bg-red) * var(--background-extra-light-luminance)))), 255); 58 | --wal-green-extra-light: min(max(0, calc(var(--wal-bg-green) + (var(--wal-bg-green) * var(--background-extra-light-luminance)))), 255); 59 | --wal-blue-extra-light: min(max(0, calc((var(--wal-bg-blue) + var(--wal-bg-blue) * var(--background-extra-light-luminance)))), 255); 60 | 61 | --wal-background: var(--wal-bg-red), var(--wal-bg-green), var(--wal-bg-blue); 62 | --wal-background-light: var(--wal-red-light), var(--wal-green-light), var(--wal-blue-light); 63 | --wal-background-extra-light: var(--wal-red-extra-light), var(--wal-green-extra-light), var(--wal-blue-extra-light); 64 | } 65 | 66 | /* Text selection color, I just think it's cool. */ 67 | ::selection { 68 | color: rgb(var(--wal-foreground)); 69 | background: rgb(var(--wal-background-extra-light)); 70 | } 71 | 72 | 73 | /* There is a weird shadow on the top buttons buttons. */ 74 | /* You can't actually see it in vanilla but it's there on colored. */ 75 | /* Can't seem to set --__header-bar-background which it uses, so selector it is. */ 76 | /* This feels like a generated name, hopefully it persists through updates. */ 77 | .theme-dark .children-3xh0VB:after { 78 | background: none; 79 | } 80 | 81 | .theme-dark { 82 | /* This is nice, but I find it a bit harder to read text if it's any darker. */ 83 | /* --text-normal: rgb(var(--wal-foreground)); */ 84 | 85 | /* Channel/DM names in sidebar*/ 86 | --channels-default: rgb(var(--wal-foreground)); 87 | 88 | --background-primary: rgb(var(--wal-background)); 89 | /* forums/members page bg, maybe others */ 90 | --home-background: rgb(var(--wal-background)); 91 | /* Don't see it used much, but it's at least the bg in the app directory page in the server settings */ 92 | --primary-600: rgb(var(--wal-background)); 93 | 94 | /* Interactive buttons - pins, emote, channel settings cog, etc. */ 95 | --interactive-normal: rgb(var(--wal-foreground)); 96 | /* Interactable things with more attention - undread channel names, 97 | * and text that you can click (thread message) */ 98 | --interactive-active: rgb(var(--wal-foreground)); 99 | 100 | /* Mostly default username color, 101 | * and some little dots like the unread server indicator */ 102 | --header-primary: rgb(var(--wal-foreground)); 103 | 104 | /* Alternative gradient background, but you need to fix the top overlay too. */ 105 | /* --background-primary: linear-gradient(to top, rgb(var(--wal-background)), rgb(var(--wal-background-light))); */ 106 | /* --bg-overlay-2: rgb(var(--wal-foreground)); */ 107 | 108 | /* Lighter top bar also looks nice. Normally the same color as background primary. */ 109 | /* But you may need to disable overlay-3 below and color the searchbox. */ 110 | --bg-overlay-2: rgb(var(--wal-background-light)); 111 | 112 | /* The "Discord blue" color - main setting buttons, "x unread messages" tooltip, etc. */ 113 | /* pywalfox uses color 10 and 13 (as primary and secondary) on default settings, if you want parity. */ 114 | --brand-experiment: rgb(var(--wal-color-10-bright-green)); 115 | --button-secondary-background: rgb(var(--wal-background)); 116 | 117 | /* This guy just kinda overrides a bunch of stuff consistently, for free. */ 118 | /* Sidebar, search box, text box, etc. */ 119 | /* However, it makes the searchbox blend in if --bg-overlay-2 is set to the same light color. */ 120 | /* --bg-overlay-3: rgb(var(--wal-background-light)); */ 121 | 122 | /* Chat text box, overriden by the guy above if you use em. */ 123 | --channeltextarea-background: rgb(var(--wal-background-light)); 124 | /* Used for at least the searchbox, also overriden. */ 125 | --background-tertiary: rgb(var(--wal-background)); 126 | 127 | /* Still used for e.g. video embed/server folder background */ 128 | --background-secondary: rgb(var(--wal-background-light)); 129 | --background-secondary-alt: rgb(var(--wal-background-extra-light)); 130 | --background-floating: rgb(var(--wal-background)); 131 | 132 | --background-modifier-hover: rgba(0, 0, 0, 0.20); 133 | --background-modifier-active: rgba(0, 0, 0, 0.25); 134 | --background-modifier-selected: rgba(0, 0, 0, 0.30); 135 | 136 | /* The scrollbar thumb may also looks good if you set it to e.g. pruple or blue. */ 137 | --scrollbar-auto-thumb: rgb(var(--wal-color-5-purple)); 138 | /* --scrollbar-auto-thumb: rgb(var(--wal-background-extra-light)); */ 139 | 140 | /* The scrollbar track may also looks good if you set it to e.g. pruple or blue. */ 141 | /* --scrollbar-auto-track: rgba(var(--wal-color-5-purple), 0.75); */ 142 | --scrollbar-auto-track: rgba(var(--wal-red-light), var(--wal-green-light), var(--wal-blue-light), 0.75); 143 | 144 | /* Used in settings, left side */ 145 | --scrollbar-thin-thumb: rgb(var(--wal-foreground)); 146 | 147 | /* Little dark side-bit when you click the search bar.*/ 148 | /* You can't actually see it in the default Discord theme? */ 149 | /* So we hide it cause you can deffo see it on any other color theme and it looks bad.*/ 150 | --search-popout-option-fade: 0; 151 | /* Original noted here, cause it was a paint to get. */ 152 | /* --search-popout-option-fade: linear-gradient(90deg,hsl(var(--primary-800-hsl)/0),hsl(var(--primary-800-hsl)/1) 80%); */ 153 | 154 | --search-popout-option-fade-hover: linear-gradient(90deg, rgba(var(--wal-red-extra-light), var(--wal-green-extra-light), var(--wal-blue-extra-light), 0), var(--wal-background-extra-light) 50%); 155 | /* original */ 156 | /* --search-popout-option-fade-hover: linear-gradient(90deg,hsl(var(--primary-600-hsl)/0),var(--primary-600) 50%); */ 157 | 158 | /* Idk anything abt these */ 159 | --background-mobile-primary: rgb(var(--wal-background)); 160 | --background-mobile-secondary: rgb(var(--wal-background-light)); 161 | } 162 | 163 | /* idk i don't use light theme sorry */ 164 | .theme-light { 165 | --text-normal: rgb(var(--wal-foreground)); 166 | } 167 | -------------------------------------------------------------------------------- /discord-wallust.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Wal Theme 3 | * @author Gremious (and You! (and wallust)) 4 | * @version 1.0.0 5 | * @description Generated by wallust. 6 | * @source https://github.com/Gremious/discord-wal-theme-template 7 | */ 8 | 9 | :root { 10 | /* Colors are written this way so that you can do e.g. */ 11 | /* rgba(var(--wal-color-5-purple), 0.75); for opaticy */ 12 | 13 | /* Background is defined later, with various luminosities. */ 14 | --wal-foreground: { foreground.rgb }; 15 | --wal-cursor: { cursor.rgb }; 16 | 17 | --wal-color-0-black: { color0.rgb }; 18 | --wal-color-1-red: { color1.rgb }; 19 | --wal-color-2-green: { color2.rgb }; 20 | --wal-color-3-yellow: { color3.rgb }; 21 | --wal-color-4-blue: { color4.rgb }; 22 | --wal-color-5-purple: { color5.rgb }; 23 | --wal-color-6-cyan: { color6.rgb }; 24 | --wal-color-7-white: { color7.rgb }; 25 | 26 | --wal-color-8-bright-black: { color8.rgb }; 27 | --wal-color-9-bright-red: { color9.rgb }; 28 | --wal-color-10-bright-green: { color10.rgb }; 29 | --wal-color-11-bright-yellow: { color11.rgb }; 30 | --wal-color-12-bright-blue: { color12.rgb }; 31 | --wal-color-13-bright-purple: { color13.rgb }; 32 | --wal-color-14-bright-cyan: { color14.rgb }; 33 | --wal-color-15-bright-white: { color15.rgb }; 34 | 35 | 36 | /* 37 | https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/ 38 | feat. 39 | https://github.com/Frewacom/walfox/blob/master/src/utils/colors.ts#L21C50-L21C50 40 | (which itself refers to) 41 | https://www.sitepoint.com/javascript-generate-lighter-darker-color/ 42 | */ 43 | 44 | /* pywalfox values, so that it's nice and matching */ 45 | --background-light-luminance: 1.25; 46 | --background-extra-light-luminance: 1.85; 47 | 48 | --wal-bg-red: calc({ background.red }); 49 | --wal-bg-green: calc({ background.green }); 50 | --wal-bg-blue: calc({ background.blue }); 51 | 52 | 53 | --wal-red-light: min(max(0, calc(var(--wal-bg-red) + (var(--wal-bg-red) * var(--background-light-luminance)))), 255); 54 | --wal-green-light: min(max(0, calc(var(--wal-bg-green) + (var(--wal-bg-green) * var(--background-light-luminance)))), 255); 55 | --wal-blue-light: min(max(0, calc((var(--wal-bg-blue) + var(--wal-bg-blue) * var(--background-light-luminance)))), 255); 56 | 57 | --wal-red-extra-light: min(max(0, calc(var(--wal-bg-red) + (var(--wal-bg-red) * var(--background-extra-light-luminance)))), 255); 58 | --wal-green-extra-light: min(max(0, calc(var(--wal-bg-green) + (var(--wal-bg-green) * var(--background-extra-light-luminance)))), 255); 59 | --wal-blue-extra-light: min(max(0, calc((var(--wal-bg-blue) + var(--wal-bg-blue) * var(--background-extra-light-luminance)))), 255); 60 | 61 | --wal-background: var(--wal-bg-red), var(--wal-bg-green), var(--wal-bg-blue); 62 | --wal-background-light: var(--wal-red-light), var(--wal-green-light), var(--wal-blue-light); 63 | --wal-background-extra-light: var(--wal-red-extra-light), var(--wal-green-extra-light), var(--wal-blue-extra-light); 64 | } 65 | 66 | /* Text selection color, I just think it's cool. */ 67 | ::selection { 68 | color: rgb(var(--wal-foreground)); 69 | background: rgb(var(--wal-background-extra-light)); 70 | } 71 | 72 | 73 | /* There is a weird shadow on the top buttons buttons. */ 74 | /* You can't actually see it in vanilla but it's there on colored. */ 75 | /* Can't seem to set --__header-bar-background which it uses, so selector it is. */ 76 | /* This feels like a generated name, hopefully it persists through updates. */ 77 | .theme-dark .children-3xh0VB:after { 78 | background: none; 79 | } 80 | 81 | .theme-dark { 82 | /* This is nice, but I find it a bit harder to read text if it's any darker. */ 83 | /* --text-normal: rgb(var(--wal-foreground)); */ 84 | 85 | /* Channel/DM names in sidebar */ 86 | --channels-default: rgb(var(--wal-foreground)); 87 | 88 | --background-primary: rgb(var(--wal-background)); 89 | /* forums/members page bg, maybe others */ 90 | --home-background: rgb(var(--wal-background)); 91 | /* Don't see it used much, but it's at least the bg in the app directory page in the server settings */ 92 | --primary-600: rgb(var(--wal-background)); 93 | 94 | /* Interactive buttons - pins, emote, channel settings cog, etc. */ 95 | --interactive-normal: rgb(var(--wal-foreground)); 96 | /* Interactable things with more attention - undread channel names, 97 | * and text that you can click (thread message) */ 98 | --interactive-active: rgb(var(--wal-foreground)); 99 | 100 | /* Mostly default username color, 101 | * and some little dots like the unread server indicator */ 102 | --header-primary: rgb(var(--wal-foreground)); 103 | 104 | /* Alternative gradient background, but you need to fix the top overlay too. */ 105 | /* --background-primary: linear-gradient(to top, rgb(var(--wal-background)), rgb(var(--wal-background-light))); */ 106 | /* --bg-overlay-2: rgb(var(--wal-foreground)); */ 107 | 108 | /* Lighter top bar also looks nice. Normally the same color as background primary. */ 109 | /* But you may need to disable overlay-3 below and color the searchbox. */ 110 | --bg-overlay-2: rgb(var(--wal-background-light)); 111 | 112 | /* The "Discord blue" color - main setting buttons, "x unread messages" tooltip, etc. */ 113 | /* pywalfox uses color 10 and 13 (as primary and secondary) on default settings, if you want parity. */ 114 | --brand-experiment: rgb(var(--wal-color-10-bright-green)); 115 | --button-secondary-background: rgb(var(--wal-background)); 116 | 117 | /* This guy just kinda overrides a bunch of stuff consistently, for free. */ 118 | /* Sidebar, search box, text box, etc. */ 119 | /* However, it makes the searchbox blend in if --bg-overlay-2 is set to the same light color. */ 120 | /* --bg-overlay-3: rgb(var(--wal-background-light)); */ 121 | 122 | /* Chat text box, overriden by the guy above if you use em. */ 123 | --channeltextarea-background: rgb(var(--wal-background-light)); 124 | /* Used for at least the searchbox, also overriden. */ 125 | --background-tertiary: rgb(var(--wal-background)); 126 | 127 | /* Still used for e.g. video embed/server folder background */ 128 | --background-secondary: rgb(var(--wal-background-light)); 129 | --background-secondary-alt: rgb(var(--wal-background-extra-light)); 130 | --background-floating: rgb(var(--wal-background)); 131 | 132 | --background-modifier-hover: rgba(0, 0, 0, 0.20); 133 | --background-modifier-active: rgba(0, 0, 0, 0.25); 134 | --background-modifier-selected: rgba(0, 0, 0, 0.30); 135 | 136 | /* The scrollbar thumb may also looks good if you set it to e.g. pruple or blue. */ 137 | --scrollbar-auto-thumb: rgb(var(--wal-color-5-purple)); 138 | /* --scrollbar-auto-thumb: rgb(var(--wal-background-extra-light)); */ 139 | 140 | /* The scrollbar track may also looks good if you set it to e.g. pruple or blue. */ 141 | /* --scrollbar-auto-track: rgba(var(--wal-color-5-purple), 0.75); */ 142 | --scrollbar-auto-track: rgba(var(--wal-red-light), var(--wal-green-light), var(--wal-blue-light), 0.75); 143 | 144 | /* Used in settings, left side */ 145 | --scrollbar-thin-thumb: rgb(var(--wal-foreground)); 146 | 147 | /* Little dark side-bit when you click the search bar.*/ 148 | /* You can't actually see it in the default Discord theme? */ 149 | /* So we hide it cause you can deffo see it on any other color theme and it looks bad.*/ 150 | --search-popout-option-fade: 0; 151 | /* Original noted here, cause it was a paint to get. */ 152 | /* --search-popout-option-fade: linear-gradient(90deg,hsl(var(--primary-800-hsl)/0),hsl(var(--primary-800-hsl)/1) 80%); */ 153 | 154 | --search-popout-option-fade-hover: linear-gradient(90deg, rgba(var(--wal-red-extra-light), var(--wal-green-extra-light), var(--wal-blue-extra-light), 0), var(--wal-background-extra-light) 50%); 155 | /* original */ 156 | /* --search-popout-option-fade-hover: linear-gradient(90deg,hsl(var(--primary-600-hsl)/0),var(--primary-600) 50%); */ 157 | 158 | /* Idk anything abt these */ 159 | --background-mobile-primary: rgb(var(--wal-background)); 160 | --background-mobile-secondary: rgb(var(--wal-background-light)); 161 | } 162 | 163 | /* idk i don't use light theme sorry */ 164 | .theme-light { 165 | --text-normal: rgb(var(--wal-foreground)); 166 | } 167 | --------------------------------------------------------------------------------