Install

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

User script

A user script can be installed in browsers that are not supported by available style managers, like Safari. 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).

• Firefox
• Chrome
• Opera

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

Cascadea

This is a style manager exclusively for Safari:

• It supports the usercss format .user.css file extension) since version 1.3.
• It supports style configuration menu, since 1.4. Read more

Installation

We've archived all of our styles on userstyles.org due to their unsavory practices.

install the style using one of these methods:

📦 Install the usercss which supports automatic updates and customization.
📦 Install GitHub-Dark Script which supports automatic updates and customization. Refer to its README.
📦 Install manually from GitHub with no customization, but useful for development & installation in Cascadea. The style is in Mozilla format.
📦 Install via custom build with customization from configuration file. Refer to this wiki page for more details.

Options

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).
• ⚠️ Make sure to wrap the image with url().

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 through 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 font size

Choose a code font size

• default is only meant to be a placeholder value. It is not a valid setting!
• Enter a font size number plus unit, e.g. 10px, 2em, 1.5rem, etc.

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.

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 customizations, refer to the Editing page for detailed instructions.

Firefox

• Click on the brower's Stylus icon.
• Use the link below "Write style for" to open the editor 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

• The steps are the same as for the Firefox directions, except if you built the style:

  • If you used Grunt, set the build.json file's "webkit" option to true, no further editing is needed.

  • If done manually.... 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!