Install

Sections: User Script | Stylish (automatic or manual installation - Firefox & webkit browsers)

User script

A user script has an advantage over the Stylish addon version in that you can dynamically change all of the options, like color, background image, syntax highlighting theme, etc. Additionally, the script adds a code wrap toggle button to all blocks of code.

This method requires a user script extension/addon like Greasemonkey (Firefox) or Tampermonkey (most browsers).

Check out the GitHub-Dark-Script repository for details on how to install and use the script.

Stylus

This addon is a fork of Stylish before it became part of SimilarWeb in Jan 2017 (see issue #455).

At this time it is only available for Chrome:

• Firefox
• Chrome
• Opera

Since it is a fork, it interacts with userstyles.org exactly as it did before.

Base color scheme

Use the color picker to choose a "base color". Essentially all the links and highlighted panels on GitHub will use this selected color.

GitHub syntax theme

Select one of the supported GitHub syntax themes. This syntax highlighting theme is used in GitHub's markdown.

CodeMirror syntax theme

Select one of the supported CodeMirror syntax themes. This syntax highlighting theme is used when editing Gist's and wiki pages.

Jupyter syntax theme

Select one of the supported Jupyter syntax themes. This syntax highlighting theme is used in Jupyter Notebook pages.

This is the only theme where you can preview the style in this demo.

Background image

• The "default" background (base64 encoded image) has light diagnonal blocks.
• The "original" background (base64 encoded image) has vertically and horizontally oriented blocks in various grey scale.
• You can provide a link to your own background image. Please see the Image wiki page for more details on how to do this to get around GitHub's Content Security Policy.
• Or, upload an image (this converts the image into a base64 encoded code).

Background image type

Choose how to apply the background image:

• Tiled - Tiles the background image both horizontally and vertically (using background-repeat: repeat).
• Fit - Set the background to fit the window (using background: cover).

Background image attachment

Choose how to attach the background image:

• Fix - The background remains fixed while scrolling the page both horizontally & vertically.
• Scrolled - The background scrolls while the page scrolls.

Code tab size

Choose an available code tab size:

• Choices are 2, 3, 4, 5 and 8 - if you don't see your choice, open an issue to let us know.
• This sets the tab size only within code blocks and only when tabs are used in the code.

Code font

Choose a code font family

• This font must be installed in your OS to be visible.
• The script does not use @font-face to load in external fonts due to GitHub's Content Security Policy (CSP).
• The chosen name is added first to a font stack and applied to all code blocks.

Code wrap

Choose how code is to be wrapped

• Wrap - globally set long code blocks to automatically wrap at the edge of the viewport.
• No Wrap - keep the default behavior where you must scroll horizontally to view the overflowing code.

Install or Update

Once all of your desire choices have been made, click the "Install Style" (Stylus) or "Install with Stylish" button if installing for the first time.

The button will change to "Update Style" if the userstyle is already installed.

Since userstyles.org was updated with a new layout, it appears to not remember these custom settings, so you will likely need to re-apply each customization manually.

Manual installation

• Manual installation varies between browsers as described below.
• To build a custom style package, refer to the Build section.
• To manually edit the style and add cusomizations, refer to the Editing page for detailed instructions.

Firefox

• In the browser, open the User Styles option page:
  • Either click on the Stylish icon.
  • Or, open the Firefox menu, click on Add-ons, then choose the "User Styles" tab.
• The "Install From URLs..." button can be used:
  • It installs the style directly from userstyles.org (using default settings).
  • Enter https://userstyles.org/styles/37035/github-dark.
• Or, use the "Write New Style" button to open a new window:
  • Name the Style, "GitHub-Dark" or whatever you desire.
  • Copy (Ctrl+A then Ctrl+C) the default or (Grunt or manually) modified style, then paste (Ctrl+V) it into the space below the Style Name.
  • Check for Errors, Preview or Save.
  • Finally, open your favorite GitHub page and enjoy happy retinas!

Chrome and modern Opera

• Further style editing:

  • If you used Grunt, and set the "webkit" option to true, no further editing is needed.

  • Because webkit does not use @-moz-document, if not already done in the editing step, you will need to remove the entire first line of css

    @-moz-document regexp("^https?://((gist|guides|help|status|developer)\.)?github\.com((?!generated_pages\/preview).)*$"), domain("render.githubusercontent.com") {

  • This will leave the comment at the top /*! Github Dark Theme... of the style.

  • Now remove the closing bracket } from the end of the file.

• In the browser, open the User Styles option page.
  • Click on the Stylish icon, then choose "Manage installed styles".
  • Or, open the browser options, find the Extensions page ("More Tools" > "Extensions" in Chrome) and choose Stylish options.
• Click on the "Write new style" button:
  • Name the Style, "GitHub-Dark" or whatever you desire.
  • Copy (Ctrl+A then Ctrl+C) the default or (Grunt or manually) modified style, then paste (Ctrl+V) it into the space next to the Style Name.
  • Now you'll need to update the "Applies to" section:

    • Select "URLs matching the regexp", then enter the following into the input next to it.

      ^https?://((gist|guides|help|status|developer).)?github.com((?!generated_pages/preview).)*$

    • Click "Add".

    • Select "URLs on the domain", then enter

      render.githubusercontent.com

    • If you are using an Enterprise version, then click "Add" again and enter the url of your site.

  • Finally, open your favorite GitHub page and enjoy happy retinas!