Themes

Installation

Themes CSS files are located on dist/css/themes/ directory. See this guide for more details about installation.

Preview

Ryusei

console.log( 'hello world!' );
/**
 * The extension for highlighting lines.
 */
export function ActiveLines( { event, root, options }: Renderer ): void {
  const lines = ( root && parseData( root ) ) || options.activeLines;


  if ( isArray( lines ) ) {
    const activeLines = normalize( lines );


    event.on( 'gutter:row:open', ( html, classes, index ) => {
      if ( activeLines[ index ] ) {
        classes.push( activeLines[ index ] );
      }
    } );
  }
}
TypeScript

Ryusei （流星, 流=flow, 星=star） means a shooting star in Japanese.

Ginga

console.log( 'hello world!' );
/**
 * The extension for highlighting lines.
 */
export function ActiveLines( { event, root, options }: Renderer ): void {
  const lines = ( root && parseData( root ) ) || options.activeLines;


  if ( isArray( lines ) ) {
    const activeLines = normalize( lines );


    event.on( 'gutter:row:open', ( html, classes, index ) => {
      if ( activeLines[ index ] ) {
        classes.push( activeLines[ index ] );
      }
    } );
  }
}
TypeScript

Ginga （銀河, 銀=silver, 河=large river） means a galaxy in Japanese.

Shinonome

console.log( 'hello world!' );
/**
 * The extension for highlighting lines.
 */
export function ActiveLines( { event, root, options }: Renderer ): void {
  const lines = ( root && parseData( root ) ) || options.activeLines;


  if ( isArray( lines ) ) {
    const activeLines = normalize( lines );


    event.on( 'gutter:row:open', ( html, classes, index ) => {
      if ( activeLines[ index ] ) {
        classes.push( activeLines[ index ] );
      }
    } );
  }
}
TypeScript

Shinonome （東雲, 東=east, 雲=cloud） is a traditional Japanese word that means the time when the night sky gradually brightens from the east, or the sky/cloud itself at the time, which is usually translated into "dawn".

Rikka

console.log( 'hello world!' );
/**
 * The extension for highlighting lines.
 */
export function ActiveLines( { event, root, options }: Renderer ): void {
  const lines = ( root && parseData( root ) ) || options.activeLines;


  if ( isArray( lines ) ) {
    const activeLines = normalize( lines );


    event.on( 'gutter:row:open', ( html, classes, index ) => {
      if ( activeLines[ index ] ) {
        classes.push( activeLines[ index ] );
      }
    } );
  }
}
TypeScript

Rikka （六華, 六=six, 華=flower） is a beautiful synonym of 雪 （snow） in Japanese. It comes from a shape of a hexagonal snow crystal.

Kirisame

console.log( 'hello world!' );
/**
 * The extension for highlighting lines.
 */
export function ActiveLines( { event, root, options }: Renderer ): void {
  const lines = ( root && parseData( root ) ) || options.activeLines;


  if ( isArray( lines ) ) {
    const activeLines = normalize( lines );


    event.on( 'gutter:row:open', ( html, classes, index ) => {
      if ( activeLines[ index ] ) {
        classes.push( activeLines[ index ] );
      }
    } );
  }
}
TypeScript

Kirisame （霧雨, 霧=mist, 雨=rain） means drizzle in Japanese.

Caveats

All light themes can not satisfy the color contrast audit of Lighthouse. If you'd like to get a better score, select a dark theme.