gruvbox.theme.css

//META{  "name":"Gruvbox Dark",  "description":"Gruvbox theme for BetterDiscord",  "author":"Moskas","version":"1.0"}*//

:root {
  --gruvbox-dark1: #282828;
  --gruvbox-dark2: #3c3836;
  --gruvbox-dark3: #504945;
  --gruvbox-dark4: #665c54;
  --gruvbox-light1: #fbf1c7;
  --gruvbox-light2: #ebdbb2;
  --gruvbox-light3: #d5c4a1;
  --gruvbox-darker-blue: #458588;
  --gruvbox-darker-aqua: #689d6a;
  --gruvbox-aqua: #8ec07c;
  --gruvbox-blue: #83a598;
  --gruvbox-red: #fb4934;
  --gruvbox-orange: #fe8019;
  --gruvbox-yellow: #d79921;
  --gruvbox-green: #b8bb26;
  --gruvbox-pink: #d3869b;

  --gruvbox-light-1: #fbf1c7;
  --gruvbox-light0: #ebdbb2;
  --gruvbox-light4: #d5c4a1;
  --gruvbox-light5: #bdae93;
  --gruvbox-grey1: #a89984;
  --gruvbox-black1: #282828;
  --gruvbox-black2: #32302f;
  --gruvbox-black3: #1d2021;
  --gruvbox-dark5: #32302f;
  --gruvbox-primary: var(--gruvbox-yellow);

  --button-white: var(--gruvbox-light3);
  --button-white-text: var(--gruvbox-black1);
  --button-white-hover: var(--gruvbox-light1);
  --button-white-active: var(--gruvbox-light0);
  --button-white-outlined: rgba(235, 219, 178, 0.1);

  --category-fade-background: rgba(250, 189, 47, 0.8);
  --category-fade-background-hover: rgba(250, 189, 47, 0.95);

  --highlight: rgba(235, 203, 139, 0.4);

  --status-online: var(--gruvbox-green);
  --status-offline: var(--gruvbox-dark5);
  --status-idle: var(--gruvbox-orange);
  --status-dnd: var(--gruvbox-red);
  --status-stream: var(--gruvbox-pink);
}

.theme-dark {
  --header-primary: var(--gruvbox-light-1);
  --header-secondary: #ebdbb2;
  --text-normal: var(--gruvbox-light-1);
  --text-muted: var(--gruvbox-grey1);
  --text-link: hsl(0, calc(var(--saturation-factor, 1) * 75%), 60%); /* #4c91e6 */
  --text-link-low-saturation: hsl(213, calc(var(--saturation-factor, 1) * 32%), 52%); /* --gruvbox-blue */
  --text-positive: hsl(92, calc(var(--saturation-factor, 1) * 28%), 65%); /* --gruvbox-green */
  --text-warning: hsl(14, calc(var(--saturation-factor, 1) * 51%), 63%); /* --gruvbox-orange */
  --text-danger: hsl(354, calc(var(--saturation-factor, 1) * 42%), 56%); /* --gruvbox-red */
  --text-brand: hsl(60, calc(var(--saturation-factor, 1) * 25%), 65%); /* --gruvbox-primary */
  --text-primary-background: var(--gruvbox-grey1);

  --interactive-normal: var(--gruvbox-light2);
  --interactive-hover: var(--gruvbox-light0);
  --interactive-active: var(--gruvbox-light-1);
  --interactive-muted: var(--gruvbox-dark4);

  --text-mention: var(--gruvbox-primary);
  --background-mention: rgba(250, 189, 47, 0.8);
  --text-mention-hover: var(--text-primary-background);
  --background-mention-hover: var(--gruvbox-primary);
  --message-ephemeral: var(--gruvbox-red);
  --background-ephemeral: rgba(251, 241, 199, 0.4)
  --background-ephemeral-hover: rgba(251, 241, 199, 0.2)
  --mentioned-timestamp: var(--gruvbox-grey1);

  --reaction-count: var(--gruvbox-grey1);
  --reaction-hover: var(--gruvbox-light0);
  --reaction-me: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.3);

  --background-primary: var(--gruvbox-dark2);
  --background-secondary: var(--gruvbox-dark1);
  --background-secondary-alt: var(--gruvbox-black1);
  --background-tertiary: var(--gruvbox-black2);
  --background-accent: var(--gruvbox-dark1);
  --background-floating: var(--background-secondary);
  --background-floating-gradient: linear-gradient(90deg, rgba(251, 241, 199, 0.3), var(--background-floating) 80%);
  --background-nested-floating: #fb4934;
  --background-mobile-primary: #36393f;
  --background-mobile-secondary: #2f3136;
  --background-modifier-hover: rgba(60, 56, 54, 0.3);
  --background-modifier-hover-gradient: linear-gradient(
    90deg,
    rgba(0, 48, 59, 0),
    var(--background-secondary-alt) 50%
  );
  --background-modifier-active: rgba(235, 219, 178, 0.3);
  --background-modifier-selected: rgba(168, 153, 132, 0.5);
  --background-modifier-accent: hsla(0, 0%, 100%, 0.06);
  --background-slider: var(--gruvbox-black2);
  --background-channel-header: var(--background-secondary);
  --background-channel-header-gradient: linear-gradient(90deg, rgba(60, 56, 54, 0.3) 0, var(--background-secondary));

  --info-positive-text: var(--text-normal);
  --info-warning-text: var(--text-normal);
  --info-danger-text: var(--text-normal);
  --info-help-background: hsla(213, calc(var(--saturation-factor, 1) * 32%), 52%, 0.1);
  --info-help-foreground: hsl(213, calc(var(--saturation-factor, 1) * 32%), 52%);
  --info-help-text: var(--text-normal);
  --status-warning-text: #000;

  --keybind-background: var(--gruvbox-dark5);
  --keybind-text: var(--text-normal);
  --keybind-shadow: var(--gruvbox-black2);

  --scrollbar-thin-thumb: var(--gruvbox-black3);
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: var(--gruvbox-black3);
  --scrollbar-auto-track: var(--gruvbox-dark1);
  --scrollbar-auto-scrollbar-color-thumb: var(--gruvbox-black3);
  --scrollbar-auto-scrollbar-color-track: var(--gruvbox-black1);

  --logo-primary: #ebdbb2;
  --control-brand-foreground: var(--text-brand);
  --control-brand-foreground-new: var(--text-brand);

  --background-mentioned: hsla(60, calc(var(--saturation-factor, 1) * 25%), 65%, 0.15);
  --background-mentioned-hover: hsla(60, calc(var(--saturation-factor, 1) * 25%), 65%, 0.205);
  --background-message-hover:rgba(251, 241, 199, 0.1);
  --channels-default: var(--gruvbox-light-1);
  --guild-header-text-shadow: 0 1px 1px var(--gruvbox-dark1);
  --channeltextarea-background: var(--gruvbox-dark4);
  --activity-card-background: var(--background-secondary-alt);
  --textbox-markdown-syntax: var(--gruvbox-grey1);

  --input-background: rgba(0, 0, 0, 0.2);
  --input-placeholder-text: var(--text-muted);

  --deprecated-card-bg: var(--gruvbox-dark1);
  --deprecated-card-editable-bg: rgba(32, 34, 37, 0.3);
  --deprecated-store-bg: #36393f;
  --deprecated-quickswitcher-input-background: var(--gruvbox-black2);
  --deprecated-quickswitcher-input-placeholder: var(--text-muted);
  --deprecated-text-input-bg: rgba(0, 200, 0, 0.2);
  --deprecated-text-input-border: rgba(0, 200, 0, 0.3);
  --deprecated-text-input-border-hover: #040405;
  --deprecated-text-input-border-disabled: var(--gruvbox-black2);
  --deprecated-text-input-prefix: #dcddde;
}

.theme-light {
  --header-primary: var(--gruvbox-dark4);
  --header-secondary: #4f5660;
  --text-normal: var(--gruvbox-dark2);
  --text-muted: var(--gruvbox-grey1);
  --text-link: hsl(213, calc(var(--saturation-factor, 1) * 75%), 60%); /* #4c91e6 */
  --text-link-low-saturation: hsl(213, calc(var(--saturation-factor, 1) * 32%), 52%); /* --gruvbox-blue */
  --text-positive: hsl(92, calc(var(--saturation-factor, 1) * 28%), 65%); /* --gruvbox-green */
  --text-warning: hsl(14, calc(var(--saturation-factor, 1) * 51%), 63%); /* --gruvbox-orange */
  --text-danger: hsl(354, calc(var(--saturation-factor, 1) * 42%), 56%); /* --gruvbox-red */
  --text-brand: hsl(179, calc(var(--saturation-factor, 1) * 25%), 65%); /* --gruvbox-primary */
  --text-primary-background: #fbf1c7;

  --interactive-normal: var(--text-normal);
  --interactive-hover: var(--gruvbox-primary);
  --interactive-active: var(--gruvbox-dark5);
  --interactive-muted: var(--text-muted);

  --text-mention: var(--gruvbox-primary);
  --background-mention: rgba(250, 189, 47, 0.5);
  --text-mention-hover: var(--text-primary-background);
  --background-mention-hover: var(--gruvbox-primary);
  --message-ephemeral: var(--gruvbox-blue);
  --background-ephemeral: rgba(94, 129, 172, 0.1);
  --background-ephemeral-hover: rgba(94, 129, 172, 0.2);
  --mentioned-timestamp: var(--gruvbox-grey1);

  --reaction-count: var(--gruvbox-grey1);
  --reaction-hover: var(--gruvbox-dark5);
  --reaction-me: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.3);

  --background-primary: var(--gruvbox-light1);
  --background-secondary: var(--gruvbox-light2);
  --background-secondary-alt: var(--gruvbox-light3);
  --background-tertiary: var(--gruvbox-light3);
  --background-accent: var(--gruvbox-light-1);
  --background-floating: var(--background-secondary);
  --background-floating-gradient: linear-gradient(90deg, rgba(250, 189, 47, 0.2), var(--background-floating) 80%);
  --background-nested-floating: #fbf1c7;
  --background-mobile-primary: #ebdbb2;
  --background-mobile-secondary: #fbf1c7;
  --background-modifier-hover: var(--gruvbox-light3);
  --background-modifier-hover-gradient: linear-gradient(
    90deg,
    rgba(236, 239, 244, 0),
    var(--background-secondary-alt) 50%
  );
  --background-modifier-active: rgba(155, 162, 172, 0.16);
  --background-modifier-selected: rgba(155, 162, 172, 0.24);
  --background-modifier-accent: rgba(96, 109, 133, 0.08);
  --background-slider: var(--gruvbox-light3);
  --background-channel-header: var(--background-secondary);
  --background-channel-header-gradient: linear-gradient(90deg, rgba(229, 233, 240, 0) 0, var(--background-secondary));

  --info-positive-text: var(--text-normal);
  --info-warning-text: var(--text-normal);
  --info-danger-text: var(--text-normal);
  --info-help-background: hsla(213, calc(var(--saturation-factor, 1) * 32%), 52%, 0.1);
  --info-help-foreground: hsl(213, calc(var(--saturation-factor, 1) * 32%), 52%);
  --info-help-text: var(--text-normal);
  --status-warning-text: #fbf1c7;

  --keybind-background: var(--gruvbox-light4);
  --keybind-text: var(--text-normal);
  --keybind-shadow: var(--gruvbox-light-1);

  --scrollbar-thin-thumb: var(--gruvbox-dark5);
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: var(--gruvbox-light2);
  --scrollbar-auto-track: var(--gruvbox-light-1);
  --scrollbar-auto-scrollbar-color-thumb: var(--gruvbox-light-1);
  --scrollbar-auto-scrollbar-color-track: var(--gruvbox-light1);

  --logo-primary: var(--text-brand);
  --control-brand-foreground: var(--text-brand);
  --control-brand-foreground-new: var(--text-brand);

  --background-mentioned: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.35);
  --background-mentioned-hover: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.45);
  --background-message-hover: rgba(155, 162, 172, 0.15);
  --channels-default: var(--text-normal);
  --guild-header-text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.4);
  --channeltextarea-background: var(--background-secondary-alt);
  --activity-card-background: var(--background-secondary-alt);
  --textbox-markdown-syntax: #928374;

  --input-background: rgba(255, 255, 255, 0.2);
  --input-placeholder-text: var(--text-muted);

  --deprecated-card-bg: var(--gruvbox-light1);
  --deprecated-card-editable-bg: rgba(236, 239, 244, 0.3);
  --deprecated-store-bg: #ebdbb2;
  --deprecated-quickswitcher-input-background: var(--gruvbox-light4);
  --deprecated-quickswitcher-input-placeholder: var(--text-muted);
  --deprecated-text-input-bg: rgba(255, 255, 255, 0.2);
  --deprecated-text-input-border: rgba(255, 255, 255, 0.3);
  --deprecated-text-input-border-hover: #fbf1c7;
  --deprecated-text-input-border-disabled:  var(--gruvbox-light0);
  --deprecated-text-input-prefix: #fbf1c7;
}

.theme-dark,
.theme-light {
  --input-placeholder-text: var(--text-muted);

  --info-positive-background: hsla(92, calc(var(--saturation-factor, 1) * 28%), 65%, 0.1);
  --info-positive-foreground: hsl(92, calc(var(--saturation-factor, 1) * 28%), 65%);
  --info-warning-background: hsla(14, calc(var(--saturation-factor, 1) * 51%), 63%, 0.1);
  --info-warning-foreground: hsl(14, calc(var(--saturation-factor, 1) * 51%), 63%);
  --info-danger-background: hsla(354, calc(var(--saturation-factor, 1) * 42%), 56%, 0.1);
  --info-danger-foreground: hsl(354, calc(var(--saturation-factor, 1) * 42%), 56%);

  --status-positive-background: hsl(92, calc(var(--saturation-factor, 1) * 28%), 65%);
  --status-positive-text: var(--gruvbox-light5);
  --status-positive: hsl(92, calc(var(--saturation-factor, 1) * 28%), 65%);

  --status-warning-background: hsl(14, calc(var(--saturation-factor, 1) * 51%), 63%);
  --status-warning: hsl(14, calc(var(--saturation-factor, 1) * 51%), 63%);

  --status-danger-background: hsl(354, calc(var(--saturation-factor, 1) * 42%), 56%);
  --status-danger-text: var(--gruvbox-light5);
  --status-danger: hsl(354, calc(var(--saturation-factor, 1) * 42%), 56%);

  --button-secondary-background: var(--gruvbox-dark5);
  --button-secondary-text: var(--gruvbox-light5);
  --button-secondary-background-hover: var(--gruvbox-dark4);
  --button-secondary-background-active: var(--gruvbox-dark3);

  --button-danger-background: var(--status-danger);
  --button-danger-text: var(--gruvbox-light5);
  --button-danger-background-hover: #ac5861;
  --button-danger-background-active: #975056;
  --button-danger-background-disabled: #ab5860;
  --button-outline-danger-text: var(--text-normal);
  --button-outline-danger-border: var(--status-danger);
  --button-outline-danger-background-hover: var(--status-danger);
  --button-outline-danger-border-hover: var(--status-danger);
  --button-outline-danger-text-hover: var(--button-danger-text);
  --button-outline-danger-background-active: var(--button-danger-background-active);
  --button-outline-danger-border-active: var(--button-danger-background-active);
  --button-outline-danger-text-active: var(--button-danger-text);

  --button-positive-background: var(--status-positive);
  --button-positive-text: var(--gruvbox-dark1);
  --button-positive-background-hover: #b8bb26;
  --button-positive-background-active: #98971a;
  --button-positive-background-disabled: #98971a;
  --button-outline-positive-text: var(--text-normal);
  --button-outline-positive-border: var(--status-positive);
  --button-outline-positive-background-hover: var(--status-positive);
  --button-outline-positive-border-hover: var(--status-positive);
  --button-outline-positive-text-hover: var(--button-positive-text);
  --button-outline-positive-background-active: var(--button-positive-background-active);
  --button-outline-positive-border-active: var(--button-positive-background-active);
  --button-outline-positive-text-active: var(--button-positive-text);

  --button-brand-background: var(--gruvbox-primary);
  --button-brand-text: var(--gruvbox-black1);
  --button-brand-background-hover: #fb4934;
  --button-brand-background-active: #fb4934;
  --button-outline-brand-text: var(--text-normal);
  --button-outline-brand-border: var(--text-primary);
  --button-outline-brand-background-hover: var(--gruvbox-primary);
  --button-outline-brand-border-hover: var(--gruvbox-primary);
  --button-outline-brand-text-hover: var(--button-brand-text);
  --button-outline-brand-background-active: var(--button-brand-background-active);
  --button-outline-brand-border-active: var(--button-brand-background-active);
  --button-outline-brand-text-active: var(--button-brand-text);

  --search-popout-date-picker-hint-text: var(--text-muted);
  --search-popout-date-picker-hint-value-text: var(--button-brand-text);
  --search-popout-date-picker-hint-value-background: var(--button-brand-background);
  --search-popout-date-picker-hint-value-background-hover: var(--button-brand-background-hover);

  --focus-primary: var(--gruvbox-primary);

  --background-selection: hsla(213, calc(var(--saturation-factor, 1) * 75%), 60%, 0.2);
  --icon-admin: var(--text-muted);
  --icon-management: var(--gruvbox-yellow);
}

[data-popout-root],
html {
  --brand-experiment: hsl(179, calc(var(--saturation-factor, 1) * 25%), 65%);
  --brand-experiment-500: hsl(179, calc(var(--saturation-factor, 1) * 25%), 65%);

  --brand-experiment-05a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.05);
  --brand-experiment-10a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.1);
  --brand-experiment-15a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.15);
  --brand-experiment-20a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.2);
  --brand-experiment-25a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.25);
  --brand-experiment-30a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.3);
  --brand-experiment-35a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.35);
  --brand-experiment-40a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.4);
  --brand-experiment-45a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.45);
  --brand-experiment-50a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.5);
  --brand-experiment-55a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.55);
  --brand-experiment-60a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.6);
  --brand-experiment-65a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.65);
  --brand-experiment-70a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.7);
  --brand-experiment-75a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.75);
  --brand-experiment-80a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.8);
  --brand-experiment-85a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.85);
  --brand-experiment-90a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.9);
  --brand-experiment-95a: hsla(179, calc(var(--saturation-factor, 1) * 25%), 65%, 0.95);
}