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

A best-effort copy of Discord's light 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 16:55:56.065715 +0000 +0000

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

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

: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: 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 Light theme as of 2025-09-30 */
:root {
  --text-color: color-mix(in oklab, hsl(231.429 calc(1 * 6.542%) 20.98% / 1) 100%, #000 0%);
  --background-color: color-mix(in oklab, hsl(0 calc(1 * 0%) 98.431% / 1) 100%, #000 0%);
  --timeline-hover-bg-color: color-mix(in oklab, hsl(240 calc(1 * 4%) 60.784% / 0.12156862745098039) 100%, hsl(0 0% 0% / 0.12156862745098039) 0%);
  --room-list-background: color-mix(in oklab, hsl(240 calc(1 * 4.348%) 95.49% / 1) 100%, #000 0%);
  --room-list-entry-selected-color: hsl(240 4% 60.784% / 0.23921568627450981);
  --composer-background-color: color-mix(in oklab, hsl(0 calc(1 * 0%) 100% / 1) 100%, #000 0%);
  --right-panel-background-color: color-mix(in oklab, hsl(0 calc(1 * 0%) 98.431% / 1) 100%, #000 0%);
  --blockquote-border-color: color-mix(in oklab, hsl(240 calc(1 * 4%) 60.784% / 0.47843137254901963) 100%, hsl(0 0% 0% / 0.47843137254901963) 0%);
  --space-list-background-overlay: color-mix(in oklab, hsl(240 calc(1 * 4.348%) 95.49% / 1) 100%, #000 0%);

  /* In light mode, the unread counter becomes unreadable (ironically) without this */
  --unread-counter-text-color: var(--text-color);
  /* Reply text starts to fail contrast requirements with the default value of #bbb; #616161 is dark enough but still faded */
  --semisecondary-text-color: #616161;
}

/* 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 */
  & 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;
  color: var(--discord-blurple) !important;
}