Build

Build a Custom Theme

Getting Started

• Clone, Fork or download this repository.

• Run npm install within the directory (you'll need to have node.js installed).

• Add build options:

  • Open up your editor, then copy and paste the following code into it:

    {
      "theme"    : "idle-fingers",
      "themeCM"  : "twilight",
      "themeJP"  : "twilight",
      "color"    : "#008080",
      "font"     : "Menlo",
      "image"    : "url(https://raw.githubusercontent.com/StylishThemes/GitHub-Dark/master/images/backgrounds/bg-tile1.png)",
      "tiled"    : true,
      "codeWrap" : false,
      "attach"   : "scroll",
      "tab"      : 4,
      "webkit"   : false
    }

  • Make the desired modifications to these settings. See the Build Options section for more details.

  • Save that file into the GitHub-Dark root directory as build.json.

  • These options allow you to customize the GitHub dark build.

• Now run grunt to build your custom file.

• The file will be named as follows github-dark-{theme}-{color}.build.css.

• Open the newly created file and copy & paste the contents into your browser's Stylish editor.

Build Options

theme

• Set GitHub syntax highlighting theme.
• Set this option to match any of the themes available in the themes/github folder.
• GitHub uses their own "prettylights" syntax highlighter, so making an existing syntax highlighting theme for this system usually requires manually editing the colors. For custom themes, try out the github-syntax-theme-generator.
• The name is case insensitive & any spaces in the name will be replaced with a dash (-).

themeCM

• Set CodeMirror syntax highlighting theme.
• Set this option to match any of the themes available in the themes/codemirror folder.
• A full list can be found here (only the dark themes were added to this repository).
• The name is case insensitive & any spaces in the name will be replaced with a dash (-).

themeJP

• Set Jupyter Notebook syntax highlighting theme.
• Set this option to match any of the themes available in the themes/jupyter folder.
• This theme uses the pygments syntax highlighter. Many pygments themes are available, but we have not included all available themes in our repo. Look at our Syntax-Themes repository in the css-github folder for ready-to-add themes; all you need to do is request it!
• The name is case insensitive & any spaces in the name will be replaced with a dash (-).

color

• Add your desired base color.
• This value can any value CSS color (hex, rgb, or hsl).
• Any non-alphanumeric characters will be replaced when added to the build file name.

font

• Add your desired monospaced font for code, spaces are allowed.

• This font name is added to the beginning of a font stack, so if the font is not installed on your system it will attempt to use the next font in the stack.

• The font stack definition is as follows:

  font-family: "/*[[font-choice]]*/", Monaco, Consolas, "Liberation Mono", Menlo, Courier, monospace !important;

image

• Add any image url or base64 encoded image; it must be wrapped within a url().
• Please refer to the Image wiki page for specifics on getting around the Content Security Policy.
• Set this to none for no image.

tiled

• When true, the background image is set to repeat repeat auto left top.
• When false, the background image is centered & resized no-repeat cover center top.

codeWrap

• When true, code on GitHub will word wrap.
• When false, code on GitHub will not word wrap.

attach

• When set to "scroll" the background image is set to scroll with the page.
• When not set to scroll, the background image will be fixed.

tab

• This value sets the code size tabs.

webkit (previously chrome)

• When false, the resulting CSS file will include the outer @-moz-document ... { ... } wrapper for Firefox.
• When true, the resulting CSS file will not include the outer wrapper to make it easier to copy & paste the style into the webkit Stylish editor.
• Note: This option is ignored when building a style to be added to userstyles.org.