Logo & Title

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

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">

Change th' Menu Title

Opt'n Th' ship title o' yer hugo.toml 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.

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

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

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

Chang'n th' 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;
}
</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' 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.

Set Direct'n o' Title & Logo

Ye can control th' layout direct'n o' th' logo an' title:

[params]
  [params.logo]
    direct'n = 'column'

params:
  logo:
    direct'n: column

{
   "params": {
      "logo": {
         "direction": "column"
      }
   }
}

Valid values be:

• row (default) - Logo an' title side by side
• column - Logo above title

Change 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 yer site’s params.toml. This will override automatic detect'n:

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

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:

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

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, use th' logo field within yer themeVariant configurat'n:

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

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

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

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

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

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

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

{
   "params": {
      "themeVariant": [
         {
            "identifier": "relearn-light",
            "logo": {
               "src": "/images/logo-dark.svg"
            }
         },
         {
            "identifier": "relearn-dark",
            "logo": {
               "src": "/images/logo-light.svg"
            }
         },
         {
            "identifier": "neon",
            "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 th' variant’s src t' a whitespace str'n:

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

    [params.themeVariant.logo]
      src = ' '

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

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

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

Customiz'n Size

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.

Th' recolor'n applies t' all black elements 'n yer SVG:

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

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

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

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 opt'ns, 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>

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 hugo.toml.

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 hugo.toml, 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
  • Bright: alternative o' Light, com'n wit' signature green, green sidebar an' light 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
• 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 opt'n 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:

[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:

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

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.

[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 opt'ns o' yer themeVariant array.

Ye can override th' default wit' themeVariantAuto:

[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 opt'n, ye be defin'n yer theme variants 'n an array but now 'n a table 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' table below.

Parameters

Example Configurat'n

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

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

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

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

  [[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]]
    auto = ['learn', 'neon']
    identifier = 'retro-auto'
    name = 'Retro Learn/Neon'

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

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

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

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

Advanced Topics

Variant-specific Logos

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

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.

1. 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 hugo.toml by th' chosen name.

2. 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 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 assets/css/theme-my-brand'n.css 'n yer site’s directory an' add th' follow'n lines:

   ​

   assets/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 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.

[marrrkup]
  [marrrkup.highlight]
    noClasses = false

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.

• mermaid shortcode
• openapi shortcode

Stylesheet Generrrat'r

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