Theme discord-ash v2 by [@nex:nexy7574.co.uk]

A best-effort copy of Discord's "Ash" 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 17:28:18.575929 +0000 +0000

Fix colour issues

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

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

: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%);
  --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%);
  --discord-mention-pill-hover-background: rgb(114, 137, 218);
  --discord-mention-pill-background: color-mix(in oklab, hsl(234.935 calc(1 * 85.556%) 64.706% / 0.23921568627450981) 100%, hsl(0 0% 0% / 0.23921568627450981) 0%);
  --discord-mention-pill-text: color-mix(in oklab, hsl(230.769 calc(1 * 49.727%) 35.882% / 1) 100%, #000 0%);
  --discord-mention-pill-text-hover: hsl(0 0% 100% / 1);
  --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%);

  /* 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);
  --border-color: var(--discord-segment-divider-colour);
  --pill-background-color: var(--discord-mention-pill-background);
  --room-list-background-overlay: rgba(0,0,0,0);
}

/* From Discord's Ash theme as of 2025-09-30 */
:root {
  --text-color: #daddda;
  --background-color: color-mix(in oklab, hsl(231.429 calc(1 * 6.542%) 20.98% / 1) 100%, #000 0%);
  --timeline-hover-bg-color: rgba(0,0,0,0);
  --room-list-background: color-mix(in oklab, hsl(230 calc(1 * 6.383%) 18.431% / 1) 100%, #000 0%);
  --room-list-background-overlay: rgba(0,0,0,0);
  --composer-background-color: color-mix(in oklab, hsl(232.5 calc(1 * 6.557%) 23.922% / 1) 100%, #000 0%);
  --right-panel-background-color: color-mix(in oklab, hsl(231.429 calc(1 * 6.542%) 20.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(230 calc(1 * 6.383%) 18.431% / 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;
}