Logo

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' Logo

Opt'n Th' theme displays a logo 'n th' sidebar menu. 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.

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

Logo Direct'n

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

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

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

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