Theme discord-ash v3 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 18:26:29.464576 +0000 +0000

@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);

  /* Keep sender colours the same across themes */
  --sender-color-0: var(--discord-red);
  --sender-color-1: #D83A42;  /* DND colour */
  --sender-color-2: var(--discord-role-orange);
  --sender-color-3: var(--discord-role-green);
  --sender-color-4: var(--discord-role-dark-green);
  --sender-color-5: var(--discord-role-blue);
  --sender-color-6: var(--discord-role-dark-blue);
  --sender-color-7: var(--discord-role-purple);
  --sender-color-8: var(--discord-role-dark-purple);
  --sender-color-9: var(--discord-role-dark-pink);
  
  /* From Discord's Ash theme as of 2025-09-30 */
  --text-color: #daddda;
  --link-text-color: color-mix(in oklab, hsl(213.934 calc(1 * 85.915%) 72.157% / 1) 100%, #000 0%);
  --visited-link-text-color: var(--link-text-color);
  --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%);
  --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%);
}

/* Fixes for running the dark theme in a browser that is in light theme */
@media screen and (prefers-color-scheme: light) {
  :root {
    --unread-counter-text-color: color-mix(in oklab, hsl(231.429 calc(1 * 6.542%) 20.98% / 1) 100%, #000 0%);;
    --unread-counter-message-bg: rgb(150, 150, 153);
    --space-unread-counter-message-bg: rgb(150, 150, 153);
    --semisecondary-text-color: #c4c4c4;
    --discord-mention-pill-text: inherit
  }
}

/* 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;
}

/* 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 */
  & a.hicli-matrix-uri-user:not(.hicli-matrix-uri-plaintext) {
    color: var(--discord-mention-pill-text) !important;
    
    &:hover {
      color: var(--discord-mention-pill-text-hover) !important;
      background-color: var(--discord-mention-pill-hover-background);
    }
  }
}

/* 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);

  & div.room_entry {
    /* Increase the padding of room list entries */
    padding: .25rem 0;
    contain-intrinsic-height: 3.5rem;
    /* Make it more visually distinct when you're hovering a room */
    cursor: pointer
  }
}

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