legcord/themes/Gruvbox/src.css

/**
 * @name Gruvbox Hard Dark
 * @description Themes your Discord using Gruvbox colors.
 * @author Ethan McTague and srp
 * @version 1.0.0
 * @source https://git.hl.srp.life/srp/legcord/src/branch/main/themes/Gruvbox
 * @updateUrl https://git.hl.srp.life/srp/legcord/raw/branch/main/themes/Gruvbox/src.css
*/


/* 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: #282828;
    --background-tertiary: #3c3836;
    --channels-default: #d5c4a1;
    --deprecated-panel-background: #282828;
    --channeltextarea-background: #32302f;
    --brand-experiment: var(--background-tertiary);
    --text-muted: var(--channels-default);
    --gruvbox-aqua: #8ec07c;
    --text-positive: var(--gruvbox-aqua);
}

/* 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: var(--gruvbox-aqua);
}

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

/* custom additions */
.theme-dark .container_b181b6 { /* forum container */
  background-color: var(--background-tertiary) !important;
}

.list__5ced9::-webkit-scrollbar { /* forum scrollbar */
  display: none !important;
}

.container_def45dc, .chat__52833.threadSidebarOpen_fa231d { /* forum side panel view */
  border-radius: 0px !important;
}

.resizeHandle-PBRzPC { /* -- no clue where this is from, there's 9 css values named this */
  width: 0px !important;
}

.container__11d72.themed_b152d4{ /* friends bar section */
  background-color: var(--background-tertiary) !important;
}

.theme-dark .children__32014:after { /* friends bar inside upperContainer */
  display: none !important;
}

.tabBar__73938 .addFriend__80542.addFriend__80542.addFriend__80542, .tabBar__73938 .addFriend__80542.addFriend__80542.addFriend__80542:hover { /* add friend button */
  background-color: var(--gruvbox-aqua);
  color: #3c3836;
}

.lookFilled__19298.colorRed_d6b062, .liveShapeRound__811c0 { /* live indicator */
  background-color: #cc241d !important;
}

.border_e782de.speaking__1dd69, #app-mount.avatarSpeaking__61fb1, #app-mount.avatarSpeaking_c95053 { /* speaking indicator */
  box-shadow: inset 0 0 0 2px var(--gruvbox-aqua), inset 0 0 0 3px var(--background-secondary);
}

.iconBadge_f54f3d.participating__25a2a { /* no clue, can find in css tho */
  background-color: var(--gruvbox-aqua);
  color: var(--background-tertiary);
}

.button-1EGGcP.buttonColor-3bP3fX.buttonActive-Uc1jHx, .button-1EGGcP .buttonColor-3bP3fX.buttonActive-Uc1jHx {
  background-color: var(--gruvbox-aqua);
  color: var(--background-tertiary);
}

.button-1EGGcP.buttonColor-3bP3fX.buttonActive-Uc1jHx:hover, .button-1EGGcP .buttonColor-3bP3fX.buttonActive-Uc1jHx:hover, .lookFilled-yCfaCM.colorBrand-I6CyqQ:active {
  background-color: #689d6a;
}

.platform-osx .wrapper_a7e7a8 { /* top of server list */
    margin-top: 16px;
}

.typeMacOS__496b0 .macDragRegion__754e2 { /* top of server list */
    padding-bottom: 16px;
}

.theme-dark .spoilerContent__37bfa.hidden_f44e41 { /* spoilered text */
    --__current--spoiler-background-color: #504845;
}

.theme-dark .spoilerContent__37bfa.hidden_f44e41:hover { /* spoilered text */
    --__current--spoiler-background-color: #665c54;
}