mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 17:53:07 +00:00
1095 lines
78 KiB
HTML
1095 lines
78 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="art-x-pir" dir="rtl" itemscope itemtype="http://schema.org/Article">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
<meta name="generator" content="Hugo 0.136.5">
|
|
<meta name="generator" content="Relearn 7.1.0">
|
|
<meta name="description" content="Change colors and logos of your site">
|
|
<meta name="author" content="Sören Weber">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta name="twitter:title" content="Brrrand'n :: Cap'n Hugo Relearrrn Theme">
|
|
<meta name="twitter:description" content="Change colors and logos of your site">
|
|
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/branding/index.html">
|
|
<meta property="og:site_name" content="Cap'n Hugo Relearrrn Theme">
|
|
<meta property="og:title" content="Brrrand'n :: Cap'n Hugo Relearrrn Theme">
|
|
<meta property="og:description" content="Change colors and logos of your site">
|
|
<meta property="og:locale" content="art_x_pir">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta itemprop="name" content="Brrrand'n :: Cap'n Hugo Relearrrn Theme">
|
|
<meta itemprop="description" content="Change colors and logos of your site">
|
|
<meta itemprop="wordCount" content="30">
|
|
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta itemprop="keywords" content="Reference">
|
|
<title>Brrrand'n :: Cap'n Hugo Relearrrn Theme</title>
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/configuration/branding/index.html" rel="alternate" hreflang="x-default">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/configuration/branding/index.html" rel="alternate" hreflang="en">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/branding/index.html" rel="alternate" hreflang="art-x-pir">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/configuration/branding/index.html" rel="canonical" type="text/html" title="Brrrand'n :: Cap'n Hugo Relearrrn Theme">
|
|
<link href="/hugo-theme-relearn/pir/configuration/branding/index.xml" rel="alternate" type="application/rss+xml" title="Brrrand'n :: Cap'n Hugo Relearrrn Theme">
|
|
<link href="/hugo-theme-relearn/images/logo.svg?1729808083" rel="icon" type="image/svg+xml">
|
|
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1729808083" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1729808083" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/nucleus.css?1729808083" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/auto-complete.css?1729808083" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1729808083" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1729808083" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/fonts.css?1729808083" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1729808083" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/theme.css?1729808083" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1729808083" rel="stylesheet" id="R-variant-style">
|
|
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1729808083" rel="stylesheet" id="R-variant-chroma-style">
|
|
<link href="/hugo-theme-relearn/css/print.css?1729808083" rel="stylesheet" media="print">
|
|
<link href="/hugo-theme-relearn/css/format-print.css?1729808083" rel="stylesheet">
|
|
<script src="/hugo-theme-relearn/js/variant.js?1729808083"></script>
|
|
<script>
|
|
window.relearn = window.relearn || {};
|
|
window.relearn.relBasePath='..\/..\/..';
|
|
window.relearn.relBaseUri='..\/..\/..\/..';
|
|
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
|
|
window.relearn.disableAnchorCopy=false;
|
|
window.relearn.disableAnchorScrolling=false;
|
|
// variant stuff
|
|
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'retro-auto', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
|
// translations
|
|
window.T_Copy_to_clipboard = `Copy t' clipboard`;
|
|
window.T_Copied_to_clipboard = `Copied t' clipboard!`;
|
|
window.T_Copy_link_to_clipboard = `Copy link t' clipboard`;
|
|
window.T_Link_copied_to_clipboard = `Copied link t' clipboard!`;
|
|
window.T_Reset_view = `Rrreset view`;
|
|
window.T_View_reset = `View rrreset!`;
|
|
window.T_No_results_found = `No rrresults found fer "{0}"`;
|
|
window.T_N_results_found = `{1} rrresults found fer "{0}"`;
|
|
</script>
|
|
<style>
|
|
#R-body img.bg-white {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="mobile-support print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/pir/configuration/branding/index.html">
|
|
<div id="R-body" class="default-animation">
|
|
<div id="R-body-overlay"></div>
|
|
<nav id="R-topbar">
|
|
<div class="topbar-wrapper">
|
|
<div class="topbar-sidebar-divider"></div>
|
|
<div class="topbar-area topbar-area-start" data-area="start">
|
|
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL+ALT+n)"><i class="fa-fw fas fa-bars"></i></button>
|
|
</div>
|
|
<div class="topbar-button topbar-button-toc" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o' Contents (CTRL+ALT+t)"><i class="fa-fw fas fa-list-alt"></i></button>
|
|
<div class="topbar-content">
|
|
<div class="topbar-content-wrapper">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/pir/configuration/index.html"><span itemprop="name">Configurrrat'n</span></a><meta itemprop="position" content="1"> > </li><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Brrrand'n</span><meta itemprop="position" content="2"></li>
|
|
</ol>
|
|
<div class="topbar-area topbar-area-end" data-area="end">
|
|
<div class="topbar-button topbar-button-edit" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/configuration/branding/_index.pir.md" target="_self" title="Edit (CTRL+ALT+w)"><i class="fa-fw fas fa-pen"></i></a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-print" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/configuration/branding/index.print.html" title="Prrrint whole chapterrr (CTRL+ALT+p)"><i class="fa-fw fas fa-print"></i></a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-prev" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/configuration/sitemanagement/stableoutput/index.html" title="Stable Output (🡒)"><i class="fa-fw fas fa-chevron-left"></i></a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-next" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/configuration/branding/logo/index.html" title="Logo (🡐)"><i class="fa-fw fas fa-chevron-right"></i></a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-more" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Morrre"><i class="fa-fw fas fa-ellipsis-v"></i></button>
|
|
<div class="topbar-content">
|
|
<div class="topbar-content-wrapper">
|
|
<div class="topbar-area topbar-area-more" data-area="more">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div id="R-main-overlay"></div>
|
|
<main id="R-body-inner" class="highlightable configuration" tabindex="-1">
|
|
<div class="flex-block-wrapper">
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="brrrandn">Brrrand'n</h1>
|
|
|
|
<div class="children children-h2 children-sort-">
|
|
<h2><a href="/hugo-theme-relearn/pir/configuration/branding/logo/index.html">Logo</a></h2><p>Provide yer own logo an' favicon</p>
|
|
<h2><a href="/hugo-theme-relearn/pir/configuration/branding/colors/index.html">Colors</a></h2><p>Learrrn how t' cust'mize yer site's colors</p>
|
|
<h2><a href="/hugo-theme-relearn/pir/configuration/branding/modules/index.html">Module Them'n</a></h2><p>Colors o' rules highlight'n an' 3rd-party modules</p>
|
|
<h2><a href="/hugo-theme-relearn/pir/configuration/branding/generator/index.html">Stylesheet Generator</a></h2><p>An interactive tool t' generate color variant stylesheets</p>
|
|
</div>
|
|
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
|
<i class="fa-fw fas fa-layer-group"></i>
|
|
<ul>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<section>
|
|
<h1 class="a11y-only">Subsct'ns o' Brrrand'n</h1>
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="logo">Logo</h1>
|
|
|
|
<h2 id="change-the-favicon">Change th' Favicon</h2>
|
|
<p>If yer favicon be an 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 look up 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>
|
|
<div class="tab-panel" data-tab-group="ef0d6b1049e66fefc313ad9c634d1168">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="layoutspartialsfaviconhtml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('ef0d6b1049e66fefc313ad9c634d1168','layoutspartialsfaviconhtml')"
|
|
>
|
|
<span class="tab-nav-text">layouts/partials/favicon.html</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="layoutspartialsfaviconhtml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"icon"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/images/favicon.bmp"</span> <span class="na">type</span><span class="o">=</span><span class="s">"image/bmp"</span><span class="p">></span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><h2 id="change-the-logo">Change th' Logo</h2>
|
|
<p>By default, only yer ship title will be shown at th' top o' th' menu. Ye can <a href="/hugo-theme-relearn/pir/configuration/sidebar/headerfooter/index.html#title">configure this</a>, or override th' logo partial.</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, or ye could paste an SVG definit'n!</p>
|
|
<p>Th' size o' th' logo will adapt automatically.</p>
|
|
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
|
<i class="fa-fw fas fa-layer-group"></i>
|
|
<ul>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="brrrandn">Brrrand'n</h1>
|
|
|
|
<p>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 <code>hugo.toml</code>.</p>
|
|
<p>Ye can use th' <a href="/hugo-theme-relearn/pir/configuration/branding/colors/index.html#shipped-variants">shipped variants</a>, <a href="/hugo-theme-relearn/pir/configuration/branding/colors/index.html#modifying-variants">cust'mize them</a>, or create yer own. Th' <a href="/hugo-theme-relearn/pir/configuration/branding/generator/index.html">interactive variant generator</a> can help ye wit' this.</p>
|
|
<p>Once set up 'n <code>hugo.toml</code>, ye can switch variants us'n th' selector at th' bottom o' th' menu.</p>
|
|
<h2 id="shipped-variants">Shipped Variants</h2>
|
|
<p>Th' theme ships wit' th' follow'n set o' variants</p>
|
|
<ul>
|
|
<li>Relearrrn
|
|
<ul>
|
|
<li>Light: th' classic Relearrrn default, com'n wit' signature green, dark sidebar an' light rrrambl'n area</li>
|
|
<li>Dark: dark variant o' Light, com'n wit' signature green, dark sidebar an' dark rrrambl'n area</li>
|
|
<li>Bright: alternative o' Light, com'n wit' signature green, green sidebar an' light rrrambl'n area</li>
|
|
</ul>
|
|
</li>
|
|
<li>Zen
|
|
<ul>
|
|
<li>Light: a more relaxed white/grey variant, com'n wit' blue accents, light sidebar an' light rrrambl'n area</li>
|
|
<li>Dark: dark variant o' Light, com'n wit' blue accents, dark sidebar an' dark rrrambl'n area</li>
|
|
</ul>
|
|
</li>
|
|
<li>Experimental
|
|
<ul>
|
|
<li>Neon: a variant that glows 'n th' dark, gradient sidebar an' dark rrrambl'n area</li>
|
|
</ul>
|
|
</li>
|
|
<li>Retro
|
|
<ul>
|
|
<li>Learrrn: th' default o' th' old Learrrn theme, com'n wit' signature light purple, dark sidebar an' light rrrambl'n area</li>
|
|
<li>Blue: a blue variant o' th' old Learrrn theme, com'n tinted 'n blue, dark sidebar an' light rrrambl'n area</li>
|
|
<li>Green: a green variant o' th' old Learrrn theme, com'n tinted 'n green, dark sidebar an' light rrrambl'n area</li>
|
|
<li>Red: a red variant o' th' old Learrrn theme, com'n tinted 'n red, dark sidebar an' light rrrambl'n area</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h2 id="changing-the-variant">Chang'n th' Variant</h2>
|
|
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> Set th' <code>themeVariant</code> opt'n t' change th' variant.</p>
|
|
<p>Th' theme offers th' recommended <a href="/hugo-theme-relearn/pir/configuration/branding/colors/index.html#theme-variant-advanced">advanced configurat'n mode</a> that combines th' functionality fer <a href="/hugo-theme-relearn/pir/configuration/branding/colors/index.html#multiple-variants">multiple variants</a>, <a href="/hugo-theme-relearn/pir/configuration/branding/colors/index.html#adjust-to-os-settings">OS sett'n adjustments</a>, an' more.</p>
|
|
<h3 id="theme-variant">Simple Setup</h3>
|
|
<h4 id="single-variant">Single Variant</h4>
|
|
<p>Set <code>themeVariant</code> t' yer theme CSS file name:</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s1">'relearn-light'</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">themeVariant</span><span class="p">:</span><span class="w"> </span><span class="l">relearn-light</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"themeVariant"</span><span class="p">:</span> <span class="s2">"relearn-light"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Place yer theme file 'n <code>assets/css</code> or <code>themes/hugo-theme-relearn/assets/css</code>. Name it <code>theme-*.css</code>.</p>
|
|
<p>In th' above example, th' path o' yer theme file must be <code>assets/css/theme-relearn-light.css</code> or <code>themes/hugo-theme-relearn/assets/css/theme-relearn-light.css</code>.</p>
|
|
<h4 id="multiple-variants">Multiple Variants</h4>
|
|
<p>T' let th' reader choose between multiple variants, set <code>themeVariant</code> like this:</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span><span class="s1">'relearn-light'</span><span class="p">,</span> <span class="s1">'relearn-dark'</span><span class="p">]</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">themeVariant</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">relearn-light</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">relearn-dark</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"themeVariant"</span><span class="p">:</span> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"relearn-light"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"relearn-dark"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Th' first variant be th' default, an' a selector will appear if there’s more than one.</p>
|
|
<h4 id="adjust-to-os-settings">Adjust t' OS Sett'ns</h4>
|
|
<p>Use th' <code>auto</code> 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.</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span><span class="s1">'auto'</span><span class="p">,</span> <span class="s1">'red'</span><span class="p">]</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">themeVariant</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">auto</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">red</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"themeVariant"</span><span class="p">:</span> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"auto"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"red"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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.</p>
|
|
<p>Default be <code>relearn-light</code> fer light 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> array.</p>
|
|
<p>Ye can override th' default wit' <code>themeVariantAuto</code>:</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">themeVariantAuto</span> <span class="p">=</span> <span class="p">[</span><span class="s1">'learn'</span><span class="p">,</span> <span class="s1">'neon'</span><span class="p">]</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">themeVariantAuto</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">learn</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">neon</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"themeVariantAuto"</span><span class="p">:</span> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"learn"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"neon"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 id="theme-variant-advanced">Advanced</h3>
|
|
<p>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.</p>
|
|
<p>Like wit' th' <a href="/hugo-theme-relearn/pir/configuration/branding/colors/index.html#multiple-variants">multiple variants</a> opt'n, ye be defin'n yer theme variants 'n an array but now 'n a t'ble wit' subopt'ns.</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 class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span><span class="s1">'relearn-light'</span><span class="p">,</span> <span class="s1">'relearn-dark'</span><span class="p">]</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">themeVariant</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">relearn-light</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">relearn-dark</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"themeVariant"</span><span class="p">:</span> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"relearn-light"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"relearn-dark"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>ye now write it that way:</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'relearn-light'</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'relearn-dark'</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">themeVariant</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">relearn-light</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">relearn-dark</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"themeVariant"</span><span class="p">:</span> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"relearn-light"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"relearn-dark"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<h4 id="parameter">Parameter</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>identifier</td>
|
|
<td><em><empty></em></td>
|
|
<td>Must correspond t' th' name o' a color variant either 'n yer site’s or th' theme’s directory 'n th' form <code>assets/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>
|
|
</tr>
|
|
<tr>
|
|
<td>auto</td>
|
|
<td><em><empty></em></td>
|
|
<td>If set, th' variant be treated as an <a href="/hugo-theme-relearn/pir/configuration/branding/colors/index.html#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>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h4 id="example-configuration">Example Configurat'n</h4>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'relearn-auto'</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">'Relearn Light/Dark'</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'relearn-light'</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'relearn-dark'</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'relearn-bright'</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span><span class="s1">'zen-light'</span><span class="p">,</span> <span class="s1">'zen-dark'</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'zen-auto'</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">'Zen Light/Dark'</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'zen-light'</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'zen-dark'</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">auto</span> <span class="p">=</span> <span class="p">[</span><span class="s1">'learn'</span><span class="p">,</span> <span class="s1">'neon'</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'retro-auto'</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s1">'Retro Learn/Neon'</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'neon'</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">themeVariant</span><span class="p">]]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">'learn'</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">themeVariant</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">auto</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">relearn-auto</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Relearrrn Light/Dark</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">relearn-light</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">relearn-dark</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">relearn-bright</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">auto</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">zen-light</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">zen-dark</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">zen-auto</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Zen Light/Dark</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">zen-light</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">zen-dark</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">auto</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">learn</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">neon</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">retro-auto</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Retro Learn/Neon</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">neon</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">learn</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"themeVariant"</span><span class="p">:</span> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"auto"</span><span class="p">:</span> <span class="p">[],</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"relearn-auto"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"Relearn Light/Dark"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"relearn-light"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"relearn-dark"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"relearn-bright"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"auto"</span><span class="p">:</span> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"zen-light"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"zen-dark"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"zen-auto"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"Zen Light/Dark"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"zen-light"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"zen-dark"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"auto"</span><span class="p">:</span> <span class="p">[</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"learn"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s2">"neon"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"retro-auto"</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"Retro Learn/Neon"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"neon"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"identifier"</span><span class="p">:</span> <span class="s2">"learn"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h2 id="advanced-topics">Advanced Topics</h2>
|
|
<h3 id="modifying-variants">Modify'n Variants</h3>
|
|
<p>In case ye like a shipped variant but only want t' tweak some aspects, ye have some choices. <strong>Don’t edit th' file 'n th' theme’s directory!</strong> Ye will lose th' ability t' later easily upgrade yer theme t' a newer version.</p>
|
|
<ol>
|
|
<li>
|
|
<p>Copy an' change</p>
|
|
<p>Ye can copy th' shipped variant file from th' theme’s <code>themes/hugo-theme-relearn/assets/css</code> directory t' th' site’s <code>assets/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>hugo.toml</code> by th' chosen name.</p>
|
|
</li>
|
|
<li>
|
|
<p>Create an' import</p>
|
|
<p>Ye can create a new variant file 'n th' site’s <code>assets/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>hugo.toml</code> by th' chosen name.</p>
|
|
<p>For example, ye want t' use th' <code>relearn-light</code> variant but want t' change th' rules highlight'n schema t' th' one used 'n th' <code>neon</code> variant. For that, create a new <code>assets/css/theme-my-brand'n.css</code> 'n yer site’s directory an' add th' follow'n lines:</p>
|
|
<div class="tab-panel" data-tab-group="403ff476e2eabee0397f2106d6de7e0c">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="assetscsstheme-my-brandingcss"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('403ff476e2eabee0397f2106d6de7e0c','assetscsstheme-my-brandingcss')"
|
|
>
|
|
<span class="tab-nav-text">assets/css/theme-my-brand'n.css</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="assetscsstheme-my-brandingcss"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="s2">"theme-relearn-light.css"</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nv">--CODE-theme</span><span class="p">:</span> <span class="n">neon</span><span class="p">;</span> <span class="c">/* name o' th' chroma stylesheet file */</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nv">--CODE-BLOCK-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">226</span><span class="p">,</span> <span class="mi">228</span><span class="p">,</span> <span class="mi">229</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span> <span class="c">/* fallback color fer code text */</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nv">--CODE-BLOCK-BG-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">54</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span> <span class="c">/* fallback color fer code background */</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><p>Afterwards, put this 'n yer <code>hugo.toml</code> t' use yer new variant:</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s1">'my-branding'</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">themeVariant</span><span class="p">:</span><span class="w"> </span><span class="l">my-brand'n</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"themeVariant"</span><span class="p">:</span> <span class="s2">"my-branding"</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 while keep'n yer modificat'ns.</p>
|
|
</li>
|
|
</ol>
|
|
<h3 id="react-to-variant-switches-in-javascript">React t' Variant Switches 'n JavaScript</h3>
|
|
<p>Once a color variant be fully boarded, either initially or by switch'n th' color variant manually wit' th' variant selector, th' custom event <code>themeVariantLoaded</code> on th' <code>document</code> will be dispatched. Ye can add an event listener an' react t' changes.</p>
|
|
<div class="tab-panel" data-tab-group="9d158ba8dc65865306dcbc2ba94f0446">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="javascript"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('9d158ba8dc65865306dcbc2ba94f0446','javascript')"
|
|
>
|
|
<span class="tab-nav-text">JavaScript</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="javascript"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span> <span class="s1">'themeVariantLoaded'</span><span class="p">,</span> <span class="kd">funct'n</span><span class="p">(</span> <span class="nx">e</span> <span class="p">){</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">detail</span><span class="p">.</span><span class="nx">variant</span> <span class="p">);</span> <span class="c1">// `relearn-light`
|
|
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">});</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
|
<i class="fa-fw fas fa-layer-group"></i>
|
|
<ul>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/explanation/index.html">Explanation</a></li>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="module-theming">Module Theming</h1>
|
|
|
|
<h2 id="change-syntax-highlighting">Change Rules Highlight'n</h2>
|
|
<p>If ye want t' switch th' rules highlight'n theme together wit' yer color variant, first ye need t' configure yer installat'n <a href="https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css" rel="external" target="_self">accord'n t' Hugo’s documentat'n</a> t' provide a rules highlight'n stylesheet file.</p>
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">marrrkup</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">marrrkup</span><span class="p">.</span><span class="nx">highlight</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">noClasses</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">marrrkup</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">highlight</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">noClasses</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"markup"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"highlight"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"noClasses"</span><span class="p">:</span> <span class="kc">false</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Ye can use one o' th' shipped stylesheet files or use Cap'n Hugo t' generate a file fer ye.</p>
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo gen chromastyles --style<span class="o">=</span>monokai > chroma-mycode.css</span></span></code></pre></div>
|
|
<p>Th' file must be written t' <code>assets/css/chroma-<NAME>.css</code>. T' use it wit' yer color variant, ye have t' modify <code>--CODE-theme: <NAME></code> 'n th' color variant stylesheet file.</p>
|
|
<div class="tab-panel" data-tab-group="36f9ee9e31417e2aa530c9c5457a2a80">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="assetscsstheme-my-brandingcss"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('36f9ee9e31417e2aa530c9c5457a2a80','assetscsstheme-my-brandingcss')"
|
|
>
|
|
<span class="tab-nav-text">assets/css/theme-my-brand'n.css</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="assetscsstheme-my-brandingcss"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="s2">"theme-relearn-light.css"</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nv">--CODE-theme</span><span class="p">:</span> <span class="n">mycode</span><span class="p">;</span> <span class="c">/* name o' th' chroma stylesheet file */</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><h2 id="change-3rd-party-libraries-theming">Change 3rd-Party Libraries Them'n</h2>
|
|
<p>Some o' th' shipped shorrrtcodes be us'n 3rd-party libraries. See th' individual shortcode documentat'n on how t' change their them'n.</p>
|
|
<ul>
|
|
<li><a href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html#setting-a-specific-mermaid-theme"><code>mermaid</code> shortcode</a></li>
|
|
<li><a href="/hugo-theme-relearn/pir/shortcodes/openapi/index.html#setting-a-specific-swagger-ui-theme"><code>openapi</code> shortcode</a></li>
|
|
</ul>
|
|
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
|
<i class="fa-fw fas fa-layer-group"></i>
|
|
<ul>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="stylesheet-generrratr">Stylesheet Generrrat'r</h1>
|
|
|
|
<p>This interactive tool may help ye t' generate yer own color variant stylesheet.</p>
|
|
<div class="expand">
|
|
<input type="checkbox" id="R-expand-df04114d73427b0fc2ccf0075bd28d95" aria-controls="R-expandcontent-df04114d73427b0fc2ccf0075bd28d95">
|
|
<label class="expand-label" for="R-expand-df04114d73427b0fc2ccf0075bd28d95">
|
|
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
|
|
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Show usage instruct'ns
|
|
</label>
|
|
<div id="R-expandcontent-df04114d73427b0fc2ccf0075bd28d95" class="expand-content">
|
|
<p>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.</p>
|
|
<p>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 <strong>an' th' plank</strong> will update accordingly.</p>
|
|
<p>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.</p>
|
|
<p>T' better understand this, select th' <code>neon</code> variant an' modify th' different head'n colors. There, colors fer th' head'ns <code>h2</code>, <code>h3</code> an' <code>h4</code> be explicitly set. <code>h5</code> be not set an' inherits its value from <code>h4</code>. <code>h6</code> be also not set an' inherits its value from <code>h5</code>.</p>
|
|
<p>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 <strong>browse t' other planks</strong> an' even close th' browser <strong>without los'n yer changes</strong>.</p>
|
|
<p>Once ye be satisfied, ye can download th' new variants file an' copy it into yer site’s <code>assets/css</code> directory.</p>
|
|
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> Afterwards, ye have t' adjust th' <code>themeVariant</code> opt'n 'n yer <code>hugo.toml</code> t' yer chosen file name. For example, if yer new variants file be named <code>theme-my-custom-variant.css</code>, ye have t' set <code>themeVariant='my-custom-variant'</code> t' use it.</p>
|
|
<p>See th' docs fer <a href="/hugo-theme-relearn/pir/configuration/branding/colors/index.html">further configurat'n opt'ns</a>.</p>
|
|
</div>
|
|
</div>
|
|
<p><span class="btn cstyle interactive secondary"><button onclick="window.variants&&variants.getStylesheet();this.blur();" type="button"><i class="fa-fw fas fa-download"></i> <span class="title">Download variant</span></button></span>
|
|
<span class="btn cstyle interactive warning"><button onclick="window.variants&&variants.resetVariant();this.blur();" type="button"><i class="fa-fw fas fa-trash"></i> <span class="title">Reset variant</span></button></span></p>
|
|
<div id="R-vargenerator" class="mermaid zoomable" style="background-color: var(--INTERNAL-MAIN-TEXT-color);">Graph</div>
|
|
<p><span class="btn cstyle interactive secondary"><button onclick="window.variants&&variants.getStylesheet();this.blur();" type="button"><i class="fa-fw fas fa-download"></i> <span class="title">Download variant</span></button></span>
|
|
<span class="btn cstyle interactive warning"><button onclick="window.variants&&variants.resetVariant();this.blur();" type="button"><i class="fa-fw fas fa-trash"></i> <span class="title">Reset variant</span></button></span></p>
|
|
<script>
|
|
window.variants && variants.generator( '#R-vargenerator' );
|
|
</script>
|
|
|
|
|
|
<footer class="footline">
|
|
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
|
|
<i class="fa-fw fas fa-layer-group"></i>
|
|
<ul>
|
|
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/tutorial/index.html">Tutorial</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="/hugo-theme-relearn/js/clipboard.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-color.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-dispatch.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-drag.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-ease.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-interpolate.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-selection.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-timer.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-transition.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/d3/d3-zoom.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/js-yaml.min.js?1729808083" defer></script>
|
|
<script src="/hugo-theme-relearn/js/mermaid.min.js?1729808083" defer></script>
|
|
<script>
|
|
window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
|
|
</script>
|
|
<script src="/hugo-theme-relearn/js/theme.js?1729808083" defer></script>
|
|
</body>
|
|
</html>
|