GitHub Desktop Dark Theme - NO LONGER MAINTAINED

css-inject.js

/**
  * To apply the theme:
  * 1) Open dev tools with CTRL + SHIFT + I
  * 2) Go to the console
  * 3) Paste the following code
  * Note: You will have to do this again whenever Github Desktop updates
  */

const fs = require('fs');
const path = require('path');
const res = process.resourcesPath;
const stylesheet = 'https://cdn.rawgit.com/ObserverOfTime/07e862ec7240d995e672818f43513bc7/raw/06c86e69c94935962b07b5302c195f7d6465eacd/desktop-dark.css';

let index_file;
if (fs.existsSync(path.join(res, 'app/index.html'))) {
	index_file = path.join(res, 'app/index.html');
} else if (fs.existsSync(path.join(res, 'app/dist/index.html'))) {
	index_file = path.join(res, 'app/dist/index.html');
} else {
	throw new Error("Couldn't find index.html");
}

// Clean up old links and append new one to head
let html = fs.readFileSync(index_file, 'utf8');
html = html.replace('stylesheet"></head>', 'stylesheet">\n  </head>').replace(/^.*git.*$/mg, '').replace(/^\s*[\r\n]/mg, ''); 
html = html.replace('</head>', '<link rel="stylesheet" type="text/css" href="' + stylesheet + '">\n  </head>');

// Update index.html and show an error on failure
try {
  fs.writeFileSync(index_file, html, 'utf8');
  location.reload();
} catch(EACCESS) {
  if(index_file.startsWith('/tmp')) {
    console.error("The theme cannot be applied to the AppImage since 'index.html' is saved in a temporary directory.")
  } else {
    console.error("You need to have write access to '" + index_file + "' for the theme to be applied.")
  }
}

desktop-dark.css

/**
 * All of the CSS variables are copied in from the built-in ui.css but many are unchanged.
 * Variables that categorically shouldn't be overridden are commented out.
 */

:root {
  /* these should probably stay the same
  --color-new: #28a745;
  --color-deleted: #d73a49;
  --color-modified: #dbab09;
  --color-renamed: #0366d6;
  --color-conflicted: #f66a0a;
  */
  --text-color: #eaeaea;
  --text-secondary-color: #aaaeb3;
  --text-tertiary-color: #959da5;
  --background-color: #24292e;
  /* layout should stay the same
  --button-height: 25px; */
  --button-background: #0366d6;
  --button-border-radius: 2px;
  --button-hover-background: #0372ef;
  --button-text-color: #fff;
  --button-focus-border-color: #005cc5;
  --link-button-color: #59a7ff;
  --secondary-button-background: #2d2d2d;
  --secondary-button-hover-background: #444444;
  --secondary-button-text-color: var(--text-color);
  --secondary-button-focus-shadow-color: rgba(64, 64, 64, 0.27);
  --secondary-button-focus-border-color: #000000;
  /* fonts should stay the same
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  --font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
  /**
   * Font weight to use for semibold text
   */
  /* fonts should stay the same
  --font-weight-semibold: 600; */
  /**
   * Font weight to use for light text
   */
  /* fonts should stay the same
  --font-weight-light: 300;
  --font-size: 12px;
  --font-size-sm: 11px;
  --font-size-md: 14px;
  --font-size-lg: 28px;
  --font-size-xl: 32px;
  --font-size-xxl: 42px; */
  /** Extra small font size, be very conservative with the use of this */
  /* fonts should stay the same
  --font-size-xs: 9px; */
  /**
   * Background color for custom scroll bars.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color: rgba(142, 142, 142, 0.3);
  /**
   * Background color for custom scroll bars in their active state.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color-active: rgba(226, 226, 226, 0.5);
  
  --box-alt-background-color: #2a3138;
  /**
   * Border color for boxes.
   */
  --box-border-color: #000000;
  --box-border-accent-color: #0366d6;
  /**
   * Background color for selected boxes without keyboard focus
   */
  --box-selected-background-color: #1b1c1d;
  /**
   * Text color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  --box-hover-text-color: #24292e;
  /**
   * Background color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  /**
   * Text color for selected boxes without keyboard focus
   */
  --box-selected-text-color: var(--text-color);
  /**
   * Border color for selected boxes without keyboard focus
   */
  --box-selected-border-color: #959da5;
  /**
   * Background color for selected boxes with active keyboard focus
   */
  --box-selected-active-background-color: #0366d6;
  /**
   * Text color for selected boxes with active keyboard focus
   */
  --box-selected-active-text-color: #fff;
  /**
   * Border color for selected boxes with active keyboard focus
   */
  --box-selected-active-border-color: #959da5;
  /**
   * The height of the title bar area on Win32 platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  /* layout should stay the same
  --win32-title-bar-height: 28px; */
  --win32-title-bar-background-color: #24292e;
  /**
   * The height of the title bar area on darwin platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  /* layout should stay the same
  --darwin-title-bar-height: 22px;
  --spacing: 10px;
  --spacing-double: calc(var(--spacing) * 2);
  --spacing-triple: calc(var(--spacing) * 3);
  --spacing-quad: calc(var(--spacing) * 4);
  --spacing-half: calc(var(--spacing) / 2);
  --spacing-third: calc(var(--spacing) / 3); */
  /* this should probably stay the same
  --border-radius: 3px; */
  --base-border: 1px solid var(--box-border-color);
  --shadow-color: rgba(71, 83, 95, 0.19);
  --base-box-shadow: 0 2px 7px var(--shadow-color);
  /* layout should stay the same
  --toolbar-height: 50px; */
  --toolbar-background-color: #24292e;
  --toolbar-text-color: #fff;
  --toolbar-text-secondary-color: #959da5;
  --toolbar-button-color: var(--toolbar-text-color);
  --toolbar-button-background-color: transparent;
  --toolbar-button-border-color: black;
  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);
  --toolbar-button-hover-color: #fff;
  --toolbar-button-hover-background-color: #2f363d;
  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);
  --toolbar-button-focus-background-color: #2f363d;
  --toolbar-button-active-color: var(--text-color);
  --toolbar-button-active-background-color: var(--background-color);
  --toolbar-button-active-border-color: #000;
  --toolbar-button-progress-color: #2f363d;
  --toolbar-button-focus-progress-color: #444d56;
  --toolbar-button-hover-progress-color: #444d56;
  --toolbar-dropdown-open-progress-color: #e1e4e8;
  /* layout should stay the same
  --tab-bar-height: 29px; */
  --tab-bar-active-color: #0366d6;
  --tab-bar-background-color: #fff;
  /** Win32 has custom scrol bars, see _scroll.scss */
  /* layout should stay the same
  --win32-scroll-bar-size: 10px; */
  /**
   * The z-index for popups. Nothing should be higher, but other z-indexes can
   * be defined in terms of it.
   *
   * 10 seems arbitrary (because it is) but we have to go that high because
   * codemirror is all over the place with their z-indexes and uses at least
   * 0-6.
   */
  /* layout should stay the same
  --popup-z-index: 10;
  --popup-overlay-z-index: calc(var(--popup-z-index) - 1);
  --foldout-z-index: calc(var(--popup-z-index) - 2); */
  /** The highlight color used for focus rings and focus box shadows */
  --focus-color: #0366d6;
  /**
   * Variables for form elements
   */
  /* layout should stay the same
  --text-field-height: 25px; */
  --text-field-focus-shadow-color: rgba(3, 102, 214, 0.25);
  /**
   * Diff view
   */
  --diff-background-color: #222;
  --diff-text-color: #dedede;
  --diff-border-color: #424950;
  --diff-gutter-color: #424950;
  --diff-line-number-color: #929ead;
  /* layout should stay the same
  --diff-line-number-column-width: 50px; */
  --diff-selected-background-color: #2263ad;
  --diff-selected-border-color: #2188ff;
  --diff-selected-gutter-color: #1572dc;
  --diff-selected-text-color: #fff;
  --diff-add-background-color: #042f0d;
  --diff-add-border-color: #2ca248;
  --diff-add-gutter-color: #2ca248;
  --diff-add-gutter-background-color: #00440f;
  --diff-add-inner-background-color: #135a24;
  --diff-add-text-color: var(--diff-text-color);
  --diff-add-hover-background-color: #00801f;
  --diff-add-hover-border-color: #34d058;
  --diff-add-hover-gutter-color: #34d058;
  --diff-add-hover-text-color: var(--text-color);
  --diff-delete-background-color: #48030b;  
  --diff-delete-border-color: #d2283b;
  --diff-delete-gutter-color: #d2283b;
  --diff-delete-gutter-background-color: #61000b;
  --diff-delete-inner-background-color: #7d0c19;
  --diff-delete-text-color: var(--diff-text-color);
  --diff-delete-hover-background-color: #980011;
  --diff-delete-hover-border-color: #f97583;
  --diff-delete-hover-gutter-color: #f97583;
  --diff-delete-hover-text-color: var(--text-color);
  --diff-hunk-background-color: #17191b;
  --diff-hunk-border-color: #3c4248;
  --diff-hunk-gutter-color: #424950;
  --diff-hunk-text-color: #6a737d;
  --diff-hover-background-color: #0269de;
  --diff-hover-border-color: #569ff5;
  --diff-hover-gutter-color: #227ce4;
  --diff-hunk-gutter-background-color: #17191b;
  --diff-hover-text-color: #fff;
  /* layout/animation should stay the same
  --undo-animation-duration: 500ms; */
  /**
   * Ahead/behind view
   */
  --ahead-behind-background-color: #6a737d;
  --error-color: #d73a49;
  /* TOOD: style errors and warnings */
  --form-error-background: #ffdce0;
  --form-error-border-color: #fdaeb7;
  --form-error-text-color: #9e1c23;
  /** Dialog */
  --dialog-warning-color: #f9c513;
  --dialog-warning-text-color: #b08800;
  --dialog-error-color: #d73a49;
  /** Inline paths and code */
  --path-segment-background: #3b4046;
  /* layout should stay the same
  --path-segment-padding: var(--spacing-third); */
  /* layout/animation should stay the same
  --easing-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easing-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easing-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); */
}

input,
textarea,
select {
  background: var(--background-color);
  border-color: var(--box-border-color) !important;
}
body.platform-win32 .select-component select {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKCAMAAACKYC6uAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMABBg4ZJvH5/vidbtgAAAAOklEQVR4AVXMuw2AAAwDUecf9l8YhDgBr7OLUx0/JevvbpN83j2uSyx7Q7fkSD2KIKwJwocgYgkiCZ4+JQLR5CxFcgAAAABJRU5ErkJggg==");
  background-size: 8px 5px;
}

.CodeMirror {
  background: var(--background-color);
}
.diff-context {
  background: var(--diff-background-color);
}
.CodeMirror-code > div:last-of-type {
  border-bottom: 1px solid var(--box-border-color);
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: var(--background-color); /* The little square between H and V scrollbars */
}

#configure-git-user .commit-list-example,
#configure-git-user .commit-list-example .header {
  background: var(--background-color);
}

.commit-summary-description-scroll-view:before {
  /* The original gradient included a half opacity value and hardcoded the background color. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 40px, var(--background-color) 55px);
}

#repository .blankslate-image {
/*   filter: saturate(24) hue-rotate(50deg) saturate(0.3) brightness(0.9) opacity(0.2); */
  filter: invert() hue-rotate(200deg) brightness(5) opacity(0.2);
}

#desktop-app-toolbar {
  border-bottom: 1px solid var(--toolbar-button-border-color);
}
/**
 * With border-right it won't line up between the button and the foldout (by a pixel),
 * and an inset box-shadow will get covered up. Create an inset border with a pseudo element.
 */
#desktop-app-toolbar .foldout::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: var(--base-border);
}
/**
 * The foldout can be wider than the button, so we want a non-rectangular border.
 * First create a line between the foldout and the toolbar.
 */
#desktop-app-toolbar .foldout::before
{
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  border-top: var(--base-border);
}
/**
 * For the menus, we want a border all around,
 * but for the other foldouts I'm relying on existing borders in the UI
 * (the left edge of the window, and the edge of the column under the repo selector)
 * (and the bottom edge of the window)
 */
/* #desktop-app-toolbar .foldout > *, */
.menu-pane {
  border: var(--base-border);
}
/**
 * Then cover up the part of the line between the button and its foldout.
 */
.toolbar-dropdown.open > .toolbar-button > button::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: -1px;
  border-bottom: 1px solid var(--background-color);
  z-index: var(--popup-z-index);
}
/**
 * The menu buttons need some extra borders to complete the non-rectangular shape.
 * (The irregular hexagon, technically.)
 */
#app-menu-bar .toolbar-dropdown.open > .toolbar-button > button::after {
  border-left: var(--base-border);
  border-right: var(--base-border);
}
/**
 * Note: potentially affecting layout!
 * This should be applied regardless of dark mode to avoid weird inconsistencies.
 */
.toolbar-dropdown,
.toolbar-dropdown > .toolbar-button,
.toolbar-dropdown > .toolbar-button > button {
  overflow: visible;
}

/**
 * Lighter text colors in code to improve visibility with the dark theme
 */
.cm-header {
  color: lightsalmon !important;
}
.cm-tag {
  color: lightgreen !important;
}
.cm-qualifier {
  color: turquoise !important;
}
.cm-atom {
  color: aqua !important;
}
.cm-keyword {
  color: tomato !important;
}
.cm-property {
  color: steelblue !important;
}
.cm-attribute {
  color: dodgerblue !important;
}
.cm-string {
  color: lightgray !important;
}
.cm-comment {
  color: lightslategray !important;
}
.cm-link {
  color: violet !important;
}
span[class*="cm-variable"] {
  color : hotpink !important;
}

This is not working on the latest Desktop version on Windows. Running the code does nothing, no errors or output

@Zangoran I'm not maintaining this theme any longer as I've stopped using GitHub Desktop. It's possible that an update broke the injection in some way. Feel free to fork and fix it, if you're able to.

Noticed it wouldn't work either, edited the index.html file manually and it worked (I don't know if this was because of me, but the file was missing a </head> tag...)

That fixed it though 👍 @Zangoran

OK, it should be fixed now.