userstyles/src/keybr.user.css

/* ==UserStyle==
@name           Gruvbox for Keybr
@namespace      git.m3.fyi/Marsn3
@version        1.0.0
@description    Gruvbox Theme for Keybr
@author         Marsn3
@homepageURL https://git.m3.fyi/Marsn3/userstyles
@updateURL https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/keybr.user.css
@license MIT
==/UserStyle== */
@-moz-document domain("keybr.com") {
  /*~~~~~ Base Colors ~~~~~*/
  html[data-theme="dark"] {
    --bg_h: #1d2021;
    --bg: #282828;
    --bg_s: #32302f;
    --bg1: #3c3836;
    --bg2: #504945;
    --bg3: #665c54;
    --bg4: #7c6f64;

    --fg: #fbf1c7;
    --fg1: #ebdbb2;
    --fg2: #d5c4a1;
    --fg3: #bdae93;
    --fg4: #a89984;

    --red: #fb4934;
    --green: #b8bb26;
    --yellow: #fabd2f;
    --blue: #83a598;
    --purple: #d3869b;
    --aqua: #8ec07c;
    --gray: #928374;
    --orange: #fe8019;

    --red-dim: #cc2412;
    --green-dim: #98971a;
    --yellow-dim: #d79921;
    --blue-dim: #458588;
    --purple-dim: #b16286;
    --aqua-dim: #689d6a;
    --gray-dim: #a89984;
    --orange-dim: #d65d0e;

    --text-color: var(--fg4);
    --link-color: var(--blue);
    --header-color: var(--fg3);
    --background-color: var(--bg2);
    --Keyboard-frame__color: transparent;
    --KeyboardKey-button__color: var(--bg3);
    --KeyboardKey-button--special__color: var(--bg);
    --KeyboardKey-button--depressed__color: var(--fg4);
    --KeyboardKey-symbol__color: var(--fg);
    --KeyboardKey-symbol--special__color: var(--fg);
    --KeyboardKey-symbol--depressed__color: var(--bg1);
    --KeyboardKey-symbol--dead__color: var(--red);
    --KeyboardZone--a__color: var(--fg2);
    --KeyboardZone--a__colorAlt: var(--fg2);
    --KeyboardZone--b__color: var(--fg2);
    --KeyboardZone--b__colorAlt: var(--fg2);
    --TextInput-item__color: var(--fg2);
    --TextInput-item--miss__background-color: var(--red-dim);
    --TextInput-item--garbage__color: var(--fg);
    --TextInput-item--garbage__background-color: var(--red-dim);
    --TextInput-cursor__color: var(--bg);
    --TextInput-cursor__background-color: var(--fg);
    --LessonKey__color: var(--bg);
    --LessonKey--included__color: var(--bg);
    --LessonKey--excluded__color: var(--fg3);
    --LessonKey--excluded__background-color: var(--bg1);
    --LessonKey--uncalibrated__color: var(--bg);
    --LessonKey--uncalibrated__background-color: var(--fg2);
    --LessonKey--boosted__color: var(--bg);
    --LessonKey--boosted__outline-color: var(--fg);
    --LessonKey--forced__color: var(--bg);
    --LessonKey--current__outline-color: var(--fg);
    --LessonKey--slow__color: var(--red);
    --LessonKey--fast__color: var(--green);
    --DailyGoal-bar__color: var(--bg4);
    --DailyGoal-frame__color: var(--fg4);
    --Chart-frame__color: var(--fg4);
    --Chart-speed__color: var(--aqua);
    --Chart-accuracy__color: var(--red);
    --Chart-keyCount__color: var(--purple-dim);
    --Chart-threshold__color: var(--purple);
    --Chart-keySpeed__color: var(--blue-dim);
    --Chart-keyFrequency-h__color: var(--aqua);
    --Chart-keyFrequency-m__color: var(--red-dim);
    --Chart-keyFrequency-r__color: var(--purple-dim);
    --Calendar-caption__background-color: var(--bg);
    --Calendar-headerCell__background-color: var(--bg);
    --Calendar-cell__color: var(--bg);
    --Calendar-cell__background-color: var(--blue-dim);
    --Calendar-cell--s3__background-color: var(--blue-dim);
    --Calendar-cell--z__background-color: var(--bg);
    --Name-color: var(--fg2);
    --Value-color: var(--gray);
    --ValueDelta--more__color: var(--green-dim);
    --ValueDelta--less__color: var(--red-dim);
    --Popup__color: var(--fg4);
    --Popup__background-color: var(--bg);
    --PlayerDetails__color: var(--bg4);
    --Icon__color: var(--fg2);
    --TabList-item--active__color: var(--bg4);
    --Button__color: var(--fg);
    --Button__background-color: var(--bg4);
    --Button--focused__color: var(--fg);
    --Button--focused__background-color: var(--fg4);
    --TextField__color: var(--fg4);
    --TextField__background-color: var(--bg1);
    --TextField--focused__color: vap(--bg4);
    --TextField--focused__background-color: var(--bg4);
    --MenuItem__color: vap(--fg);
    --MenuItem__background-color: var(--bg2);
    --MenuItem--selected__color: var(--fg);
    --MenuItem--selected__background-color: vap(--bg2);
    --NavLink__color: var(--fg3);
    --NavLink--current__color: var(--bg3);
    --Body__background-image: url("https://m3.fyi/assets/road.jpg");
  }

  /*~~~~~~~ Homerow ~~~~~~~*/
  /*----- Left -----*/
  [data-key="KeyA"] {
    --KeyboardKey-button__color: var(--yellow);
  }
  [data-key="KeyS"] {
    --KeyboardKey-button__color: var(--blue);
  }
  [data-key="KeyD"] {
    --KeyboardKey-button__color: var(--green);
  }
  [data-key="KeyF"] {
    --KeyboardKey-button__color: var(--red);
  }

  /*----- Right -----*/
  [data-key="KeyJ"] {
    --KeyboardKey-button__color: var(--purple);
  }
  [data-key="KeyK"] {
    --KeyboardKey-button__color: var(--green);
  }
  [data-key="KeyL"] {
    --KeyboardKey-button__color: var(--blue);
  }
  [data-key="Semicolon"] {
    --KeyboardKey-button__color: var(--yellow);
  }

  /*~~~~~~~ Homerow ~~~~~~~*/
  /*----- Left -----*/
  [data-key="Backquote"],
  [data-key="Digit1"],
  [data-key="KeyQ"],
  [data-key="KeyZ"] {
    --KeyboardKey-button__color: var(--yellow-dim);
  }

  [data-key="Digit2"],
  [data-key="KeyW"],
  [data-key="KeyX"] {
    --KeyboardKey-button__color: var(--blue-dim);
  }
  [data-key="Digit3"],
  [data-key="KeyE"],
  [data-key="KeyC"] {
    --KeyboardKey-button__color: var(--green-dim);
  }
  [data-key="Digit4"],
  [data-key="Digit5"],
  [data-key="KeyR"],
  [data-key="KeyV"],
  [data-key="KeyT"],
  [data-key="KeyG"],
  [data-key="KeyB"] {
    --KeyboardKey-button__color: var(--red-dim);
  }

  /*----- Right -----*/
  [data-key="Digit6"],
  [data-key="Digit7"],
  [data-key="KeyY"],
  [data-key="KeyH"],
  [data-key="KeyN"],
  [data-key="KeyU"],
  [data-key="KeyM"] {
    --KeyboardKey-button__color: var(--purple-dim);
  }

  [data-key="Digit8"],
  [data-key="KeyI"],
  [data-key="Comma"] {
    --KeyboardKey-button__color: var(--green-dim);
  }
  [data-key="Digit9"],
  [data-key="KeyO"],
  [data-key="Period"] {
    --KeyboardKey-button__color: var(--blue-dim);
  }
  [data-key="Digit0"],
  [data-key="Minus"],
  [data-key="Equal"],
  [data-key="BracketLeft"],
  [data-key="BracketRight"],
  [data-key="Quote"],
  [data-key="Backslash"],
  [data-key="Slash"],
  [data-key="KeyP"] {
    --KeyboardKey-button__color: var(--yellow-dim);
  }
}