sundae/discord-denden-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

yay

Browse source
This commit is contained in:
sundae 2025-12-19 12:39:06 +02:00
commit ff88787333
Signed by: sundae
SSH key fingerprint: SHA256:MsJkKuo4PUdjQDpLeaURy81drKkW14exlTHp+8QFu6M
3 changed files with 573 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

42
README.md
View file

@ -1,3 +1,41 @@
# discord-denden-theme # Discord Denden theme
(WIP) A Discord theme inspired by Denden.world's teal gel look. (WIP) A Discord theme inspired by [Denden.world](https://denden.world/)'s teal gel look.
Replaces the default dark theme.
## Installation
### With [Vencord](https://vencord.dev/) (Automatic updates)*
\* Whenever I decide to update this stylesheet
1. Open Vencord
2. Click on User Settings
3. Navigate to the Vencord tab and then Themes
4. Click on the Online Themes tab
5. Paste into a new line: `https://bunsin.space/forgejo/sundae/discord-denden-theme/raw/branch/main/denden.css`
### With [Vencord](https://vencord.dev/) (Manual):
1. Open Vencord
2. Click on User Settings
3. Navigate to the Vencord tab and then Themes
5. Open Themes folder
6. Drag and drop `denden.css` and `denden-assets.css` inside the folder
7. Click on the "Load missing themes" button if the theme doesn't appear
8. Toggle the theme
### CSS Import (Manual):
```css
/**
* @name Denden theme
* @description A Discord theme inspired by denden.world's teal gel look.
* @author sunbun
* @website https://bunsin.space/forgejo/sundae/discord-denden-theme
* @source https://bunsin.space/forgejo/sundae/discord-denden-theme/src/branch/main/denden.css
* @authorLink https://sundae.bunsin.space/
*/
@import url('https://bunsin.space/forgejo/sundae/discord-denden-theme/raw/branch/main/denden.css');
```
## Credits:
- Mint (the Kiophen mascot) is owned by [Miles](https://mileshouse.neocities.org/)
- The animated background is from [Denden's downtime page](https://mileshouse.neocities.org/dendendowntime)
- Blob favicon is from [Denden](https://denden.world/)

12
denden-assets.css Normal file
View file

File diff suppressed because one or more lines are too long

521
denden.css Normal file
View file

@ -0,0 +1,521 @@
/**
* @name Denden theme
* @description A Discord theme inspired by denden.world's teal gel look. Use with default "Ash" theme
* @author sunbun
* @version -999.0.0
* @website https://bunsin.space/forgejo/sundae/discord-denden-theme
* @source https://bunsin.space/forgejo/sundae/discord-denden-theme/src/branch/main/denden.css
* @authorLink https://sundae.bunsin.space/
*/
@supports (color: color-mix(in lch, red, blue)) {
.theme-dark {
--gel: rgb(76, 252, 252);
--multiply: 1;
--gel-box-shadow: inset 0 -5px 13px -5px var(--gel);
--gel-button-bg: linear-gradient(var(--neutral-75), var(--neutral-90));
/* Overwrite defaults */
--neutral-1-hsl: lch(from var(--gel) calc(99% * var(--multiply)) 1% h);
--neutral-2-hsl: lch(from var(--gel) calc(98% * var(--multiply)) 2% h);
--neutral-3-hsl: lch(from var(--gel) calc(97% * var(--multiply)) 3% h);
--neutral-4-hsl: lch(from var(--gel) calc(96% * var(--multiply)) 4% h);
--neutral-5-hsl: lch(from var(--gel) calc(95% * var(--multiply)) 5% h);
--neutral-6-hsl: lch(from var(--gel) calc(94% * var(--multiply)) 6% h);
--neutral-7-hsl: lch(from var(--gel) calc(93% * var(--multiply)) 7% h);
--neutral-8-hsl: lch(from var(--gel) calc(92% * var(--multiply)) 8% h);
--neutral-9-hsl: lch(from var(--gel) calc(91% * var(--multiply)) 9% h);
--neutral-10-hsl: lch(from var(--gel) calc(90% * var(--multiply)) 10% h);
--neutral-11-hsl: lch(from var(--gel) calc(89% * var(--multiply)) 11% h);
--neutral-12-hsl: lch(from var(--gel) calc(88% * var(--multiply)) 12% h);
--neutral-13-hsl: lch(from var(--gel) calc(87% * var(--multiply)) 13% h);
--neutral-14-hsl: lch(from var(--gel) calc(86% * var(--multiply)) 14% h);
--neutral-15-hsl: lch(from var(--gel) calc(85% * var(--multiply)) 15% h);
--neutral-16-hsl: lch(from var(--gel) calc(84% * var(--multiply)) 16% h);
--neutral-17-hsl: lch(from var(--gel) calc(83% * var(--multiply)) 17% h);
--neutral-18-hsl: lch(from var(--gel) calc(82% * var(--multiply)) 18% h);
--neutral-19-hsl: lch(from var(--gel) calc(81% * var(--multiply)) 19% h);
--neutral-20-hsl: lch(from var(--gel) calc(80% * var(--multiply)) 20% h);
--neutral-21-hsl: lch(from var(--gel) calc(79% * var(--multiply)) 21% h);
--neutral-22-hsl: lch(from var(--gel) calc(78% * var(--multiply)) 22% h);
--neutral-23-hsl: lch(from var(--gel) calc(77% * var(--multiply)) 23% h);
--neutral-24-hsl: lch(from var(--gel) calc(76% * var(--multiply)) 24% h);
--neutral-25-hsl: lch(from var(--gel) calc(75% * var(--multiply)) 25% h);
--neutral-26-hsl: lch(from var(--gel) calc(74% * var(--multiply)) 26% h);
--neutral-27-hsl: lch(from var(--gel) calc(73% * var(--multiply)) 27% h);
--neutral-28-hsl: lch(from var(--gel) calc(72% * var(--multiply)) 28% h);
--neutral-29-hsl: lch(from var(--gel) calc(71% * var(--multiply)) 29% h);
--neutral-30-hsl: lch(from var(--gel) calc(70% * var(--multiply)) 30% h);
--neutral-31-hsl: lch(from var(--gel) calc(69% * var(--multiply)) 31% h);
--neutral-32-hsl: lch(from var(--gel) calc(68% * var(--multiply)) 32% h);
--neutral-33-hsl: lch(from var(--gel) calc(67% * var(--multiply)) 33% h);
--neutral-34-hsl: lch(from var(--gel) calc(66% * var(--multiply)) 34% h);
--neutral-35-hsl: lch(from var(--gel) calc(65% * var(--multiply)) 35% h);
--neutral-36-hsl: lch(from var(--gel) calc(64% * var(--multiply)) 36% h);
--neutral-37-hsl: lch(from var(--gel) calc(63% * var(--multiply)) 37% h);
--neutral-38-hsl: lch(from var(--gel) calc(62% * var(--multiply)) 38% h);
--neutral-39-hsl: lch(from var(--gel) calc(61% * var(--multiply)) 39% h);
--neutral-40-hsl: lch(from var(--gel) calc(60% * var(--multiply)) 40% h);
--neutral-41-hsl: lch(from var(--gel) calc(59% * var(--multiply)) 41% h);
--neutral-42-hsl: lch(from var(--gel) calc(58% * var(--multiply)) 42% h);
--neutral-43-hsl: lch(from var(--gel) calc(57% * var(--multiply)) 43% h);
--neutral-44-hsl: lch(from var(--gel) calc(56% * var(--multiply)) 44% h);
--neutral-45-hsl: lch(from var(--gel) calc(55% * var(--multiply)) 45% h);
--neutral-46-hsl: lch(from var(--gel) calc(54% * var(--multiply)) 46% h);
--neutral-47-hsl: lch(from var(--gel) calc(53% * var(--multiply)) 47% h);
--neutral-48-hsl: lch(from var(--gel) calc(52% * var(--multiply)) 48% h);
--neutral-49-hsl: lch(from var(--gel) calc(51% * var(--multiply)) 49% h);
--neutral-50-hsl: lch(from var(--gel) calc(50% * var(--multiply)) 50% h);
--neutral-51-hsl: lch(from var(--gel) calc(49% * var(--multiply)) 49% h);
--neutral-52-hsl: lch(from var(--gel) calc(48% * var(--multiply)) 48% h);
--neutral-53-hsl: lch(from var(--gel) calc(47% * var(--multiply)) 47% h);
--neutral-54-hsl: lch(from var(--gel) calc(46% * var(--multiply)) 46% h);
--neutral-55-hsl: lch(from var(--gel) calc(45% * var(--multiply)) 45% h);
--neutral-56-hsl: lch(from var(--gel) calc(44% * var(--multiply)) 44% h);
--neutral-57-hsl: lch(from var(--gel) calc(43% * var(--multiply)) 43% h);
--neutral-58-hsl: lch(from var(--gel) calc(42% * var(--multiply)) 42% h);
--neutral-59-hsl: lch(from var(--gel) calc(41% * var(--multiply)) 41% h);
--neutral-60-hsl: lch(from var(--gel) calc(40% * var(--multiply)) 40% h);
--neutral-61-hsl: lch(from var(--gel) calc(39% * var(--multiply)) 39% h);
--neutral-62-hsl: lch(from var(--gel) calc(38% * var(--multiply)) 38% h);
--neutral-63-hsl: lch(from var(--gel) calc(37% * var(--multiply)) 37% h);
--neutral-64-hsl: lch(from var(--gel) calc(36% * var(--multiply)) 36% h);
--neutral-65-hsl: lch(from var(--gel) calc(35% * var(--multiply)) 35% h);
--neutral-66-hsl: lch(from var(--gel) calc(34% * var(--multiply)) 34% h);
--neutral-67-hsl: lch(from var(--gel) calc(33% * var(--multiply)) 33% h);
--neutral-68-hsl: lch(from var(--gel) calc(32% * var(--multiply)) 32% h);
--neutral-69-hsl: lch(from var(--gel) calc(31% * var(--multiply)) 31% h);
--neutral-70-hsl: lch(from var(--gel) calc(30% * var(--multiply)) 30% h);
--neutral-71-hsl: lch(from var(--gel) calc(29% * var(--multiply)) 29% h);
--neutral-72-hsl: lch(from var(--gel) calc(28% * var(--multiply)) 28% h);
--neutral-73-hsl: lch(from var(--gel) calc(27% * var(--multiply)) 27% h);
--neutral-74-hsl: lch(from var(--gel) calc(26% * var(--multiply)) 26% h);
--neutral-75-hsl: lch(from var(--gel) calc(25% * var(--multiply)) 25% h);
--neutral-76-hsl: lch(from var(--gel) calc(24% * var(--multiply)) 24% h);
--neutral-77-hsl: lch(from var(--gel) calc(23% * var(--multiply)) 23% h);
--neutral-78-hsl: lch(from var(--gel) calc(22% * var(--multiply)) 22% h);
--neutral-79-hsl: lch(from var(--gel) calc(21% * var(--multiply)) 21% h);
--neutral-80-hsl: lch(from var(--gel) calc(20% * var(--multiply)) 20% h);
--neutral-81-hsl: lch(from var(--gel) calc(19% * var(--multiply)) 19% h);
--neutral-82-hsl: lch(from var(--gel) calc(18% * var(--multiply)) 18% h);
--neutral-83-hsl: lch(from var(--gel) calc(17% * var(--multiply)) 17% h);
--neutral-84-hsl: lch(from var(--gel) calc(16% * var(--multiply)) 16% h);
--neutral-85-hsl: lch(from var(--gel) calc(15% * var(--multiply)) 15% h);
--neutral-86-hsl: lch(from var(--gel) calc(14% * var(--multiply)) 14% h);
--neutral-87-hsl: lch(from var(--gel) calc(13% * var(--multiply)) 13% h);
--neutral-88-hsl: lch(from var(--gel) calc(12% * var(--multiply)) 12% h);
--neutral-89-hsl: lch(from var(--gel) calc(11% * var(--multiply)) 11% h);
--neutral-90-hsl: lch(from var(--gel) calc(10% * var(--multiply)) 10% h);
--neutral-91-hsl: lch(from var(--gel) calc(9% * var(--multiply)) 9% h);
--neutral-92-hsl: lch(from var(--gel) calc(8% * var(--multiply)) 8% h);
--neutral-93-hsl: lch(from var(--gel) calc(7% * var(--multiply)) 7% h);
--neutral-94-hsl: lch(from var(--gel) calc(6% * var(--multiply)) 6% h);
--neutral-95-hsl: lch(from var(--gel) calc(5% * var(--multiply)) 5% h);
--neutral-96-hsl: lch(from var(--gel) calc(4% * var(--multiply)) 4% h);
--neutral-97-hsl: lch(from var(--gel) calc(3% * var(--multiply)) 3% h);
--neutral-98-hsl: lch(from var(--gel) calc(2% * var(--multiply)) 2% h);
--neutral-99-hsl: lch(from var(--gel) calc(1% * var(--multiply)) 1% h);
--neutral-100-hsl: lch(from var(--gel) calc(0% * var(--multiply)) 0% h);
--neutral-1: var(--neutral-1-hsl);
--neutral-2: var(--neutral-2-hsl);
--neutral-3: var(--neutral-3-hsl);
--neutral-4: var(--neutral-4-hsl);
--neutral-5: var(--neutral-5-hsl);
--neutral-6: var(--neutral-6-hsl);
--neutral-7: var(--neutral-7-hsl);
--neutral-8: var(--neutral-8-hsl);
--neutral-9: var(--neutral-9-hsl);
--neutral-10: var(--neutral-10-hsl);
--neutral-11: var(--neutral-11-hsl);
--neutral-12: var(--neutral-12-hsl);
--neutral-13: var(--neutral-13-hsl);
--neutral-14: var(--neutral-14-hsl);
--neutral-15: var(--neutral-15-hsl);
--neutral-16: var(--neutral-16-hsl);
--neutral-17: var(--neutral-17-hsl);
--neutral-18: var(--neutral-18-hsl);
--neutral-19: var(--neutral-19-hsl);
--neutral-20: var(--neutral-20-hsl);
--neutral-21: var(--neutral-21-hsl);
--neutral-22: var(--neutral-22-hsl);
--neutral-23: var(--neutral-23-hsl);
--neutral-24: var(--neutral-24-hsl);
--neutral-25: var(--neutral-25-hsl);
--neutral-26: var(--neutral-26-hsl);
--neutral-27: var(--neutral-27-hsl);
--neutral-28: var(--neutral-28-hsl);
--neutral-29: var(--neutral-29-hsl);
--neutral-30: var(--neutral-30-hsl);
--neutral-31: var(--neutral-31-hsl);
--neutral-32: var(--neutral-32-hsl);
--neutral-33: var(--neutral-33-hsl);
--neutral-34: var(--neutral-34-hsl);
--neutral-35: var(--neutral-35-hsl);
--neutral-36: var(--neutral-36-hsl);
--neutral-37: var(--neutral-37-hsl);
--neutral-38: var(--neutral-38-hsl);
--neutral-39: var(--neutral-39-hsl);
--neutral-40: var(--neutral-40-hsl);
--neutral-41: var(--neutral-41-hsl);
--neutral-42: var(--neutral-42-hsl);
--neutral-43: var(--neutral-43-hsl);
--neutral-44: var(--neutral-44-hsl);
--neutral-45: var(--neutral-45-hsl);
--neutral-46: var(--neutral-46-hsl);
--neutral-47: var(--neutral-47-hsl);
--neutral-48: var(--neutral-48-hsl);
--neutral-49: var(--neutral-49-hsl);
--neutral-50: var(--neutral-50-hsl);
--neutral-51: var(--neutral-51-hsl);
--neutral-52: var(--neutral-52-hsl);
--neutral-53: var(--neutral-53-hsl);
--neutral-54: var(--neutral-54-hsl);
--neutral-55: var(--neutral-55-hsl);
--neutral-56: var(--neutral-56-hsl);
--neutral-57: var(--neutral-57-hsl);
--neutral-58: var(--neutral-58-hsl);
--neutral-59: var(--neutral-59-hsl);
--neutral-60: var(--neutral-60-hsl);
--neutral-61: var(--neutral-61-hsl);
--neutral-62: var(--neutral-62-hsl);
--neutral-63: var(--neutral-63-hsl);
--neutral-64: var(--neutral-64-hsl);
--neutral-65: var(--neutral-65-hsl);
--neutral-66: var(--neutral-66-hsl);
--neutral-67: var(--neutral-67-hsl);
--neutral-68: var(--neutral-68-hsl);
--neutral-69: var(--neutral-69-hsl);
--neutral-70: var(--neutral-70-hsl);
--neutral-71: var(--neutral-71-hsl);
--neutral-72: var(--neutral-72-hsl);
--neutral-73: var(--neutral-73-hsl);
--neutral-74: var(--neutral-74-hsl);
--neutral-75: var(--neutral-75-hsl);
--neutral-76: var(--neutral-76-hsl);
--neutral-77: var(--neutral-77-hsl);
--neutral-78: var(--neutral-78-hsl);
--neutral-79: var(--neutral-79-hsl);
--neutral-80: var(--neutral-80-hsl);
--neutral-81: var(--neutral-81-hsl);
--neutral-82: var(--neutral-82-hsl);
--neutral-83: var(--neutral-83-hsl);
--neutral-84: var(--neutral-84-hsl);
--neutral-85: var(--neutral-85-hsl);
--neutral-86: var(--neutral-86-hsl);
--neutral-87: var(--neutral-87-hsl);
--neutral-88: var(--neutral-88-hsl);
--neutral-89: var(--neutral-89-hsl);
--neutral-90: var(--neutral-90-hsl);
--neutral-91: var(--neutral-91-hsl);
--neutral-92: var(--neutral-92-hsl);
--neutral-93: var(--neutral-93-hsl);
--neutral-94: var(--neutral-94-hsl);
--neutral-95: var(--neutral-95-hsl);
--neutral-96: var(--neutral-96-hsl);
--neutral-97: var(--neutral-97-hsl);
--neutral-98: var(--neutral-98-hsl);
--neutral-99: var(--neutral-99-hsl);
--neutral-100: var(--neutral-100-hsl);
--blurple-1: var(--neutral-1);
--blurple-2: var(--neutral-2);
--blurple-3: var(--neutral-3);
--blurple-4: var(--neutral-4);
--blurple-5: var(--neutral-5);
--blurple-6: var(--neutral-6);
--blurple-7: var(--neutral-7);
--blurple-8: var(--neutral-8);
--blurple-9: var(--neutral-9);
--blurple-10: var(--neutral-10);
--blurple-11: var(--neutral-11);
--blurple-12: var(--neutral-12);
--blurple-13: var(--neutral-13);
--blurple-14: var(--neutral-14);
--blurple-15: var(--neutral-15);
--blurple-16: var(--neutral-16);
--blurple-17: var(--neutral-17);
--blurple-18: var(--neutral-18);
--blurple-19: var(--neutral-19);
--blurple-20: var(--neutral-20);
--blurple-21: var(--neutral-21);
--blurple-22: var(--neutral-22);
--blurple-23: var(--neutral-23);
--blurple-24: var(--neutral-24);
--blurple-25: var(--neutral-25);
--blurple-26: var(--neutral-26);
--blurple-27: var(--neutral-27);
--blurple-28: var(--neutral-28);
--blurple-29: var(--neutral-29);
--blurple-30: var(--neutral-30);
--blurple-31: var(--neutral-31);
--blurple-32: var(--neutral-32);
--blurple-33: var(--neutral-33);
--blurple-34: var(--neutral-34);
--blurple-35: var(--neutral-35);
--blurple-36: var(--neutral-36);
--blurple-37: var(--neutral-37);
--blurple-38: var(--neutral-38);
--blurple-39: var(--neutral-39);
--blurple-40: var(--neutral-40);
--blurple-41: var(--neutral-41);
--blurple-42: var(--neutral-42);
--blurple-43: var(--neutral-43);
--blurple-44: var(--neutral-44);
--blurple-45: var(--neutral-45);
--blurple-46: var(--neutral-46);
--blurple-47: var(--neutral-47);
--blurple-48: var(--neutral-48);
--blurple-49: var(--neutral-49);
--blurple-50: var(--neutral-50);
--blurple-51: var(--neutral-51);
--blurple-52: var(--neutral-52);
--blurple-53: var(--neutral-53);
--blurple-54: var(--neutral-54);
--blurple-55: var(--neutral-55);
--blurple-56: var(--neutral-56);
--blurple-57: var(--neutral-57);
--blurple-58: var(--neutral-58);
--blurple-59: var(--neutral-59);
--blurple-60: var(--neutral-60);
--blurple-61: var(--neutral-61);
--blurple-62: var(--neutral-62);
--blurple-63: var(--neutral-63);
--blurple-64: var(--neutral-64);
--blurple-65: var(--neutral-65);
--blurple-66: var(--neutral-66);
--blurple-67: var(--neutral-67);
--blurple-68: var(--neutral-68);
--blurple-69: var(--neutral-69);
--blurple-70: var(--neutral-70);
--blurple-71: var(--neutral-71);
--blurple-72: var(--neutral-72);
--blurple-73: var(--neutral-73);
--blurple-74: var(--neutral-74);
--blurple-75: var(--neutral-75);
--blurple-76: var(--neutral-76);
--blurple-77: var(--neutral-77);
--blurple-78: var(--neutral-78);
--blurple-79: var(--neutral-79);
--blurple-80: var(--neutral-80);
--blurple-81: var(--neutral-81);
--blurple-82: var(--neutral-82);
--blurple-83: var(--neutral-83);
--blurple-84: var(--neutral-84);
--blurple-85: var(--neutral-85);
--blurple-86: var(--neutral-86);
--blurple-87: var(--neutral-87);
--blurple-88: var(--neutral-88);
--blurple-89: var(--neutral-89);
--blurple-90: var(--neutral-90);
--blurple-91: var(--neutral-91);
--blurple-92: var(--neutral-92);
--blurple-93: var(--neutral-93);
--blurple-94: var(--neutral-94);
--blurple-95: var(--neutral-95);
--blurple-96: var(--neutral-96);
--blurple-97: var(--neutral-97);
--blurple-98: var(--neutral-98);
--blurple-99: var(--neutral-99);
--blurple-100: var(--neutral-100);
--blurple-1-hsl: var(--neutral-1);
--blurple-2-hsl: var(--neutral-2);
--blurple-3-hsl: var(--neutral-3);
--blurple-4-hsl: var(--neutral-4);
--blurple-5-hsl: var(--neutral-5);
--blurple-6-hsl: var(--neutral-6);
--blurple-7-hsl: var(--neutral-7);
--blurple-8-hsl: var(--neutral-8);
--blurple-9-hsl: var(--neutral-9);
--blurple-10-hsl: var(--neutral-10);
--blurple-11-hsl: var(--neutral-11);
--blurple-12-hsl: var(--neutral-12);
--blurple-13-hsl: var(--neutral-13);
--blurple-14-hsl: var(--neutral-14);
--blurple-15-hsl: var(--neutral-15);
--blurple-16-hsl: var(--neutral-16);
--blurple-17-hsl: var(--neutral-17);
--blurple-18-hsl: var(--neutral-18);
--blurple-19-hsl: var(--neutral-19);
--blurple-20-hsl: var(--neutral-20);
--blurple-21-hsl: var(--neutral-21);
--blurple-22-hsl: var(--neutral-22);
--blurple-23-hsl: var(--neutral-23);
--blurple-24-hsl: var(--neutral-24);
--blurple-25-hsl: var(--neutral-25);
--blurple-26-hsl: var(--neutral-26);
--blurple-27-hsl: var(--neutral-27);
--blurple-28-hsl: var(--neutral-28);
--blurple-29-hsl: var(--neutral-29);
--blurple-30-hsl: var(--neutral-30);
--blurple-31-hsl: var(--neutral-31);
--blurple-32-hsl: var(--neutral-32);
--blurple-33-hsl: var(--neutral-33);
--blurple-34-hsl: var(--neutral-34);
--blurple-35-hsl: var(--neutral-35);
--blurple-36-hsl: var(--neutral-36);
--blurple-37-hsl: var(--neutral-37);
--blurple-38-hsl: var(--neutral-38);
--blurple-39-hsl: var(--neutral-39);
--blurple-40-hsl: var(--neutral-40);
--blurple-41-hsl: var(--neutral-41);
--blurple-42-hsl: var(--neutral-42);
--blurple-43-hsl: var(--neutral-43);
--blurple-44-hsl: var(--neutral-44);
--blurple-45-hsl: var(--neutral-45);
--blurple-46-hsl: var(--neutral-46);
--blurple-47-hsl: var(--neutral-47);
--blurple-48-hsl: var(--neutral-48);
--blurple-49-hsl: var(--neutral-49);
--blurple-50-hsl: var(--neutral-50);
--blurple-51-hsl: var(--neutral-51);
--blurple-52-hsl: var(--neutral-52);
--blurple-53-hsl: var(--neutral-53);
--blurple-54-hsl: var(--neutral-54);
--blurple-55-hsl: var(--neutral-55);
--blurple-56-hsl: var(--neutral-56);
--blurple-57-hsl: var(--neutral-57);
--blurple-58-hsl: var(--neutral-58);
--blurple-59-hsl: var(--neutral-59);
--blurple-60-hsl: var(--neutral-60);
--blurple-61-hsl: var(--neutral-61);
--blurple-62-hsl: var(--neutral-62);
--blurple-63-hsl: var(--neutral-63);
--blurple-64-hsl: var(--neutral-64);
--blurple-65-hsl: var(--neutral-65);
--blurple-66-hsl: var(--neutral-66);
--blurple-67-hsl: var(--neutral-67);
--blurple-68-hsl: var(--neutral-68);
--blurple-69-hsl: var(--neutral-69);
--blurple-70-hsl: var(--neutral-70);
--blurple-71-hsl: var(--neutral-71);
--blurple-72-hsl: var(--neutral-72);
--blurple-73-hsl: var(--neutral-73);
--blurple-74-hsl: var(--neutral-74);
--blurple-75-hsl: var(--neutral-75);
--blurple-76-hsl: var(--neutral-76);
--blurple-77-hsl: var(--neutral-77);
--blurple-78-hsl: var(--neutral-78);
--blurple-79-hsl: var(--neutral-79);
--blurple-80-hsl: var(--neutral-80);
--blurple-81-hsl: var(--neutral-81);
--blurple-82-hsl: var(--neutral-82);
--blurple-83-hsl: var(--neutral-83);
--blurple-84-hsl: var(--neutral-84);
--blurple-85-hsl: var(--neutral-85);
--blurple-86-hsl: var(--neutral-86);
--blurple-87-hsl: var(--neutral-87);
--blurple-88-hsl: var(--neutral-88);
--blurple-89-hsl: var(--neutral-89);
--blurple-90-hsl: var(--neutral-90);
--blurple-91-hsl: var(--neutral-91);
--blurple-92-hsl: var(--neutral-92);
--blurple-93-hsl: var(--neutral-93);
--blurple-94-hsl: var(--neutral-94);
--blurple-95-hsl: var(--neutral-95);
--blurple-96-hsl: var(--neutral-96);
--blurple-97-hsl: var(--neutral-97);
--blurple-98-hsl: var(--neutral-98);
--blurple-99-hsl: var(--neutral-99);
--blurple-100-hsl: var(--neutral-100);
--background-surface-highest: var(--neutral-60);
--background-surface-higher: var(--neutral-65);
--background-surface-high: var(--neutral-70);
--background-base-low: var(--neutral-75);
--background-base-lower: var(--neutral-80);
--background-base-lowest: var(--neutral-85);
--radius-sm: var(--radius-xl);
--text-link: var(--gel);
--control-icon-only-icon-default: var(--neutral-10);
}
}
@keyframes bgpomo {
0% {
background-position: 0 0, 100px 0, 0 0;
}
100% {
background-position: 0 0, 1124px -1024px, 0 800px;
}
}
.theme-dark {
/* Reset default backgrounds */
[class*="chatGradient"],
[class*="channelTextArea"] > div {
background: none;
}
[class*="sidebar"]:has(nav[aria-label])::after {
content: unset;
}
/* Reset borders */
[class*="chat"]:has(main) {
border: unset;
}
[data-fullscreen] [class*="notice"] {
border-radius: unset;
}
div:has(> nav) {
border-radius: unset;
}
/* Borders */
[class*="chat"] article[class] {
border-color: var(--neutral-75);
}
/* Discord icon replacement */
nav[aria-label="Servers sidebar"] [class*="tutorial"]:first-child {
& div:has(> svg) {
background-image: var(--blob);
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
}
& svg svg {
opacity: 0;
}
}
/* Backgrounds */
[data-fullscreen] [class*="bar"] > [class*="title"] {
background-color: var(--neutral-80);
}
nav[aria-label="Servers sidebar"] {
margin: unset;
mask: unset;
}
nav[aria-label],
nav div:has([aria-label="Direct Messages"]) {
background-color: var(--background-base-lower);
}
/* Bubble-y look */
main > form [class*="channelTextArea"],
section[aria-label="User area"] {
background-color: var(--neutral-80);
border: unset;
box-shadow: var(--gel-box-shadow), 0 0 0 1px var(--neutral-30);
}
/* Animated gel background */
[class*="chat"] main {
background-image: linear-gradient(#012f, #0205), var(--bubble1),
var(--bubble2);
background-size: auto, auto, auto;
background-blend-mode: darken, lighten, normal;
background-size: auto, 1024px 1024px, 1000px 800px;
background-attachment: fixed;
}
/* Kiophen mascot :3 */
[class*="chat"] main::before {
background-image: var(--kiophen);
background-repeat: no-repeat;
background-size: auto 40vh;
bottom: 0;
content: "";
height: 100%;
opacity: 0.25;
position: absolute;
right: 0;
width: 100%;
z-index: 0;
pointer-events: none;
background-position-y: calc(100% - 32px);
background-position-x: 100%;
}
}
.theme-dark:not(.reduce-motion) {
[class*="chat"] main {
animation: bgpomo 16s infinite linear;
}
}