Themer

Takes a set of colors and generates themes for your development environment...

README

Themer logo


themer GitHub Workflow Status (main branch) Twitter Follow Join the newsletter


themer takes a set of colors and generates editor themes, terminal themes, themes for other apps, and desktop/device wallpapers.

visual description

Table of Contents


- [Support themer](#support-themer)
  - [Example usage with npx](#example-usage-with-npx)
    - Color mappings
    - Tips
  - Terminals
  - Other
  - Community

Support themer


- ⭐️ Star [themer on GitHub](https://github.com/themerdev/themer)
- 👋 Follow @themerdev on Twitter
- 🦁 Send a tip through the Brave Browser, either on the repository page or [themer's Web UI](https://themer.dev)
- 💳 Pay what you want when downloading your theme from themer.dev
- 👑 Purchase a premium theme from themer.dev

Installation


_Don't love the command-line? Check out the Web UI._

  1. ```sh
  2. mkdir my-dotfiles && cd my-dotfiles
  3. npm install themer
  4. ```

If you do not keep your dotfiles under version control, you can simply install themer globally with npm -g install themer.

themer can also be used without installing, via npx—see example below.

Usage


Pass themer a color set, as many templates as you wish, and an output directory.

  1. ```sh
  2. themer \
  3.   --colors <npm package name OR file> \
  4.   --template <npm package name OR file> \
  5.   [--template <npm package name OR file>...] \
  6.   --out <directory>
  7. ```

Your generated theme files, as well as a README on how to install them, will be written to the output directory.

themer can create themes from your custom color sets (see "Create your own color set" below) or from color sets published on npm (see @themerdev/colors-default). The same is true for templates.

Example workflow


Say you wanted to generate a vim theme and desktop background using themer's default color set. First, install themer, the color set, and the templates:

  1. ```sh
  2. cd my-dotfiles
  3. npm install themer @themerdev/colors-default @themerdev/vim @themerdev/wallpaper-block-wave
  4. ```

Then edit your package.json:

  1. ``` json
  2.   ...
  3.   "scripts": {
  4.     "build": "themer -c @themerdev/colors-default -t @themerdev/vim -t @themerdev/wallpaper-block-wave -o gen"
  5.   },
  6.   ...
  7. ```

Then run your new script:

  1. ```sh
  2. npm run build
  3. ```

Now check the gen/ folder for your generated themes. Here's the result:

example usage result

Example usage with npx


  1. ```sh
  2. npx \
  3.   -p themer \
  4.   -p @themerdev/colors-default \
  5.   -p @themerdev/vim \
  6.   -p @themerdev/wallpaper-block-wave \
  7.   themer \
  8.   -c @themerdev/colors-default \
  9.   -t @themerdev/vim \
  10.   -t @themerdev/wallpaper-block-wave \
  11.   -o output
  12. ```

Themer color sets


Premium color sets


NameDarkLight
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
[Jamstacker](https://themer.dev/jamstacker)![Jamstacker(dark
[Victor![Victor![Victor
[Future![Future![Future

Original color sets


NameDarkLight
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
[@themerdev/colors-default](https://github.com/themerdev/themer/tree/main/cli/packages/colors-default)![@themerdev/colors-default![@themerdev/colors-default
[@themerdev/colors-finger-paint](https://github.com/themerdev/themer/tree/main/cli/packages/colors-finger-paint)![@themerdev/colors-finger-paint![@themerdev/colors-finger-paint
[@themerdev/colors-green-as-a-whistle](https://github.com/themerdev/themer/tree/main/cli/packages/colors-green-as-a-whistle)![@themerdev/colors-green-as-a-whistle![@themerdev/colors-green-as-a-whistle
[@themerdev/colors-monkey](https://github.com/themerdev/themer/tree/main/cli/packages/colors-monkey)![@themerdev/colors-monkey![@themerdev/colors-monkey
[@themerdev/colors-night-sky](https://github.com/themerdev/themer/tree/main/cli/packages/colors-night-sky)![@themerdev/colors-night-sky(dark
[@themerdev/colors-polar-ice](https://github.com/themerdev/themer/tree/main/cli/packages/colors-polar-ice)![@themerdev/colors-polar-ice![@themerdev/colors-polar-ice
[@themerdev/colors-right-in-the-teals](https://github.com/themerdev/themer/tree/main/cli/packages/colors-right-in-the-teals)![@themerdev/colors-right-in-the-teals![@themerdev/colors-right-in-the-teals

Ports from third-party themes


NameDarkLight
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
[@themerdev/colors-dracula](https://github.com/themerdev/themer/tree/main/cli/packages/colors-dracula)![@themerdev/colors-dracula(dark
[@themerdev/colors-github-universe](https://github.com/themerdev/themer/tree/main/cli/packages/colors-github-universe)![!themer/colors-github-universe(dark
[@themerdev/colors-lucid](https://github.com/themerdev/themer/tree/main/cli/packages/colors-lucid)![@themerdev/colors-lucid![@themerdev/colors-lucid
[@themerdev/colors-mojave](https://github.com/themerdev/themer/tree/main/cli/packages/colors-mojave)![@themerdev/colors-mojave![@themerdev/colors-mojave
[@themerdev/colors-nova](https://github.com/themerdev/themer/tree/main/cli/packages/colors-nova)![@themerdev/colors-nova(dark
[@themerdev/colors-one](https://github.com/themerdev/themer/tree/main/cli/packages/colors-one)![@themerdev/colors-one![@themerdev/colors-one
[@themerdev/colors-rivet](https://github.com/themerdev/themer/tree/main/cli/packages/colors-rivet)![@themerdev/colors-rivet![@themerdev/colors-rivet
[@themerdev/colors-seti](https://github.com/themerdev/themer/tree/main/cli/packages/colors-seti)![@themerdev/colors-seti(dark
[@themerdev/colors-solarized](https://github.com/themerdev/themer/tree/main/cli/packages/colors-solarized)![@themerdev/colors-solarized![@themerdev/colors-solarized

Create your own color set


To create your own color set, create a JavaScript file that exports a colors object, like so:

  1. ``` js
  2. module.exports.colors = {

  3.   // A color set can have both light and dark variants, but is only required
  4.   // to have one.
  5.   dark: {

  6.     // Colors can be defined in any valid CSS format.

  7.     // accent0-7 should be the main accent colors of your theme. See the table
  8.     // in the "Color mappings" section for how the colors will be used in your
  9.     // new themes.
  10.     accent0: '#FF4050',
  11.     accent1: '#F28144',
  12.     accent2: '#FFD24A',
  13.     accent3: '#A4CC35',
  14.     accent4: '#26C99E',
  15.     accent5: '#66BFFF',
  16.     accent6: '#CC78FA',
  17.     accent7: '#F553BF',

  18.     // shade0-7 should be shades of the same hue, with shade0 being the
  19.     // background and shade7 being the foreground. If you omit the
  20.     // intermediate shades (1 through 6), they will be calculated automatically
  21.     // for you.
  22.     shade0: '#282629',
  23.     shade1: '#474247',
  24.     shade2: '#656066',
  25.     shade3: '#847E85',
  26.     shade4: '#A29DA3',
  27.     shade5: '#C1BCC2',
  28.     shade6: '#E0DCE0',
  29.     shade7: '#FFFCFF'

  30.   },

  31.   // Same as above, except that shade0 should be the lightest and shade7 should
  32.   // be the darkest.
  33.   light: { ... },

  34. };
  35. ```

_Pro Tip: you can use [themer's Web UI](https://themer.dev) to more easily select your colors, then click the "Download" button to generate a colors.js file._

Then pass the path to your JS file to the --colors argument of themer.

  1. ```
  2. themer -c path/to/my/colors.js ...
  3. ```

Color mappings


To help you choose colors for your own color set, this is approximately how most themer templates will utilize your colors:

ColorTypicalConventional
------------------------------------------------------
`accent0`error,Red
`accent1`syntaxOrange
`accent2`warning,Yellow
`accent3`success,Green
`accent4`syntaxCyan
`accent5`syntaxBlue
`accent6`syntax,|
`accent7`syntax,Magenta
`shade0`background|
`shade1`UI|
`shade2`UI,|
`shade3`UI,|
`shade4`UI|
`shade5`UI|
`shade6`foreground|
`shade7`foreground|

_\*Conventional color is suggested for consistency with ANSI color names in terminal themes, but is not a hard requirement._

See [themer's Web UI](https://themer.dev) for a more visual representation of the color mappings.

Tips


- If you omit shade1 through shade6, themer will interpolate them automatically for you, using color-steps.
- themer supports any valid CSS color format; that means you can use chartreuse, rgb(127, 255, 0), rgb(50%, 100%, 0%), #7FFF00, hsl(90, 100%, 50%), etc.
- I would recommend checking your color set into your dotfiles repo. Once you've fine-tuned it, you might consider publishing it to npm for others to use! (If you do, consider naming your package starting with themer-colors- so that others can easily find it.)

Using base16 schemes with Themer


In place of a themer color set file or npm package, you can also provide themer with any base16 scheme YAML file.

  1. ```
  2. themer --colors path/to/base16-scheme.yml ...
  3. ```

Refer to the base16 repository for a list of base16 schemes.

Themer templates


Terminals



Editors/IDEs



Wallpapers



Other



Community



Create your own template


To create your own template, create a JavaScript file that exports a render function, like so:

  1. ``` js
  2. module.exports.render = function (colors, options) {
  3.   /*

  4.   colors is an object that will have one or both keys: 'light' and
  5.   'dark', each being an object with keys 'accent0' through 'accent7'
  6.   and 'shade0' through 'shade7'.

  7.   options is an object representing the original command-line args
  8.   passed to themer. This allows you to add special arguments that
  9.   will apply only to your template. An example of this is allowing a
  10.   themer user to specify custom resolutions for rendering a wallpaper.

  11.   This function should return an array of Promises, each Promise
  12.   resolving to an object of the following structure:
  13.   {
  14.     name: '<the name of the file to be written>', // can include subdirectories, too
  15.     contents: <a Buffer of the contents of the file to be written>,
  16.   }

  17.   */
  18. };
  19. ```

Your JS file can then be passed to a --template argument of themer. That's it!

Here's an example template render function that generates a Slack sidebar theme from athemer color set.

Once you've developed your template, consider publishing it on npm so that others can use it!

About


themer is inspired by trevordmiller/nova and chriskempson/base16.

Conceptually, themer is very similar to base16, but:

1. It is lighter, and simpler to use.
2. It is more easily extensible with your own color sets and templates.
3. It integrates better with your dotfiles, especially if you keep them under version control.

Contributing


For instructions on how to contribute to themer, see CONTRIBUTING.md and [themer's code of conduct](https://github.com/themerdev/themer/blob/main/CODE_OF_CONDUCT.md).

Themer's Web UI


If you'd prefer to develop your themes visually, check out [themer's Web UI](https://themer.dev), an offline-ready Progressive Web App.