Brrrand'n

Th' Relearrrn theme provides configurat'n opt'ns t' change yer site’s colors, favicon an' logo. This allows ye t' easily align yer ship visuals t' yer desired style. Most o' these opt'ns be exposed through so called color variants.

A color variant lets ye cust'mize various visual effects o' yer ship like almost any color, used fonts, color schemes o' print, rules highligtn'n, Merrrmaid an' th' OpenAPI shortcode, etc. It contains o' a CSS file an' optional configurat'n opt'ns 'n yer hugo.toml.

Th' Relearrrn theme ships wit' a wide set o' different color variants. Ye can use them as-is, copy them over an' use them as a start'n point fer yer customizat'ns or just create completely new variants unique t' yer ship. Th' interactive variant generator may help ye wit' this task.

Once configured 'n yer hugo.toml, ye can select them wit' th' variant selector at th' bottom o' th' menu.

Change th' Variant (Simple)

Single Variant

Set th' themeVariant value t' th' name o' yer theme file. That’s it! Yer ship will be displayed 'n this variant only.

[params]
  themeVariant = 'relearn-light'

params:
  themeVariant: relearn-light

{
   "params": {
      "themeVariant": "relearn-light"
   }
}

Multiple Variants

Ye can also set multiple variants. In this case, th' first variant be th' default chosen on first view an' a variant selector will be shown 'n th' menu footer if th' array contains more than one entry.

[params]
  themeVariant = ['relearn-light', 'relearn-dark']

params:
  themeVariant:
  - relearn-light
  - relearn-dark

{
   "params": {
      "themeVariant": [
         "relearn-light",
         "relearn-dark"
      ]
   }
}

Adjust t' OS Sett'ns

Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' themeVariant t' auto t' become an auto mode variant. That’s it.

Ye can use th' auto value wit' th' single or multiple variants opt'n. If ye be us'n multiple variants, ye can drop auto at any posit'n 'n th' option’s array, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.

[params]
  themeVariant = ['auto', 'red']

params:
  themeVariant:
  - auto
  - red

{
   "params": {
      "themeVariant": [
         "auto",
         "red"
      ]
   }
}

If ye don’t configure anyth'n else, th' theme will default t' use relearn-light fer light mode an' relearn-dark fer dark mode. These defaults be overwritten by th' first two non-auto opt'ns o' yer themeVariant opt'n if present.

In th' above example, ye would end wit' red fer light mode an' th' default o' relearn-dark fer dark mode.

If ye don’t like that behavior, ye can explicitly set themeVariantAuto. Th' first entry 'n th' array be th' color variant fer light mode, th' second fer dark mode.

[params]
  themeVariantAuto = ['learn', 'neon']

params:
  themeVariantAuto:
  - learn
  - neon

{
   "params": {
      "themeVariantAuto": [
         "learn",
         "neon"
      ]
   }
}

Change th' Favicon

If yer favicon be a SVG, PNG or ICO, just drop yer image 'n yer site’s static/images/ directory an' name it favicon.svg, favicon.png or favicon.ico respectively.

If ye want t' adjust yer favicon accord'n t' yer OS sett'ns fer light/dark mode, add th' image files static/images/favicon-light.svg an' static/images/favicon-dark.svg t' yer site’s directory, respectively, correspond'n t' yer file format. In case some o' th' files be miss'n, th' theme falls back t' favicon.svg fer each miss'n file. All supplied favicons must be o' th' same file format.

If no favicon file be found, th' theme will lookup th' alternative filename logo 'n th' same locat'n an' will repeat th' search fer th' list o' supported file types.

If ye need t' change this default behavior, create a new file layouts/partials/favicon.html 'n yer site’s directory an' write someth'n like this:

<link rel="icon" href="/images/favicon.bmp" type="image/bmp">

Change th' Logo

Create a new file 'n layouts/partials/logo.html o' yer ship. Then write any HTML ye want. Ye could use an img HTML tag an' reference an image created under th' static folder, or ye could paste a SVG definit'n!

Rules Highlight'n

If ye want t' switch th' rules highlight'n theme together wit' yer color variant, ye need t' configure yer installat'n accord'n t' Hugo’s documentat'n an' provide a rules highlight'n stylesheet file.

Ye can use a one o' th' shipped stylesheet files or use Cap'n Hugo t' generate a file fer ye. Th' file must be written t' static/css/chroma-<NAME>.css. T' use it wit' yer color variant ye have t' define --CODE-theme: <NAME> 'n th' color variant stylesheet file.

For an example, take a look into theme-relearn-light.css an' hugo.toml o' th' exampleSite.

Change th' Variant (Advanced)

Th' theme offers a new way t' configure theme variants an' all o' th' aspects above inside o' a single configurat'n item. This comes wit' some features previously unsupported.

Like wit' th' multiple variants opt'n, ye be defin'n yer theme variants 'n an array but now not by simple str'ns but 'n a t'ble wit' subopt'ns.

Again, 'n this case, th' first variant be th' default chosen on first view an' a variant selector will be shown 'n th' menu footer if th' array contains more than one entry.

[params]
  themeVariant = ['relearn-light', 'relearn-dark']

params:
  themeVariant:
  - relearn-light
  - relearn-dark

{
   "params": {
      "themeVariant": [
         "relearn-light",
         "relearn-dark"
      ]
   }
}

ye now write it that way:

[params]
[[params.themeVariant]]
    identifier = 'relearn-light'

[[params.themeVariant]]
    identifier = 'relearn-dark'

params:
  themeVariant:
  - identifier: relearn-light
  - identifier: relearn-dark

{
   "params": {
      "themeVariant": [
         {
            "identifier": "relearn-light"
         },
         {
            "identifier": "relearn-dark"
         }
      ]
   }
}

Th' identifier opt'n be mandatory an' equivalent t' th' str'n 'n th' first example. Further opt'ns can be configured, see th' t'ble below.

Parameter

Example Configurat'n o' This Ship

[params]
[[params.themeVariant]]
    auto = []
    identifier = 'relearn-auto'
    name = 'Relearn Light/Dark'

[[params.themeVariant]]
    identifier = 'relearn-light'

[[params.themeVariant]]
    identifier = 'relearn-dark'

[[params.themeVariant]]
    auto = ['zen-light', 'zen-dark']
    identifier = 'zen-auto'
    name = 'Zen Light/Dark'

[[params.themeVariant]]
    identifier = 'zen-light'

[[params.themeVariant]]
    identifier = 'zen-dark'

[[params.themeVariant]]
    identifier = 'neon'

params:
  themeVariant:
  - auto: []
    identifier: relearn-auto
    name: Relearrrn Light/Dark
  - identifier: relearn-light
  - identifier: relearn-dark
  - auto:
    - zen-light
    - zen-dark
    identifier: zen-auto
    name: Zen Light/Dark
  - identifier: zen-light
  - identifier: zen-dark
  - identifier: neon

{
   "params": {
      "themeVariant": [
         {
            "auto": [],
            "identifier": "relearn-auto",
            "name": "Relearn Light/Dark"
         },
         {
            "identifier": "relearn-light"
         },
         {
            "identifier": "relearn-dark"
         },
         {
            "auto": [
               "zen-light",
               "zen-dark"
            ],
            "identifier": "zen-auto",
            "name": "Zen Light/Dark"
         },
         {
            "identifier": "zen-light"
         },
         {
            "identifier": "zen-dark"
         },
         {
            "identifier": "neon"
         }
      ]
   }
}

Modify Shipped Variants

In case ye like a shipped variant but only want t' tweak some aspects, ye have two choices:

1. Copy an' change

   Ye can copy th' shipped variant file from th' theme’s static/css directory t' th' site’s static/css directory an' either store it wit' th' same name or give it a new name. Edit th' sett'ns an' save th' new file. Afterwards ye can use it 'n yer hugo.toml by th' chosen name.

2. Create an' import

   Ye can create a new variant file 'n th' site’s static/css directory an' give it a new name. Import th' shipped variant, add th' sett'ns ye want t' change an' save th' new file. Afterwards ye can use it 'n yer hugo.toml by th' chosen name.

   For example, ye want t' use th' relearn-light variant but want t' change th' rules highlight'n schema t' th' one used 'n th' neon variant. For that, create a new static/css/theme-my-brand'n.css 'n yer site’s directory an' add th' follow'n lines:

   ​

   static/css/theme-my-brand'n.css

   @import "theme-relearn-light.css";
   
   :root {
     --CODE-theme: neon; /* name o' th' chroma stylesheet file */
     --CODE-BLOCK-color: rgba( 226, 228, 229, 1 ); /* fallback color fer code text */
     --CODE-BLOCK-BG-color: rgba( 40, 42, 54, 1 ); /* fallback color fer code background */
   }

   Afterwards put this 'n yer hugo.toml t' use yer new variant:

   hugo.

   toml yaml json

   [params]
     themeVariant = 'my-branding'

   params:
     themeVariant: my-brand'n

   {
      "params": {
         "themeVariant": "my-branding"
      }
   }

   In comparison t' copy an' change, this has th' advantage that ye profit from any adjustments t' th' relearn-light variant but keep yer modificat'ns.