Theme

Theme provides a theme switcher powered by CSS Variables.

Example

import { Theme } from 'dripcap';

Theme.registerScheme('base16-ocean-light', {
  name: 'Base16 Ocean Light',
  css: [`${__dirname}/ocean-light.css`]
});

Theme.setId('base16-ocean-light');

Class Methods

Theme.id()

  • Returns: id String - the current theme id.

Theme.setId(id)

  • id String - Theme id

Sets the current theme id to id.

Theme.registerScheme(id,scheme)

  • id String - Theme id
  • scheme Object - Scheme parameters
    • name String - Name of the theme
    • css String[] - List of the css paths

Adds a new theme to the registry.

Theme.unregisterScheme(id)

  • id String - Theme id

Removes the theme associated with id from the registry.

CSS Example

/*
https://chriskempson.github.io/base16/
base16-ocean
*/

:root {
  --color-default-background:   #2b303b;
  --color-lighter-background:   #343d46;
  --color-selection-background: #4f5b66;
  --color-comments:             #65737e;
  --color-dark-foreground:      #a7adba;
  --color-default-foreground:   #c0c5ce;
  --color-light-foreground:     #dfe1e8;
  --color-light-background:     #eff1f5;

  --color-variables:  #bf616a;
  --color-integers:   #d08770;
  --color-classes:    #ebcb8b;
  --color-strings:    #a3be8c;
  --color-support:    #96b5b4;
  --color-functions:  #8fa1b3;
  --color-keywords:   #b48ead;
  --color-deprecated: #ab7967;

  --color-debug: var(--color-dark-foreground);
  --color-info:  var(--color-functions);
  --color-warn:  var(--color-integers);
  --color-error: var(--color-variables);

  /* This takes effect only on macOS */
  --vibrancy: 'dark';
}

results matching ""

    No results matching ""