Skip to content

Instantly share code, notes, and snippets.

@flipeador

flipeador/fluxer-dark-theme.md

Last active April 18, 2026 15:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save flipeador/220b3303c00f993214d29f2a675077c8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save flipeador/220b3303c00f993214d29f2a675077c8 to your computer and use it in GitHub Desktop.
Download ZIP
Fluxer Dark Theme
Raw
fluxer-dark-theme.md

FluxHub v1.1.1

A simple theme with dark background colors similar to GitHub.

Important

Go to User Settings > Look & Feel > Theme and select the Coal Theme.

Fonts

Font Description
Lora Serif used in <time> tags.
Fira Code Monospace used in <code> tags.
Russo One Sans serif used in :headings.
Lexica Ultralegible* Generic.

*Requires manual installation. Fallbacks to Atkinson Hyperlegible.

Installation

The theme can be installed/edited from:

User Settings > Look & Feel > Theme → Custom Theme Tokens

Expand to reveal the CSS code. 
/*
  v1.1.1 (Flipeador)
  https://gist.github.com/flipeador/220b3303c00f993214d29f2a675077c8
*/

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

:root {
  /* Fonts */

  --font-mono: "Fira Code", monospace;
  --font-sans: "Lexica Ultralegible", "Atkinson Hyperlegible", sans;
  --font-lora: "Lora", var(--font-sans);
  --font-rone: "Russo One", var(--font-sans);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;

  /* Colors */

  --brand1: oklch(0.486 0.223 276);
  --brand2: oklch(0.586 0.223 276);

  --gray: oklch(0.59 0 0);
  --red: oklch(0.66 0.226 29);
  --blue: oklch(0.59 0.22 260);
  --green: oklch(0.66 0.13 162);
  --yellow: oklch(0.81 0.15 72);

  --iron-oxide-red: oklch(0.65 0.17 17);

  /* Foreground */

  --foreground1: oklch(1.000 0.013 270);
  --foreground2: oklch(0.969 0.013 270);
  --foreground3: oklch(0.600 0.013 270);

  /* Background */

  --background1: oklch(0.104 0.019 248);
  --background2: oklch(0.164 0.014 258);
  --background3: oklch(0.184 0.014 258);
  --background4: oklch(0.204 0.014 258);
  --background5: oklch(0.244 0.014 258);

  --bg-brand1: oklch(from var(--brand1) l c h / .2);
  --bg-brand2: oklch(from var(--brand1) l c h / .4);

  --bg-gray1: oklch(from var(--gray) l c h / .2);
  --bg-gray2: oklch(from var(--gray) l c h / .4);
  --bg-red1: oklch(from var(--red) l c h / .2);
  --bg-red2: oklch(from var(--red) l c h / .4);
  --bg-green1: oklch(from var(--green) l c h / .2);
  --bg-green2: oklch(from var(--green) l c h / .4);

  --bg-user-area: var(--background2);

  --bg-section-header: linear-gradient(
    to left in oklab,
    var(--background3),
    var(--background2)
  );

  /* Fluxer */

  --brand-primary: var(--brand1);
  --brand-secondary: var(--brand2);
  --brand-primary-fill: white;
  --brand-primary-light: white;

  --background-primary: var(--background2);
  --background-secondary: var(--background1);
  --background-secondary-alt: var(--background4);
  --background-tertiary: var(--background1);

  --text-link: var(--blue);
  --text-link-visited: var(--iron-oxide-red);

  --border-color: var(--gray);
  --border-color-hover: var(--border-color);
  --border-color-focus: var(--border-color);

  --background-header-secondary: var(--foreground3);
  --background-modifier-accent: var(--foreground3);
  --background-modifier-selected: var(--background4);
  --background-modifier-hover: var(--background4);

  --bg-code-block: var(--background4);
  --background-textarea: var(--background4);

  --text-primary: var(--foreground2);
  --text-primary-muted: var(--foreground3);
  --text-secondary: var(--text-primary);
  --text-tertiary: var(--text-primary);
  --text-tertiary-muted: var(--text-primary-muted);
  --text-chat: var(--text-primary);
  --text-chat-muted: var(--text-primary-muted);

  --button-secondary-text: var(--text-primary);
  --button-secondary-active-text: var(--text-primary);

  --status-dnd: var(--red);
  --status-idle: var(--yellow);
  --status-online: var(--green);
  --status-offline: var(--gray);
}

* {
  scrollbar-color: oklch(1 0 0 / .3) transparent !important;
}

html {
  font-size: var(--text-md) !important;
  transition-behavior: allow-discrete;
}

small {
  font-size: var(--text-sm) !important;
}

h1, h2, h3, h4 { /* :heading */
  font-family: var(--font-rone) !important;
  font-weight: normal !important;
  letter-spacing: 1px !important;
}

[class*="UserProfileModal.module__bannerMask__"],
[class*="ProfileCardBanner.module__bannerMask__"] {
  > foreignObject {
    mask: unset !important;
  }
}

[class*="UserProfileModal.module__avatarContainer__"],
[class*="ProfileCardBanner.module__avatarButton__"] {
  border: unset !important;
  translate: 6px 0 !important;
}

[class*="BaseAvatar.module__container__"] {
  --border-radius: 3px;

  &:before {
    /* content: "" / ""; */
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
    background-image:
      linear-gradient(
        to right,
        var(--red),
        var(--blue),
        var(--green),
        var(--yellow)
      );
    scale: 1.1;
  }

  &:hover {
    opacity: 1 !important;
  }

  > svg {
    /* box-shadow: 0 0 3px 1px black !important; */
    border-radius: var(--border-radius) !important;

    > image {
      mask: unset !important;
    }
  }

  [class*="BaseAvatar.module__statusContainer__"] {
    inset: auto 0 0 auto !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 0 3px 2px black;

    > svg > rect {
      mask: unset !important;
    }
  }

  [class*="BaseAvatar.module__overlay__"] > defs,
  [class*="BaseAvatar.module__hoverOverlay__"] {
    display: none !important;
  }
}

[class*="ContextMenu.module__contextMenu__"] {
  [class*="KeybindHint.module__key__"] {
    color: var(--foreground1) !important;
    background: var(--brand1) !important;
  }

  /*
  [class*="ContextMenu.module__quickReactionsGroup__"] {
    display: none !important;
  }
  */
}

/* Control */

button[role="switch"][aria-checked="false"] {
  background: gray !important;
}

textarea {
  overflow: auto !important;
  text-wrap-mode: nowrap !important!
}

[class*="ColorPickerField.module__swatchButton__"] {
  background: var(--brand-primary) !important;

  &:hover {
    background: var(--brand-secondary) !important;
  }
}

[class*="LinkedAccountsTab.module__card__"] {
  &:hover {
    background: var(--background3) !important;
  }
}

[class*="LinkedAccountsTab.module__cardIconSquircle__"] {
  background: transparent !important;
}

[class*="EmojiPicker.module__categoryList__"] {
  background: var(--background1) !important;
}

[class*="EmojiPicker.module__emojiPickerListWrapper__"] {
  background: var(--background2) !important;
}

[class*="EmojiPicker.module__inspector__"] {
  display: none !important;
}

/* Guilds */

[class*="GuildsLayout.module__guildListScrollContainer__"] {
  background: var(--background1) !important;
}

[class*="GuildsLayout.module__fluxerButtonIcon__"] {
  background: var(--background2) !important;

  &:hover {
    background: var(--brand-primary) !important;
  }
}

[class*="GuildsLayout.module__guildIcon__"] {
  border: unset !important;
  border-radius: 3px !important;
}

[class*="GuildsLayout.module__guildInvitesPausedBadgeInner__"] {
  color: black !important;
  background: var(--yellow) !important;
}

[class*="DiscoveryButton.module__iconText__"] {
  color: var(--red) !important;
}

[class*="AddGuildButton.module__iconText__"] {
  color: var(--yellow) !important;
}

[class*="DownloadButton.module__iconText__"] {
  color: var(--green) !important;
}

[class*="HelpButton.module__iconText__"] {
  color: var(--blue) !important;
}

/* Channels */

[class*="ChannelListContent.module__navigationContainer__"] {
  background: var(--background1) !important;
}

[class*="GuildHeader.module__headerContainer__"] {
  [class*="GuildHeader.module__headerContent__"] {
    text-shadow: 2px 2px 1px black !important;
    transition-duration: .2s !important;
    transition-property: box-shadow, backdrop-filter !important;

    &:hover {
      backdrop-filter: blur(7px) !important;
      box-shadow: 0 0 3px 1px black !important;
    }
  }

  [class*="GuildHeader.module__bannerGradient__"] {
    inset: 0 !important;
    height: unset !important;
    background:
      linear-gradient(
        to bottom,
        oklch(0 0 0 / 1),
        transparent 40%
      ) !important;
    transition: opacity .2s !important;
  }

  &:hover {
    [class*="GuildHeader.module__bannerGradient__"] {
      opacity: 0 !important;
    }
  }
}

[class*="GuildNavbar.module__guildNavbarContainer___"] {
  overflow: clip auto !important;
  scrollbar-width: thin !important;

  [class*="Scroller.module__scroller__"] {
    overflow: visible !important;
  }

  [class*="ScrollerTrack.module__"] {
    display: none !important;
  }
}

[class*="ChannelListContent.module__navigationContainer__"] {
  padding: 0 !important;
}

[class*="ChannelListContent.module__membersSeparator__"] {
  background: var(--gray) !important;
  margin: .5lh 0 !important;
}

[class*="ChannelItem.module__channelItemCategory__"] {
  :has(> &) { /* parent */
    background: var(--bg-section-header) !important;
  }
}

[class*="ChannelListContent.module__channelGroupsContainer__"] {
  gap: .5lh;
}

[class*="ChannelItem.module__channelItem__"] {
  margin: 0 5px !important;
}

[class*="ScrollIndicatorOverlay.module__scrollIndicatorLayer__"] {
  display: none !important;
}

[class*="ChannelHeader.module__headerContainer__"] {
  background: var(--background2) !important;
  border-bottom: 2px ridge oklch(1 0 0 / .1) !important;
}

/* Chat */

[class*="ChannelChatLayout.module__textareaArea__"] {
  [class*="InputWrapper.module__box__"] {
    background: var(--background2) !important;
    border-top: 2px ridge oklch(1 0 0 / .1) !important;
  }
}

[class*="ChannelChatLayout.module__typingArea__"] {
  * {
    font-size: var(--text-xs) !important;
  }

  [class*="Message.module__typingPill__"] {
    transform: unset !important;
  }

  [class*="SlowmodeIndicator.module__container__"] {
    color: var(--yellow) !important;
  }

  [class*="Message.module__typingPill__"],
  [class*="SlowmodeIndicator.module__container__"] {
    background: var(--background2) !important;
    border: 1px dashed gray !important;
  }
}

/* Messages */

[class*="Messages.module__messagesWrapper__"] {
  background: var(--background2) !important;
}

/*
[class*="Messages.module__scrollerInner__"] {
  gap: .65lh !important;

  > :nth-last-child(2) {
    margin-bottom: 2lh !important;
  }

  > [class*="Messages.module__groupSpacer__"],
  > [class*="Messages.module__scrollerSpacer__"] {
    display: none !important;
  }
}
*/

[class*="ChannelWelcomeSection.module__container__"] {
  display: none !important;
}

[class*="Message.module__message__"]:not(._),
[class*="Message.module__messageMentioned__"] {
  background: transparent !important;

  &:hover {
    background: var(--background3) !important;
  }
}

[class*="Message.module__message__"] {
  /* transition: opacity 1s ease-out; */
  /* @starting-style { opacity: 0; } */

  &:has([class*="Message.module__editedTimestamp__"]) {
    --edited-color: var(--yellow);
  }
}

[class*="Message.module__messageMentioned__"] {
  &::before {
    background: var(--brand1) !important;
  }
}

[class*="Message.module__messageAuthorRow__"] {
  font-family: var(--font-sans) !important;
  letter-spacing: 0px !important;

  [class*="Message.module__messageUsername__"] {
    letter-spacing: 1px !important;
  }

  [class*="Message.module__messageTimestamp__"] {
    color: var(--edited-color, gray) !important;
  }
}

[class*="Message.module__messageTimestamp__"] {
  color: var(--foreground3) !important;
  opacity: 1;
}

[class*="Message.module__messageTimestampHover__"] {
  color: var(--edited-color, gray) !important;
  font-size: var(--text-xs) !important;
  opacity: 1;
}

[class*="Message.module__editedTimestamp__"] {
  time::after {
    content: "⠀🖉" / "Edited";
    color: var(--brand-primary);
    font-size: var(--text-xs);
  }

  time:hover::after {
    color: var(--brand-secondary);
  }

  [class*="Message.module__editedLabel__"] {
    display: none !important;
    font-size: var(--text-xs) !important;
  }
}

[class*="MessageReactions.module__reactionButton__"] {
  background: transparent !important;
  border: 1px dashed gray !important;

  &:hover {
    background: var(--background5) !important;
  }

  &[aria-pressed="true"] {
    border-color: var(--brand1) !important;
    background: var(--bg-brand1) !important;

    &:hover {
      background: var(--bg-brand2) !important;
    }
  }
}

[class*="MessageActionBar.module__actionBarContainer__"] {
  translate: 0 -50% !important;

  [class*="MessageActionBar.module__actionBar__"] {
    border: 1px dashed gray !important;
  }
}

/* User */

[class*="GuildsLayout.module__userAreaWrapper__"] {
  /* Container */
  [class*="UserArea.module__userAreaInnerWrapper__"] {
    background: var(--bg-user-area) !important;
    border-top: 2px ridge oklch(1 0 0 / .1) !important;
  }

  /* User name */
  [class*="UserArea.module__userName__"] {
    color: var(--foreground2) !important;
    font-size: var(--text-md) !important;
    letter-spacing: 1px;
  }

  /* User status */
  [class*="UserArea.module__userStatus__"] {
    font-size: var(--text-xs) !important;
    color: var(--foreground3) !important;
  }

  /* Buttons */
  button[aria-label="Unmute"],
  button[aria-label="Undeafen"] {
    color: var(--foreground1) !important;
    background: var(--bg-red1) !important;

    &:hover {
      color: var(--foreground1) !important;
      background: var(--bg-red2) !important;
    }
  }
}

/* Members */

[class*="MemberListContainer.module__memberListScroller__"] {
  background: var(--background2) !important;
  border-left: 2px ridge oklch(1 0 0 / .1) !important;
}

[class*="MemberListItem.module__ownerIcon__"] {
  scale: 1.3 !important;
  translate: .5ch -10% !important;
}

[class*="MemberListItem.module__memberCustomStatus__"] {
  font-size: var(--text-xs) !important;
  color: var(--foreground3) !important;
}

[class*="ChannelMembers.module__groupHeader__"] {
    background: var(--bg-section-header) !important;
    padding: 10px;
    margin-bottom: 3px;
}

[class*="ChannelMembers.module__groupSpacer__"] {
  margin-bottom: .5lh;
}

/* Markup */

[class*="Markup.module__link__"] {
  &:visited {
    color: var(--text-link-visited) !important;
  }
}

[class*="Markup.module__blockquoteDivider__"] {
  background: gray !important;
}

[class*="Markup.module__blockquoteContent__"] {
  color: var(--text-primary) !important;
}

[class*="Markup.module__codeContainer__"] {
  code {
    padding: 1ch !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
    color: var(--text-primary) !important;
    box-shadow: unset !important;
  }

  * {
    font-size: .9em !important;
    text-wrap-mode: nowrap !important;
  }
}

[class*="Message.module__message__"] {
  [class*="Markup.module__codeContainer__"] {
    code {
      max-height: 10lh !important;
      overscroll-behavior: contain !important;
    }
  }
}

[class*="Markup.module__spoiler__"] {
  padding: 0 !important;

  &[data-revealed="true"] {
    background: transparent !important;
    transition: opacity .5s !important;
  }

  &[data-revealed="false"] {
    background: var(--background5) !important;
  }

  @starting-style {
    opacity: 0 !important;
  }
}

[class*="Markup.module__inline__"],
[class*="Markup.module__mention__"],
[class*="Markup.module__timestamp__"] {
  margin: 0 1px !important;
  padding: 0 5px !important;
  font-weight: 400 !important;
  font-size: var(--text-md) !important;
  color: var(--foreground2) !important;
  background: var(--background5) !important;
}

[class*="Markup.module__mention__"] {
  border: 0 !important;

  &:hover {
    text-decoration: underline !important;
  }
}

[class*="Markup.module__inline__"] {
  outline: 1px solid gray !important;
  color: var(--text-primary) !important;
  font-size: .9em !important;
}

[class*="Markup.module__timestamp__"] {
  font-family: var(--font-lora) !important;

  > svg {
    translate: 0 -10% !important;
    scale: 1.2 !important;
  }
}

/* Settings */

[class*="SettingsModalLayout.module__container__"] {
  --background-primary: var(--background1);
  --background-secondary: var(--background2);
}

[class*="PermissionComponents.module__stateButtonsContainer__"] {
  button {
    color: var(--foreground1) !important;
  }

  button:nth-of-type(1) {
    &[class*="PermissionComponents.module__stateButtonDeny__"] {
      background: var(--bg-red1) !important;

      &:hover {
        background: var(--bg-red2) !important;
      }
    }
  }

  button:nth-of-type(2) {
    &[class*="PermissionComponents.module__stateButtonNeutral__"] {
      background: var(--bg-gray1) !important;

      &:hover {
        background: var(--bg-gray2) !important;
      }
    }
  }

  button:nth-of-type(3) {
    &[class*="PermissionComponents.module__stateButtonAllow__"] {
      background: var(--bg-green1) !important;

      &:hover {
        background: var(--bg-green2) !important;
      }
    }
  }
}

Reference

https://oklch.com

https://gradient.style

https://en.wikipedia.org/wiki/List_of_colors_(alphabetical)

https://developer.mozilla.org/docs/Web/CSS/Reference

@flipeador
Copy link
Copy Markdown
Author

flipeador commented Apr 16, 2026

Reserved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment