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 may be sometimes sort of redundant and inefficient. Thanks to the powerful CSS extension, SASS, it's very simple to create your own theme. 🎨

First, create a SCSS file and forward a core file:

// Load core files from the node directory:
@forward '~@ryusei/code/src/core';
SCSS

Then before the line, configure variables by the @use atrule and with function. You'll see many variables tailing the ! default syntax in the core files, but you don't have to define all of them. Just pluck some you'd like to override:

// Change only main, accent and caret colors:
@use '~@ryusei/code/src/core/foundaton/colors' with (
  $main: #ed5f58,
  $accent: #42b9c7,
  $caret: #9faccc
);


@forward '~@ryusei/code/src/core';
SCSS

Once it's complete, compile the file and import it. That's all! ✨

Do not forget forwards the core file, or it will generate nothing.

References

Here is a list of main variables. They are not all but usually enough to customize the appearance.

Typography

@use '~@ryusei/code/src/core/foundaton/typography' with (
  $font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', sans-serif,
  $font-family-monospace: SFMono-Regular, Consolas, monospace,
  $font-size: 14px,
  $line-height: 1.5
);
SCSS

Colors

@use '~@ryusei/code/src/core/foundaton/colors' with (
  $main: #ed5f58,
  $accent: #42b9c7,


  // Dark colors mainly for backgrounds
  $dark01: #202635,
  $dark02: #232a3b,
  $dark03: #2a3247,
  $dark04: #2e374f,
  $dark05: #333d57,
  $dark06: #3e4a69,
  $dark07: #4b5a80,


  // Light colors mainly for borders and guides
  $light01: #f2f2f2,
  $light02: #cad2e6,
  $light03: #9faccc,
  $light04: #7890cc,
  $light05: #7890cc,


  $shadow01: #000,


  $text01: #cad2e6,
  $text02: #9faccc,
  $text03: #7890cc,
  $text04: #7890cc,
  $text-strong: #ed5f58,
  $text-em: #42b9c7,


  // Marker colors used for highlighting texts, such as match results
  $marker01: #ed5f58,
  $marker02: #42b9c7,
  $marker03: #b9cd32,
  $marker04: #527adf,


  $selection01: #344879,
  $selection02: #3e589b,


  $caret: #9faccc
);
SCSS
To create a light theme, set light colors to $dark variables, and vise versa.

Tokens

@use '~@ryusei/code/src/core/object/token' with (
  $keyword: #d774e8,
  $constant: #ed5f58,
  $symbol: #ed5f58,
  $comment: #7890cc,
  $tag: #d774e8,
  $selector: #cfb053,
  $atrule: #d774e8,
  $attr: #b9cd32,
  $prop: #b9cd32,
  $value: #67cb78,
  $variable: #ed5f58,
  $entity: #527adf,
  $cdata: #7890cc,
  $prolog: #7890cc,
  $string: #67cb78,
  $number: #42b9c7,
  $boolean: #ed5f58,
  $function: #2abac4,
  $class: #b9cd32,
  $decorator: #527adf,
  $regexp: #67cb78,
  $operator: #42b9c7,
  $bracket: #9faccc,
  $delimiter: #9faccc
);
SCSS

Padding

@use '~@ryusei/code/src/core/object/editor' with (
  $padding-top: 1em,
  $padding-bottom: 1em,
);


@use '~@ryusei/code/src/core/object/line' with (
  // If there is a gutter, this value will be used for the padding-left
  $padding-left-with-gutter: 5px,


  $padding-left: 1.5em,
  $padding-right: 1.5em,
);
SCSS