hugo-theme-relearn/basics/customization/index.html
2022-02-18 01:59:54 +00:00

453 lines
50 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="js csstransforms3d">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Hugo 0.92.2" />
<meta name="generator" content="Relearn 2.9.6">
<meta name="description" content="Documentation for Hugo Relearn Theme">
<meta name="author" content="Sören Weber">
<title>Customization :: Documentation for Hugo Relearn Theme</title>
<link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/customization/index.xml" title="Documentation for Hugo Relearn Theme" />
<link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645149590" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/nucleus.css?1645149590" rel="stylesheet">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645149590" rel="stylesheet">
<link href="/hugo-theme-relearn/css/featherlight.min.css?1645149590" rel="stylesheet">
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645149590" rel="stylesheet">
<link href="/hugo-theme-relearn/css/auto-complete.css?1645149590" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme.css?1645149590" rel="stylesheet">
<link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645149590" rel="stylesheet">
<link href="/hugo-theme-relearn/css/variant.css?1645149590" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645149590" rel="stylesheet" media="print">
<link href="/hugo-theme-relearn/css/print.css?1645149590" rel="stylesheet" media="print">
<style>
</style>
<script>
// we need to define this script in the head to avoid flickering
// on page load if the user has selected a non default variant
var theme = window.localStorage.getItem( 'theme' );
changeTheme( theme );
function getTheme(){
var link = document.querySelector( '#variant-style' );
if( !link ){
return;
}
var path = link.getAttribute( 'href' );
var theme = path.match(/^.*\/theme-(.*?)\.css.*$/)[ 1 ];
return theme;
}
function markTheme( theme ){
var select = document.querySelector( '#select-theme' );
if( !select ){
return;
}
select.value = theme;
}
function changeTheme( theme ){
var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
if( themes.indexOf( theme ) < 0 ){
theme = themes.length ? themes[ 0 ] : null;
}
if( !theme ){
return;
}
var link = document.querySelector( '#variant-style' );
if( !link ){
return;
}
var old_path = link.getAttribute( 'href' );
var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
if( old_path != new_path ){
window.localStorage.setItem( 'theme', theme );
link.setAttribute( 'href', new_path );
markTheme( theme );
// remove selection, because if some uses an arrow navigation
// by pressing the left or right cursor key, we will automatically
// select a different style
if( document.activeElement ){
document.activeElement.blur();
}
}
}
</script>
<script src="/hugo-theme-relearn/js/jquery.min.js?1645149590"></script>
</head>
<body class="default-animation" data-url="/hugo-theme-relearn/basics/customization/">
<!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
<!-- https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72 -->
<script>
var index_url="/hugo-theme-relearn/index.json";
var root_url="/";
var baseUri=root_url.replace(/\/$/, '');
</script>
<nav id="sidebar" class="default-animation showVisitedLinks">
<div id="header-wrapper" class="default-animation">
<div id="header" class="default-animation">
<a id="logo"
href="/hugo-theme-relearn/"
style="
color: #383838;
font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: -2px;
text-transform: uppercase;
">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.044 64.044"
style="
height: 65px;
margin-bottom: -20px;
margin-top: -20px;
width: 65px;
">
<path d="M46.103 136.34c-.642-.394-1.222-2.242-1.98-2.358-.76-.117-1.353.506-1.618 1.519-.266 1.012-.446 4.188.173 5.538.213.435.482.787 1.03.845.547.057.967-.504 1.45-1.027.482-.523.437-.9 1.142-.612.705.289 1.051.4 1.586 1.229.535.828 1.085 4.043.868 5.598-.241 1.458-.531 2.8-.59 4.088.26.075.517.148.772.217 2.68.724 5.373 1.037 7.873.02.001-.028.01-.105.008-.11-.048-.165-.18-.41-.36-.698-.18-.29-.414-.645-.586-1.114a3.212 3.212 0 0 1-.125-1.735c.056-.21.153-.342.249-.475 1.237-1.193 2.932-1.373 4.244-1.384.557-.004 1.389.016 2.198.255.809.239 1.706.724 2.068 1.843.187.578.114 1.17-.043 1.623-.153.438-.369.783-.545 1.091-.178.31-.329.6-.401.821-.007.02-.003.071-.005.094 2.256 1.008 4.716.91 7.189.398.55-.114 1.11-.247 1.673-.377.344-1.085.678-2.145.852-3.208.124-.752.158-2.311-.078-3.538-.118-.613-.306-1.15-.52-1.489-.221-.349-.413-.501-.747-.538-.243-.027-.51.013-.796.098-.67.223-1.33.606-1.966.76l-.008.002-.109.032c-.556.152-1.233.158-1.797-.36-.556-.51-.89-1.367-1.117-2.596-.283-1.528-.075-3.279.89-4.518l.071-.09h.07c.65-.71 1.485-.802 2.16-.599.706.213 1.333.629 1.772.84.736.354 1.185.319 1.475.171.291-.148.5-.439.668-.955.332-1.017.301-2.819.022-4.106-.148-.684-.13-1.292-.13-1.883-1.558-.463-3.067-.982-4.574-1.208-1.128-.169-2.263-.173-3.298.164-.13.046-.256.095-.38.15-.373.164-.633.342-.805.52-.077.098-.081.105-.087.21-.004.068.031.289.13.571.1.282.256.634.467 1.03.279.524.448 1.063.431 1.618a2.12 2.12 0 0 1-.499 1.309 1.757 1.757 0 0 1-.62.51h-.002c-.515.291-1.107.404-1.723.464-.86.083-1.787.026-2.598-.097-.806-.123-1.47-.28-1.948-.555-.444-.256-.79-.547-1.037-.925a2.273 2.273 0 0 1-.356-1.301c.029-.837.403-1.437.625-1.897.111-.23.191-.433.236-.583.045-.15.044-.25.046-.24-.005-.029-.127-.355-1.015-.741-1.138-.495-2.322-.673-3.533-.668h-.015a9.711 9.711 0 0 0-.521.016h-.002c-1.163.057-2.35.308-3.541.569.383 1.531.79 2.753.818 4.502-.096 1.297.158 2.114-1.03 2.935-.85.588-1.508.729-2.15.335" style="fill:#383838;fill-opacity:1;stroke:none;stroke-width:1.03763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
<path d="M61.472 101.34v.002c-.3-.003-.603.01-.894.04-.544.055-1.39.165-1.778.306-1.238.364.13 2.344.41 2.913.28.569.285 2.03.14 2.134-.144.103-.375.261-.934.345-.56.084.03-.037-1.589.086-1.62.122-5.506.29-8.265.248-.022.26-.036.521-.097.808-.309 1.442-.63 3.163-.494 4.074.071.473.168.65.414.8.23.14.737.235 1.62-.004.834-.227 1.3-.442 1.887-.456.595-.016 1.555.472 1.965.717.411.245-.03-.008.002 0s.128.05.176.102c.049.053-.276-.523.104.199.379.721.72 3.256.002 4.68-.46.913-1.01 1.49-1.64 1.711-.63.22-1.229.067-1.734-.135-.881-.353-1.584-.7-2.205-.647-1.199 1.94-1.186 4.17-.6 6.602.097.397.212.814.327 1.23 2.68-.556 5.542-1.016 8.337.132 1.064.437 1.73 1.015 1.902 1.857.169.831-.193 1.508-.438 1.986-.122.238-.23.46-.307.642-.07.164-.096.28-.104.324.069.429.309.723.686.945.385.227.89.355 1.35.423.723.104 1.567.152 2.287.086.693-.064 1.032-.338 1.241-.544a2.447 2.447 0 0 0 .303-.437.175.175 0 0 0 .013-.035c-.004-.066-.037-.246-.195-.527-.46-.816-.87-1.595-.817-2.51.028-.476.218-.938.529-1.288.304-.343.698-.586 1.186-.79 1.442-.606 2.96-.609 4.372-.409 1.525.216 2.963.679 4.378 1.083.226-2.09.784-3.9.592-5.77-.058-.565-.287-1.333-.598-1.827-.32-.508-.59-.717-1.036-.642-.648.11-1.472.935-2.707 1.078-.791.092-1.494-.267-1.95-.86-.45-.583-.678-1.335-.78-2.101-.202-1.525.031-3.229.89-4.27.615-.747 1.45-.887 2.15-.74.687.145 1.307.492 1.857.745v-.002c.546.252 1.033.388 1.281.344a.547.547 0 0 0 .353-.188c.113-.124.242-.35.384-.75.604-1.712.206-3.68-.303-5.654-.667.145-1.336.293-2.018.413-1.341.236-2.73.392-4.136.273-.656-.055-1.695-.085-2.58-.476-.442-.195-.903-.514-1.157-1.093-.259-.591-.205-1.313.08-2.014.223-.64 1.082-2.178.692-2.585-.391-.407-1.651-.56-2.554-.571z" style="fill:#383838;fill-opacity:1;stroke:none;stroke-width:.992837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
<path d="M83.128 98.116c-.484 1.875-1.057 3.757-2.486 5.033-.638.57-1.13.666-1.483.548-.401-.134-.715-.506-1.058-.973-.338-.461-.655-.97-1.076-1.332-.192-.165-.404-.315-.683-.38-.279-.066-.599-.02-.9.102-.489.196-.89.58-1.28 1.047a6.1 6.1 0 0 0-.985 1.632c-.234.591-.356 1.174-.277 1.713.072.487.392.977.905 1.185.463.187.926.156 1.36.154.433 0 .843.01 1.242.147.55.189.79.736.822 1.368.034.66-.145 1.412-.393 1.988l-.008.021c-.74 1.705-1.946 2.893-3.004 4.349l-.664.915.979.099c.924.092 1.788.26 2.468.675.46.281 1.806 1.205 2.794 2.222.497.513.888 1.031 1.047 1.502.078.231.095.422.05.6a.93.93 0 0 1-.345.474c-.301.223-.606.395-.864.532l-.354.186c-.107.058-.189.087-.345.228a.637.637 0 0 1 .062-.045l-.064.041-.209.236-.103.343s.003.126.007.152c.003.017.003.007.004.015v.002c.016.195.061.307.133.476a4.1 4.1 0 0 0 .32.596 5.7 5.7 0 0 0 2.8 2.258c.284.108.908.321 1.548.36.33.02.59.015.912-.13h.002c.08-.037.228-.095.382-.281.153-.186.19-.355.212-.445l.019-.075.003-.078c.023-.585-.037-1.296.072-1.899.153-.657.435-.956 1.009-.909 2.771.239 4.74 1.955 6.693 3.83l.742.714.279-1.155c.55-2.29 1.093-4.464 2.928-5.977.692-.57 1.184-.642 1.527-.509.39.151.676.536.996.995.319.458.605.926 1.07 1.212.194.119.464.232.784.209.32-.024.638-.163.988-.384 1.022-.645 1.778-1.756 2.086-2.942.136-.522.102-.991-.046-1.301-.158-.334-.433-.553-.754-.707-.653-.314-1.468-.373-2.094-.486-.825-.15-1.22-.475-1.345-.878-.13-.417 0-.953.335-1.61.6-1.173 1.887-2.602 3.13-3.911l.498-.526-.449-.432c-1.545-1.49-3.163-3.01-5.252-3.715h-.002c-.473-.16-1.097-.413-1.73-.424h-.003c-.311-.004-.596.04-.883.24v.002c-.22.155-.483.537-.583.937l-.008.036-.006.038c-.116.773-.06 1.467-.217 1.995-.063.212-.198.418-.359.507-.202.111-.492.153-.976.072-.582-.097-1.978-.69-3.021-1.503-.523-.407-.934-.85-1.117-1.3a1.153 1.153 0 0 1-.083-.63c.03-.184.1-.477.308-.593.21-.116.941-.32 1.377-.642h.002c.192-.141.403-.367.518-.64.114-.275.127-.526.123-.774-.006-.142-.036-.192-.08-.3a8.417 8.417 0 0 0-3-3.027c-1.226-.725-2.585-1.135-3.927-1.539-.434-.12-.844-.111-1.02.466zm.912.947c1.186.364 2.357.718 3.345 1.303 1.035.612 1.864 1.488 2.507 2.528-.514.263-1.095.5-1.44.79-.345.29-.729.914-.815 1.434-.084.509 0 .968.155 1.347.301.74.85 1.276 1.44 1.735 1.18.92 2.554 1.545 3.47 1.698.604.1 1.186.088 1.739-.216.594-.327.935-.911 1.088-1.427.264-.884.193-1.664.262-2.17h.1c.3.006.926.206 1.417.371 1.646.554 3.044 1.773 4.431 3.089-1.102 1.174-2.222 2.423-2.888 3.73-.42.823-.73 1.789-.453 2.687.283.913 1.1 1.415 2.138 1.603.691.126 1.472.226 1.84.403.19.091.258.182.278.223.03.064.058.075-.023.387-.21.804-.761 1.598-1.413 2.01-.247.155-.365.183-.407.187-.042.003-.061.002-.172-.066-.144-.088-.455-.473-.772-.929-.317-.454-.714-1.07-1.452-1.356-.783-.304-1.776-.022-2.713.75-1.942 1.6-2.626 3.764-3.146 5.8-1.802-1.676-3.772-3.138-6.589-3.517h-.002c-.346-.095-1.013-.031-1.293.143-.735.501-1.005 1.132-1.168 2.007-.125.69-.082 1.216-.074 1.659-.055.006-.046.01-.104.006-.42-.026-1.035-.215-1.244-.295-.947-.361-1.774-1.006-2.314-1.857-.054-.085-.072-.132-.109-.2l.027-.016c.284-.15.656-.36 1.045-.648.44-.327.789-.798.93-1.35a2.4 2.4 0 0 0-.068-1.379c-.254-.751-.753-1.353-1.295-1.911-1.09-1.124-2.452-2.049-2.99-2.378-.609-.372-1.303-.44-1.981-.56.875-1.094 1.878-2.251 2.596-3.921.294-.823.543-1.907.513-2.658-.049-.97-.489-2.013-1.52-2.367-.579-.2-1.131-.204-1.58-.203-.45.002-.786-.006-.97-.08h-.002c-.264-.107-.236-.108-.268-.33-.025-.17.021-.553.183-.962a4.67 4.67 0 0 1 .725-1.192c.29-.348.617-.59.705-.626.142-.057.176-.05.22-.04.045.011.127.052.263.17.235.201.56.671.92 1.161.354.484.791 1.08 1.543 1.33.8.267 1.784-.052 2.671-.846 1.594-1.424 2.235-3.317 2.714-5.051zm11.705 7.023c-.02.014.042-.002.042 0l-.008.035c.05-.2-.028-.04-.034-.035zM79.472 122.45a.198.198 0 0 1 .005.023v.014c-.002-.01-.003-.03-.005-.037zm-.29.732-.006.01-.044.027c.016-.01.033-.024.05-.036z" style="color:#000;fill:#383838;stroke-width:1.02352;-inkscape-stroke:none" transform="translate(-40.698 -95.175)"/>
<path d="M76.694 128.845c-.85-.012-1.668.253-2.434.67-.01.592-.015 1.17.109 1.772.323 1.573.422 3.553-.07 5.147-.247.804-.684 1.535-1.347 1.891-.663.356-1.467.296-2.362-.159-.522-.266-1.059-.62-1.487-.757-.223-.072-.392-.096-.522-.069-.13.027-.232.094-.362.27-.53.719-.681 1.823-.497 2.876.177 1.012.418 1.438.543 1.56.143.137.26.154.604.055.548-.158 1.523-.857 2.573-.972l.02-.002.5.058c.686.081 1.247.562 1.622 1.19.372.62.591 1.37.73 2.136.279 1.532.25 3.16.083 4.232-.14.91-.394 1.72-.632 2.53 1.719-.385 3.485-.692 5.307-.36 1.174.214 2.749.574 3.762 1.977l.088.122.046.159c.162.551.16 1.114.024 1.578-.13.45-.348.772-.533 1.023-.181.246-.336.444-.437.606-.102.16-.141.275-.145.336-.01.17 0 .197.07.315.057.1.186.242.39.366.408.246 1.106.414 1.843.45a7.842 7.842 0 0 0 2.174-.21 4.28 4.28 0 0 0 .822-.296c.218-.106.385-.242.377-.233l.029-.031c.025-.035.05-.072.05-.068 0-.004 0-.017-.003-.05a2.733 2.733 0 0 0-.21-.579c-.26-.548-.839-1.333-.822-2.46.01-.657.27-1.21.598-1.576.32-.357.696-.575 1.074-.736.759-.323 1.57-.418 2.054-.458 1.653-.136 3.252.296 4.755.765.457.142.905.29 1.352.434.325-2.258.902-4.247.598-6.217-.071-.46-.25-1.169-.486-1.684-.238-.518-.495-.762-.675-.779-.351-.032-.716.14-1.174.418-.457.277-1.005.665-1.695.742-.745.082-1.406-.291-1.84-.908-.428-.608-.653-1.394-.754-2.196-.203-1.596.016-3.377.794-4.493.568-.813 1.358-.984 2.024-.835.65.146 1.243.51 1.769.779.524.267.99.413 1.237.365a.527.527 0 0 0 .346-.2c.11-.132.235-.373.37-.798.612-1.918.27-3.894-.246-6.054-2.815-.851-5.49-1.534-8.089-.267a.727.727 0 0 0-.223.148c-.024.028-.018.021-.026.056.001-.003-.01.178.07.44.162.522.611 1.29.911 1.978l.004.009.029.063.024.084V133c.162.635.016 1.297-.274 1.727-.272.404-.618.636-.952.81-.675.353-1.399.484-1.724.533a5.888 5.888 0 0 1-3.973-.795c-.512-.311-.876-.594-1.133-1.02-.282-.466-.318-1.084-.172-1.557.252-.814.715-1.266.971-1.89a.663.663 0 0 0 .047-.14c.001-.013 0-.006-.007-.037a.761.761 0 0 0-.184-.268c-.264-.267-.865-.595-1.54-.826-1.356-.462-3.07-.659-3.583-.686-.062-.002-.121-.006-.178-.006z" style="fill:#383838;fill-opacity:1;stroke:none;stroke-width:.991342;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
</svg>
Relearn
</a>
</div>
<div class="searchbox default-animation">
<label for="search-by"><i class="fas fa-search"></i></label>
<input data-search-input id="search-by" type="search" placeholder="Search...">
<span data-search-clear=""><i class="fas fa-times"></i></span>
</div>
<script src="/hugo-theme-relearn/js/lunr.min.js?1645149590"></script>
<script src="/hugo-theme-relearn/js/auto-complete.js?1645149590"></script>
<script src="/hugo-theme-relearn/js/search.js?1645149590"></script>
</div>
<div id="content-wrapper" class="highlightable">
<ul class="topics">
<li data-nav-id="/hugo-theme-relearn/basics/" title="Basics" class="dd-item parent"><a href="/hugo-theme-relearn/basics/"><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/basics/migration/" title="What&#39;s new" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/migration/">What&#39;s new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/basics/requirements/" title="Requirements" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/requirements/">Requirements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/basics/installation/" title="Installation" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/installation/">Installation<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/basics/configuration/" title="Configuration" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/configuration/">Configuration<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/basics/customization/" title="Customization" class="dd-item active parent alwaysopen"><a href="/hugo-theme-relearn/basics/customization/">Customization<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/basics/history/" title="History" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/basics/history/">History<i class="fas fa-check read-icon"></i></a><ul></ul></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/cont/" title="Content" class="dd-item"><a href="/hugo-theme-relearn/cont/"><b>2.</b> Content<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/cont/pages/" title="Pages organization" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/cont/pages/">Pages organization<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/cont/archetypes/" title="Archetypes" class="dd-item"><a href="/hugo-theme-relearn/cont/archetypes/">Archetypes<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/cont/markdown/" title="Markdown syntax" class="dd-item"><a href="/hugo-theme-relearn/cont/markdown/">Markdown syntax<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/cont/syntaxhighlight/" title="Code highlighting" class="dd-item"><a href="/hugo-theme-relearn/cont/syntaxhighlight/">Code highlighting<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/cont/menushortcuts/" title="Menu extra shortcuts" class="dd-item"><a href="/hugo-theme-relearn/cont/menushortcuts/">Menu extra shortcuts<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/cont/icons/" title="Icons and logos" class="dd-item"><a href="/hugo-theme-relearn/cont/icons/">Icons and logos<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/cont/i18n/" title="Multilingual and i18n" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/cont/i18n/">Multilingual and i18n<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/cont/tags/" title="Tags" class="dd-item"><a href="/hugo-theme-relearn/cont/tags/">Tags<i class="fas fa-check read-icon"></i></a></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/" title="Shortcodes" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/"><b>3.</b> Shortcodes<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/shortcodes/attachments/" title="Attachments" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/attachments/">Attachments<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/button/" title="Button" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/button/">Button<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/" title="Children" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/children/">Children<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/test/" title="page X" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/children/test/">page X<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/" title="page 1" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/children/children-1/">page 1<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/" title="page 1-1" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/">page 1-1<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/" title="page 1-1-2" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/">page 1-1-2<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/" title="page 1-1-2-1" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/">page 1-1-2-1<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/" title="page 1-1-2-2" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/">page 1-1-2-2<i class="fas fa-check read-icon"></i></a><ul></ul></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/" title="page 1-1-3" class="dd-item alwaysopen"><a href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/">page 1-1-3<i class="fas fa-check read-icon"></i></a><ul></ul></li></ul></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/children-2/" title="page 2" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/children/children-2/">page 2<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/children-3/" title="page 3" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/children/children-3/">page 3<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id="/hugo-theme-relearn/shortcodes/children/children-3/test3/" title="page 3-1" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/children/children-3/test3/">page 3-1<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/expand/" title="Expand" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/expand/">Expand<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/include/" title="Include" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/include/">Include<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/mermaid/" title="Mermaid" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/mermaid/">Mermaid<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/notice/" title="Notice" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/notice/">Notice<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/siteparam/" title="Site param" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/siteparam/">Site param<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/hugo-theme-relearn/shortcodes/tabs/" title="Tabbed views" class="dd-item"><a href="/hugo-theme-relearn/shortcodes/tabs/">Tabbed views<i class="fas fa-check read-icon"></i></a></li></ul></li>
</ul>
<div id="shortcuts">
<div class="nav-title">More</div>
<ul>
<li><a class="padding" href="https://github.com/McShelby/hugo-theme-relearn"><i class='fab fa-fw fa-github'></i> GitHub repo</a></li>
<li><a class="padding" href="/hugo-theme-relearn/more/showcase/"><i class='fas fa-fw fa-camera'></i> Showcases</a></li>
<li><a class="padding" href="https://gohugo.io/"><i class='fas fa-fw fa-bookmark'></i> Hugo Documentation</a></li>
<li><a class="padding" href="/hugo-theme-relearn/more/credits/"><i class='fas fa-fw fa-bullhorn'></i> Credits</a></li>
<li><a class="padding" href="/hugo-theme-relearn/tags/"><i class='fas fa-fw fa-tags'></i> Tags</a></li>
</ul>
</div>
<div class="footermargin"></div>
<hr class="default-animation"/>
<div id="prefooter">
<ul>
<li>
<a class="padding select-container">
<i class="fas fa-language fa-fw"></i>
<span>&nbsp;</span>
<div class="select-style">
<select id="select-language" onchange="location = baseUri + this.value;">
<option id="pir" value="/hugo-theme-relearn/pir/basics/customization/">Arrr! Pirrrates</option>
<option id="en" value="/hugo-theme-relearn/basics/customization/" selected>English</option>
</select>
</div>
<div class="select-clear"></div>
</a>
</li>
<li>
<a class="padding select-container">
<i class="fas fa-paint-brush fa-fw"></i>
<span>&nbsp;</span>
<div class="select-style">
<select id="select-theme" onchange="changeTheme( this.value );">
<option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
<option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
<option id="learn" value="learn">Learn</option>
<option id="neon" value="neon">Neon</option>
<option id="blue" value="blue">Blue</option>
<option id="green" value="green">Green</option>
<option id="red" value="red">Red</option>
</select>
</div>
<div class="select-clear"></div>
</a>
<script>markTheme( getTheme() );</script>
</li>
<li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
</ul>
</div>
<div id="footer">
<style>
#footer {
font-size: 13px;
height: 100px;
margin-left: auto;
margin-right: auto;
padding: 2rem 1rem;
text-align: center;
min-width: 230px;
max-width: 300px;
}
#footer p {
margin: 0;
}
</style>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</div>
</div>
</nav>
<div id="body" class="default-animation">
<div id="overlay"></div>
<div class="padding highlightable">
<div id="top-bar"><div>
<div class="navigation">
<a class="nav nav-next" href="/hugo-theme-relearn/basics/history/" title="History"><i class="fas fa-chevron-right fa-fw"></i></a>
</div>
<div class="navigation">
<a class="nav nav-prev" href="/hugo-theme-relearn/basics/configuration/" title="Configuration"><i class="fas fa-chevron-left fa-fw"></i></a>
</div>
<div id="top-github-link">
<a class="github-link" title='Edit' href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/contentbasics/customization/_index.en.md" target="blank">
<i class="fas fa-pencil fa-fw"></i>
</a>
</div>
<div id="breadcrumbs">
<span id="sidebar-toggle-span">
<a href="#" id="sidebar-toggle" title='Menu' data-sidebar-toggle="">
<i class="fas fa-bars fa-fw"></i>
</a>
</span>
<span id="toc-menu"><i class="fas fa-list-alt fa-fw"></i></span>
<ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
<meta itemprop="itemListOrder" content="Descending" />
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><meta itemprop="position" content="3" /><a itemprop="item" href="/hugo-theme-relearn/"><span itemprop="name">Relearn Theme for Hugo</span></a> > </li>
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><meta itemprop="position" content="2" /><a itemprop="item" href="/hugo-theme-relearn/basics/"><span itemprop="name">Basics</span></a> > </li>
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><meta itemprop="position" content="1" /><a itemprop="item" href="/hugo-theme-relearn/basics/customization/" aria-disabled="true"><span itemprop="name">Customization</span></a></li>
</ol>
</div>
<div class="progress">
<div class="wrapper">
<nav id="TableOfContents">
<ul>
<li><a href="#change-the-logo">Change the logo</a></li>
<li><a href="#change-the-favicon">Change the favicon</a></li>
<li><a href="#theme-variant">Change default colors</a>
<ul>
<li><a href="#standard-variant">Standard variant</a></li>
<li><a href="#standard-dark-variant">Standard dark variant</a></li>
<li><a href="#learn-variant">Learn variant</a></li>
<li><a href="#red-variant">Red variant</a></li>
<li><a href="#blue-variant">Blue variant</a></li>
<li><a href="#green-variant">Green variant</a></li>
<li><a href="#mine-variant">&lsquo;Mine variant</a></li>
<li><a href="#multiple-variants">Multiple variants</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div></div>
<main id="body-inner">
<div id="head-tags">
</div>
<h1>Customization</h1>
<p>The Relearn theme has been built to be as configurable as possible by defining multiple <a href="https://gohugo.io/templates/partials/">partials</a></p>
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, you will find all the partials defined for this theme. If you need to overwrite something, don&rsquo;t change the code directly. Instead <a href="https://gohugo.io/themes/customizing/">follow this page</a>. You&rsquo;d create a new partial in the <code>layouts/partials</code> folder of your local project. This partial will have the priority.</p>
<p>This theme defines the following partials :</p>
<ul>
<li><code>content.html</code>: the content page itself. This can be overridden if you wan&rsquo;t to display page&rsquo;s meta data above or below the content.</li>
<li><code>header.html</code>: the header of the content page (contains the breadcrumbs). <em>Not meant to be overwritten</em></li>
<li><code>custom-header.html</code>: custom headers in page. Meant to be overwritten when adding CSS imports. Don&rsquo;t forget to include <code>style</code> HTML tag directive in your file</li>
<li><code>footer.html</code>: the footer of the content page (contains the arrows). <em>Not meant to be overwritten</em></li>
<li><code>custom-footer.html</code>: custom footer in page. Meant to be overwritten when adding Javacript. Don&rsquo;t forget to include <code>javascript</code> HTML tag directive in your file</li>
<li><code>favicon.html</code>: the favicon</li>
<li><code>logo.html</code>: the logo, on top left hand corner</li>
<li><code>meta.html</code>: HTML meta tags, if you want to change default behavior</li>
<li><code>menu.html</code>: left menu. <em>Not meant to be overwritten</em></li>
<li><code>menu-pre.html</code>: side-wide configuration to prepend to menu items. If you override this, it is your responsiblity to take the page&rsquo;s <code>pre</code> setting into account.</li>
<li><code>menu-post.html</code>: side-wide configuration to append to menu items. If you override this, it is your responsiblity to take the page&rsquo;s <code>post</code> setting into account.</li>
<li><code>menu-footer.html</code>: footer of the the left menu</li>
<li><code>search.html</code>: search box. <em>Not meant to be overwritten</em></li>
<li><code>toc.html</code>: table of contents</li>
</ul>
<h2 id="change-the-logo">Change the logo</h2>
<p>Create a new file in <code>layouts/partials/</code> named <code>logo.html</code>. Then write any HTML you want.
You could use an <code>img</code> HTML tag and reference an image created under the <em>static</em> folder, or you could paste a SVG definition!</p>
<div class="box notices note">
<div class="box-label">Note</div>
<div class="box-content">
<p>The size of the logo will adapt automatically</p>
</div>
</div>
<h2 id="change-the-favicon">Change the favicon</h2>
<p>If your favicon is a SVG, PNG or ICO, just drop off your image in your local <code>static/images/</code> folder and name it <code>favicon.svg</code>, <code>favicon.png</code> or <code>favicon.ico</code> respectivly.</p>
<p>If no favicon file is found, the theme will lookup the alternative filename <code>logo</code> in the same location and will repeat the search for the list of supported file types.</p>
<p>If you need to change this default behavior, create a new file in <code>layouts/partials/</code> named <code>favicon.html</code>. Then write something like this:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;icon&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;/images/favicon.bmp&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;image/bmp&#34;</span> <span class="p">/&gt;</span>
</code></pre></div><h2 id="theme-variant">Change default colors</h2>
<p>The Relearn theme let you choose between some predefined color scheme variants, but feel free to add one yourself!</p>
<h3 id="standard-variant">Standard variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme with a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;&#34;</span> <span class="c"># or themeVariant = &#34;relearn&#34; or themeVariant = &#34;relearn-light&#34;</span>
</code></pre></div><p><img src="images/standard-variant.png?width=60pc" alt="Standard variant"></p>
<h3 id="standard-dark-variant">Standard dark variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme with a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;relearn-dark&#34;</span>
</code></pre></div><p><img src="images/standard-dark-variant.png?width=60pc" alt="Dark variant"></p>
<h3 id="learn-variant">Learn variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme with a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;learn&#34;</span>
</code></pre></div><p><img src="images/learn-variant.png?width=60pc" alt="Learn variant"></p>
<h3 id="red-variant">Red variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme with a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;red&#34;</span>
</code></pre></div><p><img src="images/red-variant.png?width=60pc" alt="Red variant"></p>
<h3 id="blue-variant">Blue variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme with a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;blue&#34;</span>
</code></pre></div><p><img src="images/blue-variant.png?width=60pc" alt="Blue variant"></p>
<h3 id="green-variant">Green variant</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme with a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;green&#34;</span>
</code></pre></div><p><img src="images/green-variant.png?width=60pc" alt="Green variant"></p>
<h3 id="mine-variant">&lsquo;Mine variant</h3>
<p>First, create a new CSS file in your local <code>static/css</code> folder prefixed by <code>theme</code> (e.g. with <em>mine</em> theme <code>static/css/theme-mine.css</code>). Copy the following content and modify colors in CSS variables.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>
<span class="nv">--MAIN-TEXT-color</span><span class="p">:</span> <span class="mh">#101010</span><span class="p">;</span> <span class="c">/* Color of text by default */</span>
<span class="nv">--MAIN-TITLES-TEXT-color</span><span class="p">:</span> <span class="mh">#444753</span><span class="p">;</span> <span class="c">/* Color of titles h2-h3-h4-h5-h6 */</span>
<span class="nv">--MAIN-LINK-color</span><span class="p">:</span> <span class="mh">#486ac9</span><span class="p">;</span> <span class="c">/* Color of links */</span>
<span class="nv">--MAIN-LINK-HOVER-color</span><span class="p">:</span> <span class="mh">#134fbf</span><span class="p">;</span> <span class="c">/* Color of hovered links */</span>
<span class="nv">--MAIN-ANCHOR-color</span><span class="p">:</span> <span class="mh">#486ac9</span><span class="p">;</span> <span class="c">/* color of anchors on titles */</span>
<span class="nv">--MAIN-BG-color</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span> <span class="c">/* color of text by default */</span>
<span class="c">/* adjusted to relearn-light chroma style */</span>
<span class="nv">--CODE-BLOCK-color</span><span class="p">:</span> <span class="mh">#000000</span><span class="p">;</span> <span class="c">/* fallback color for block code text */</span>
<span class="nv">--CODE-BLOCK-BG-color</span><span class="p">:</span> <span class="mh">#f8f8f8</span><span class="p">;</span> <span class="c">/* fallback color for block code background */</span>
<span class="nv">--CODE-BLOCK-BORDER-color</span><span class="p">:</span> <span class="mh">#d8d8d8</span><span class="p">;</span> <span class="c">/* color of block code border */</span>
<span class="nv">--CODE-INLINE-color</span><span class="p">:</span> <span class="mh">#5e5e5e</span><span class="p">;</span> <span class="c">/* color for inline code text */</span>
<span class="nv">--CODE-INLINE-BG-color</span><span class="p">:</span> <span class="mh">#fffae9</span><span class="p">;</span> <span class="c">/* color for inline code background */</span>
<span class="nv">--CODE-INLINE-BORDER-color</span><span class="p">:</span> <span class="mh">#f8e8c8</span><span class="p">;</span> <span class="c">/* color of inline code border */</span>
<span class="nv">--MENU-HOME-LINK-color</span><span class="p">:</span> <span class="mh">#323232</span><span class="p">;</span> <span class="c">/* Color of the home button text */</span>
<span class="nv">--MENU-HOME-LINK-HOVER-color</span><span class="p">:</span> <span class="mh">#808080</span><span class="p">;</span> <span class="c">/* Color of the hovered home button text */</span>
<span class="nv">--MENU-HEADER-BG-color</span><span class="p">:</span> <span class="mh">#7dc903</span><span class="p">;</span> <span class="c">/* Background color of menu header */</span>
<span class="nv">--MENU-HEADER-BORDER-color</span><span class="p">:</span> <span class="mh">#7dc903</span><span class="p">;</span> <span class="c">/*Color of menu header border */</span>
<span class="nv">--MENU-SEARCH-color</span><span class="p">:</span> <span class="mh">#efefef</span><span class="p">;</span> <span class="c">/* Color of search field text */</span>
<span class="nv">--MENU-SEARCH-BG-color</span><span class="p">:</span> <span class="mh">#3d414d</span><span class="p">;</span> <span class="c">/* Search field background color (by default borders + icons) */</span>
<span class="nv">--MENU-SEARCH-BOX-color</span><span class="p">:</span> <span class="mh">#efefef</span><span class="p">;</span> <span class="c">/* Override search field border color */</span>
<span class="nv">--MENU-SECTIONS-ACTIVE-BG-color</span><span class="p">:</span> <span class="mh">#202028</span><span class="p">;</span> <span class="c">/* Background color of the active section and its children */</span>
<span class="nv">--MENU-SECTIONS-BG-color</span><span class="p">:</span> <span class="mh">#282830</span><span class="p">;</span> <span class="c">/* Background color of other sections */</span>
<span class="nv">--MENU-SECTIONS-LINK-color</span><span class="p">:</span> <span class="mh">#bababa</span><span class="p">;</span> <span class="c">/* Color of links in menu */</span>
<span class="nv">--MENU-SECTIONS-LINK-HOVER-color</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span> <span class="c">/* Color of links in menu, when hovered */</span>
<span class="nv">--MENU-SECTION-ACTIVE-CATEGORY-color</span><span class="p">:</span> <span class="mh">#444444</span><span class="p">;</span> <span class="c">/* Color of active category text */</span>
<span class="nv">--MENU-SECTION-ACTIVE-CATEGORY-BG-color</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span> <span class="c">/* Color of background for the active category (only) */</span>
<span class="nv">--MENU-VISITED-color</span><span class="p">:</span> <span class="mh">#506397</span><span class="p">;</span> <span class="c">/* Color of &#39;page visited&#39; icons in menu */</span>
<span class="nv">--MENU-SECTION-HR-color</span><span class="p">:</span> <span class="mh">#606060</span><span class="p">;</span> <span class="c">/* Color of &lt;hr&gt; separator in menu */</span>
<span class="c">/* base styling for boxes */</span>
<span class="nv">--BOX-CAPTION-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span> <span class="c">/* color of the title text */</span>
<span class="nv">--BOX-BG-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mf">.833</span> <span class="p">);</span> <span class="c">/* color of the content background */</span>
<span class="nv">--BOX-TEXT-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span> <span class="c">/* fixed color of the content text */</span>
<span class="c">/* optional base colors for colored boxes as in attachments and notice shortcode */</span>
<span class="nv">--BOX-BLUE-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">48</span><span class="p">,</span> <span class="mi">117</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="nv">--BOX-GREEN-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">178</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span>
<span class="nv">--BOX-GREY-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">128</span><span class="p">,</span> <span class="mi">128</span><span class="p">,</span> <span class="mi">128</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span>
<span class="nv">--BOX-ORANGE-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">237</span><span class="p">,</span> <span class="mi">153</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span>
<span class="nv">--BOX-RED-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span> <span class="mi">224</span><span class="p">,</span> <span class="mi">62</span><span class="p">,</span> <span class="mi">62</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span>
<span class="p">}</span>
</code></pre></div><p>Then, set the <code>themeVariant</code> value with the name of your custom theme file. That&rsquo;s it!</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme with a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;mine&#34;</span>
</code></pre></div><h3 id="multiple-variants">Multiple variants</h3>
<p>You can also set multiple variants. In this case, the first variant is the default choosen on first view and a theme switch will be shown in the menu footer.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
<span class="c"># Change default color scheme with a variant one.</span>
<span class="nx">themeVariant</span> <span class="p">=</span> <span class="p">[</span> <span class="s2">&#34;relearn-light&#34;</span><span class="p">,</span> <span class="s2">&#34;relearn-dark&#34;</span> <span class="p">]</span>
</code></pre></div>
<div class="box notices tip">
<div class="box-label">Tip</div>
<div class="box-content">
<p>If you want to switch the syntax highlightning theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/">according to Hugo&rsquo;s documentation</a>, and <code>@import</code> this stylesheet in your color variant stylesheet. For an example, take a look into <code>theme-relearn-light.css</code> and <code>config.toml</code> of the exampleSite.</p>
</div>
</div>
<footer class=" footline">
</footer>
</main>
</div>
</div>
<div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
<div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
</div>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1645149590"></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645149590"></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645149590"></script>
<script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645149590"></script>
<script src="/hugo-theme-relearn/js/featherlight.min.js?1645149590"></script>
<script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645149590"></script>
<script src="/hugo-theme-relearn/js/mermaid.min.js?1645149590"></script>
<script>
if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"startOnLoad\": true }"), { startOnLoad: false } ) );
}
</script>
<script>
window.T_Copy_to_clipboard = 'Copy to clipboard';
window.T_Copied_to_clipboard = 'Copied to clipboard!';
window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
</script>
<script src="/hugo-theme-relearn/js/relearn.js?1645149590"></script>
</body>
</html>