Themes provide layouts and can be used to load additional assets (scripts, styles, fonts, etc).


All themes are represented as npm packages with prefix cogear-theme-.

Cogear.JS theme is a npm package.

For example, if you decided to build your own theme named bulma its package must be named as cogear-theme-bulma.

All the following paths are relative to the theme folder.

Install themes with ease:

From npm

> npm install cogear-theme-bulma
# or 
> yarn add cogear-theme-bulma

From git

> git clone ./themes/bulma

Themes located in ./themes folder have a higher priority over npm packaged themes.

Edit ./config.yaml to set up new theme:

title: Cogear.JS – modern static websites generator
theme: bulma
# or
theme: cogear-theme-bulma # no difference


Basic file structure is:

├──       # README
├── favicon.png     # Favicon [optional]
├── layouts         # Layouts folder
│   └── index.pug   # Index layout
├── package.json    # npm package.json
├── screenshot.png  # theme screenshot [optional]
├── style.styl      # theme style [optional]
└── theme.js        # theme script [optional]

Listing: ./layouts/index.pug

doctype html
    title= title
    block head
    block content
        != content
    block footer

Listing: ./package.json

    "name": "Default Cogear.JS theme",
    "version": "1.0.0",
    "author": "Dmitriy Belyaev <>",
    "homepage": ""

Everything else you need – you may do what you want:

  • organize dirs,
  • make tests,
  • write scripts,
  • create styles,
  • provide images,
  • install fonts,
  • import node modules.

You are free with your inspiration.

For example, you may create theme.js entry point (with script, styles, images and fonts imports) and import it in ./src/app.js.

Listing: ./theme.js (theme root)


This file will be imported automatically if exists.

Use it as an entry point for all other styles and scripts from your theme.

Well done!


To generate new theme from scratch just use this command:

> cogear theme [theme-name] [-y]

Where theme-name is a theme folder and a short name and -y is optional flag to say yes for any questions.

If you located in project root, theme will be generated in ./themes folder.

If you are not, theme will be generated in current dir (in case you're building npm package).


It will automatically build basic file structure for you.


If you want to share your theme with Cogear.JS community do next:

  1. Place it in a standalone folder outside your project git repo and cd into it.
  2. Init npm or yarn.
    > npm init
    # or
    > yarn init
  3. Make sure that theme name is prefixed with cogear-theme- in package.json.
  4. Login to npm:
    > npm login
  5. Publish:
    > npm publish
  6. Done.

Now you theme is packaged and is available to install for anyone in the world!