Skip to content
Invisible link to canonical for Microformats

Theming Chulapa

Appearance settings reference

This page lists appearance settings. For a task, use Choose a skin, Change a color, Change fonts or Change code highlighting. For relationships between settings, read How skins and overrides interact. For custom Sass and the Codeply sandbox, use Adapt a Sass skin.

Settings belong in _config.yml and compile into CSS during the build. Local preview needs a Jekyll restart after configuration changes.

Skins

Field Values / default Constraint
chulapa-skin.skin Exact skin filename without .scss; default none. Examples: journal, gitdev, lux, flatly. Names are case-sensitive on case-sensitive filesystems; unknown names fail the Sass import.
skin: none No predefined skin assignments. Bootstrap/theme defaults and explicit vars still apply.
skin: auto Loads the generated palette as the selected skin. Independent of the optional later autothemer step.

The skin catalog provides the named previews. Its current-site preview is not a skin named current. Procedure: Choose a skin.

Optional light/dark selector

In 2.2.0, a separate chulapa-skin-dark mapping enables a Light/Dark/Auto dropdown in all navigation styles. It accepts the same skin, highlight, vars and autothemer fields. An omitted dark highlight inherits chulapa-skin.highlight, falling back to default if neither is set. Other settings have independent defaults. Without this mapping, or when all its fields are blank, switching is disabled. Light is the initial default and Auto follows the device preference. The browser remembers the visitor’s choice. Without JavaScript, the first skin remains available. See setup and checks.

Load Google Fonts

Field Value / effect
googlefonts List of mappings with a url for each font stylesheet; no additional fonts when absent.
chulapa-skin.vars.font-family-base Body font-family expression, including fallback families.
chulapa-skin.vars.headings-font-family Heading font-family expression.

Loading a stylesheet does not apply its families. Other font providers use the existing custom-head hook. Procedure: Change fonts.

Code highlighting

chulapa-skin.highlight selects a highlighting stylesheet; its default is default. The setting selects appearance, while Rouge performs syntax highlighting. Style specimens show the available styles. Procedure: Change code highlighting.

Autothemer

chulapa-skin.autothemer enables the palette-generation step after skin and vars when set to the YAML boolean true; omit it or use false to disable that step. It is independent of skin: auto. Its default primary color is Bootstrap 4’s #007bff when not already assigned.

Existing skin and vars assignments remain in effect. Procedure: Enable Autothemer. Rationale: How skins and overrides interact.

Variables

chulapa-skin.vars is a mapping of supported Bootstrap/theme Sass variable names to Sass expressions. Names omit the leading $ and trailing ;. Hex colors, font lists and sizes are quoted strings; switches such as enable-rounded are YAML booleans. For example:

chulapa-skin:
  vars:
    body-bg: "#000"
    body-color: "#eee"
    font-family-base: "Montserrat"

The corresponding Sass assignments are $body-bg: #000;, $body-color: #eee; and $font-family-base: Montserrat;. A font stylesheet is a separate input; the fonts guide includes a complete loading/application example.

The variable dictionary lists common inputs; Bootstrap’s variable source contains the full Bootstrap definitions. See also the Bootstrap 4 theming reference. Calculated helpers such as landingpage-card-bg and cactus-btn-text are not overridable through vars. Custom CSS handles rules without exposed variables; see custom HTML and styles.

Related documentation