CopyUsage

1. Insatll GitKraken.

2. Press Ctrl + , or ⌘ + , to go to settings.

3. Go to UI Custimization in the sidebar.

4. You should see a dropdown with the default themes. There should be a link to the themes directory below the dropdown menu.

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

   {
     "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)"
       }
     }
   }

   Copy

6. Change the name of the meta tag to the name of your theme. This is the name that will appear in the dropdown.

   "meta": {
     "name": "Dark Knight", // the name that will appear in the dropdown
     "scheme": "dark" // must be "light" or "dark"
   }

   Copy

7. 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. :)

8. Your theme should now appear in the theme dropdown.