Theme discord-dark v1 by [@nex:nexy7574.co.uk]

A best-effort copy of Discord's "Dark" dark theme, available for Gomuks. This theme uses colours taken directly from the Discord client's stylesheet, and also makes some modifications to the UI layout to introduce a little more of that familiar padding Discord throws at every surface they can.

Last updated at 2025-09-30 15:19:29.903953 +0000 +0000

Initial commit

@import url("https://css.gomuks.app/theme/discord-dark.css");

/* 
 * Theme made by: @nexy7574 (@nex:nexy7574.co.uk)
 * Theme name: Discord Dark
 * Theme source: https://css.gomuks.app/theme/discord-dark
 */

:root {
  --discord-mentioned-overlay: color-mix(in oklab, hsl(36.894 calc(1 * 100%) 31.569% / 0.0784313725490196) 100%, hsl(0 0% 0% / 0.0784313725490196) 0%); /* The yellow overlay on a message when you've been pinged */
  --discord-jump-overlay: color-mix(in oklab, hsl(234.935 calc(1 * 85.556%) 64.706% / 0.1607843137254902) 100%, hsl(0 0% 0% / 0.1607843137254902) 0%);  /* In discord, this will have that purple overlay on a message when you jump to it.
                                                          it will also phase from 0.1 to 0 alpha, and then be removed, however that can't be
                                                          done with gomuks in pure CSS as it requires removing a class after adding it. */
  --discord-mention-pill-hover-background: rgb(114, 137, 218);
  --discord-mention-pill-background: rgba(88, 101, 242, 0.3);

  /* Colours from https://discord.com/branding - 2025-09-30 */
  --discord-blurple: #5865F2;
  --discord-light-blurple: #E0E3FF;
  --discord-green: #57F287;
  --discord-yellow: #FEE75C;
  --discord-fuchsia: #EB459E;
  --discord-red: #ED4245;
  --discord-white: #fff;
  --discord-black: #000;

  /* And role colour presets */
  --discord-role-teal: #19BB9C;
  --discord-role-dark-teal: #107F69;
  --discord-role-green: #2ECB70;
  --discord-role-dark-green: #1E8B4C;
  --discord-role-blue: #3498DB;
  --discord-role-dark-blue: #1F6594;
  --discord-role-purple: #9B58B5;
  --discord-role-dark-purple: #70368A;
  --discord-role-pink: #E91D62;
  --discord-role-dark-pink: #AC1356;
  --discord-role-yellow: #F1C30E;
  --discord-role-dark-yellow: #C17B0D;
  --discord-role-yellow-orange: #E74C3C;
  --discord-role-dark-yellow-orange: #A84300;
  --discord-role-orange: #E74C3C;
  --discord-role-dark-orange: #992D21;
  --discord-role-light-grey: #95A5A6;
  --discord-role-dark-grey: #979C9F;
  --discord-role-blue-grey: #5F7C8B;
  --discord-role-dark-blue-grey: #546D79;

  /* These variables are the same across themes */
  --timeline-jump-bg-color: var(--discord-jump-overlay);
  --timeline-jump-hover-bg-color: var(--discord-jump-overlay);
  --timeline-highlight-bg-color: var(--discord-mentioned-overlay);
  --timeline-highlight-hover-bg-color: var(--discord-mentioned-overlay);
  --highlight-pill-background-color: var(--discord-mention-pill-background);

  --discord-segment-divider-colour: color-mix(in oklab, hsl(240 calc(1 * 4%) 60.784% / 0.23921568627450981) 100%, hsl(0 0% 0% / 0.23921568627450981) 0%);
}

/* From Discord's Dark theme as of 2025-09-30 */
:root {
  --text-color: #daddda;
  --background-color: color-mix(in oklab, hsl(240 calc(1 * 7.143%) 10.98% / 1) 100%, #000 0%);
  --timeline-hover-bg-color: rgba(0,0,0,0);
  --room-list-background: color-mix(in oklab, hsl(240 calc(1 * 5.263%) 7.451% / 1) 100%, #000 0%);
  --room-list-background-overlay: rgba(0,0,0,0);
  --composer-background-color: color-mix(in oklab, hsl(228 calc(1 * 6.849%) 14.314% / 1) 100%, #000 0%);
  --right-panel-background-color: color-mix(in oklab, hsl(240 calc(1 * 7.143%) 10.98% / 1) 100%, #000 0%);
  --blockquote-border-color: color-mix(in oklab, hsl(240 calc(1 * 4%) 60.784% / 0.4392156862745098) 100%, hsl(0 0% 0% / 0.4392156862745098) 0%);
  --space-list-background-overlay: color-mix(in oklab, hsl(240 calc(1 * 5.263%) 7.451% / 1) 100%, #000 0%);
}

/* Set the right panel (member list, profile viewer, moderation tooling, pin viewer, thread view) background colour */
.right-panel-content {
  background-color: var(--right-panel-background-color);
}

/* Set the hover background colour and add padding to events */
.timeline.event {
  padding: 1em;
  background: var(--timeline-hover-bg-color);
}

/* Increase the padding of room list entries */
div.room-entry {
  padding: .25rem 0;
  contain-intrinsic-height: 3.5rem;
}

/* Disable cosmetic stuff on the message composer */
div.message-composer {
  box-shadow: none;
  border: 1px solid oklab(0.678888 0.00325716 -0.011175 / 0.160784);
  border-radius: 8px;
  min-height: 56px;
  vertical-align: baseline;
  
  & > .input-area {
    min-height: 56px;
  }
}

/* Change the colour of blockquotes */
.html-body blockquote {
  border-left: 4px solid var(--blockquote-border-color) !important;
}

/* Add mention pill colours to user mentions */
div.html-body a.hicli-matrix-uri-user:hover {
  background-color: var(--discord-mention-pill-hover-background) !important;
}

/* Add the divider border to the space & room lists, and right panel */
div.room-list {
  border-left: 1px solid var(--discord-segment-divider-colour);
  border-right: 1px solid var(--discord-segment-divider-colour);
  /* And between the room list & search function */
  border-top: 1px solid var(--discord-segment-divider-colour)
}

/* Colour the send button in */
div.message-composer > div.input-area > button[title="Send message"]:not(:disabled) > svg {
	fill: var(--discord-blurple) !important;
}