Themes

b-ber comes packaged with two themes, b-ber-theme-serif and b-ber-theme-sans. A user can activate a theme on the command line using the bber theme command.

When a theme is activated, it does three things:

1. Updates the config.yml file with the new theme name
2. Copy over any assets in the theme directory (sprites, fonts, etc) to the appropritate top-level directory
3. Create a _settings.scss and _overrides.scss in the _project/_stylesheets/<theme-name> directory

If _settings.scss or _overrides.scss already exist in the _project/_stylesheets/<theme-name> directory, b-ber will not overwrite them.

Features

Syntax Highlighting

b-ber parses code blocks using highlight.js, and the default b-ber themes (b-ber-theme-serif and b-ber-theme-sans) come packaged with highlight.js CSS files. The default code highlighting theme is tomorrow, and cannot currently be changed by user settings.

When creating custom themes, it's necessary to include styles for syntax highlighting in the theme's SCSS.

Setting the Theme

Change them using the theme command on the CLI.

$ bber theme list
  b-ber info The following themes are available:
    ○ b-ber-theme-sans
    ✓ b-ber-theme-serif

$ bber theme set b-ber-theme-sans
  b-ber info Updated theme to b-ber-theme-sans

Using the _settings.scss File

The _settings.scss file contains a list of variables for adjusting the appearance of the theme.

// _settings.scss
$white: #fff    !default;
$black: #222    !default;
$grey: #eee     !default;
$info: #5050c5  !default;

Update the variables to customize the theme.

Using the _overrides.scss File

b-ber guarantees that the styles _overrides.scss will be the last entries to the bundled application.css that is injected into the XHTML. Add any custom overrides here.

// _overrides.scss
$white: #eee;

Installing New Themes

Themes can either be added directly to the _project/themes directory, or can be installed using npm. If duplicate themes exist (a directory in the _project/themes has the same name as an installed npm package), b-ber will load the theme in the themes directory. Additionally, a notice will be displayed to the user.

$ bber theme list
    The following themes are available:
      ✓ b-ber-theme-serif
      ○ b-ber-theme-sans