one-dark-darker-fluxer.css

gistfile1.txt

/* =============================================================================
   One Dark Darker — Fluxer Theme
   Based on: https://github.com/JoelCrosby/OneDarkDarker
   A darker, more minimal take on Atom One Dark.
   Note: One Dark Darker is a dark-only theme. The light variant below
         draws from VS Code's Light+ palette for a consistent counterpart.
   ============================================================================= */

/* ===== DESIGN TOKENS — DARK THEME ===== */
:root {
  /* Backgrounds — from ODD editor/sidebar/tab colors */
  --odd-bg:           #181A1F;   /* primary background (editor.background) */
  --odd-deep:         #0f1114;   /* deepest surface (tab.activeBackground) */
  --odd-surface:      #1d1f23;   /* elevated surface — input, dropdown */
  --odd-raised:       #2c313c;   /* selection / line highlight */
  --odd-hover:        #292d35;   /* subtle hover (list.hoverBackground) */

  /* Foregrounds */
  --odd-fg:           #abb2bf;   /* primary text (editor.foreground) */
  --odd-fg-light:     #d7dae0;   /* headings, active items (activityBar.foreground) */
  --odd-fg-muted:     #9da5b4;   /* secondary text (statusBar.foreground) */
  --odd-fg-dim:       #9098a4;   /* comments, timestamps */
  --odd-fg-faint:     #6e7580;   /* very muted labels */

  /* Accents */
  --odd-blue:         #61afef;
  --odd-blue-bright:  #4dc4ff;
  --odd-red:          #EF596F;

  /* UI chrome */
  --odd-border:       #282c34;
}


/* ===== FLUXER TOKEN OVERRIDES — DARK ===== */
:root,
.theme-dark {
  --background-primary:           var(--odd-deep);    /* center/chat — darkest */
  --background-secondary:         var(--odd-bg);      /* sidebar — medium */
  --background-secondary-alt:     var(--odd-bg);
  --background-tertiary:          var(--odd-surface); /* outermost chrome — lightest */
  --background-textarea:          var(--odd-surface);
  --background-modifier-hover:    var(--odd-hover);
  --background-modifier-selected: var(--odd-raised);
  --text-primary:                 var(--odd-fg);
  --text-secondary:               var(--odd-fg-muted);
  --text-tertiary:                var(--odd-fg-dim);
  --text-muted:                   var(--odd-fg-dim);
  --text-link:                    var(--odd-blue);
  --interactive-normal:           var(--odd-fg-muted);
  --interactive-hover:            var(--odd-fg-light);
  --interactive-active:           var(--odd-blue);
  --interactive-muted:            var(--odd-fg-faint);
  --scrollbar-thumb-bg:           #4e5666;
  --scrollbar-thumb-bg-hover:     #5a6375;
  --scrollbar-track-bg:           transparent;
  --status-danger:                var(--odd-red);
  --status-danger-bg:             var(--odd-red);
  --badge-brand-bg:               var(--odd-red);
}


/* ===== BADGES ===== */
[class*="unreadBadge"] {
  background-color: var(--odd-red) !important;
  color: #ffffff !important;
}


/* ===== USERNAME DISPLAY ===== */

[class*="messageUsername"] {
  font-weight: 600 !important;
}


/* ===== CHAT AREA + MESSAGES — DARK ===== */
[class^="ChannelChatLayout"][class*="messagesArea"],
[class*="messagesWrapper"] {
  background-color: var(--odd-deep) !important;
}

[class*="messageContent"],
[class*="markup"] {
  color: var(--odd-fg) !important;
}

[class*="mention"] {
  background: rgba(97, 175, 239, 0.15) !important;
  color: var(--odd-blue) !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
}


/* ===== HEADER — DARK ===== */
[class^="ChannelHeader"][class*="headerContainer"] {
  background-color: var(--odd-bg) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--odd-border) !important;
  color: var(--odd-fg-muted) !important;
}

/* Channel name in header — lighter fg for prominence */
[class^="ChannelHeader"][class*="headerContainer"] [class*="title"],
[class^="ChannelHeader"][class*="headerContainer"] [class*="name"],
[class^="ChannelHeader"][class*="headerContainer"] [class*="channelName"] {
  color: var(--odd-fg-light) !important;
}

/* Header icon buttons */
[class^="ChannelHeader"][class*="headerContainer"] [class*="icon"],
[class^="ChannelHeader"][class*="headerContainer"] [class*="button"] {
  color: var(--odd-fg-muted) !important;
}
[class^="ChannelHeader"][class*="headerContainer"] [class*="icon"]:hover,
[class^="ChannelHeader"][class*="headerContainer"] [class*="button"]:hover {
  color: var(--odd-fg-light) !important;
}


/* ===== SIDEBAR + CHANNEL ITEMS — DARK ===== */
[class*="channelList"] {
  background-color: var(--odd-bg) !important;
  border-right: none !important;
  box-shadow: 1px 0 0 var(--odd-border) !important;
}

/* Channel items — default */  
[class^="ChannelItem"] {
  color: var(--odd-fg-dim) !important;
  background: transparent !important;
  border-radius: 6px !important;
  transition: background 0.1s ease, color 0.1s ease !important;
}

/* Channel items — selected */
[class^="ChannelItem"][class*="channelItemSelected"] {
  color: var(--odd-fg-light) !important;
  background: var(--odd-raised) !important;
}

/* Channel items — unread */
[class^="ChannelItem"][class*="channelItemHighlight"],
[class^="ChannelItem"][class*="channelItemHighlight"] [class*="channelName"] {
  color: var(--odd-fg-light) !important;
}

/* Channel items — hover */
[class^="ChannelItem"]:hover:not([class*="channelItemSelected"]) {
  color: var(--odd-fg-muted) !important;
  background: var(--odd-hover) !important;
}

/* Unread indicator dot — restore color overridden by the broad [class^="ChannelItem"] rule */
[class*="unreadIndicator"] {
  background-color: #ffffff !important;
}

/* ===== INPUT BOX — DARK ===== */
[class^="InputWrapper"][class*="box"] {
  background-color: var(--odd-surface) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px var(--odd-border) !important;
}

[class^="InputWrapper"][class*="box"]:focus-within {
  box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.35) !important;
}

[class^="InputWrapper"][class*="box"] [class*="placeholder"] {
  color: var(--odd-fg-faint) !important;
}


/* ===== SCROLLBARS ===== */
* {
  scrollbar-color: var(--scrollbar-thumb-bg) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-bg, #4e5666);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-bg-hover, #5a6375);
}
::-webkit-scrollbar-track {
  background-color: transparent;
}


/* ===== LINKS ===== */
[class*="anchor"] {
  color: var(--odd-blue) !important;
  text-decoration: none !important;
}
[class*="anchor"]:hover {
  color: var(--odd-blue-bright) !important;
  text-decoration: underline !important;
}


/* ===== GUILD NAME ===== */
[class*="guildName"] {
  color: var(--odd-fg-light) !important;
}


/* =============================================================================
   DESIGN TOKENS — LIGHT THEME
   One Dark Darker has no official light variant. This section uses a neutral
   off-white palette inspired by VS Code's built-in Light+ theme.
   ============================================================================= */
.theme-light {
  --odd-l-bg:         #f3f3f3;   /* primary background */
  --odd-l-surface:    #ffffff;   /* elevated surface */
  --odd-l-hover:      #e8e8e8;   /* hover background */
  --odd-l-raised:     #d4d4d4;   /* selection */

  --odd-l-fg:         #1e1e1e;   /* primary text */
  --odd-l-fg-muted:   #3b3b3b;   /* secondary text */
  --odd-l-fg-dim:     #6b6b6b;   /* comments, timestamps */
  --odd-l-fg-faint:   #999999;   /* very muted labels */

  --odd-l-blue:       #0070c1;   /* links, accents */
  --odd-l-border:     #d4d4d4;   /* subtle border */
}


/* ===== FLUXER TOKEN OVERRIDES — LIGHT ===== */
.theme-light {
  --background-primary:           var(--odd-l-bg);
  --background-secondary:         #e8e8e8;
  --background-secondary-alt:     #e8e8e8;
  --background-tertiary:          #e0e0e0;
  --background-textarea:          var(--odd-l-surface);
  --background-modifier-hover:    var(--odd-l-hover);
  --background-modifier-selected: var(--odd-l-raised);
  --text-primary:                 var(--odd-l-fg);
  --text-secondary:               var(--odd-l-fg-muted);
  --text-tertiary:                var(--odd-l-fg-dim);
  --text-muted:                   var(--odd-l-fg-dim);
  --text-link:                    var(--odd-l-blue);
  --interactive-normal:           var(--odd-l-fg-muted);
  --interactive-hover:            var(--odd-l-fg);
  --interactive-active:           var(--odd-l-blue);
  --interactive-muted:            var(--odd-l-fg-faint);
  --scrollbar-thumb-bg:           #c0c0c0;
  --scrollbar-thumb-bg-hover:     #a0a0a0;
  --scrollbar-track-bg:           transparent;
  --status-danger:                #c0392b;
  --status-danger-bg:             #c0392b;
  --badge-brand-bg:               #c0392b;
}


/* ===== LIGHT THEME SURFACES ===== */

.theme-light [class^="ChannelChatLayout"][class*="messagesArea"],
.theme-light [class*="messagesWrapper"] {
  background-color: #ebebeb !important;
}

.theme-light [class*="messageContent"],
.theme-light [class*="markup"] {
  color: var(--odd-l-fg) !important;
}

.theme-light [class*="mention"] {
  background: rgba(0, 112, 193, 0.12) !important;
  color: var(--odd-l-blue) !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
}

/* Header */
.theme-light [class^="ChannelHeader"][class*="headerContainer"] {
  background-color: #f3f3f3 !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--odd-l-border) !important;
  color: var(--odd-l-fg-muted) !important;
}
.theme-light [class^="ChannelHeader"][class*="headerContainer"] [class*="title"],
.theme-light [class^="ChannelHeader"][class*="headerContainer"] [class*="name"],
.theme-light [class^="ChannelHeader"][class*="headerContainer"] [class*="channelName"] {
  color: var(--odd-l-fg) !important;
}
.theme-light [class^="ChannelHeader"][class*="headerContainer"] [class*="icon"],
.theme-light [class^="ChannelHeader"][class*="headerContainer"] [class*="button"] {
  color: var(--odd-l-fg-muted) !important;
}
.theme-light [class^="ChannelHeader"][class*="headerContainer"] [class*="icon"]:hover,
.theme-light [class^="ChannelHeader"][class*="headerContainer"] [class*="button"]:hover {
  color: var(--odd-l-fg) !important;
}

.theme-light [class*="channelList"] {
  background-color: #f3f3f3 !important;
  border-right: none !important;
  box-shadow: 1px 0 0 var(--odd-l-border) !important;
}

.theme-light [class^="ChannelItem"] {
  color: var(--odd-l-fg-dim) !important;
  background: transparent !important;
  border-radius: 6px !important;
  transition: background 0.1s ease, color 0.1s ease !important;
}
.theme-light [class^="ChannelItem"][class*="channelItemSelected"] {
  color: var(--odd-l-fg) !important;
  background: var(--odd-l-raised) !important;
}
.theme-light [class^="ChannelItem"][class*="channelItemHighlight"],
.theme-light [class^="ChannelItem"][class*="channelItemHighlight"] [class*="channelName"] {
  color: var(--odd-l-fg) !important;
}
.theme-light [class^="ChannelItem"]:hover:not([class*="channelItemSelected"]) {
  color: var(--odd-l-fg-muted) !important;
  background: var(--odd-l-hover) !important;
}

.theme-light [class*="unreadIndicator"] {
  background-color: var(--odd-l-fg) !important;
}

/* Input box */
.theme-light [class^="InputWrapper"][class*="box"] {
  background-color: var(--odd-l-surface) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px var(--odd-l-border) !important;
}
.theme-light [class^="InputWrapper"][class*="box"]:focus-within {
  box-shadow: 0 0 0 2px rgba(0, 112, 193, 0.25) !important;
}
.theme-light [class^="InputWrapper"][class*="box"] [class*="placeholder"] {
  color: var(--odd-l-fg-faint) !important;
}

.theme-light [class*="anchor"] {
  color: var(--odd-l-blue) !important;
  text-decoration: none !important;
}
.theme-light [class*="anchor"]:hover {
  text-decoration: underline !important;
}

.theme-light [class*="guildName"] {
  color: var(--odd-l-fg) !important;
}


/* ===== LIGHT THEME SCROLLBARS ===== */
.theme-light ::-webkit-scrollbar-thumb {
  background-color: #c0c0c0 !important;
}
.theme-light ::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a0 !important;
}


/* =============================================================================
   SIDEBAR VARIANT: CHANNEL PREFIX
   Prepend # to every channel name in the sidebar.
   Comment out this block to disable.
   ============================================================================= */

[class^="ChannelItemSurface"] span::before {
  content: "#";
  color: var(--odd-fg-faint);
  opacity: 0.6;
}

.theme-light [class^="ChannelItemSurface"] span::before {
  color: var(--odd-l-fg-faint);
}