Creating Themes

Prerequisites

This guide assumes that you are familiar with SASS (Dart SASS) and have environment to compile it to a CSS file.

Creating A Theme

In most cases, you want to customize code appearance to match your site's color scheme, but overwriting an existing theme is kinda redundant. Thanks to the powerful CSS extension, SASS, it's very simple to create your own theme. 🎨

Once you create a SCSS file for your theme, load the template file by the @forward atrule with configuring variables by the with function:

@forward '~@ryusei/light/src/css/template/ryusei' with (
  $background: #1f272f,
  $color: #bdd7f0,
  $font-size: 14px,
  $line-height: 1.5,
  $selection-background: #4a5c6d,


  // The scrollbar settings only for the webkit
  $scrollbar-size: 10px,
  $scrollbar-track-background: #303f4d,
  $scrollbar-thumb-background: #647788,
  $scrollbar-corner-background: #222a33,


  // The code element that contains all lines
  $code-padding: 1em 0,
  $code-overlay-padding: 1.8em 0,


  // The gutter that contains line numbers
  $gutter-background: #222a33,
  $gutter-row-color: #7b92a8,
  $gutter-row-padding: 0 .5em,
  $gutter-row-background-active: #2b3742,
  $gutter-row-background-added: #213d45,
  $gutter-row-background-deleted: #3f353e,
  $gutter-row-color-active: #a9c7e3,
  $gutter-row-color-added: #2abac4,
  $gutter-row-color-deleted: #f88792,


  // The code caption
  $figcaption-background: #303f4d,
  $figcaption-color: #93aec7,
  $figcaption-padding: .5em 1.5em,


  // Lines
  $line-side-padding: 1.5em,
  $line-side-padding-gutter: 1em,
  $line-border-left-width: 2px,
  $line-background-active: #28333d,
  $line-background-added: #213d45,
  $line-background-deleted: #3f353e,
  $line-border-left-color-active: #5fbef5,
  $line-border-left-color-added: #235a63,
  $line-border-left-color-deleted: #61444d,


  // The language name
  $name-background: #303f4d,
  $name-border-radius: 0 0 4px 4px,
  $name-color: #93aec7,
  $name-font-size: .8em,
  $name-padding: .3em 1em,


  // The overlay element where a button or a language name is displayed
  $overlay-padding: 0 1.5em,


  // Buttons, such as a copy button
  $button-background: #7a91a6,
  $button-background-hover: #5fbef5,
  $button-border-radius: 0 0 4px 4px,
  $button-font-size: .8em,
  $button-color: #1f272f,
  $button-color-hover: #2b3742,
  $button-margin: 0 .5em,
  $button-min-width: 4.5em,
  $button-padding: .3em 1em,


  // Tokens
  $token-keyword: #5fbef5,
  $token-constant: #f88792,
  $token-symbol: #f88792,
  $token-comment: #7b92a8,
  $token-tag: #5fbef5,
  $token-selector: #2abac4,
  $token-atrule: #f88792,
  $token-attr: #5291e5,
  $token-prop: #5291e5,
  $token-value: #c5d559,
  $token-variable: #5291e5,
  $token-entity: #9a68f5,
  $token-cdata: #7b92a8,
  $token-prolog: #7b92a8,
  $token-string: #c5d559,
  $token-number: #f88792,
  $token-boolean: #f88792,
  $token-function: #2abac4,
  $token-class: #29b477,
  $token-decorator: #5d639e,
  $token-regexp: #c5d559,
  $token-operator: #5291e5,
  $token-bracket: #7b92a8,
  $token-delimiter: #7b92a8
);
SCSS

Although the example above includes all variables, you don't have to define all of them. Just pluck some of them you'd like to customize.

Of course, you can define additional styles like this:

@forward '~@ryusei/light/src/css/template/ryusei' with (
  ...
);


.ryuseilight {
  border-radius: .5em;
}
SCSS

Once it's complete, compile the file and import it.

That's all! ✨