Tutorial: Create theme package

1. Install Dripcap CLI

$ npm install -g dripcap

2. Create package files with Dripcap CLI

$ dripcap create-package
create-package: Name: dripcap-light-theme
create-package: Description: Light Theme
create-package: Version: (1.0.0)
create-package: License: (MIT)
✔ Package created at ~/.dripcap/packages/dripcap-light-theme
$ cd ~/.dripcap/packages/dripcap-light-theme
$ ls
main.es        package.json

dripcap create-package will create a minimal package structure:

package.json

{
  "name": "dripcap-light-theme",
  "version": "1.0.0",
  "main": "./main.es",
  "license": "MIT",
  "description": "Light Theme",
  "engines": {
    "dripcap": "~0.6"
  }
}

main.es

export default class LightTheme {
  async activate() {

  }

  async deactivate() {

  }
}

3. Add ocean-light.css

The Dripcap default theme is based on base16 Ocean Dark. You can learn more about the base16 scheme in https://github.com/chriskempson/base16 .

It is very easy to create a light one from the dark theme: just reverse the order of the foreground and background colors.

# download a css file for the dark theme
$ curl -O https://raw.githubusercontent.com/dripcap/dripcap/master/dripcap-core/default-theme.css
# rename
$ mv default-theme.css ocean-light.css
$ ls
main.es        ocean-light.css    package.json
# edit ocean-light.css with your favorite editor :)
/*
https://chriskempson.github.io/base16/
base16-ocean
*/

:root {
  /* base16 Ocean Dark
  --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-default-background:   #eff1f5;
  --color-lighter-background:   #dfe1e8;
  --color-selection-background: #c0c5ce;
  --color-comments:             #a7adba;
  --color-dark-foreground:      #65737e;
  --color-default-foreground:   #4f5b66;
  --color-light-foreground:     #343d46;
  --color-light-background:     #2b303b;

  --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: 'light';
}

4. Register the light theme in main.es

activate will be invoked automatically while the application launching unless the package is disabled.

Don't forget to unregister the theme in deactivate.

import { Theme } from 'dripcap';

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

  async deactivate() {
    Theme.unregisterScheme('base16-ocean-light');
  }
}

5. Test the package

Restart Dripcap and choose Base16 Ocean Light in Preferences.

results matching ""

    No results matching ""