/** * @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/ */ :root { --kiophen: url("./denden-assets/mint.png"); --bubble1: url("./denden-assets/bg_blobbubble_3.png"); --bubble2: url("./denden-assets/bg_blobbubble_3_flip.png"); --forest: url("./denden-assets/bg_forest_dither.png"); --blob: url("./denden-assets/blob.png"); } @supports (color: color-mix(in lch, red, blue)) { .theme-dark { --gel: rgb(76, 252, 252); --multiply: 1; /* 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); } } @keyframes bgpomo { 0% { background-position: 0 0, 100px 0, 0 0; } 100% { background-position: 0 0, 1124px -1024px, 0 800px; } } .theme-dark { /* Colors */ --text-link: var(--gel); --channels-default: var(--neutral-20); --chat-text-muted: var(--neutral-20); --interactive-text-default: var(--neutral-20); --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); --control-icon-only-icon-default: var(--neutral-10); nav[aria-label] a[aria-label] /* Direct messages/friends list sidebar text color */ { color: var(--neutral-10); } /* Reset default backgrounds */ [class*="chatGradient"], [class*="channelTextArea"] > [class*="themedBackground"], nav[aria-label="Private channels"] { background: unset; } [class*="sidebar"]:has(nav[aria-label])::after /* This is a seemingly random User area pseudo-element with the default theme, so I'm throwing it into orbit. */ { content: unset; } /* Reset borders */ [data-fullscreen] [class*="notice"] { border-radius: unset; } div:has(> nav) /* Sidebar container */ { border-radius: unset; } /* Reset margins */ nav[aria-label="Private channels"] [class*="scroller"] { margin-bottom: 0; } /* Discord icon replacement */ nav[aria-label="Servers sidebar"] [class*="tutorial"]:first-child { & foreignObject div { background-image: var(--blob); background-position: center; background-repeat: no-repeat; background-size: 30px; } & svg svg, img { opacity: 0; } } /* Primary buttons */ :is([class*="primary"][role="button"], button):not(span button, [aria-label="User area"] button, [class*="videoControls"] *) /* Doesn't apply to: Text buttons, Mute/Deafen, User settings buttons */ { color: var(--neutral-1); border: 1px solid var(--neutral-30); background-image: linear-gradient(var(--neutral-80), var(--neutral-40)); box-shadow: inset 0 0 1em 0 var(--neutral-50); cursor: pointer; transition: unset; &:hover { transition: inherit; border-color: var(--neutral-60); background-image: linear-gradient(var(--neutral-60), var(--neutral-80)); box-shadow: inset 0 0 0.5em 0.3em var(--neutral-80); } &[class*="critical"] /* Warning buttons */ { color: var(--red-300); border-color: var(--red-500); background-image: linear-gradient(var(--red-400), var(--red-800)); box-shadow: inset 0 0 0.5em 0.3em var(--red-500); &:hover { border-color: var(--red-600); background-image: linear-gradient(var(--red-600), var(--red-800)); box-shadow: inset 0 0 0.5em 0.3em var(--red-800); } } } /* Miscellaneous buttons */ :is([aria-label="Message Actions"] [role="button"], /* Message actions ("React", "Reply", "Forward" and "More") */ [class*="channelTextArea"] [class*="buttons"] [role], [class*="channelTextArea"] [class*="attach"]>[aria-label], /* Message box buttons (GIF, Sticker, Emoji picker)*/ section[aria-label="User area"] button, /* Mute/Deafen, User settings buttons */ [class*="toolbar"] [role="button"], /* Chat toolbar buttons */ ):not([class*="username"], [class*="search"] *) /* Doesn't apply to: Usernames, Toolbar search icon */ { background-image: linear-gradient( color-mix(in lch, var(--neutral-65), transparent), color-mix(in lch, var(--neutral-70), transparent) ); box-shadow: inset 0 -5px 13px -5px color-mix(in lch, var(--neutral-80), transparent); &:hover { background-image: linear-gradient( color-mix(in lch, var(--neutral-60), transparent), color-mix(in lch, var(--neutral-80), transparent) ); box-shadow: inset 0 -5px 13px -5px var(--gel); } /* Rounded buttons */ &:not(section[aria-label="User area"] [class*="Parent"] *) /* Doesn't apply to: Mute/Unmute, Deafen/Undeafen */ { border-radius: var(--radius-round); } } /* Message box and User profile area */ main[class*="chat"] > form [class*="channelTextArea"], section[aria-label="User area"] { background-color: var(--neutral-80); border: unset; box-shadow: inset 0 -5px 13px -5px var(--gel), 0 0 0 1px var(--neutral-30); } /* Backgrounds */ nav[aria-label="Private channels"] [class*="scroller"] /* Direct messages/friends list sidebar */, aside>[class*="members"] /* Members sidebar */ { box-shadow: inset var(--neutral-100) 0 0 110px -26px, inset var(--neutral-50) 0 0 8px 4px; } nav[aria-label="Private channels"] { background: var(--neutral-80); } /* Chat background */ main[class*="chat"] { background-image: linear-gradient( color-mix(in lch, var(--neutral-70), transparent), color-mix(in lch, var(--neutral-80), transparent) 80%, transparent ), var(--forest); /* Kiophen mascot :3 */ &::before { background-image: var(--kiophen); background-repeat: no-repeat; background-size: auto 40vh; bottom: 0; content: ""; height: 100%; opacity: 0.3; position: absolute; right: 0; width: 100%; z-index: 0; pointer-events: none; background-position-y: calc(100% - 32px); background-position-x: 100%; } } /* Animated gel background */ [aria-label="Servers sidebar"], [data-fullscreen] [class*="bar"] > [class*="title"], /* Title bar */ [class*="callContainer"] > div /* Call background */ { 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; } } .theme-dark:not(.reduce-motion) { [aria-label="Servers sidebar"], [data-fullscreen] [class*="bar"] > [class*="title"], [class*="callContainer"]>div { animation: bgpomo 16s infinite linear; } }