GitKraken Dark+ Theme

dark+.jsonc

{
  "meta": {
    "name": "Dark+",
    "scheme": "dark" // must be "light" or "dark"
  },
  "themeValues": {
    // values applied to the entire app
    "root": {
      "red": "#D9413D",
      "orange": "#DE9B43",
      "yellow": "#ECB91C",
      "green": "#5CB85C",
      "teal": "#2ece9d",
      "blue": "#4D88FF",
      "ltblue": "#5bc0de",
      "purple": "#c517b6",
      "app__bg0": "#2b2b2b",
      "toolbar__bg0": "lighten(saturate(@app__bg0, 3%), 6%)",
      "toolbar__bg1": "lighten(@toolbar__bg0, 4%)",
      "toolbar__bg2": "lighten(@toolbar__bg1, 6%)",
      "panel__bg0": "lighten(@app__bg0, 5%)",
      "panel__bg1": "lighten(@panel__bg0, 5%)",
      "panel__bg2": "lighten(@panel__bg1, 5%)",
      "input__bg": "fade(#000000, 20%)",
      "input-bg-warn-color": "fade(@orange, 60%)",
      "panel-border": "fade(#FFFFFF, 8%)",
      "section-border": "fade(#FFFFFF, 8%)",
      "subtle-border": "fade(#FFFFFF, 4%)",
      "modal-overlay-color": "rgba(0,0,0,.5)",
      // graph colors
      "graph-color-0": "#15a0bf",
      "graph-color-1": "#0669f7",
      "graph-color-2": "#8e00c2",
      "graph-color-3": "#c517b6",
      "graph-color-4": "#d90171",
      "graph-color-5": "#cd0101",
      "graph-color-6": "#f25d2e",
      "graph-color-7": "#f2ca33",
      "graph-color-8": "#7bd938",
      "graph-color-9": "#2ece9d",
      "stats-added-color": "#347d39",
      "stats-deleted-color": "#c93c37",
      "stats-files-color": "#e2c08d",
      // text colors
      // values starting with . aren't added to the CSS, they're just variables
      ".text-color": "#FFFFFF",
      "text-selected": "@.text-color",
      "text-normal": "fade(@.text-color, 75%)",
      "text-secondary": "fade(@.text-color, 60%)",
      "text-disabled": "fade(@.text-color, 40%)",
      "text-accent": "#93A9EC",
      "text-inverse": "#222222",
      "text-bright": "@.text-color",
      "text-dimmed": "fade(@text-normal, 20%)",
      "text-dimmed-selected": "fade(@text-dimmed, 50%)",
      "text-selected-row": "@text-selected",
      "gkftux-teal": "#A7FBFF",
      "gkftux-bg": "#0D1017",
      "gkftux-getstarted-bg": "rgba(255,255,255, 0)",
      "gkftux-getstarted-bg-hover": "rgba(255,255,255,0.11)",
      "gkftux-getstarted-border": "rgba(54, 57, 63, 1)",
      "gkftux-getstarted-icon": "rgba(108, 108, 108, 1)",
      "gkftux-repo-tab-border": "#36393F",
      "gkftux-repo-tab-border-selected": "@gkftux-teal",
      "gkftux-repo-tab-bg": "transparent",
      "gkftux-repo-tab-bg-selected": "#1C1E23",
      "gkftux-repo-tab-icon": "fade(@gkftux-teal, 50%)",
      "gkftux-repo-tab-icon-selected": "@gkftux-teal",
      // buttons
      "btn-text": "@text-normal",
      "btn-text-hover": "@text-selected",
      "default-border": "@text-normal",
      "default-bg": "transparent",
      "default-hover": "transparent",
      "default-border-hover": "@text-selected",
      "primary-border": "@blue",
      "primary-bg": "fade(@blue, 20%)",
      "primary-hover": "fade(@blue, 60%)",
      "success-border": "@green",
      "success-bg": "fade(@green, 20%)",
      "success-hover": "fade(@green, 60%)",
      "warning-border": "@orange",
      "warning-bg": "fade(@orange, 20%)",
      "warning-hover": "fade(@orange, 60%)",
      "danger-border": "@red",
      "danger-bg": "fade(@red, 20%)",
      "danger-hover": "fade(@red, 60%)",
      // states
      "hover-row": "fade(@blue, 10%)",
      "danger-row": "fade(@red, 60%)",
      "selected-row": "fade(@blue, 20%)",
      "selected-row-border": "none",
      "warning-row": "fade(@orange, 60%)",
      "droppable": "fade(@yellow, 30%)",
      "drop-target": "fade(@green, 50%)",
      "input--disabled": "fade(#000000, 10%)",
      "link-color": "#40c5ec",
      "link-color-bright": "#40c5ec",
      "form-control-focus": "@blue",
      // various app elements
      "scroll-thumb-border": "rgba(0,0,0,0)",
      "scroll-thumb-bg": "rgba(255,255,255,0.15)",
      "scroll-thumb-bg-light": "rgba(0,0,0,0.15)",
      "wip-status": "fade(@blue, 40%)",
      "card__bg": "@panel__bg2",
      "card-shadow": "rgba(0,0,0,.2)",
      "statusbar__warning-bg": "mixLess(@graph-color-7, @app__bg0, 50%)",
      "label__yellow-color": "#f2ca33",
      "label__light-blue-color": "#15a0bf",
      "label__purple-color": "#c517b6",
      // component states
      "filtering": "fade(@blue, 50%)",
      "soloing": "fade(@orange, 50%)",
      "checked-out": "fade(@green, 30%)",
      "soloed": "fade(@orange, 30%)",
      "filter-match": "fade(@blue, 50%)",
      "clone__progress": "fade(@blue, 70%)",
      "toolbar__prompt": "fade(@blue, 20%)",
      "verified": "fade(@green, 30%)",
      "unverified": "fade(#ffffff, 10%)",
      "drop-sort-border": "@green",
      // terminal
      "terminal__repo-name-color": "turquoise",
      "terminal__repo-branch-color": "violet",
      "terminal__repo-tag-color": "lightcoral",
      "terminal__repo-upstream-color": "yellowgreen",
      "terminal__background": "#000000",
      "terminal__cursor": "#FFFFFF",
      "terminal__cursorAccent": "#000000",
      "terminal__foreground": "#FFFFFF",
      "terminal__selection": "#304676",
      "terminal__black": "#000000",
      "terminal__red": "#F24A4A",
      "terminal__green": "#0DBC79",
      "terminal__yellow": "#E5E510",
      "terminal__blue": "#4A98EE",
      "terminal__magenta": "#E063E0",
      "terminal__cyan": "#11A8CD",
      "terminal__white": "#E5E5E5",
      "terminal__brightBlack": "#686868",
      "terminal__brightRed": "#FF5656",
      "terminal__brightGreen": "#23D18B",
      "terminal__brightYellow": "#F5F543",
      "terminal__brightBlue": "#51A4FF",
      "terminal__brightMagenta": "#D670D6",
      "terminal__brightCyan": "#29B8DB",
      "terminal__brightWhite": "#E5E5E5",
      // code editor
      "code-bg": "@app__bg0",
      "code-foreground": "@text-normal",
      "code-blame-color-0": "@graph-color-0",
      "code-blame-color-1": "@graph-color-1",
      "code-blame-color-2": "@graph-color-2",
      "code-blame-color-3": "@graph-color-3",
      "code-blame-color-4": "@graph-color-4",
      "code-blame-color-5": "@graph-color-5",
      "code-blame-color-6": "@graph-color-6",
      "code-blame-color-7": "@graph-color-7",
      "code-blame-color-8": "@graph-color-8",
      "code-blame-color-9": "@graph-color-9",
      "added-line": "fade(@green, 20%)",
      "deleted-line": "fade(@red, 20%)",
      "modified-line": "fade(#000000, 25%)",
      "conflict-info-color": "#15a0bf",
      "conflict-left-border-color": "#15a0bf",
      "conflict-left-color": "fade(@conflict-left-border-color, 25%)",
      "conflict-right-border-color": "#f2ca33",
      "conflict-right-color": "fade(@conflict-right-border-color, 25%)",
      "conflict-output-border-color": "#c517b6",
      "conflict-output-color": "fade(@conflict-output-border-color, 25%)"
    },
    // override specific values just for the toolbar
    "toolbar": {
      "text-selected": "rgba(255,255,255,1)",
      "text-normal": "rgba(255,255,255,.9)",
      "text-secondary": "rgba(255,255,255,.6)",
      "text-disabled": "rgba(255,255,255,.4)",
      "section-border": "rgba(255,255,255,.2)",
      "input__bg": "rgba(0,0,0,.20)",
      "link-color": "#40c5ec",
      "btn-text": "var(--text-normal)"
    },
    // override specific values just for the tabs bar
    "tabsbar": {
      "text-selected": "rgba(255,255,255,1)",
      "text-normal": "rgba(255,255,255,.9)",
      "text-secondary": "rgba(255,255,255,.6)",
      "text-disabled": "rgba(255,255,255,.4)",
      "section-border": "rgba(255,255,255,.2)",
      "input__bg": "rgba(0,0,0,.20)",
      "link-color": "#40c5ec",
      "btn-text": "var(--text-normal)"
    }
  }
}