Theme

GitKraken Dark Knight Theme

My custom dark theme for GitKraken.

Usage

Insatll GitKraken.
Press Ctrl + , or ⌘ + , to go to settings.
Go to UI Custimization in the sidebar.
You should see a dropdown with the default themes. There should be a link to the themes directory below the dropdown menu.

Create a new file named ending in .jsonc. For example (MyCustomTheme.jsonc or Dark Knight.jsonc) and paste in the content below.

Users/{yourUserName}/.gitkraken/{yourThemeName}.jsonc

{
  "meta": {
    "name": "Dark Knight",
    "scheme": "dark" // must be "light" or "dark"
  },
  "themeValues": {
    // values applied to the entire app
    "root": {
      "red": "#D9413D",
      "orange": "#DE9B43",
      "yellow": "#ECB91C",
      "green": "#5CB85C",
      "blue": "#4D88FF",
      "ltblue": "#5bc0de",
      "app__bg0": "#000000",
      "toolbar__bg0": "lighten(saturate(@app__bg0, 3%), 6%)",
      "toolbar__bg1": "lighten(@toolbar__bg0, 4%)",
      "toolbar__bg2": "lighten(@toolbar__bg1, 6%)",
      "panel__bg0": "#000000",
      "panel__bg1": "lighten(@panel__bg0, 4%)",
      "panel__bg2": "lighten(@panel__bg1, 4%)",
      "input__bg": "fade(#000000, 20%)",
      "input-bg-warn-color": "fade(@orange, 60%)",
      "panel-border": "lighten(saturate(@app__bg0, 3%), 6%)",
      "section-border": "fade(#FFFFFF, 8%)",
      "subtle-border": "fade(#FFFFFF, 4%)",
      "modal-overlay-color": "rgba(0,0,0,.5)",
      // text colors
      // values starting with . aren't added to the CSS, they're just variables
      ".text-color": "#FFFFFF",
      "text-selected": "@.text-color",
      "text-normal": "#fff",
      "text-secondary": "fade(@.text-color, 65%)",
      "text-disabled": "fade(@.text-color, 45%)",
      "text-accent": "#93A9EC",
      "text-inverse": "#222222",
      // 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, 10%)",
      "primary-hover": "fade(@blue, 40%)",
      "success-border": "@green",
      "success-bg": "fade(@green, 10%)",
      "success-hover": "fade(@green, 40%)",
      "warning-border": "@orange",
      "warning-bg": "fade(@orange, 10%)",
      "warning-hover": "fade(@orange, 35%)",
      "danger-border": "@red",
      "danger-bg": "fade(@red, 10%)",
      "danger-hover": "fade(@red, 40%)",
      // states
      "hover-row": "fade(@blue, 15%)",
      "danger-row": "fade(@red, 40%)",
      "selected-row": "fade(@blue, 20%)",
      "warning-row": "fade(@orange, 40%)",
      "droppable": "fade(@yellow, 30%)",
      "drop-target": "fade(@green, 50%)",
      "input--disabled": "fade(#000000, 10%)",
      "link-color": "#40c5ec",
      "form-control-focus": "@blue",
      // various app elements
      "code-bg": "@app__bg0",
      "scroll-thumb-border": "@app__bg0",
      "scroll-thumb-bg": "@toolbar__bg2",
      "scroll-thumb-bg-light": "lighten(@toolbar__bg2, 20%)",
      "wip-status": "fade(@blue, 40%)",
      "card__bg": "@panel__bg2",
      "card-shadow": "@rgba(0,0,0,.2)",
      // component states
      "filtering": "fade(@blue, 50%)",
      "soloing": "fade(@orange, 50%)",
      "checked-out": "fade(@green, 30%)",
      "soloed": "fade(@orange, 30%)",
      "added-line": "fade(@green, 20%)",
      "deleted-line": "fade(@red, 20%)",
      "filter-match": "fade(@blue, 50%)",
      "clone__progress": "fade(@blue, 70%)",
      "toolbar__prompt": "fade(@blue, 20%)",
      "modified-line": "fade(#000000, 25%)",
      "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"
    },
    // 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)",
      "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)"
    }
  }
}

Change the name of the meta tag to the name of your theme. This is the name that will appear in the dropdown.
Users/{yourUserName}/.gitkraken/{yourThemeName}.jsonc
```
"meta": {
  "name": "Dark Knight", // the name that will appear in the dropdown
  "scheme": "dark" // must be "light" or "dark"
}
```
Add this file to the .gitkraken directory. There should be a link to the themes directory below the dropdown menu. Typically it's located at /Users/{yourUserName}/.gitkraken/ on Mac. If you're on Windows google it. :)
Your theme should now appear in the theme dropdown.

GitKraken Dark Knight Theme

CopyUsage

Usage