Home

Home | Toggles | Install | Extras

Sections: Using the Script ( Enable GitHub-Dark | Color | Background image | Background type | Background image attachment | Themes | Code font name | Code tab size | Code wrap | Toggle code wrap | Toggle monospace font | Toggle diff files | Reset All Settings | Force Update ) | Keyboard shortcuts | Debugging

Script Setup

Once GitHub Dark Script is installed, open the options menu by clicking on your avatar & choosing "GitHub Dark Settings", or by pressing g, then 0 (zero) within one second of each other.

These options are the same as the Stylish userstyle options with two additions: Enable and Wrap (explained below)

Enable GitHub-Dark

• Click the checkbox to toggle the GitHub-Dark script on or off.
• The script is enabled by default.
• This setting can also be toggled using a keyboard shortcut. Press g, then - (minus) within one second of each other.
• When using the keyboard shortcut, the state is not maintained once the page has reloaded. It was meant to temporarily disable the dark style for comparison. If you want to maintain the disabled state, click the checkbox in the panel.

Color

• Click inside the input to either enter a hex color or choose a color using the colorpicker.
• The setting will take effect once the mouse has been released (mouseup).
• The default color is #4183C4.

Background image

• Enter a URL or image data URI (without quotes) to set the background image.
• There are restrictions on images that can be used due to GitHubs Content Security Policy. See this reference for more details & alternatives.
• You can also click on the "?" link to get to that same reference page.
• The image will be immediately applied, if it can be loaded.

Background type

• There are two options: "Tiled" and "Fit window"
• Tiled - this option adds sets the background image to repeat, makes the size "auto" and sets the starting position at the top left corner.
• Fit window - this option does not allow the background image to repeat, sets the size to "cover" meaning it makes the background image as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. This option also sets the starting position to the top center.
• The setting will immediately take effect.

Background image attachment

• These are two options: "Scroll" and "Fixed"
• Scroll - the background image will scroll as the page scrolls; horizontal and vertical.
• Fixed - the background image remains fixed no matter how the page scrolls.
• The setting will immediately take effect.

Themes

• There are 3 areas where different syntax highlighting themes are available.
  • GitHub theme: GitHub uses their own PrettyLights syntax highlighter for a majority of their site, including gists.
  • CodeMirror theme: Used by all GitHub online editors for syntax highlighting.
  • Jupyter theme: Syntax theme used by embedded Jupyter pages (example page).
• There are a limited number code syntax highlighting themes available for each area.
• The setting will immediately take effect once the selected theme has loaded.
• To see all available GitHub themes, use this demo.
• To request a theme open an issue.
• To submit a theme, please see the contributing guidelines first, then use one of the following templates to create a theme:
  • GitHub template (based on GitHub's PrettyLights syntax highligter) or try out the GitHub-syntax-theme-generator; either way you'll likely be manually creating the theme.
  • CodeMirror template.
  • Jupyter template (based on Pygments).

Code font name

• Add the name of a system installed font (check out this list).
• You can also click on the "?" link to get to that same page with a list.
• To add more than one font to the stack:
  • Internally, the custom font name is wrapped in quotes just in case a font name like Lucida Console is used.
  • So for multiple fonts, separate each name with a quote-comma-quote (e.g. Menlo","Monaco).
• This script does not load external fonts, so only already-installed system fonts will work.
• The setting will immediately take effect.

Code tab size

• When code uses tabs, the number of spaces the tab uses can be set using this option.
• Internally, this uses the css "tab-size" setting, but this only applies to code blocks.
• The setting will immediately take effect.

Code wrap

• When enabled, code that extends beyond the code block horizontally will wrap to the next line.
• By default, the style is set to not wrap code (changed in script v1.0.0-beta; GitHub-Dark css v1.14.45. See issue #253).
• Icon
  • Each code block will have an attached icon in the upper right corner ().
  • When the icon is hovered and code wrapping is enabled, the icon will turn green.
  • When the icon is hovered and code wrapping is disabled, the icon will turn red.
  • Clicking on the icon will toggle code wrapping.

Toggle code wrap

• When enabled, a code wrap toggle button is added to every code block on the page.
• Clicking the button will target that individual code block and toggle the code wrapping.
• The state of the toggles are not saved, so reloading the page will reset it.
• For more details, please see the code wrap toggle documentation.

Toggle monospace font

• When enabled, a monospace font toggle button is added to every comment block on the page - found on issue or file diff pages.
• Clicking the button will change the font inside the comment text area to a monospace font or back to the default.
• The state of the toggles are not saved, so reloading the page will reset it.
• For more details, please see the monospace font toggle documentation.

Toggle diff files

• When enabled, toggle buttons are added to each file block found on a file diff page.
• Clicking the button will toggle (expand or collapse) the code block.
• In "enabled" mode, click or Shift + click will toggle code blocks to match the state of the clicked on button.
• In "accordion" mode, all but the first file block will collapse. Clicking on any toggle expand the file and collapse all others.
• The state of the toggles are not saved, so reloading the page will reset it.
• For more details, please see the diff file view toggle documentation.

Force Update

• By default, this script checks GitHub-Dark's version number contained in its package.json a maximum of once per day (twenty-four hours).
• If an update is available and the script is still within its twenty-four hour period, clicking this button will immediately load the github dark core style & refresh the selected theme.
• A drop-up menu button is included which reveals an empty text box. Paste in a complete "raw" GitHub Dark style, with included changes to test. The style will automatically be processed and applied (triggered by a "paste" event). This modified style is only available until the page is reloaded - most GitHub pages are loaded via ajax.

Reset All Settings

• Clicking this button will modify all settings back to their default values.
• This can not be undone, so make sure to save the URL to your background image, or remember the set color, if you wish to restore them.
• Using this button will not refresh the style that has already been saved.

Keyboard shortcuts

• Open settings panel: g, then 0 (zero) within one second of each other
• Toggle GitHub Dark style: g, then - (minus) within one second of each other.
• Press ? to see these and other built-in GitHub shortcuts.

Debugging

• In version 2.0+, you'll need to use the userscript browser addon menu to toggle the debug logging.
• Click on "GitHub Dark Script debug logging".
  • Chrome (Tampermonkey)
  • Firefox (Greasemonkey)
• A prompt popup will open:
  • Enter "true" to enable console logging.
  • Enter "false" to disable console logging.
• Press F12 to open the browser development panel, then check the console tab.
• The debug mode will persist until the above steps are repeated to toggle the mode.