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

comments to help with future additions/readability, wip buttons

Browse source
This commit is contained in:
sundae 2025-12-19 17:40:50 +02:00
commit abcb9725df
Signed by: sundae
SSH key fingerprint: SHA256:MsJkKuo4PUdjQDpLeaURy81drKkW14exlTHp+8QFu6M
1 changed files with 49 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

92
denden.css
View file

@ -7,13 +7,11 @@
* @source https://bunsin.space/forgejo/sundae/discord-denden-theme/src/branch/main/denden.css
* @authorLink https://sundae.bunsin.space/
*/
@import url('denden-assets.css');
@import url("denden-assets.css");
@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);
@ -415,15 +413,6 @@
--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 {
@ -435,27 +424,63 @@
}
}
.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"] > div {
background: none;
}
[class*="sidebar"]:has(nav[aria-label])::after {
[class*="sidebar"]:has(nav[aria-label])::after /* User area pseudo-element? */ {
content: unset;
}
/* Reset borders */
[class*="chat"]:has(main) {
border: unset;
}
[data-fullscreen] [class*="notice"] {
border-radius: unset;
}
div:has(> nav) {
div:has(> nav) /* Sidebar container */ {
border-radius: unset;
}
/* Borders */
[class*="chat"] article[class] {
border-color: var(--neutral-75);
/* Buttons */
:is(
nav[aria-label] div:has(> a), /* Sidebar/direct messages */
main [role="button"], /* Message actions ("React", "Reply", "Forward" and "More"), Message box buttons*/
section[aria-label="User area"] button, /* Mute/Unmute, Deafen/Undeafen, User settings buttons */
):not([class*="username"], main article *, main a, main span:has(img)) /* Doesn't apply to: Usernames, Embeds, Links, Stickers, Emoji */ {
background-image: linear-gradient(var(--neutral-75), var(--neutral-80));
box-shadow: inset 0 -5px 13px -5px var(--neutral-65);
&:hover {
background-image: linear-gradient(var(--neutral-50), var(--neutral-70));
box-shadow: inset 0 -5px 13px -5px var(--gel);
}
}
/* Message box and User profile area */
main > 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 */
[data-fullscreen] [class*="bar"] > [class*="title"] /* Title bar */ {
background-color: var(--neutral-80);
}
nav[aria-label] /* Server sidebar and Search bar */,
nav div:has([aria-label="Direct Messages"]) /* Direct messages/friends list sidebar */ {
background-color: var(--background-base-lower);
}
/* Discord icon replacement */
nav[aria-label="Servers sidebar"] [class*="tutorial"]:first-child {
@ -469,27 +494,8 @@
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 {
main {
background-image: linear-gradient(#012f, #0205), var(--bubble1),
var(--bubble2);
background-size: auto, auto, auto;
@ -498,7 +504,7 @@
background-attachment: fixed;
}
/* Kiophen mascot :3 */
[class*="chat"] main::before {
main::before {
background-image: var(--kiophen);
background-repeat: no-repeat;
background-size: auto 40vh;
@ -516,7 +522,7 @@
}
}
.theme-dark:not(.reduce-motion) {
[class*="chat"] main {
main {
animation: bgpomo 16s infinite linear;
}
}
}