All Projects β†’ mjswensen β†’ Themer

mjswensen / Themer

Licence: mit
themer is inspired by trevordmiller/nova and chriskempson/base16.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
shell
77523 projects

Projects that are alternatives of or similar to Themer

Themer Gui
A graphical UI for themer. Replaced by Progressive Web App at https://themer.dev.
Stars: ✭ 337 (-92.48%)
Mutual labels:  terminal, hyper, iterm, alfred, xcode, vscode, atom, slack, sublime-text, chrome
Dracula Theme
πŸ§›πŸ»β€β™‚οΈ One theme. All platforms.
Stars: ✭ 17,480 (+289.92%)
Mutual labels:  terminal, hyper, iterm, alfred, xcode, atom, slack, sublime-text
Yonce
πŸ‘‘ Queen Bey-inspired themes for all your favs.
Stars: ✭ 280 (-93.75%)
Mutual labels:  terminal, hyper, alfred, slack
Ltfinderbuttons
My Finder buttons collection for macOS.
Stars: ✭ 269 (-94%)
Mutual labels:  terminal, vscode, atom, sketch
Aura Theme
πŸ’…β€A beautiful dark theme for your favorite apps.
Stars: ✭ 159 (-96.45%)
Mutual labels:  terminal, hyper, vscode, slack
Dotfiles
What tools and plugins I use for web development?
Stars: ✭ 73 (-98.37%)
Mutual labels:  iterm, vscode, atom, sublime-text
Terminus
Terminus, a terminal for Atom! - Looking for collaborators hop in, at your next bus stop :-)
Stars: ✭ 49 (-98.91%)
Mutual labels:  cmd, terminal, iterm, atom
Kotlin Language Server
Intelligent Kotlin support for any editor/IDE using the Language Server Protocol
Stars: ✭ 650 (-85.5%)
Mutual labels:  hacktoberfest, vscode, atom
Nim
Streamline Your Node.js Debugging Workflow with Chromium (Chrome, Edge, More) DevTools.
Stars: ✭ 168 (-96.25%)
Mutual labels:  hacktoberfest, vscode, chrome
Wild Cherry
πŸ‘ΈπŸŒ·πŸ‘Ή A fairy-tale inspired theme, with tasteful use of emojis
Stars: ✭ 443 (-90.12%)
Mutual labels:  terminal, atom, slack
T Rec Rs
Blazingly fast terminal recorder that generates animated gif images for the web written in rust
Stars: ✭ 361 (-91.95%)
Mutual labels:  hacktoberfest, vscode, chrome
Lucario
The best flat theme for Vim, Atom, Sublime Text, Jetbrains Editors, Terminal.app, iTerm, Xcode and XTerm
Stars: ✭ 711 (-84.14%)
Mutual labels:  xcode, atom, sublime-text
Onehalf
Clean, vibrant and pleasing color schemes for Vim, Sublime Text, iTerm, gnome-terminal and more.
Stars: ✭ 974 (-78.27%)
Mutual labels:  terminal, iterm, xcode
Atom One Dark Terminal
A Terminal theme that mimics the One Dark theme made by the Atom team.
Stars: ✭ 890 (-80.15%)
Mutual labels:  terminal, iterm, atom
Findergo
🐒 Open terminal quickly from Finder
Stars: ✭ 862 (-80.77%)
Mutual labels:  terminal, hyper, iterm
Relaxed Terminal Themes
πŸ•ΆοΈ A relaxed terminal theme to take a more relaxed view of things. For iTerm, Hyper, the macOS Terminal and a bunch of others.
Stars: ✭ 382 (-91.48%)
Mutual labels:  terminal, hyper, iterm
Handlebars
Fullest Handlebars.js templating support for Atom and Sublime Text 2 / 3. Also drives syntax colouring on Github and in Visual Studio Code. Install from: https://atom.io/packages/Handlebars and https://packagecontrol.io/packages/Handlebars.
Stars: ✭ 292 (-93.49%)
Mutual labels:  atom, sublime-text
Hyper Site
The official website for the Hyper terminal
Stars: ✭ 289 (-93.55%)
Mutual labels:  terminal, hyper
Termimad
A library to display rich (Markdown) snippets and texts in a rust terminal application
Stars: ✭ 293 (-93.46%)
Mutual labels:  terminal, hacktoberfest
Rigel
🌌 Colorscheme for vim, terminal, vscode and slack - based on the star Rigel ✨.
Stars: ✭ 324 (-92.77%)
Mutual labels:  hacktoberfest, slack

Themer logo

themer CI Twitter Follow

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

Installation

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

mkdir my-dotfiles && cd my-dotfiles
npm install themer

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.

themer \
  --colors <npm package name OR file> \
  --template <npm package name OR file> \
  [--template <npm package name OR file>...] \
  --out <directory>

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:

cd my-dotfiles
npm install themer @themerdev/colors-default @themerdev/vim @themerdev/wallpaper-block-wave

Then edit your package.json:

  ...
  "scripts": {
    "build": "themer -c @themerdev/colors-default -t @themerdev/vim -t @themerdev/wallpaper-block-wave -o gen"
  },
  ...

Then run your new script:

npm run build

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

example usage result

Example usage with npx

npx \
  -p themer \
  -p @themerdev/colors-default \
  -p @themerdev/vim \
  -p @themerdev/wallpaper-block-wave \
  themer \
  -c @themerdev/colors-default \
  -t @themerdev/vim \
  -t @themerdev/wallpaper-block-wave \
  -o output

Themer color sets

Original color sets

Name Dark Preview Light Preview
@themerdev/colors-default @themerdev/colors-default dark preview @themerdev/colors-default light preview
@themerdev/colors-finger-paint @themerdev/colors-finger-paint dark preview @themerdev/colors-finger-paint light preview
@themerdev/colors-green-as-a-whistle @themerdev/colors-green-as-a-whistle dark preview @themerdev/colors-green-as-a-whistle light preview
@themerdev/colors-monkey @themerdev/colors-monkey dark preview @themerdev/colors-monkey light preview
@themerdev/colors-night-sky @themerdev/colors-night-sky dark preview (dark only)
@themerdev/colors-polar-ice @themerdev/colors-polar-ice dark preview @themerdev/colors-polar-ice light preview
@themerdev/colors-right-in-the-teals @themerdev/colors-right-in-the-teals dark preview @themerdev/colors-right-in-the-teals light preview

Ports from third-party themes

Name Dark Preview Light Preview
@themerdev/colors-dracula @themerdev/colors-dracula dark preview (dark only)
@themerdev/colors-github-universe !themer/colors-github-universe preview (dark only)
@themerdev/colors-lucid @themerdev/colors-lucid dark preview @themerdev/colors-lucid light preview
@themerdev/colors-mojave @themerdev/colors-mojave dark preview @themerdev/colors-mojave light preview
@themerdev/colors-nova @themerdev/colors-nova preview (dark only)
@themerdev/colors-one @themerdev/colors-one dark preview @themerdev/colors-one light preview
@themerdev/colors-rivet @themerdev/colors-rivet dark preview @themerdev/colors-rivet light preview
@themerdev/colors-seti @themerdev/colors-seti dark preview (dark only)
@themerdev/colors-solarized @themerdev/colors-solarized dark preview @themerdev/colors-solarized light preview

Create your own color set

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

module.exports.colors = {

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

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

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

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

  },

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

};

Pro Tip: you can use themer's Web UI 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.

themer -c path/to/my/colors.js ...

Color mappings

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

Color Key Typical Usage Conventional Color*
accent0 error, VCS deletion Red
accent1 syntax Orange
accent2 warning, VCS modification Yellow
accent3 success, VCS addition Green
accent4 syntax Cyan
accent5 syntax Blue
accent6 syntax, caret/cursor
accent7 syntax, special Magenta
shade0 background color
shade1 UI
shade2 UI, text selection
shade3 UI, code comments
shade4 UI
shade5 UI
shade6 foreground text
shade7 foreground text

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

See themer's Web UI 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.

themer --colors path/to/base16-scheme.yml ...

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:

module.exports.render = function (colors, options) {
  /*

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

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

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

  */
};

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 a themer 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.

Themer's Web UI

If you'd prefer to develop your themes visually, check out themer's Web UI, an offline-ready Progressive Web App.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].