Themes

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. Copies over any assets in the theme directory to the appropriate top-level directory
3. Creates 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 it.

Features

Syntax highlighting

b-ber parses code blocks using highlight.js, and the default b-ber themes come packaged with highlight.js. 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 _settings.scss

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 to this file.

// _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 (e.g., 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. In addition, a notice will be displayed to the user.

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

    Duplicate themes have been found in both the node_modules and _project/themes directory
    Resolve this issue by either removing the duplicate directory from _project/themes or by running npm rm <location> <package>

Locally installed themes can also be used in multiple projects from a higher-level directory:

├── my-projects
│       ├── my-first-project
│       │     ├── config.yml
│       │     ├── _project
│       │     ...
│       └── my-second-project
│             ├── config.yml
│             ├── _project
│             ...
├── my-themes
        └── b-ber-theme-custom
              ├── _settings.scss
              ├── application.scss
              └── index.js

# my-first-project/config.yml

themes_directory: ../my-themes

# my-second-project/config.yml

themes_directory: ../my-themes