Build

Build a Custom Theme

Getting Started

• Download or fork or clone this repository locally.
• 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",
      "color"  : "#008080",
      "font"   : "Menlo",
      "image"  : "url(https://raw.githubusercontent.com/StylishThemes/GitHub-Dark/master/images/backgrounds/bg-tile1.png)",
      "tiled"  : true,
      "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

• Add an available Ace editor syntax highlighting theme.
• A full list can be found here (only the dark themes were added).
• Set this option to "default" or "" (empty string) to keep the original Ace editor theme, but with a darker background.
• 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.

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.

Grunt tasks

• All tasks create a css file within the repository's root directory.

Grunt (default)

• Run grunt to build the custom theme using the build.json settings.
• This is similar to the way that userstyles.org builds the style from your selections, except you'll need to manually copy & paste the file contents into the browser's stylish editor.
• This method simply removes the requirement of using the userstyles.org site.

Grunt clean

• Run grunt clean to run the perfectionist script and reformat the css. The script will:
  • Wrap selectors at 80 characters.
  • Reindent the css.
  • Remove extra carriage returns.

Grunt minify

• Run grunt minify to build your custom theme using the build.json settings, then minify the css.
• The main issues with doing this are:
  • Pasting this style into the Chrome editor (maybe all webkit editors) will truncate the style, so this method is not useful.
  • In Firefox, you will be limited to not being able to easily find & edit the style to customize it even further, within the stylish editor.

Grunt user

• Run grunt user to create a style that can be directly copy & pasted into the http://userstyles.org/styles/37035 style.
• Editing of the userstyles.org site styles is currently reserved for the owners of the StylishThemes organization.

Grunt usermin

• Run grunt usermin to create a style that can be directly copy & pasted into the http://userstyles.org/styles/37035 style.
• Note: This minified css appears to work on userstyles.org without any issues, but when the user tries to view the css there ("Show CSS" toggle), it gets truncated (horizontally).

Grunt watch

• Adds a watch task to the github-dark.css file.