<p>Th' Relearrrn theme provides configurat'n opt'ns t' change yer your 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 thru so called color variants.</p>
<p>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 <code>config.toml</code>.</p>
<p>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' <ahref="../../../basics/generator/index.html">interactive variant generator</a> may help ye wit' this task.</p>
<p>Once configured 'n yer <code>config.toml</code>, ye can select them wit' th' variant selector at th' bottom o' th' menu.</p>
<p>Yer theme variant file must reside 'n yer site’s <code>static/css</code> directory or 'n th' theme’s <code>static/css</code> directory an' th' file name must start wit' <code>theme-</code> an' end wit <code>.css</code>. In th' above example, th' path o' yer theme file must be <code>static/css/theme-relearn-light.css</code>.</p>
<p>If ye want t' make changes t' a shipped color variant, create a copy 'n yer site’s <code>static/css</code> directory. Don’t edit th' file 'n th' theme’s directory!</p>
</div>
</div>
<h3id="multiple-variants">Multiple Variants</h3>
<p>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.</p>
<p>Th' theme provides an advanced configurat'n mode, combin'n th' functionality fer multiple variants wit' th' below possibilities o' adjust'n t' yer OS sett'ns, logo an' rules highlightn'n an' even more!</p>
<p>Although all opt'ns documented here be still work'n, th' advanced configurat'n opt'ns be th' recommended way t' configure yer color variants. <ahref="#theme-variant-advanced">See below</a>.</p>
</div>
</div>
<h2id="adjust-to-os-settings">Adjust t' OS Sett'ns</h2>
<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code> t' become an auto mode variant. That’s it.</p>
<p>Ye can use th' <code>auto</code> value wit' th' single or multiple variants opt'n. If ye be us'n multiple variants, ye can drop <code>auto</code> 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.</p>
</div><p>If ye don’t configure anyth'n else, th' theme will default t' use <code>relearn-light</code> fer light mode an' <code>relearn-dark</code> fer dark mode. These defaults be overwritten by th' first two non-auto opt'ns o' yer <code>themeVariant</code> opt'n if present.</p>
<p>In th' above example, ye would end wit' <code>red</code> fer light mode an' th' default o' <code>relearn-dark</code> fer dark mode.</p>
<p>If ye don’t like that behavior, ye can explicitly set <code>themeVariantAuto</code>. Th' first entry 'n th' array be th' color variant fer light mode, th' second fer dark mode.</p>
<p>If yer favicon be a SVG, PNG or ICO, just drop yer image 'n yer site’s <code>static/images/</code> directory an' name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectively.</p>
<p>If ye want t' adjust yer favicon accord'n t' yer OS sett'ns fer light/dark mode, add th' image files <code>static/images/favicon-light.svg</code> an' <code>static/images/favicon-dark.svg</code> 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' <code>favicon.svg</code> fer each miss'n file. All supplied favicons must be o' th' same file format.</p>
<p>If no favicon file be found, th' theme will lookup th' alternative filename <code>logo</code> 'n th' same locat'n an' will repeat th' search fer th' list o' supported file types.</p>
<p>If ye need t' change this default behavior, create a new file <code>layouts/partials/favicon.html</code> 'n yer site’s directory an' write someth'n like this:</p>
<p>Create a new file 'n <code>layouts/partials/logo.html</code> o' yer ship. Then write any HTML ye want. Ye could use an <code>img</code> HTML tag an' reference an image created under th' <em>static</em> folder, or ye could paste a SVG definit'n!</p>
<p>If ye want t' switch th' rules highlight'n theme together wit' yer color variant, ye need t' configure yer installat'n <ahref="https://gohugo.io/content-management/syntax-highlighting/"target="_blank">accord'n t' Hugo’s documentat'n</a> an' provide a rules highlight'n stylesheet file.</p>
<p>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' <code>static/css/chroma-<NAME>.css</code>. T' use it wit' yer color variant ye have t' define <code>--CODE-theme: <NAME></code> 'n th' color variant stylesheet file.</p>
<p>For an example, take a look into <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/static/css/theme-relearn-light.css"target="_blank"><code>theme-relearn-light.css</code></a> an' <ahref="https://github.com/McShelby/hugo-theme-relearn/blob/main/exampleSite/config/_default/config.toml"target="_blank"><code>config.toml</code></a> o' th' exampleSite.</p>
<p>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.</p>
<p>Like wit' th' <ahref="#multiple-variants">multiple variants</a> opt'n, ye be defin'n yer theme variants 'n an array but now <em>not by simple str'ns</em><strong>but 'n a t'ble wit' subopt'ns</strong>.</p>
<p>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.</p>
</div><p>Th' <code>identifier</code> 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.</p>
<td>Must correspond t' th' name o' a color variant either 'n yer site’s or th' theme’s directory 'n th' form <code>static/css/theme-<IDENTIFIER>.css</code>.</td>
</tr>
<tr>
<td>name</td>
<td>see notes</td>
<td>Th' name t' be displayed 'n th' variant selector. If not set, th' identifier be used 'n a human read'ble form.</td>
<td>If set, th' variant be treated as an <ahref="#adjust-to-os-settings">auto mode variant</a>. It has th' same behavior as th' <code>themeVariantAuto</code> opt'n. 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 opt'ns has th' benefit that ye can now have multiple auto mode variants instead o' just one wit' th' simple opt'ns.</td>
<p>In case ye like a shipped variant but only want t' tweak some aspects, ye have two choices:</p>
<ol>
<li>
<p>Copy an' change</p>
<p>Ye can copy th' shipped variant file from th' theme’s <code>static/css</code> directory t' th' site’s <code>static/css</code> 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 <code>config.toml</code> by th' choosen name.</p>
</li>
<li>
<p>Create an' import</p>
<p>Ye can create a new variant file 'n th' site’s <code>static/css</code> 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 <code>config.toml</code> by th' choosen name.</p>
<p>For example, ye want t' use th' <code>relearn-light</code> variant but want t' change th' rules highlightn'n schema t' th' one used 'n th' <code>neon</code> variant. For that, create a new <code>static/css/theme-my-brand'n.css</code> 'n yer site’s directory an' add th' follow'n lines:</p>
</span></span><spanclass="line"><spanclass="cl"><spanclass="nv">--CODE-theme</span><spanclass="p">:</span><spanclass="n">learn</span><spanclass="p">;</span><spanclass="c">/* name o' th' chroma styleheet file */</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="nv">--CODE-BLOCK-color</span><spanclass="p">:</span><spanclass="nb">rgba</span><spanclass="p">(</span><spanclass="mi">226</span><spanclass="p">,</span><spanclass="mi">228</span><spanclass="p">,</span><spanclass="mi">229</span><spanclass="p">,</span><spanclass="mi">1</span><spanclass="p">);</span><spanclass="c">/* fallback color fer code text */</span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="nv">--CODE-BLOCK-BG-color</span><spanclass="p">:</span><spanclass="nb">rgba</span><spanclass="p">(</span><spanclass="mi">40</span><spanclass="p">,</span><spanclass="mi">42</span><spanclass="p">,</span><spanclass="mi">54</span><spanclass="p">,</span><spanclass="mi">1</span><spanclass="p">);</span><spanclass="c">/* fallback color fer code background */</span>
</div><p>In comparison t' <em>copy an' change</em>, this has th' advantage that ye profit from any adjustments t' th' <code>relearn-light</code> variant but keep yer modificat'ns.</p>
