////
Custom Themes
Creating a theme

This document is included in:

- user-manual
////

You can create your own themes to apply to your documents.

Themes go in the [.path]_sass/_ folder.
To create a new theme, let's call it `hipster`, start by creating two new files:

[.path]_sass/hipster.scss_::
  * Imports the theme settings, which includes default variables and resets
  * Imports the AsciiDoc components
  * Defines any explicit customization

[.path]_sass/settings/_hipster.scss_::
  * Sets variables that customize Foundation 4 and the AsciiDoc CSS components

Here's a minimal version of [.path]_sass/hipster.scss_:

[source,scss]
----
@import "settings/hipster";
@import "components/asciidoc";
@import "components/awesome-icons";
----

NOTE: You don't have to include the underscore prefix when importing files.

NOTE: The `awesome-icons` component is only applicable to HTML generated by Asciidoctor > 0.1.2 with the `icons` attribute set to `font`.

You can add any explicit customization below the import lines.

The variables you can set in [.path]_sass/settings/_hipster.scss_ are a combination of the {factory-ref}/blob/master/sass/settings/_settings.scss.dist[Foundation 4 built-in global settings] and {factory-ref}/blob/master/sass/settings/_defaults.scss[global settings and imports for the AsciiDoc components].

Once you've created your custom theme, it's time to apply it to your document.