Some CSS fixes and tweaks for GitHub Desktop

Chirimode for GitHub Desktop.md

Chirimode for GitHub Desktop

• Fixes a blur on the blue border at the bottom of the changes/history tabs.
• Fixes the app toolbar having a 2px border.
• Adds a line on the side of the repo dropdown so that it lines up with the repo button.
• Tweaks the diff theme to match my VSCode syntax theme Azurish as closely as possible.

Install:

1. Open dev tools with CTRL + SHIFT + I
2. Go the console
3. Paste the following code:

var html_file = require("path").join(process.resourcesPath, "app/index.html");
var html = require("fs").readFileSync(html_file, "utf8");
var link_to_inject = '<link href="https://gist.githack.com/ChiriVulpes/83afaa0e1cf21d6852f5349b10e7eb3a/raw/80c4512c77aa6b99a95c67b498a169a73203fe8e/chirimode.css" rel="stylesheet">';
var link_regex = /<link href="https:\/\/(cdn|gist)\.(rawgit|githack)\.com\/(ChiriCuddles|ChiriVulpes).*?" rel="stylesheet">/g;
html = html.replace(link_regex, "").replace("</head>", `\n${link_to_inject}</head>`);
require("fs").writeFileSync(html_file, html, "utf8");
location.reload();

Note: You will have to do this again whenever Github Desktop updates.

chirimode.css

/********
 * Main *
 ********/
body.theme-dark {
  --text-color: #eaeaea;
  --text-secondary-color: #aaaeb3;
  /* Use a dark colour for the divider between app menu items */
  --app-menu-divider-color: #232323;
}

/* Fix the images looking weird in dark mode */
.blankslate-image {
  filter: invert() hue-rotate(200deg) brightness(5) opacity(0.2) !important;
}

/* Fix blur on blue border at bottom of tabs */
.tab-bar.tabs .tab-bar-item.selected {
  box-shadow: none;
  position: relative;
}

.tab-bar.tabs .tab-bar-item.selected::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: calc(100% + 0.5px);
  top: 0;
  left: 0;
  border-bottom: 3px solid var(--tab-bar-active-color);
}

/* Fix the app toolbar having a 2px border */
#desktop-app-toolbar {
  border: none;
}

/* Add a line on the side of the repo dropdown so that it lines up with the button */
#desktop-app-toolbar .foldout::after {
  content: "";
  position: absolute;
  right: 0;
  top: -1px;
  bottom: 0;
  border-right: var(--base-border);
}

/* Fix there not being a border between the app toolbar and the dropdowns */
#foldout-container {
    margin-top: 1px;
}

.toolbar-dropdown.open>.toolbar-button::before {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 1px);
    height: 1px;
    background: var(--toolbar-button-active-background-color);
}

.toolbar-dropdown.open:first-child>.toolbar-button::before {
    width: 100%;
}

/* Fix 2-up image diffs having no minimum size and as a result being incomprehensible */
.panel.image .image-diff-two-up :is(.image-diff-previous, .image-diff-current) {
    min-width: 200px;
}

/* Remove white background behind images in image diff */
:is(.image-diff-onion-skin, .image-diff-swipe) .sizing-container .image-container, .panel.image :is(.image-diff-previous, .image-diff-current) img {
    background-image: none;
    background: var(--background-color) !important;
}

/* Fix swipe/onion skin image diff slider min-width */
:is(.image-diff-swipe, .image-diff-onion-skin) .slider {
    min-width: 200px;
}


/********
 * Code *
 ********/
body.theme-dark {
    --selection-background-color: #00477e;
    --diff-background-color: #181D26;
    --diff-gutter-background-color: var(--diff-background-color);
    --diff-hunk-background-color: #0c1321;
    --diff-hunk-gutter-background-color: var(--diff-hunk-background-color);
    --diff-delete-background-color: #2f090a;
    --diff-add-background-color: #0c2b13;
    --diff-add-gutter-background-color: var(--diff-add-background-color);
    --diff-delete-gutter-background-color: var(--diff-delete-background-color);
    --diff-border-color: transparent;
    --diff-add-border-color: transparent;
    --diff-delete-border-color: transparent;
    --diff-text-color: #495c80;
    --diff-line-number-color:#5a7cb7;
    --diff-delete-text-color: #bd0005;
    --diff-add-text-color: #00d830;
    --diff-add-inner-background-color: #064615;
    --diff-delete-inner-background-color: #41090b;
    --diff-hover-text-color: white;
    --syntax-variable-color: #659fbf;
    --syntax-property-color: #657dbf;
    --syntax-keyword-color: #309eb3;
    --syntax-atom-color: #0086FF;
    --syntax-type-color: #5EB593;
    --syntax-string-color: #0FB1FC;
    --syntax-def-color: #549AD6;
    --syntax-alt-variable-color: #549AD6;
    --syntax-number-color: #67BFA5;
    --syntax-comment-color: #47556E;
}

.CodeMirror {
    --background-color: var(--diff-background-color);
}

.diff-code-mirror .CodeMirror {
    font-size: 12px;
    line-height: 18px;
    font-family: "Comic Code Light";
}

.cm-property, .cm-s-default .cm-string.cm-property, .cm-s-default .cm-string-2.cm-property {
    color: var(--syntax-property-color);
}

.cm-s-default .cm-m-javascript.cm-type {
    color: var(--syntax-type-color);
}

.cm-s-default .cm-def {
    color: var(--syntax-def-color);
}

.cm-s-default .cm-number {
    color: var(--syntax-number-color);
}

.diff-delete.CodeMirror-line::before, .diff-add.CodeMirror-line::before {
    content: "-";
    display: block;
    background: var(--diff-delete-background-color);
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 2px 0 3px;
    color: var(--diff-delete-text-color);
}

.diff-add.CodeMirror-line::before {
    content: "+";
    background: var(--diff-add-background-color);
    color: var(--diff-add-text-color);
}

.CodeMirror-focused .CodeMirror-selected, .CodeMirror.dialog-opened .CodeMirror-selected {
    background: var(--selection-background-color);
}