Gruvbox Hard Dark - BetterDiscord Theme

bd-gruvbox.css

//META{"name":"Gruvbox Hard Dark","description":"Themes your Discord using Gruvbox colors.","author":"Ethan McTague","version":"1.0"}*//
/* BetterDiscord Gruvbox Theme - By Ethan McTague


   Compatible with the latest version of Discord (as of Jan 23, 2020.)


   Copyright 2020 Ethan McTague <ethan@tague.me>
   Licensed under the BSD 3-clause license.
   

   Based on the Gruvbox color scheme by Pavel Pertsev: https://github.com/morhetz/gruvbox


   Using CSS from highlight.js themes, to style code blocks: https://highlightjs.org/
   highlight.js is licensed under the BSD 3-clause license - see its section in the code for more details.
   

   Be aware: BetterDiscord use is against the discord TOS.
             I am not responsible for your use of BetterDiscord or of this theme.

             [ ...discord, if you want to add builtin color scheme support, hmu :) ]
             

   Installation:
    1. Install BetterDiscord.
    2. Go to "Themes" in discord's settings.
    3. Select "Open Themes Folder", and save this file there as: gruvbox.theme.css
    4. Go back to discord and switch the theme on!

*/


/* Set basic color variables. Some parts of Discord don't use these, so we need to do more after... */
:root {
    --interactive-normal: #ebdbb2;
    --text-normal: #ebdbb2;
    --background-primary: #1d2021;
    --background-secondary: #181B1B;
    --background-tertiary: #1d2021;
    --channels-default: #83a598;
    --deprecated-panel-background: #161818;
    --channeltextarea-background: #32302f;
}

/* Popout / menu colors. */
.da-popouts .da-container, .da-friendsTableHeader, .da-friendsTable, .da-autocomplete, .da-themedPopout, .da-header, .da-footer, .da-userPopout > *, .da-systemPad, .da-autocompleteHeaderBackground {
  background-color: var(--background-secondary) !important;
  border-color: transparent !important;
}

.theme-dark .da-messageGroupWrapper {
  background-color: var(--background-tertiary) !important;
  border-color: transparent;
}

/* Each individual item in popouts has a slight gradient - we clear it here. */
.theme-dark .da-option:after {
  background-image: none !important;
}

/* Force BetterDiscord settings items to match normal settings items. */
.theme-dark #bd-settings-sidebar .ui-tab-bar-item {
    color: var(--interactive-normal);
}

/* Recolor BD settings headers, Nitro settings item and Add Channel icon */
.theme-dark #bd-settings-sidebar .ui-tab-bar-header, div[style*="color: rgb(114, 137, 218);"], .da-addButtonIcon  {
    color: var(--channels-default) !important;
}

/* Force BetterDiscord *active* settings items to match normal active settings items. */
.theme-dark #bd-settings-sidebar .ui-tab-bar-item.selected, .theme-dark .da-autocompleteRow .da-selectorSelected {
    background-color: var(--background-modifier-selected);
    color: var(--interactive-active);
}

/* Recolor the emoji button in the chat bar to match the color scheme. */
.da-emojiButtonNormal .da-contents .da-sprite {
    filter: sepia(1) !important;
}


/* Recolor scrollbar track. */
.da-messagesWrapper .da-scroller::-webkit-scrollbar,
.da-messagesWrapper .da-scroller::-webkit-scrollbar-track-piece {
    background-color: var(--background-tertiary) !important;
    border-color: rgba(0,0,0,0) !important;
}

/* Recolor scrollbar thumbs. */
.da-scrollerThemed .da-scroller::-webkit-scrollbar-thumb,
.da-scrollerWrap .da-scroller::-webkit-scrollbar-thumb {
    background-color: var(--background-secondary) !important;
    border-color: var(--background-tertiary) !important;
}





/* CSS below this comment is from highlight.js gruvbox-dark theme.
   https://github.com/highlightjs/highlight.js/blob/master/src/styles/gruvbox-dark.css

   This CSS makes code blocks within Discord match gruvbox.

   hightlight.js is copyright 2006 Ivan Sagalaev and licensed under the BSD 3-clause license,
   as specified here: https://github.com/highlightjs/highlight.js/blob/master/LICENSE            */

/* Gruvbox Red */
.hljs-deletion,
.hljs-formula,
.hljs-keyword,
.hljs-link,
.hljs-selector-tag {
  color: #fb4934;
}

/* Gruvbox Blue */
.hljs-built_in,
.hljs-emphasis,
.hljs-name,
.hljs-quote,
.hljs-strong,
.hljs-title,
.hljs-variable {
  color: #83a598;
}

/* Gruvbox Yellow */
.hljs-attr,
.hljs-params,
.hljs-template-tag,
.hljs-type {
  color: #fabd2f;
}

/* Gruvbox Purple */
.hljs-builtin-name,
.hljs-doctag,
.hljs-literal,
.hljs-number {
  color: #8f3f71;
}

/* Gruvbox Orange */
.hljs-code,
.hljs-meta,
.hljs-regexp,
.hljs-selector-id,
.hljs-template-variable {
  color: #fe8019;
}

/* Gruvbox Green */
.hljs-addition,
.hljs-meta-string,
.hljs-section,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-string,
.hljs-symbol {
  color: #b8bb26;
}

/* Gruvbox Aqua */
.hljs-attribute,
.hljs-bullet,
.hljs-class,
.hljs-function,
.hljs-function .hljs-keyword,
.hljs-meta-keyword,
.hljs-selector-pseudo,
.hljs-tag {
  color: #8ec07c;
}

/* Gruvbox Gray */
.hljs-comment {
  color: #928374;
}

/* Gruvbox Purple */
.hljs-link_label,
.hljs-literal,
.hljs-number {
  color: #d3869b;
}

.hljs-comment,
.hljs-emphasis {
  font-style: italic;
}

.hljs-section,
.hljs-strong,
.hljs-tag {
  font-weight: bold;
}

dude tysm this is great

Solid theme. Always disappoints me to see themes that don't get a relaxing look or have really high contrast. Gruvbox is a mainstay anywhere. I recommend using the font "Iosevka" with the "Curly" subset. Also, wonderful to find someone who shares my first name.