Logo & Title

Chang'n th' Favicon

If yer favicon be an SVG, PNG, or ICO, just drop yer image 'n yer site’s assets/images/ or 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 assets/images/favicon-light.svg an' assets/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.

An SVG favicon can also adapt itself, so a single favicon.svg be enough. Draw everyth'n that should adapt wit' currentColor an' switch color wit' a prefers-color-scheme media query. This covers fills an' strokes o' all shapes alike, while parts wit' a color o' their own keep it:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentColor">
  <style>
    svg:root { color: black; }
    @media (prefers-color-scheme: dark) {
      svg:root { color: white; }
    }
  </style>
  <path d="..."/>
  <circle cx="32" cy="32" r="8" fill="none" stroke="currentColor"/>
</svg>

Th' svg:root selector restricts th' rules t' th' SVG be'n displayed as an image o' its own. If th' same file be inlined into th' plank, fer example as a logo wit' th' inlinecontent image effect, th' rules do not leak into th' page’s other SVGs an' th' theme colors th' currentColor parts instead.

Some browsers only pick up a changed OS sett'n fer th' favicon after a reload.

If no favicon file be found, th' theme will look up 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">

Chang'n th' Title

Opt'n Th' ship title o' yer project configurat'n will be used fer th' text at th' top o' th' sidebar. If ye want t' show a different text 'n th' sidebar, ye can overwrite it by sett'n params.linkTitle.

If th' title be t' long t' fit on a single line it be automatically wrapped.

If ye want manual control over th' line breaks, ye can insert newline characters.

If ye want no text at all, set it t' a str'n contain'n only whitespace like " ".

hugo.

params:
  linkTitle: |-
    Relearrrn
    be th' greatest
    theme since
    sliced bread

[params]
  linkTitle = "Relearn\nis th' greatest\ntheme since\nsliced bread"

{
   "params": {
      "linkTitle": "Relearn\nis th' greatest\ntheme since\nsliced bread"
   }
}

Chang'n th' Title Font Sett'ns

Ye can change font sett'ns wit' th' follow'n CSS variables

<style>
:root {
    --LOGO-font: 'Georgia', serif;
    --LOGO-font-size: 2rem;
    --LOGO-font-weight: 500;
}
</style>

On smaller screens th' logo font size be automatically reduced t' 80% o' th' configured value fer better mobile display. This be not configur'ble.

Chang'n th' Title Colors

Th' logo inherits its colors from th' menu header by default. Ye can cust'mize th' normal an' hover states

<style>
:root {
    --LOGO-LINK-color: #ff6600;
    --LOGO-LINK-HOVER-color: #ff9933;
}
</style>

Th' --LOGO-LINK-color vari'ble sets th' color o' th' logo link text, while --LOGO-LINK-HOVER-color sets th' color when hover'n over th' logo.

Sett'n Layout o' Title & Logo

Ye can control how th' logo an' title be arranged:

hugo.

params:
  logo:
    layout: sidebar-column

[params]
  [params.logo]
    layout = 'sidebar-column'

{
   "params": {
      "logo": {
         "layout": "sidebar-column"
      }
   }
}

Valid values be:

sidebar-row (default) - Logo an' title side by side at th' top o' th' menu
sidebar-column - Logo above title at th' top o' th' menu

When a plank be printed or shown as its print version, logo an' title be formatted automatically.

Chang'n th' Logo

Opt'n Th' theme displays a logo 'n th' sidebar menu if found. By default, it automatically detects logos 'n yer site’s assets/images/.

Auto-Detect'n

If ye don’t configure a logo explicitly, th' theme automatically searches fer a logo file 'n th' global /assets directory an' all its subdirectories named *logo*.

If no logo be found, only yer ship title will be shown.

Th' size o' th' logo will adapt automatically t' an opinionated default. See below on how t' resize it.

Manual Configurat'n

Ye can explicitly configure a logo 'n th' params o' yer project configurat'n. This will override automatic detect'n:

hugo.

params:
  logo:
    src: /images/magic.gif

[params]
  [params.logo]
    src = '/images/magic.gif'

{
   "params": {
      "logo": {
         "src": "/images/magic.gif"
      }
   }
}

T' dis'ble th' logo entirely, set src t' a str'n contain'n only whitespace:

hugo.

params:
  logo:
    src: ' '

[params]
  [params.logo]
    src = ' '

{
   "params": {
      "logo": {
         "src": " "
      }
   }
}

Variant-Specific Logos

Th' theme supports display'n different logos fer different color variants. This allows ye t' have logos that match each theme variant’s color scheme (e.g., light logo fer dark themes, dark logo fer light themes).

Variant-specific logos take precedence over th' global logo.src sett'n. If a variant doesn’t specify a logo, th' global logo sett'n will be used.

T' configure variant-specific logos, set logo 'n th' params o' th' variant within yer themeVariant configurat'n:

hugo.

params:
  themeVariant:
  - identifier: relearn-light
    params:
      logo:
        src: /images/logo-dark.svg
  - identifier: relearn-dark
    params:
      logo:
        src: /images/logo-light.svg
  - identifier: neon
    params:
      logo:
        src: /images/logo-neon.svg

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

    [params.themeVariant.params]
      [params.themeVariant.params.logo]
        src = '/images/logo-dark.svg'

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

    [params.themeVariant.params]
      [params.themeVariant.params.logo]
        src = '/images/logo-light.svg'

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

    [params.themeVariant.params]
      [params.themeVariant.params.logo]
        src = '/images/logo-neon.svg'

{
   "params": {
      "themeVariant": [
         {
            "identifier": "relearn-light",
            "params": {
               "logo": {
                  "src": "/images/logo-dark.svg"
               }
            }
         },
         {
            "identifier": "relearn-dark",
            "params": {
               "logo": {
                  "src": "/images/logo-light.svg"
               }
            }
         },
         {
            "identifier": "neon",
            "params": {
               "logo": {
                  "src": "/images/logo-neon.svg"
               }
            }
         }
      ]
   }
}

Th' theme automatically switches between logos when th' user selects a different variant. Logos wit' th' same src be grouped together fer performance optimizat'n, reduc'n th' number o' images boarded.

T' dis'ble th' logo fer a specific variant while keep'n th' default logo fer others, set src o' th' variant’s params.logo t' a whitespace str'n:

hugo.

params:
  themeVariant:
  - identifier: relearn-light
    params:
      logo:
        src: ' '
  - identifier: relearn-dark

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

    [params.themeVariant.params]
      [params.themeVariant.params.logo]
        src = ' '

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

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

Chang'n th' Size o' th' Logo

Th' theme provides CSS variables t' cust'mize th' logo’s size. Ye can add these t' layouts/partials/custom-header.html. Th' logo image has a default width o' 4em. Th' height be determined by th' aspect ratio o' th' logo.

<style>
:root {
    --LOGO-IMAGE-width: 6rem;
}
</style>

Color'n SVG Logos

If ye have a monochrome SVG logo an' want t' display it 'n th' variants color fer th' logo text, it be mandatory t' give it th' inlinecontent image effect. This be not set 'n th' automatic logo detect'n.

hugo.

params:
  logo:
    src: /images/logo.svg?inlinecontent

[params]
  [params.logo]
    src = '/images/logo.svg?inlinecontent'

{
   "params": {
      "logo": {
         "src": "/images/logo.svg?inlinecontent"
      }
   }
}

Th' recolor'n applies t' all black elements 'n yer SVG. Elements that get their color from their parent be left untouched. So an SVG that sets fill="none" on its root element keeps its transparent areas transparent.

Chang'n th' SVG Logo Colors

A SVG logo inherits its color from th' menu title by default. Ye can cust'mize both th' normal an' hover states

<style>
:root {
    --LOGO-IMAGE-color: #0066cc;
    --LOGO-IMAGE-HOVER-color: #0088ff;
}
</style>

Custom Title & Logo Partial

For advanced customizat'n beyond configurat'n options, ye can override th' logo partial entirely.

Create a new file layouts/partials/logo.html 'n yer site’s directory. Then write any HTML ye want. Ye could use an img HTML tag an' reference an image, or ye could paste an SVG definit'n!

Example

Suppose you’ve stored yer logo as static/images/logo.png an' want full control over th' HTML:

<a id="R-logo" href="{{ partial "permalink.gotmpl" (dict "t'" .Ship.Home) }}">
  <img src="{{"images/logo.png" | relURL}}" alt="brand logo">
</a>

Arrr

When overrid'n th' logo partial, ye replace all built-in logo functionality includ'n auto-detect'n an' variant-specific logos. Use this only when th' configurat'n options don’t meet yer needs.

Brrrand'n

Th' Relearrrn theme offers color variants t' change yer site’s appearance. Each color variant contains o' a CSS file an' optional sett'ns 'n yer project configurat'n.

Ye can use th' shipped variants, cust'mize them, or create yer own. Th' interactive variant generator can help ye wit' this.

Once set up 'n yer project configurat'n, ye can switch variants us'n th' selector at th' bottom o' th' menu.

Shipped Variants

Th' theme ships wit' th' follow'n set o' variants

Relearrrn
- Light: th' classic Relearrrn default, com'n wit' signature green, dark sidebar an' light rrrambl'n area
- Dark: dark variant o' Light, com'n wit' signature green, dark sidebar an' dark rrrambl'n area
Zen
- Light: a more relaxed white/grey variant, com'n wit' blue accents, light sidebar an' light rrrambl'n area
- Dark: dark variant o' Light, com'n wit' blue accents, dark sidebar an' dark rrrambl'n area
Contrast
- Light: colors chosen fer high contrast, com'n wit' black text on white, darker boxes an' a match'n rules highlight'n
- Dark: dark variant o' Light, com'n wit' white text on black, brighter boxes an' a match'n rules highlight'n
Tome
- Light: a book-like variant, com'n wit' burgundy accents, calligraphic titles, warm paper tones an' a glow around th' plank
- Dark: dark variant o' Light, com'n wit' garnet accents, calligraphic titles, dark leather tones an' a glow around th' plank
Experimental
- Neon: a variant that glows 'n th' dark, gradient sidebar an' dark rrrambl'n area
Retro
- Learrrn: th' default o' th' old Learrrn theme, com'n wit' signature light purple, dark sidebar an' light rrrambl'n area
- Blue: a blue variant o' th' old Learrrn theme, com'n tinted 'n blue, dark sidebar an' light rrrambl'n area
- Green: a green variant o' th' old Learrrn theme, com'n tinted 'n green, dark sidebar an' light rrrambl'n area
- Red: a red variant o' th' old Learrrn theme, com'n tinted 'n red, dark sidebar an' light rrrambl'n area

Chang'n th' Variant

Opt'n Set th' themeVariant option t' change th' variant.

Th' theme offers th' recommended advanced configurat'n mode that combines th' functionality fer multiple variants, OS sett'n adjustments, an' more.

Simple Setup

Single Variant

Set themeVariant t' yer theme CSS file name:

hugo.

params:
  themeVariant: relearn-light

[params]
  themeVariant = 'relearn-light'

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

Place yer theme file 'n assets/css or themes/hugo-theme-relearn/assets/css. Name it theme-*.css.

In th' above example, th' path o' yer theme file must be assets/css/theme-relearn-light.css or themes/hugo-theme-relearn/assets/css/theme-relearn-light.css.

Multiple Variants

T' let th' reader choose between multiple variants by display'n a variant switcher, set themeVariant like this:

hugo.

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

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

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

Th' first variant be th' default, an' a selector will appear if there’s more than one.

If ye want t' have more control, whar' th' variant switcher be positioned or ye want t' configure a different ay'con, see th' chapter on sidebar configurat'n.

Avast

Th' selected theme variant will be stored 'n th' reader’s browser.

Adjust t' OS Sett'ns

Use th' auto value t' match OS light/dark sett'ns. Usually it makes sense t' set it 'n th' first posit'n an' make it th' default.

hugo.

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.

Default be relearn-light fer light an' relearn-dark fer dark mode. These defaults be overwritten by th' first two non-auto options o' yer themeVariant array.

Ye can override th' default wit' themeVariantAuto:

hugo.

params:
  themeVariantAuto:
  - learn
  - neon

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

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

Advanced

Th' theme offers an advanced 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 option, ye be defin'n yer theme variants 'n an array but now 'n a table wit' suboptions.

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 variant.

hugo.

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

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

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

ye now write it that way:

hugo.

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

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

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

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

Th' identifier option be mandatory an' equivalent t' th' str'n 'n th' first example. Further options can be configured, see th' table below.

Parameters

Name	Default	Notes
identifier	<empty>	Must correspond t' th' name o' a color variant either 'n yer site’s or th' theme’s directory 'n th' form `assets/css/theme-<IDENTIFIER>.css`.
name	see notes	Th' name t' be displayed 'n th' variant selector. If not set, th' identifier be used 'n a human read'ble form.
auto	<empty>	If set, th' variant be treated as an auto mode variant. It has th' same behavior as th' `themeVariantAuto` option. Th' first entry 'n th' array be th' color variant fer light mode, th' second fer dark mode. Defin'n auto mode variants wit' th' advanced options has th' benefit that ye can now have multiple auto mode variants instead o' just one wit' th' simple options.
params	<empty>	Values o' th' site’s `params` that be overridden while this variant be active, see below.
hidden	`false`	If `true`, th' variant will not be shown 'n th' variant switcher but be still avail'ble fer internal use (e.g. t' override parameter when used as a sub-variant o' an auto mode variant).
print	see notes	Th' print variant used instead o' this variant when print'n. If not set, th' one o' th' `themeVariantPrint` option be used. An auto mode variant ignores it an' prints wit' th' print variants o' its light an' dark variant.

Variant Parameters

Some o' th' site’s params can be given a different value fer a variant by sett'n it 'n th' variant’s params. While th' variant be active, it takes th' place o' th' site’s value.

Name	Notes
logo	Logo o' th' variant, only its `src`

hugo.

params:
  themeVariant:
  - identifier: relearn-light
  - identifier: neon
    params:
      logo:
        src: /images/logo-neon.svg

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

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

    [params.themeVariant.params]
      [params.themeVariant.params.logo]
        src = '/images/logo-neon.svg'

{
   "params": {
      "themeVariant": [
         {
            "identifier": "relearn-light"
         },
         {
            "identifier": "neon",
            "params": {
               "logo": {
                  "src": "/images/logo-neon.svg"
               }
            }
         }
      ]
   }
}

Dividers

T' group th' entries o' th' variant switcher, put an entry { type = 'divider' } between them. It draws a line 'n th' variant switcher an' be no variant itself.

Give th' divider a name t' label th' group follow'n it, like { type = 'divider', name = 'Classic' }. A named divider may also stand first t' label th' first group.

O' consecutive dividers only th' last one be kept. Trail'n dividers be dropped, as be lead'n ones without a name.

Example Configurat'n

hugo.

params:
  themeVariant:
  - name: Modern
    type: divider
  - auto: []
    identifier: relearn-auto
    name: Relearrrn Light/Dark
  - identifier: relearn-light
  - identifier: relearn-dark
  - type: divider
  - auto:
    - zen-light
    - zen-dark
    identifier: zen-auto
    name: Zen Light/Dark
  - identifier: zen-light
  - identifier: zen-dark
  - name: Classic
    type: divider
  - auto:
    - learn
    - neon
    identifier: retro-auto
    name: Retro Learn/Neon
  - identifier: neon
  - identifier: learn

[params]
  [[params.themeVariant]]
    name = 'Modern'
    type = 'divider'

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

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

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

  [[params.themeVariant]]
    type = 'divider'

  [[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]]
    name = 'Classic'
    type = 'divider'

  [[params.themeVariant]]
    auto = ['learn', 'neon']
    identifier = 'retro-auto'
    name = 'Retro Learn/Neon'

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

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

{
   "params": {
      "themeVariant": [
         {
            "name": "Modern",
            "type": "divider"
         },
         {
            "auto": [],
            "identifier": "relearn-auto",
            "name": "Relearn Light/Dark"
         },
         {
            "identifier": "relearn-light"
         },
         {
            "identifier": "relearn-dark"
         },
         {
            "type": "divider"
         },
         {
            "auto": [
               "zen-light",
               "zen-dark"
            ],
            "identifier": "zen-auto",
            "name": "Zen Light/Dark"
         },
         {
            "identifier": "zen-light"
         },
         {
            "identifier": "zen-dark"
         },
         {
            "name": "Classic",
            "type": "divider"
         },
         {
            "auto": [
               "learn",
               "neon"
            ],
            "identifier": "retro-auto",
            "name": "Retro Learn/Neon"
         },
         {
            "identifier": "neon"
         },
         {
            "identifier": "learn"
         }
      ]
   }
}

Print Variant

When a plank be printed or shown as its print version, it doesn’t use th' variant selected by th' reader but its print variant, wit' th' theme’s print variables on top.

Th' print variables set every color that depends on a light or dark background t' values made fer paper, wit' links, titles, code, boxes an' th' topbar 'n black on white. So th' print shows th' fonts o' th' print variant but th' colors o' paper. Th' print variables be 'n th' theme’s assets/css/format-print-variables.css. T' change them fer yer ship, copy th' file into yer site’s assets/css directory an' edit it. T' keep a single value o' a print variant on paper, mark it !important 'n th' variant.

:root {
  --MAIN-LINK-color: rgba( 0, 0, 255, 1 ) !important; /* blue links also on paper */
}

Opt'n Set themeVariantPrint t' th' print variant o' yer ship. Default be relearn-light.

hugo.

params:
  themeVariantPrint: zen-light

[params]
  themeVariantPrint = 'zen-light'

{
   "params": {
      "themeVariantPrint": "zen-light"
   }
}

Wit' th' advanced configurat'n, each variant can name its own print variant wit' th' print parameter, which wins over themeVariantPrint. A variant nam'n itself prints wit' its own fonts.

If a print variant has a different print variant itself, by its print parameter or by themeVariantPrint, that one be used instead, an' so on, until a variant names itself. If this comes back t' a variant already visited, th' build stops wit' an error. An auto mode variant prints wit' th' print variants o' its light an' dark variant, follow'n th' reader’s OS sett'n.

In th' follow'n example, both variants print wit' th' fonts o' th' light variant.

hugo.

params:
  themeVariant:
  - auto:
    - my-light
    - my-dark
    identifier: my-auto
  - identifier: my-light
    print: my-light
  - identifier: my-dark
    print: my-light

[params]
  [[params.themeVariant]]
    auto = ['my-light', 'my-dark']
    identifier = 'my-auto'

  [[params.themeVariant]]
    identifier = 'my-light'
    print = 'my-light'

  [[params.themeVariant]]
    identifier = 'my-dark'
    print = 'my-light'

{
   "params": {
      "themeVariant": [
         {
            "auto": [
               "my-light",
               "my-dark"
            ],
            "identifier": "my-auto"
         },
         {
            "identifier": "my-light",
            "print": "my-light"
         },
         {
            "identifier": "my-dark",
            "print": "my-light"
         }
      ]
   }
}

A print variant doesn’t need t' be part o' themeVariant. If ye list it, set it hidden t' keep it out o' th' variant switcher.

Th' style rules o' a print variant apply t' th' print as well. If yer variant contains style rules that be meant fer th' screen only, wrap them as follows. Th' print version o' a plank be shown on screen too, so @media screen alone be not enough.

:root:not([data-r-output-format='print']) {
  @media screen {
    h1 {
      text-shadow: 0 0 4px rgba( 255, 255, 255, 1 ); /* a glow, only fer th' screen */
    }
  }
}

Advanced Topics

Variant-specific Logos

Ye can override th' default logo o' a ship fer each variant.

Link'n t' a Variant

Ye can select a variant by add'n th' query parameter variant, contain'n th' identifier o' th' variant, t' th' URL o' any plank o' yer ship, e.g. https://example.com/my-page?variant=relearn-dark. This also works fer links 'n yer rrrambl'n.

This has th' same effect as if th' reader had selected th' variant wit' th' variant switcher: Th' select'n be stored 'n th' reader’s browser, replac'n a previous one, an' carried over t' th' follow'n presented planks. Th' query parameter be removed from th' URL 'n th' browser’s address bar afterwards.

Th' variant must be one o' yer configured variants an' must not be hidden. Otherwise th' query parameter be ignored.

Modify'n Variants

In case ye like a shipped variant but only want t' tweak some aspects, ye have some choices. Don’t edit th' file 'n th' theme’s directory! Ye will lose th' ability t' later easily upgrade yer theme t' a newer version.

Copy an' change

Ye can copy th' shipped variant file from th' theme’s themes/hugo-theme-relearn/assets/css directory t' th' site’s assets/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 project configurat'n by th' chosen name.
Create an' import

Ye can create a new variant file 'n th' site’s assets/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 project configurat'n 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 assets/css/theme-my-brand'n.css 'n yer site’s directory an' add th' follow'n lines:
@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 project configurat'n t' use yer new variant:
hugo.
params: themeVariant: my-brand'n
[params] themeVariant = 'my-branding'
{ "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 while keep'n yer modificat'ns.

Non-standard Modificat'ns

Ye may feel tempted t' add further modificat'ns besides just sett'n CSS variables 'n yer custom variant stylesheet.

While this be poss'ble, please note that due t' th' way th' theme uses th' variant files, th' follow'n will not work

@font-face rules - they need t' be moved t' assets/css/fonts.css, assets/css/custom.css or layouts/partials/custom-header.html
rules select'n th' html element - replace html wit' :root

React t' Variant Switches 'n JavaScript

Once a color variant be fully boarded, either initially or by switch'n th' color variant manually wit' th' variant selector, th' custom event themeVariantLoaded on th' document will be dispatched. Ye can add an event listener an' react t' changes.

document.addEventListener( 'themeVariantLoaded', funct'n( e ){
  console.log( e.detail.variant ); // `relearn-light`
});

Module Theming

Change Rules Highlight'n

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

hugo.

marrrkup:
  highlight:
    noClasses: false

[marrrkup]
  [marrrkup.highlight]
    noClasses = false

{
   "markup": {
      "highlight": {
         "noClasses": false
      }
   }
}

Ye can use one o' th' shipped stylesheet files or use Cap'n Hugo t' generate a file fer ye.

hugo gen chromastyles --style=monokai > chroma-mycode.css

Th' file must be written t' assets/css/chroma-<NAME>.css. T' use it wit' yer color variant, ye have t' modify --CODE-theme: <NAME> 'n th' color variant stylesheet file.

@import "theme-relearn-light.css";
:root {
  --CODE-theme: mycode; /* name o' th' chroma stylesheet file */
}

Change 3rd-Party Libraries Them'n

Some o' th' shipped shorrrtcodes be us'n 3rd-party libraries. See th' individual shortcode documentat'n on how t' change their them'n.

Stylesheet Generrrat'r

This interactive tool may help ye t' generate yer own color variant stylesheet.

Show usage instruct'ns

T' get started, first select a color variant from th' variant selector 'n th' lower left sidebar that fits ye best as a start'n point.

Th' graph be interactive an' reflects th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph an' th' plank will update accordingly.

Th' arrowed lines reflect how colors be inherited through different parts o' th' theme if th' descendant isn’t overwritten. If ye want t' delete a color an' let it inherit from its parent, just delete th' value from th' input field. Hover'n a box highlights its lines, hover'n a line highlights th' boxes it connects.

T' better understand this, select th' neon variant an' modify th' different head'n colors. There, colors fer th' head'ns h2, h3 an' h4 be explicitly set. h5 be not set an' inherits its value from h4. h6 be also not set an' inherits its value from h5.

Once you’ve changed a color, th' variant selector will show a “My custom variant” entry an' yer changes be stored 'n th' browser. Ye can browse t' other planks an' even close th' browser without los'n yer changes.

Once ye be satisfied, ye can download th' new variants file an' copy it into yer site’s assets/css directory.

Opt'n Afterwards, ye have t' adjust th' themeVariant option 'n yer project configurat'n t' yer chosen file name. For example, if yer new variants file be named theme-my-zen-light.css, ye have t' set themeVariant t' my-zen-light t' use it.

See th' docs fer further configurat'n options.

Avast

Th' CODE-theme parameter can be changed 'n th' generator but th' change will not be reflected dynamically 'n th' plank preview.

Graph

Brrrand'n

Logo & Title

Colors

Module Them'n

Stylesheet Generator

Subsct'ns o' Brrrand'n

Logo & Title

Chang'n th' Favicon

Chang'n th' Title

Chang'n th' Title Font Sett'ns

Chang'n th' Title Colors

Sett'n Layout o' Title & Logo

Chang'n th' Logo

Auto-Detect'n

Manual Configurat'n

Variant-Specific Logos

Chang'n th' Size o' th' Logo

Color'n SVG Logos

Chang'n th' SVG Logo Colors

Custom Title & Logo Partial

Example

Brrrand'n

Shipped Variants

Chang'n th' Variant

Simple Setup

Single Variant

Multiple Variants

Adjust t' OS Sett'ns

Advanced

Parameters

Variant Parameters

Dividers

Example Configurat'n

Print Variant

Advanced Topics

Variant-specific Logos

Link'n t' a Variant

Modify'n Variants

Non-standard Modificat'ns

React t' Variant Switches 'n JavaScript

Module Theming

Change Rules Highlight'n

Change 3rd-Party Libraries Them'n

Stylesheet Generrrat'r