diff --git a/404.html b/404.html
index 0132bf4da1..20a2a6d53b 100644
--- a/404.html
+++ b/404.html
@@ -8,20 +8,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>404 Page not found :: Hugo Relearn Theme</title>
-    <link href="./images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="./css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="./css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="./css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1675526020" rel="stylesheet">
-    <link href="./css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="./css/ie.css?1675526020" rel="stylesheet">
-    <link href="./css/variant.css?1675526020" rel="stylesheet">
-    <link href="./css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="./js/url.js?1675526020"></script>
-    <script src="./js/variant.js?1675526020"></script>
+    <link href="./css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="./css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="./css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="./css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1675546459" rel="stylesheet">
+    <link href="./css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="./css/ie.css?1675546459" rel="stylesheet">
+    <link href="./css/variant.css?1675546459" rel="stylesheet">
+    <link href="./css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="./js/url.js?1675546459"></script>
+    <script src="./js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -37,7 +37,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       p, li, ul {
diff --git a/basics/changelog/index.html b/basics/changelog/index.html
index 8c34a1b161..5d815c45a5 100644
--- a/basics/changelog/index.html
+++ b/basics/changelog/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Hugo Relearn Theme</title>
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -1596,12 +1596,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -1681,7 +1681,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -1717,12 +1718,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/basics/changelog/index.print.html b/basics/changelog/index.print.html
index 2cfd4c4a13..563b0eec7d 100644
--- a/basics/changelog/index.print.html
+++ b/basics/changelog/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Hugo Relearn Theme</title>
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -988,8 +988,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/basics/configuration/index.html b/basics/configuration/index.html
index 955986401c..f2d27291f3 100644
--- a/basics/configuration/index.html
+++ b/basics/configuration/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configuration :: Hugo Relearn Theme">
     <link href="../../basics/configuration/index.print.html" rel="alternate" type="text/html" title="Configuration :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -188,8 +188,8 @@
 </span></span><span class="line"><span class="cl">  <span class="c"># Order sections in menu by &#34;weight&#34; or &#34;title&#34;. Default to &#34;weight&#34;;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># this can be overridden in the pages frontmatter</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s2">&#34;weight&#34;</span>
-</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme with a variant one. Eg. can be &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
-</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme with a variant one. Eg. can be &#34;auto&#34;, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
+</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># Change the title separator. Default to &#34;::&#34;.</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">titleSeparator</span> <span class="p">=</span> <span class="s2">&#34;-&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># If set to true, the menu in the sidebar will be displayed in a collapsible tree view. Although the functionality works with old browsers (IE11), the display of the expander icons is limited to modern browsers</span>
@@ -232,10 +232,10 @@
 </span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
 <p>
 		
-<a href="#image-3a6e333074062481b806851de331ed97" class="lightbox-link">
+<a href="#image-7656a9565262bb716dd7a6e836429c5f" class="lightbox-link">
 <img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-3a6e333074062481b806851de331ed97">
+<a href="javascript:history.back();" class="lightbox" id="image-7656a9565262bb716dd7a6e836429c5f">
 <img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="activate-print-support">Activate print support</h2>
@@ -284,10 +284,10 @@ default values:</p>
 </span></span></code></pre></div><p>The home button is going to look like this:</p>
 <p>
 		
-<a href="#image-f0b57f3dfbdcfcc74a359debe6046ff7" class="lightbox-link">
+<a href="#image-8bd27c647190febeb6b9585d9b710b68" class="lightbox-link">
 <img src="../../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f0b57f3dfbdcfcc74a359debe6046ff7">
+<a href="javascript:history.back();" class="lightbox" id="image-8bd27c647190febeb6b9585d9b710b68">
 <img src="../../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -369,12 +369,12 @@ default values:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -454,7 +454,8 @@ default values:</p>
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -490,12 +491,12 @@ default values:</p>
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/basics/configuration/index.print.html b/basics/configuration/index.print.html
index a647dc3b7b..9f76dad3fc 100644
--- a/basics/configuration/index.print.html
+++ b/basics/configuration/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/configuration/index.html" rel="canonical" type="text/html" title="Configuration :: Hugo Relearn Theme">
     <link href="../../basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configuration :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -144,8 +144,8 @@
 </span></span><span class="line"><span class="cl">  <span class="c"># Order sections in menu by &#34;weight&#34; or &#34;title&#34;. Default to &#34;weight&#34;;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># this can be overridden in the pages frontmatter</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s2">&#34;weight&#34;</span>
-</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme with a variant one. Eg. can be &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
-</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme with a variant one. Eg. can be &#34;auto&#34;, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
+</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># Change the title separator. Default to &#34;::&#34;.</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">titleSeparator</span> <span class="p">=</span> <span class="s2">&#34;-&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># If set to true, the menu in the sidebar will be displayed in a collapsible tree view. Although the functionality works with old browsers (IE11), the display of the expander icons is limited to modern browsers</span>
@@ -188,10 +188,10 @@
 </span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
 <p>
 		
-<a href="#image-3a6e333074062481b806851de331ed97" class="lightbox-link">
+<a href="#image-7656a9565262bb716dd7a6e836429c5f" class="lightbox-link">
 <img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-3a6e333074062481b806851de331ed97">
+<a href="javascript:history.back();" class="lightbox" id="image-7656a9565262bb716dd7a6e836429c5f">
 <img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="activate-print-support">Activate print support</h2>
@@ -240,10 +240,10 @@ default values:</p>
 </span></span></code></pre></div><p>The home button is going to look like this:</p>
 <p>
 		
-<a href="#image-f0b57f3dfbdcfcc74a359debe6046ff7" class="lightbox-link">
+<a href="#image-8bd27c647190febeb6b9585d9b710b68" class="lightbox-link">
 <img src="../../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f0b57f3dfbdcfcc74a359debe6046ff7">
+<a href="javascript:history.back();" class="lightbox" id="image-8bd27c647190febeb6b9585d9b710b68">
 <img src="../../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -253,8 +253,8 @@ default values:</p>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/basics/customization/index.html b/basics/customization/index.html
index 49b31ff6e2..4991361aec 100644
--- a/basics/customization/index.html
+++ b/basics/customization/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customization :: Hugo Relearn Theme">
     <link href="../../basics/customization/index.print.html" rel="alternate" type="text/html" title="Customization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -93,6 +93,7 @@
       <ul>
         <li><a href="#single-variant">Single variant</a></li>
         <li><a href="#multiple-variants">Multiple variants</a></li>
+        <li><a href="#adjust-to-os-settings">Adjust to OS Settings</a></li>
         <li><a href="#roll-your-own">Roll your own</a></li>
         <li><a href="#output-formats">Output formats</a></li>
       </ul>
@@ -169,7 +170,16 @@ You could use an <code>img</code> HTML tag and reference an image created under
 <p>If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">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>
-<h3 id="roll-your-own">Roll your own</h3>
+<h3 id="adjust-to-os-settings">Adjust to OS Settings</h3>
+<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That&rsquo;s it.</p>
+<p>If you&rsquo;ve set multiple variants, you can drop <code>auto</code> at any position, but usually it makes sense to set it in the first position and make it the default.</p>
+<div class="highlight"><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="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><p>If you don&rsquo;t configure anything else, the theme will use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode.</p>
+<p>If you don&rsquo;t like that, you can set <code>themeVariantAuto</code>. The first element is the variant for light mode, the second for dark mode</p>
+<div class="highlight"><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="s2">&#34;learn&#34;</span><span class="p">,</span> <span class="s2">&#34;neon&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><h3 id="roll-your-own">Roll your own</h3>
 <p>If you are not happy with the shipped variants you can either copy and rename one of the shipped files from <code>themes/hugo-theme-relearn/static/css</code> to <code>static/css</code>, edit them afterwards to your liking in a text editor and configure the <code>themeVariant</code> parameter in your <code>config.toml</code> or just use the <a href="../../basics/generator/">interactive variant generator</a>.</p>
 <h3 id="output-formats">Output formats</h3>
 <p>Certain parts of the theme can be changed for support of your own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if you define a new output format <code>PLAINTEXT</code> in your <code>config.toml</code>, you can add a file <code>layouts/partials/header.plaintext.html</code> to change the way, the page header should look like for that output format.</p>
@@ -252,12 +262,12 @@ You could use an <code>img</code> HTML tag and reference an image created under
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -337,7 +347,8 @@ You could use an <code>img</code> HTML tag and reference an image created under
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -373,12 +384,12 @@ You could use an <code>img</code> HTML tag and reference an image created under
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/basics/customization/index.print.html b/basics/customization/index.print.html
index 090c23aea6..ef734bd072 100644
--- a/basics/customization/index.print.html
+++ b/basics/customization/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/customization/index.html" rel="canonical" type="text/html" title="Customization :: Hugo Relearn Theme">
     <link href="../../basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -135,7 +135,16 @@ You could use an <code>img</code> HTML tag and reference an image created under
 <p>If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">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>
-<h3 id="roll-your-own">Roll your own</h3>
+<h3 id="adjust-to-os-settings">Adjust to OS Settings</h3>
+<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That&rsquo;s it.</p>
+<p>If you&rsquo;ve set multiple variants, you can drop <code>auto</code> at any position, but usually it makes sense to set it in the first position and make it the default.</p>
+<div class="highlight"><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="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><p>If you don&rsquo;t configure anything else, the theme will use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode.</p>
+<p>If you don&rsquo;t like that, you can set <code>themeVariantAuto</code>. The first element is the variant for light mode, the second for dark mode</p>
+<div class="highlight"><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="s2">&#34;learn&#34;</span><span class="p">,</span> <span class="s2">&#34;neon&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><h3 id="roll-your-own">Roll your own</h3>
 <p>If you are not happy with the shipped variants you can either copy and rename one of the shipped files from <code>themes/hugo-theme-relearn/static/css</code> to <code>static/css</code>, edit them afterwards to your liking in a text editor and configure the <code>themeVariant</code> parameter in your <code>config.toml</code> or just use the <a href="../../basics/generator/">interactive variant generator</a>.</p>
 <h3 id="output-formats">Output formats</h3>
 <p>Certain parts of the theme can be changed for support of your own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if you define a new output format <code>PLAINTEXT</code> in your <code>config.toml</code>, you can add a file <code>layouts/partials/header.plaintext.html</code> to change the way, the page header should look like for that output format.</p>
@@ -146,8 +155,8 @@ You could use an <code>img</code> HTML tag and reference an image created under
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/basics/generator/index.html b/basics/generator/index.html
index b909353fdf..5fa145b6d8 100644
--- a/basics/generator/index.html
+++ b/basics/generator/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generator :: Hugo Relearn Theme">
     <link href="../../basics/generator/index.print.html" rel="alternate" type="text/html" title="Stylesheet generator :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -228,12 +228,12 @@ window.variants && variants.generator( '#vargenerator' );
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -313,7 +313,8 @@ window.variants && variants.generator( '#vargenerator' );
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -349,25 +350,25 @@ window.variants && variants.generator( '#vargenerator' );
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1675526021" defer></script>
-    <script src="../../js/mermaid.min.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1675546460" defer></script>
+    <script src="../../js/mermaid.min.js?1675546460" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/basics/generator/index.print.html b/basics/generator/index.print.html
index f0dcbfe4af..5cd8068ef4 100644
--- a/basics/generator/index.print.html
+++ b/basics/generator/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/generator/index.html" rel="canonical" type="text/html" title="Stylesheet generator :: Hugo Relearn Theme">
     <link href="../../basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generator :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -131,21 +131,21 @@ window.variants && variants.generator( '#vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1675526022" defer></script>
-    <script src="../../js/mermaid.min.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1675546461" defer></script>
+    <script src="../../js/mermaid.min.js?1675546461" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/basics/history/index.html b/basics/history/index.html
index e19938c60f..929ef1fe51 100644
--- a/basics/history/index.html
+++ b/basics/history/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/history/index.xml" rel="alternate" type="application/rss+xml" title="History :: Hugo Relearn Theme">
     <link href="../../basics/history/index.print.html" rel="alternate" type="text/html" title="History :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -1602,12 +1602,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -1687,7 +1687,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -1723,12 +1724,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/basics/history/index.print.html b/basics/history/index.print.html
index be1b9bfebb..a660eb1ab4 100644
--- a/basics/history/index.print.html
+++ b/basics/history/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/history/index.html" rel="canonical" type="text/html" title="History :: Hugo Relearn Theme">
     <link href="../../basics/history/index.xml" rel="alternate" type="application/rss+xml" title="History :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -994,8 +994,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/basics/index.html b/basics/index.html
index 6adb908781..f16c96fc88 100644
--- a/basics/index.html
+++ b/basics/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="../basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Hugo Relearn Theme">
     <link href="../basics/index.print.html" rel="alternate" type="text/html" title="Basics :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../js/url.js?1675526020"></script>
-    <script src="../js/variant.js?1675526020"></script>
+    <link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../js/url.js?1675546459"></script>
+    <script src="../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -171,12 +171,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../js/search.js?1675526021" defer></script>
+        <script src="../js/auto-complete.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -256,7 +256,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -292,12 +293,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../js/buttons.js?1675526021"></script>
+          <script async src="../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../js/theme.js?1675526021" defer></script>
+    <script src="../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/basics/index.print.html b/basics/index.print.html
index 8deb448024..6fd121c4ea 100644
--- a/basics/index.print.html
+++ b/basics/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/index.html" rel="canonical" type="text/html" title="Basics :: Hugo Relearn Theme">
     <link href="../basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../js/url.js?1675526022"></script>
-    <script src="../js/variant.js?1675526022"></script>
+    <link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../js/url.js?1675546461"></script>
+    <script src="../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -102,6 +102,11 @@
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;{{&#34;</span><span class="na">js</span><span class="err">/</span><span class="na">jquery</span><span class="err">.</span><span class="na">min</span><span class="err">.</span><span class="na">js</span><span class="err">&#34;|</span> <span class="na">relURL</span><span class="err">}}{{</span> <span class="na">if</span> <span class="err">$</span><span class="na">assetBusting</span> <span class="err">}}?{{</span> <span class="na">now</span><span class="err">.</span><span class="na">Unix</span> <span class="err">}}{{</span> <span class="na">end</span> <span class="err">}}&#34;</span> <span class="na">defer</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </span></span></code></pre></div></li>
 <li>
+<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The theme is now capable to visually <a href="../basics/customization/#adjust-to-os-settings">adapt to your OS&rsquo;s light/dark mode setting</a>.</p>
+<p>This is also the new default setting if you haven&rsquo;t configured <code>themeVariant</code> in your <code>config.toml</code>.</p>
+<p>Additionally you are able to configure the variants to be taken for light/dark mode with the new <code>themeVariantAuto</code> parameter.</p>
+</li>
+<li>
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> In the effort to comply with WCAG standards, the implementation of the <a href="../shortcodes/expand/"><code>expand</code> shortcode</a> was changed. While Internet Explorer 11 has issues in displaying it, the functionality still works.</p>
 </li>
 <li>
@@ -644,10 +649,10 @@
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
 <p>
-<a href="#image-962b21b1a42daaac573551148ad5df13" class="lightbox-link">
+<a href="#image-d98b8d930d749e3491a164415642b23f" class="lightbox-link">
 <img src="../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-962b21b1a42daaac573551148ad5df13">
+<a href="javascript:history.back();" class="lightbox" id="image-d98b8d930d749e3491a164415642b23f">
 <img src="../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -684,10 +689,10 @@
 </span></span></code></pre></div><p>renders as</p>
 <p>
 		
-<a href="#image-cfd613b30cc1cb08bc50dc04ade6fa07" class="lightbox-link">
+<a href="#image-0f2fa2554160e192f305c38bcfeebfba" class="lightbox-link">
 <img src="../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-cfd613b30cc1cb08bc50dc04ade6fa07">
+<a href="javascript:history.back();" class="lightbox" id="image-0f2fa2554160e192f305c38bcfeebfba">
 <img src="../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="lightbox-image" loading="lazy">
 </a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
@@ -796,8 +801,8 @@
 </span></span><span class="line"><span class="cl">  <span class="c"># Order sections in menu by &#34;weight&#34; or &#34;title&#34;. Default to &#34;weight&#34;;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># this can be overridden in the pages frontmatter</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s2">&#34;weight&#34;</span>
-</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme with a variant one. Eg. can be &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
-</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme with a variant one. Eg. can be &#34;auto&#34;, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
+</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># Change the title separator. Default to &#34;::&#34;.</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">titleSeparator</span> <span class="p">=</span> <span class="s2">&#34;-&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># If set to true, the menu in the sidebar will be displayed in a collapsible tree view. Although the functionality works with old browsers (IE11), the display of the expander icons is limited to modern browsers</span>
@@ -840,10 +845,10 @@
 </span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
 <p>
 		
-<a href="#image-3a6e333074062481b806851de331ed97" class="lightbox-link">
+<a href="#image-7656a9565262bb716dd7a6e836429c5f" class="lightbox-link">
 <img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-3a6e333074062481b806851de331ed97">
+<a href="javascript:history.back();" class="lightbox" id="image-7656a9565262bb716dd7a6e836429c5f">
 <img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="activate-print-support">Activate print support</h2>
@@ -892,10 +897,10 @@ default values:</p>
 </span></span></code></pre></div><p>The home button is going to look like this:</p>
 <p>
 		
-<a href="#image-f0b57f3dfbdcfcc74a359debe6046ff7" class="lightbox-link">
+<a href="#image-8bd27c647190febeb6b9585d9b710b68" class="lightbox-link">
 <img src="../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f0b57f3dfbdcfcc74a359debe6046ff7">
+<a href="javascript:history.back();" class="lightbox" id="image-8bd27c647190febeb6b9585d9b710b68">
 <img src="../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -965,7 +970,16 @@ You could use an <code>img</code> HTML tag and reference an image created under
 <p>If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">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>
-<h3 id="roll-your-own">Roll your own</h3>
+<h3 id="adjust-to-os-settings">Adjust to OS Settings</h3>
+<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That&rsquo;s it.</p>
+<p>If you&rsquo;ve set multiple variants, you can drop <code>auto</code> at any position, but usually it makes sense to set it in the first position and make it the default.</p>
+<div class="highlight"><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="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><p>If you don&rsquo;t configure anything else, the theme will use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode.</p>
+<p>If you don&rsquo;t like that, you can set <code>themeVariantAuto</code>. The first element is the variant for light mode, the second for dark mode</p>
+<div class="highlight"><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="s2">&#34;learn&#34;</span><span class="p">,</span> <span class="s2">&#34;neon&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><h3 id="roll-your-own">Roll your own</h3>
 <p>If you are not happy with the shipped variants you can either copy and rename one of the shipped files from <code>themes/hugo-theme-relearn/static/css</code> to <code>static/css</code>, edit them afterwards to your liking in a text editor and configure the <code>themeVariant</code> parameter in your <code>config.toml</code> or just use the <a href="../basics/generator/">interactive variant generator</a>.</p>
 <h3 id="output-formats">Output formats</h3>
 <p>Certain parts of the theme can be changed for support of your own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if you define a new output format <code>PLAINTEXT</code> in your <code>config.toml</code>, you can add a file <code>layouts/partials/header.plaintext.html</code> to change the way, the page header should look like for that output format.</p>
@@ -1952,21 +1966,21 @@ window.variants && variants.generator( '#vargenerator' );
           </section>        </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-color.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1675526022" defer></script>
-    <script src="../js/mermaid.min.js?1675526022" defer></script>
+    <script src="../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-color.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1675546461" defer></script>
+    <script src="../js/mermaid.min.js?1675546461" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../js/theme.js?1675526022" defer></script>
+    <script src="../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/basics/installation/index.html b/basics/installation/index.html
index 97613cb03f..0ba2fff90a 100644
--- a/basics/installation/index.html
+++ b/basics/installation/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installation :: Hugo Relearn Theme">
     <link href="../../basics/installation/index.print.html" rel="alternate" type="text/html" title="Installation :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -133,10 +133,10 @@
 </span></span></code></pre></div><p>renders as</p>
 <p>
 		
-<a href="#image-cfd613b30cc1cb08bc50dc04ade6fa07" class="lightbox-link">
+<a href="#image-0f2fa2554160e192f305c38bcfeebfba" class="lightbox-link">
 <img src="../../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-cfd613b30cc1cb08bc50dc04ade6fa07">
+<a href="javascript:history.back();" class="lightbox" id="image-0f2fa2554160e192f305c38bcfeebfba">
 <img src="../../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="lightbox-image" loading="lazy">
 </a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
@@ -248,12 +248,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -333,7 +333,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -369,12 +370,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/basics/installation/index.print.html b/basics/installation/index.print.html
index 61ff29b421..cc07056d95 100644
--- a/basics/installation/index.print.html
+++ b/basics/installation/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/installation/index.html" rel="canonical" type="text/html" title="Installation :: Hugo Relearn Theme">
     <link href="../../basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installation :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -102,10 +102,10 @@
 </span></span></code></pre></div><p>renders as</p>
 <p>
 		
-<a href="#image-cfd613b30cc1cb08bc50dc04ade6fa07" class="lightbox-link">
+<a href="#image-0f2fa2554160e192f305c38bcfeebfba" class="lightbox-link">
 <img src="../../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-cfd613b30cc1cb08bc50dc04ade6fa07">
+<a href="javascript:history.back();" class="lightbox" id="image-0f2fa2554160e192f305c38bcfeebfba">
 <img src="../../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="lightbox-image" loading="lazy">
 </a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
@@ -145,8 +145,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/basics/migration/index.html b/basics/migration/index.html
index 69a6e303d6..dd7cb95be5 100644
--- a/basics/migration/index.html
+++ b/basics/migration/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Hugo Relearn Theme">
     <link href="../../basics/migration/index.print.html" rel="alternate" type="text/html" title="What&#39;s New :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -148,6 +148,11 @@
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;{{&#34;</span><span class="na">js</span><span class="err">/</span><span class="na">jquery</span><span class="err">.</span><span class="na">min</span><span class="err">.</span><span class="na">js</span><span class="err">&#34;|</span> <span class="na">relURL</span><span class="err">}}{{</span> <span class="na">if</span> <span class="err">$</span><span class="na">assetBusting</span> <span class="err">}}?{{</span> <span class="na">now</span><span class="err">.</span><span class="na">Unix</span> <span class="err">}}{{</span> <span class="na">end</span> <span class="err">}}&#34;</span> <span class="na">defer</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </span></span></code></pre></div></li>
 <li>
+<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The theme is now capable to visually <a href="../../basics/customization/#adjust-to-os-settings">adapt to your OS&rsquo;s light/dark mode setting</a>.</p>
+<p>This is also the new default setting if you haven&rsquo;t configured <code>themeVariant</code> in your <code>config.toml</code>.</p>
+<p>Additionally you are able to configure the variants to be taken for light/dark mode with the new <code>themeVariantAuto</code> parameter.</p>
+</li>
+<li>
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> In the effort to comply with WCAG standards, the implementation of the <a href="../../shortcodes/expand/"><code>expand</code> shortcode</a> was changed. While Internet Explorer 11 has issues in displaying it, the functionality still works.</p>
 </li>
 <li>
@@ -758,12 +763,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -843,7 +848,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -879,12 +885,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/basics/migration/index.print.html b/basics/migration/index.print.html
index 53ee056eb7..40c1cac77c 100644
--- a/basics/migration/index.print.html
+++ b/basics/migration/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/migration/index.html" rel="canonical" type="text/html" title="What&#39;s New :: Hugo Relearn Theme">
     <link href="../../basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -91,6 +91,11 @@
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;{{&#34;</span><span class="na">js</span><span class="err">/</span><span class="na">jquery</span><span class="err">.</span><span class="na">min</span><span class="err">.</span><span class="na">js</span><span class="err">&#34;|</span> <span class="na">relURL</span><span class="err">}}{{</span> <span class="na">if</span> <span class="err">$</span><span class="na">assetBusting</span> <span class="err">}}?{{</span> <span class="na">now</span><span class="err">.</span><span class="na">Unix</span> <span class="err">}}{{</span> <span class="na">end</span> <span class="err">}}&#34;</span> <span class="na">defer</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </span></span></code></pre></div></li>
 <li>
+<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The theme is now capable to visually <a href="../../basics/customization/#adjust-to-os-settings">adapt to your OS&rsquo;s light/dark mode setting</a>.</p>
+<p>This is also the new default setting if you haven&rsquo;t configured <code>themeVariant</code> in your <code>config.toml</code>.</p>
+<p>Additionally you are able to configure the variants to be taken for light/dark mode with the new <code>themeVariantAuto</code> parameter.</p>
+</li>
+<li>
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> In the effort to comply with WCAG standards, the implementation of the <a href="../../shortcodes/expand/"><code>expand</code> shortcode</a> was changed. While Internet Explorer 11 has issues in displaying it, the functionality still works.</p>
 </li>
 <li>
@@ -629,8 +634,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/basics/requirements/index.html b/basics/requirements/index.html
index eeb6361c9d..36fc02003d 100644
--- a/basics/requirements/index.html
+++ b/basics/requirements/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="../../basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirements :: Hugo Relearn Theme">
     <link href="../../basics/requirements/index.print.html" rel="alternate" type="text/html" title="Requirements :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -94,10 +94,10 @@
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
 <p>
-<a href="#image-962b21b1a42daaac573551148ad5df13" class="lightbox-link">
+<a href="#image-d98b8d930d749e3491a164415642b23f" class="lightbox-link">
 <img src="../../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-962b21b1a42daaac573551148ad5df13">
+<a href="javascript:history.back();" class="lightbox" id="image-d98b8d930d749e3491a164415642b23f">
 <img src="../../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -179,12 +179,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -264,7 +264,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -300,12 +301,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/basics/requirements/index.print.html b/basics/requirements/index.print.html
index f5e2af8203..028fdbe8f5 100644
--- a/basics/requirements/index.print.html
+++ b/basics/requirements/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/basics/requirements/index.html" rel="canonical" type="text/html" title="Requirements :: Hugo Relearn Theme">
     <link href="../../basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirements :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -79,10 +79,10 @@
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
 <p>
-<a href="#image-962b21b1a42daaac573551148ad5df13" class="lightbox-link">
+<a href="#image-d98b8d930d749e3491a164415642b23f" class="lightbox-link">
 <img src="../../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-962b21b1a42daaac573551148ad5df13">
+<a href="javascript:history.back();" class="lightbox" id="image-d98b8d930d749e3491a164415642b23f">
 <img src="../../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -92,8 +92,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/categories/index.html b/categories/index.html
index 442403e3de..b95494a6a2 100644
--- a/categories/index.html
+++ b/categories/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/index.html" rel="alternate" hreflang="pir">
     <link href="../categories/index.xml" rel="alternate" type="application/rss+xml" title="Categories :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../js/url.js?1675526020"></script>
-    <script src="../js/variant.js?1675526020"></script>
+    <link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../js/url.js?1675546459"></script>
+    <script src="../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -158,12 +158,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../js/search.js?1675526021" defer></script>
+        <script src="../js/auto-complete.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -243,7 +243,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -279,12 +280,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../js/buttons.js?1675526021"></script>
+          <script async src="../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../js/theme.js?1675526021" defer></script>
+    <script src="../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/cont/archetypes/index.html b/cont/archetypes/index.html
index 7485278b0d..47c996dfd3 100644
--- a/cont/archetypes/index.html
+++ b/cont/archetypes/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Archetypes :: Hugo Relearn Theme">
     <link href="../../cont/archetypes/index.print.html" rel="alternate" type="text/html" title="Archetypes :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -120,10 +120,10 @@
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
 <p>
 		
-<a href="#image-6fc540ac644ddc61f864a46d9f3f55cf" class="lightbox-link">
+<a href="#image-8837f365c66fdaa4e715fba441f88fea" class="lightbox-link">
 <img src="../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6fc540ac644ddc61f864a46d9f3f55cf">
+<a href="javascript:history.back();" class="lightbox" id="image-8837f365c66fdaa4e715fba441f88fea">
 <img src="../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a home page, run the following command</p>
@@ -139,10 +139,10 @@
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
 <p>
 		
-<a href="#image-77b912eb81e571dffb6de0a3378766bf" class="lightbox-link">
+<a href="#image-985b528da29d6cfba413c1728de9d022" class="lightbox-link">
 <img src="../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-77b912eb81e571dffb6de0a3378766bf">
+<a href="javascript:history.back();" class="lightbox" id="image-985b528da29d6cfba413c1728de9d022">
 <img src="../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a chapter page, run the following command</p>
@@ -160,10 +160,10 @@
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
 <p>
 		
-<a href="#image-e9f6dabf1b67a4021b4014d396254f5b" class="lightbox-link">
+<a href="#image-1fb628904e8458d97bf363a79877a2bb" class="lightbox-link">
 <img src="../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-e9f6dabf1b67a4021b4014d396254f5b">
+<a href="javascript:history.back();" class="lightbox" id="image-1fb628904e8458d97bf363a79877a2bb">
 <img src="../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a default page, run either one of the following commands</p>
@@ -292,12 +292,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -377,7 +377,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -413,12 +414,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/cont/archetypes/index.print.html b/cont/archetypes/index.print.html
index 315b6ac8d2..f85d109c6d 100644
--- a/cont/archetypes/index.print.html
+++ b/cont/archetypes/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/archetypes/index.html" rel="canonical" type="text/html" title="Archetypes :: Hugo Relearn Theme">
     <link href="../../cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Archetypes :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,10 +83,10 @@
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
 <p>
 		
-<a href="#image-6fc540ac644ddc61f864a46d9f3f55cf" class="lightbox-link">
+<a href="#image-8837f365c66fdaa4e715fba441f88fea" class="lightbox-link">
 <img src="../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6fc540ac644ddc61f864a46d9f3f55cf">
+<a href="javascript:history.back();" class="lightbox" id="image-8837f365c66fdaa4e715fba441f88fea">
 <img src="../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a home page, run the following command</p>
@@ -102,10 +102,10 @@
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
 <p>
 		
-<a href="#image-77b912eb81e571dffb6de0a3378766bf" class="lightbox-link">
+<a href="#image-985b528da29d6cfba413c1728de9d022" class="lightbox-link">
 <img src="../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-77b912eb81e571dffb6de0a3378766bf">
+<a href="javascript:history.back();" class="lightbox" id="image-985b528da29d6cfba413c1728de9d022">
 <img src="../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a chapter page, run the following command</p>
@@ -123,10 +123,10 @@
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
 <p>
 		
-<a href="#image-e9f6dabf1b67a4021b4014d396254f5b" class="lightbox-link">
+<a href="#image-1fb628904e8458d97bf363a79877a2bb" class="lightbox-link">
 <img src="../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-e9f6dabf1b67a4021b4014d396254f5b">
+<a href="javascript:history.back();" class="lightbox" id="image-1fb628904e8458d97bf363a79877a2bb">
 <img src="../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a default page, run either one of the following commands</p>
@@ -183,8 +183,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/cont/i18n/index.html b/cont/i18n/index.html
index 41d841e576..eea970c5e3 100644
--- a/cont/i18n/index.html
+++ b/cont/i18n/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual and i18n :: Hugo Relearn Theme">
     <link href="../../cont/i18n/index.print.html" rel="alternate" type="text/html" title="Multilingual and i18n :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -118,10 +118,10 @@
 </ul>
 <p>
 		
-<a href="#image-32dfe224300a38b63266d36f1e1528bf" class="lightbox-link">
+<a href="#image-731ea2757c62eb7407299fc76e2b85a1" class="lightbox-link">
 <img src="../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-32dfe224300a38b63266d36f1e1528bf">
+<a href="javascript:history.back();" class="lightbox" id="image-731ea2757c62eb7407299fc76e2b85a1">
 <img src="../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
@@ -291,12 +291,12 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -376,7 +376,8 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -412,12 +413,12 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/cont/i18n/index.print.html b/cont/i18n/index.print.html
index e6e2d5295d..05fc4e8acb 100644
--- a/cont/i18n/index.print.html
+++ b/cont/i18n/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/i18n/index.html" rel="canonical" type="text/html" title="Multilingual and i18n :: Hugo Relearn Theme">
     <link href="../../cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual and i18n :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -86,10 +86,10 @@
 </ul>
 <p>
 		
-<a href="#image-32dfe224300a38b63266d36f1e1528bf" class="lightbox-link">
+<a href="#image-731ea2757c62eb7407299fc76e2b85a1" class="lightbox-link">
 <img src="../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-32dfe224300a38b63266d36f1e1528bf">
+<a href="javascript:history.back();" class="lightbox" id="image-731ea2757c62eb7407299fc76e2b85a1">
 <img src="../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
@@ -187,8 +187,8 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/cont/index.html b/cont/index.html
index 3d82efedc9..b6576edc8e 100644
--- a/cont/index.html
+++ b/cont/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="../cont/index.xml" rel="alternate" type="application/rss+xml" title="Content :: Hugo Relearn Theme">
     <link href="../cont/index.print.html" rel="alternate" type="text/html" title="Content :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../js/url.js?1675526020"></script>
-    <script src="../js/variant.js?1675526020"></script>
+    <link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../js/url.js?1675546459"></script>
+    <script src="../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -171,12 +171,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../js/search.js?1675526021" defer></script>
+        <script src="../js/auto-complete.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -256,7 +256,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -292,12 +293,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../js/buttons.js?1675526021"></script>
+          <script async src="../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../js/theme.js?1675526021" defer></script>
+    <script src="../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/cont/index.print.html b/cont/index.print.html
index 51b2dc9ef2..11c2f6a15c 100644
--- a/cont/index.print.html
+++ b/cont/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/index.html" rel="canonical" type="text/html" title="Content :: Hugo Relearn Theme">
     <link href="../cont/index.xml" rel="alternate" type="application/rss+xml" title="Content :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../js/url.js?1675526022"></script>
-    <script src="../js/variant.js?1675526022"></script>
+    <link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../js/url.js?1675546461"></script>
+    <script src="../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -161,10 +161,10 @@
 </span></span><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span></code></pre></div><p>
 		
-<a href="#image-c8336c25870b2b891bab4384184a3278" class="lightbox-link">
+<a href="#image-8a59328991f39f448beecd221197dd75" class="lightbox-link">
 <img src="../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title with icon" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c8336c25870b2b891bab4384184a3278">
+<a href="javascript:history.back();" class="lightbox" id="image-8a59328991f39f448beecd221197dd75">
 <img src="../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title with icon" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
@@ -210,10 +210,10 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
 <p>
 		
-<a href="#image-6fc540ac644ddc61f864a46d9f3f55cf" class="lightbox-link">
+<a href="#image-8837f365c66fdaa4e715fba441f88fea" class="lightbox-link">
 <img src="../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6fc540ac644ddc61f864a46d9f3f55cf">
+<a href="javascript:history.back();" class="lightbox" id="image-8837f365c66fdaa4e715fba441f88fea">
 <img src="../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a home page, run the following command</p>
@@ -229,10 +229,10 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
 <p>
 		
-<a href="#image-77b912eb81e571dffb6de0a3378766bf" class="lightbox-link">
+<a href="#image-985b528da29d6cfba413c1728de9d022" class="lightbox-link">
 <img src="../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-77b912eb81e571dffb6de0a3378766bf">
+<a href="javascript:history.back();" class="lightbox" id="image-985b528da29d6cfba413c1728de9d022">
 <img src="../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a chapter page, run the following command</p>
@@ -250,10 +250,10 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
 <p>
 		
-<a href="#image-e9f6dabf1b67a4021b4014d396254f5b" class="lightbox-link">
+<a href="#image-1fb628904e8458d97bf363a79877a2bb" class="lightbox-link">
 <img src="../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-e9f6dabf1b67a4021b4014d396254f5b">
+<a href="javascript:history.back();" class="lightbox" id="image-1fb628904e8458d97bf363a79877a2bb">
 <img src="../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a default page, run either one of the following commands</p>
@@ -827,10 +827,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-f866b0a4563f962399e7b00f70471519" class="lightbox-link">
+<a href="#image-469dfe7c752af377585ca0d47527c166" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f866b0a4563f962399e7b00f70471519">
+<a href="javascript:history.back();" class="lightbox" id="image-469dfe7c752af377585ca0d47527c166">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -844,10 +844,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-b061381355d10a9905cf667ddeae3af0" class="lightbox-link">
+<a href="#image-1661d9f906dbaf0bea9aaa4c6cb4b087" class="lightbox-link">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b061381355d10a9905cf667ddeae3af0">
+<a href="javascript:history.back();" class="lightbox" id="image-1661d9f906dbaf0bea9aaa4c6cb4b087">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -863,10 +863,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-2862b378e6c4fc39b02f2cbec364b113" class="lightbox-link">
+<a href="#image-04f38d748341210b5cdc98a1300be336" class="lightbox-link">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2862b378e6c4fc39b02f2cbec364b113">
+<a href="javascript:history.back();" class="lightbox" id="image-04f38d748341210b5cdc98a1300be336">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -882,10 +882,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-fd62265444bf25f3914a86f8c9e66d43" class="lightbox-link">
+<a href="#image-d0136022c35f4a8ab64fa74f0c25b4e7" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-fd62265444bf25f3914a86f8c9e66d43">
+<a href="javascript:history.back();" class="lightbox" id="image-d0136022c35f4a8ab64fa74f0c25b4e7">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -897,10 +897,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-020c00a9c3ca1689674c48e018956756" class="lightbox-link">
+<a href="#image-90e0602e6b7d02f805558f85d829fcbc" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-020c00a9c3ca1689674c48e018956756">
+<a href="javascript:history.back();" class="lightbox" id="image-90e0602e6b7d02f805558f85d829fcbc">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -913,10 +913,10 @@ line 3 of code
 <p>
 		
 		
-<a href="#image-f924c3724fb2b8d0d2a10f0ceaa0288b" class="lightbox-link">
+<a href="#image-fdb13a6d259c6cc529fb39fea2d2f59f" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: 40vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f924c3724fb2b8d0d2a10f0ceaa0288b">
+<a href="javascript:history.back();" class="lightbox" id="image-fdb13a6d259c6cc529fb39fea2d2f59f">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -931,10 +931,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-a0734fce59c40540af21012851d31479" class="lightbox-link">
+<a href="#image-f5b27d342a4fc4a06ab8e4ad8c9273fb" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="shadow bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-a0734fce59c40540af21012851d31479">
+<a href="javascript:history.back();" class="lightbox" id="image-f5b27d342a4fc4a06ab8e4ad8c9273fb">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -947,10 +947,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-c6ef33a9e1fdfe1fd8ed4e47fe9d9fe8" class="lightbox-link">
+<a href="#image-bf9a4113a90de6ecdb0a4214d0e9a0a2" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="border" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c6ef33a9e1fdfe1fd8ed4e47fe9d9fe8">
+<a href="javascript:history.back();" class="lightbox" id="image-bf9a4113a90de6ecdb0a4214d0e9a0a2">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -963,10 +963,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-f36a15b16bdfac1f83cca08313124f4d" class="lightbox-link">
+<a href="#image-5e495d1b03541013e28efebf127067b3" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f36a15b16bdfac1f83cca08313124f4d">
+<a href="javascript:history.back();" class="lightbox" id="image-5e495d1b03541013e28efebf127067b3">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -979,10 +979,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-053381fe94b22b2f306f31a52e233936" class="lightbox-link">
+<a href="#image-ce7b64342b17411a18f3e9dd0883b81c" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="right" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-053381fe94b22b2f306f31a52e233936">
+<a href="javascript:history.back();" class="lightbox" id="image-ce7b64342b17411a18f3e9dd0883b81c">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -998,34 +998,34 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-bae6f60c68c6b3d21cef189150574e63" class="lightbox-link">
+<a href="#image-dac997a7f5220d088fc3b4ce5df8b382" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="inline bg-white" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-bae6f60c68c6b3d21cef189150574e63">
+<a href="javascript:history.back();" class="lightbox" id="image-dac997a7f5220d088fc3b4ce5df8b382">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-f07c3c33f3b2b385d7946f47935c46d1" class="lightbox-link">
+<a href="#image-43ce22c97590f7e82d10d3dd6a0818b2" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f07c3c33f3b2b385d7946f47935c46d1">
+<a href="javascript:history.back();" class="lightbox" id="image-43ce22c97590f7e82d10d3dd6a0818b2">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-6fbca4fe08d982560dd4951982150f39" class="lightbox-link">
+<a href="#image-3ed119758e69521bd030703b380aff03" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6fbca4fe08d982560dd4951982150f39">
+<a href="javascript:history.back();" class="lightbox" id="image-3ed119758e69521bd030703b380aff03">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-47179f337b0d1393ab5aa69cc5b9065b" class="lightbox-link">
+<a href="#image-feafd96f682f6443ea775f1d5aedb27c" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-47179f337b0d1393ab5aa69cc5b9065b">
+<a href="javascript:history.back();" class="lightbox" id="image-feafd96f682f6443ea775f1d5aedb27c">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -1038,10 +1038,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-981330562eb6d712d0b1258fb9b324f1" class="lightbox-link">
+<a href="#image-f56c01380f31d45cd716b3781491d739" class="lightbox-link">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="shadow border left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-981330562eb6d712d0b1258fb9b324f1">
+<a href="javascript:history.back();" class="lightbox" id="image-f56c01380f31d45cd716b3781491d739">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -1245,10 +1245,10 @@ However, if you want to keep the title but change its value, it can be overridde
 </ul>
 <p>
 		
-<a href="#image-32dfe224300a38b63266d36f1e1528bf" class="lightbox-link">
+<a href="#image-731ea2757c62eb7407299fc76e2b85a1" class="lightbox-link">
 <img src="../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-32dfe224300a38b63266d36f1e1528bf">
+<a href="javascript:history.back();" class="lightbox" id="image-731ea2757c62eb7407299fc76e2b85a1">
 <img src="../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
@@ -1372,8 +1372,8 @@ You&rsquo;ll see error reports in your browsers console log for each unsupported
           </section>        </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../js/theme.js?1675526022" defer></script>
+    <script src="../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/cont/markdown/index.html b/cont/markdown/index.html
index fa24e76ea1..93f782ee62 100644
--- a/cont/markdown/index.html
+++ b/cont/markdown/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Markdown syntax :: Hugo Relearn Theme">
     <link href="../../cont/markdown/index.print.html" rel="alternate" type="text/html" title="Markdown syntax :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -665,10 +665,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-f866b0a4563f962399e7b00f70471519" class="lightbox-link">
+<a href="#image-469dfe7c752af377585ca0d47527c166" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f866b0a4563f962399e7b00f70471519">
+<a href="javascript:history.back();" class="lightbox" id="image-469dfe7c752af377585ca0d47527c166">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -682,10 +682,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-b061381355d10a9905cf667ddeae3af0" class="lightbox-link">
+<a href="#image-1661d9f906dbaf0bea9aaa4c6cb4b087" class="lightbox-link">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b061381355d10a9905cf667ddeae3af0">
+<a href="javascript:history.back();" class="lightbox" id="image-1661d9f906dbaf0bea9aaa4c6cb4b087">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -701,10 +701,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-2862b378e6c4fc39b02f2cbec364b113" class="lightbox-link">
+<a href="#image-04f38d748341210b5cdc98a1300be336" class="lightbox-link">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2862b378e6c4fc39b02f2cbec364b113">
+<a href="javascript:history.back();" class="lightbox" id="image-04f38d748341210b5cdc98a1300be336">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -720,10 +720,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-fd62265444bf25f3914a86f8c9e66d43" class="lightbox-link">
+<a href="#image-d0136022c35f4a8ab64fa74f0c25b4e7" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-fd62265444bf25f3914a86f8c9e66d43">
+<a href="javascript:history.back();" class="lightbox" id="image-d0136022c35f4a8ab64fa74f0c25b4e7">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -735,10 +735,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-020c00a9c3ca1689674c48e018956756" class="lightbox-link">
+<a href="#image-90e0602e6b7d02f805558f85d829fcbc" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-020c00a9c3ca1689674c48e018956756">
+<a href="javascript:history.back();" class="lightbox" id="image-90e0602e6b7d02f805558f85d829fcbc">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -751,10 +751,10 @@ line 3 of code
 <p>
 		
 		
-<a href="#image-f924c3724fb2b8d0d2a10f0ceaa0288b" class="lightbox-link">
+<a href="#image-fdb13a6d259c6cc529fb39fea2d2f59f" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: 40vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f924c3724fb2b8d0d2a10f0ceaa0288b">
+<a href="javascript:history.back();" class="lightbox" id="image-fdb13a6d259c6cc529fb39fea2d2f59f">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -769,10 +769,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-a0734fce59c40540af21012851d31479" class="lightbox-link">
+<a href="#image-f5b27d342a4fc4a06ab8e4ad8c9273fb" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="shadow bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-a0734fce59c40540af21012851d31479">
+<a href="javascript:history.back();" class="lightbox" id="image-f5b27d342a4fc4a06ab8e4ad8c9273fb">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -785,10 +785,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-c6ef33a9e1fdfe1fd8ed4e47fe9d9fe8" class="lightbox-link">
+<a href="#image-bf9a4113a90de6ecdb0a4214d0e9a0a2" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="border" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c6ef33a9e1fdfe1fd8ed4e47fe9d9fe8">
+<a href="javascript:history.back();" class="lightbox" id="image-bf9a4113a90de6ecdb0a4214d0e9a0a2">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -801,10 +801,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-f36a15b16bdfac1f83cca08313124f4d" class="lightbox-link">
+<a href="#image-5e495d1b03541013e28efebf127067b3" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f36a15b16bdfac1f83cca08313124f4d">
+<a href="javascript:history.back();" class="lightbox" id="image-5e495d1b03541013e28efebf127067b3">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -817,10 +817,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-053381fe94b22b2f306f31a52e233936" class="lightbox-link">
+<a href="#image-ce7b64342b17411a18f3e9dd0883b81c" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="right" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-053381fe94b22b2f306f31a52e233936">
+<a href="javascript:history.back();" class="lightbox" id="image-ce7b64342b17411a18f3e9dd0883b81c">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -836,34 +836,34 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-bae6f60c68c6b3d21cef189150574e63" class="lightbox-link">
+<a href="#image-dac997a7f5220d088fc3b4ce5df8b382" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="inline bg-white" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-bae6f60c68c6b3d21cef189150574e63">
+<a href="javascript:history.back();" class="lightbox" id="image-dac997a7f5220d088fc3b4ce5df8b382">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-f07c3c33f3b2b385d7946f47935c46d1" class="lightbox-link">
+<a href="#image-43ce22c97590f7e82d10d3dd6a0818b2" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f07c3c33f3b2b385d7946f47935c46d1">
+<a href="javascript:history.back();" class="lightbox" id="image-43ce22c97590f7e82d10d3dd6a0818b2">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-6fbca4fe08d982560dd4951982150f39" class="lightbox-link">
+<a href="#image-3ed119758e69521bd030703b380aff03" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6fbca4fe08d982560dd4951982150f39">
+<a href="javascript:history.back();" class="lightbox" id="image-3ed119758e69521bd030703b380aff03">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-47179f337b0d1393ab5aa69cc5b9065b" class="lightbox-link">
+<a href="#image-feafd96f682f6443ea775f1d5aedb27c" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-47179f337b0d1393ab5aa69cc5b9065b">
+<a href="javascript:history.back();" class="lightbox" id="image-feafd96f682f6443ea775f1d5aedb27c">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -876,10 +876,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-981330562eb6d712d0b1258fb9b324f1" class="lightbox-link">
+<a href="#image-f56c01380f31d45cd716b3781491d739" class="lightbox-link">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="shadow border left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-981330562eb6d712d0b1258fb9b324f1">
+<a href="javascript:history.back();" class="lightbox" id="image-f56c01380f31d45cd716b3781491d739">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -975,12 +975,12 @@ line 3 of code
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -1060,7 +1060,8 @@ line 3 of code
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -1096,12 +1097,12 @@ line 3 of code
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/cont/markdown/index.print.html b/cont/markdown/index.print.html
index 20d9917c93..7422d19478 100644
--- a/cont/markdown/index.print.html
+++ b/cont/markdown/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/markdown/index.html" rel="canonical" type="text/html" title="Markdown syntax :: Hugo Relearn Theme">
     <link href="../../cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Markdown syntax :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -592,10 +592,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-f866b0a4563f962399e7b00f70471519" class="lightbox-link">
+<a href="#image-469dfe7c752af377585ca0d47527c166" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f866b0a4563f962399e7b00f70471519">
+<a href="javascript:history.back();" class="lightbox" id="image-469dfe7c752af377585ca0d47527c166">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -609,10 +609,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-b061381355d10a9905cf667ddeae3af0" class="lightbox-link">
+<a href="#image-1661d9f906dbaf0bea9aaa4c6cb4b087" class="lightbox-link">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b061381355d10a9905cf667ddeae3af0">
+<a href="javascript:history.back();" class="lightbox" id="image-1661d9f906dbaf0bea9aaa4c6cb4b087">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -628,10 +628,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-2862b378e6c4fc39b02f2cbec364b113" class="lightbox-link">
+<a href="#image-04f38d748341210b5cdc98a1300be336" class="lightbox-link">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2862b378e6c4fc39b02f2cbec364b113">
+<a href="javascript:history.back();" class="lightbox" id="image-04f38d748341210b5cdc98a1300be336">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -647,10 +647,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-fd62265444bf25f3914a86f8c9e66d43" class="lightbox-link">
+<a href="#image-d0136022c35f4a8ab64fa74f0c25b4e7" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-fd62265444bf25f3914a86f8c9e66d43">
+<a href="javascript:history.back();" class="lightbox" id="image-d0136022c35f4a8ab64fa74f0c25b4e7">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -662,10 +662,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-020c00a9c3ca1689674c48e018956756" class="lightbox-link">
+<a href="#image-90e0602e6b7d02f805558f85d829fcbc" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-020c00a9c3ca1689674c48e018956756">
+<a href="javascript:history.back();" class="lightbox" id="image-90e0602e6b7d02f805558f85d829fcbc">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -678,10 +678,10 @@ line 3 of code
 <p>
 		
 		
-<a href="#image-f924c3724fb2b8d0d2a10f0ceaa0288b" class="lightbox-link">
+<a href="#image-fdb13a6d259c6cc529fb39fea2d2f59f" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: 40vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f924c3724fb2b8d0d2a10f0ceaa0288b">
+<a href="javascript:history.back();" class="lightbox" id="image-fdb13a6d259c6cc529fb39fea2d2f59f">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -696,10 +696,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-a0734fce59c40540af21012851d31479" class="lightbox-link">
+<a href="#image-f5b27d342a4fc4a06ab8e4ad8c9273fb" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="shadow bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-a0734fce59c40540af21012851d31479">
+<a href="javascript:history.back();" class="lightbox" id="image-f5b27d342a4fc4a06ab8e4ad8c9273fb">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -712,10 +712,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-c6ef33a9e1fdfe1fd8ed4e47fe9d9fe8" class="lightbox-link">
+<a href="#image-bf9a4113a90de6ecdb0a4214d0e9a0a2" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="border" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c6ef33a9e1fdfe1fd8ed4e47fe9d9fe8">
+<a href="javascript:history.back();" class="lightbox" id="image-bf9a4113a90de6ecdb0a4214d0e9a0a2">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -728,10 +728,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-f36a15b16bdfac1f83cca08313124f4d" class="lightbox-link">
+<a href="#image-5e495d1b03541013e28efebf127067b3" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f36a15b16bdfac1f83cca08313124f4d">
+<a href="javascript:history.back();" class="lightbox" id="image-5e495d1b03541013e28efebf127067b3">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -744,10 +744,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-053381fe94b22b2f306f31a52e233936" class="lightbox-link">
+<a href="#image-ce7b64342b17411a18f3e9dd0883b81c" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="right" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-053381fe94b22b2f306f31a52e233936">
+<a href="javascript:history.back();" class="lightbox" id="image-ce7b64342b17411a18f3e9dd0883b81c">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -763,34 +763,34 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-bae6f60c68c6b3d21cef189150574e63" class="lightbox-link">
+<a href="#image-dac997a7f5220d088fc3b4ce5df8b382" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="inline bg-white" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-bae6f60c68c6b3d21cef189150574e63">
+<a href="javascript:history.back();" class="lightbox" id="image-dac997a7f5220d088fc3b4ce5df8b382">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-f07c3c33f3b2b385d7946f47935c46d1" class="lightbox-link">
+<a href="#image-43ce22c97590f7e82d10d3dd6a0818b2" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f07c3c33f3b2b385d7946f47935c46d1">
+<a href="javascript:history.back();" class="lightbox" id="image-43ce22c97590f7e82d10d3dd6a0818b2">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-6fbca4fe08d982560dd4951982150f39" class="lightbox-link">
+<a href="#image-3ed119758e69521bd030703b380aff03" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6fbca4fe08d982560dd4951982150f39">
+<a href="javascript:history.back();" class="lightbox" id="image-3ed119758e69521bd030703b380aff03">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-47179f337b0d1393ab5aa69cc5b9065b" class="lightbox-link">
+<a href="#image-feafd96f682f6443ea775f1d5aedb27c" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-47179f337b0d1393ab5aa69cc5b9065b">
+<a href="javascript:history.back();" class="lightbox" id="image-feafd96f682f6443ea775f1d5aedb27c">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -803,10 +803,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-981330562eb6d712d0b1258fb9b324f1" class="lightbox-link">
+<a href="#image-f56c01380f31d45cd716b3781491d739" class="lightbox-link">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="shadow border left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-981330562eb6d712d0b1258fb9b324f1">
+<a href="javascript:history.back();" class="lightbox" id="image-f56c01380f31d45cd716b3781491d739">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -830,8 +830,8 @@ line 3 of code
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.html b/cont/menushortcuts/index.html
index 2cb2ac45b4..896d63de78 100644
--- a/cont/menushortcuts/index.html
+++ b/cont/menushortcuts/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extra shortcuts :: Hugo Relearn Theme">
     <link href="../../cont/menushortcuts/index.print.html" rel="alternate" type="text/html" title="Menu extra shortcuts :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -289,12 +289,12 @@ However, if you want to keep the title but change its value, it can be overridde
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -374,7 +374,8 @@ However, if you want to keep the title but change its value, it can be overridde
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -410,12 +411,12 @@ However, if you want to keep the title but change its value, it can be overridde
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.print.html b/cont/menushortcuts/index.print.html
index 170a7787ad..24bfcfd512 100644
--- a/cont/menushortcuts/index.print.html
+++ b/cont/menushortcuts/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/menushortcuts/index.html" rel="canonical" type="text/html" title="Menu extra shortcuts :: Hugo Relearn Theme">
     <link href="../../cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extra shortcuts :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -191,8 +191,8 @@ However, if you want to keep the title but change its value, it can be overridde
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/cont/pages/index.html b/cont/pages/index.html
index 952deb0738..dc9e2cceac 100644
--- a/cont/pages/index.html
+++ b/cont/pages/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="Pages organization :: Hugo Relearn Theme">
     <link href="../../cont/pages/index.print.html" rel="alternate" type="text/html" title="Pages organization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -184,10 +184,10 @@
 </span></span><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span></code></pre></div><p>
 		
-<a href="#image-c8336c25870b2b891bab4384184a3278" class="lightbox-link">
+<a href="#image-8a59328991f39f448beecd221197dd75" class="lightbox-link">
 <img src="../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title with icon" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c8336c25870b2b891bab4384184a3278">
+<a href="javascript:history.back();" class="lightbox" id="image-8a59328991f39f448beecd221197dd75">
 <img src="../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title with icon" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
@@ -297,12 +297,12 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -382,7 +382,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -418,12 +419,12 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/cont/pages/index.print.html b/cont/pages/index.print.html
index 839f24041f..5c45b8bc7d 100644
--- a/cont/pages/index.print.html
+++ b/cont/pages/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/pages/index.html" rel="canonical" type="text/html" title="Pages organization :: Hugo Relearn Theme">
     <link href="../../cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="Pages organization :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -150,10 +150,10 @@
 </span></span><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span></code></pre></div><p>
 		
-<a href="#image-c8336c25870b2b891bab4384184a3278" class="lightbox-link">
+<a href="#image-8a59328991f39f448beecd221197dd75" class="lightbox-link">
 <img src="../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title with icon" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c8336c25870b2b891bab4384184a3278">
+<a href="javascript:history.back();" class="lightbox" id="image-8a59328991f39f448beecd221197dd75">
 <img src="../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title with icon" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
@@ -191,8 +191,8 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/cont/syntaxhighlight/index.html b/cont/syntaxhighlight/index.html
index e1bbd67713..476d77afde 100644
--- a/cont/syntaxhighlight/index.html
+++ b/cont/syntaxhighlight/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/syntaxhighlight/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/syntaxhighlight/index.xml" rel="alternate" type="application/rss+xml" title="Code highlighting :: Hugo Relearn Theme">
     <link href="../../cont/syntaxhighlight/index.print.html" rel="alternate" type="text/html" title="Code highlighting :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -227,12 +227,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -312,7 +312,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -348,12 +349,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/cont/syntaxhighlight/index.print.html b/cont/syntaxhighlight/index.print.html
index 37871530b7..b69cf4c7de 100644
--- a/cont/syntaxhighlight/index.print.html
+++ b/cont/syntaxhighlight/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/syntaxhighlight/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/syntaxhighlight/index.html" rel="canonical" type="text/html" title="Code highlighting :: Hugo Relearn Theme">
     <link href="../../cont/syntaxhighlight/index.xml" rel="alternate" type="application/rss+xml" title="Code highlighting :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -128,8 +128,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/cont/tags/index.html b/cont/tags/index.html
index 4aaa24c3c0..f84719c941 100644
--- a/cont/tags/index.html
+++ b/cont/tags/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/tags/index.html" rel="alternate" hreflang="pir">
     <link href="../../cont/tags/index.xml" rel="alternate" type="application/rss+xml" title="Tags :: Hugo Relearn Theme">
     <link href="../../cont/tags/index.print.html" rel="alternate" type="text/html" title="Tags :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -203,12 +203,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -288,7 +288,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -324,12 +325,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/cont/tags/index.print.html b/cont/tags/index.print.html
index df3e0fd4b5..7ff5ff85f1 100644
--- a/cont/tags/index.print.html
+++ b/cont/tags/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/tags/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/cont/tags/index.html" rel="canonical" type="text/html" title="Tags :: Hugo Relearn Theme">
     <link href="../../cont/tags/index.xml" rel="alternate" type="application/rss+xml" title="Tags :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -104,8 +104,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/css/theme-auto.css b/css/theme-auto.css
new file mode 100644
index 0000000000..27e053d4e5
--- /dev/null
+++ b/css/theme-auto.css
@@ -0,0 +1,2 @@
+@import "/css/theme-relearn-light.css" screen;
+@import "/css/theme-relearn-dark.css" screen and (prefers-color-scheme: dark);
\ No newline at end of file
diff --git a/dev/contributing/index.html b/dev/contributing/index.html
index d471ea5948..87f5517f82 100644
--- a/dev/contributing/index.html
+++ b/dev/contributing/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -297,12 +297,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -386,7 +386,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -422,12 +423,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/dev/contributing/index.print.html b/dev/contributing/index.print.html
index f272d41a20..1c9229fa9a 100644
--- a/dev/contributing/index.print.html
+++ b/dev/contributing/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -199,8 +199,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/dev/index.html b/dev/index.html
index f2989e9711..7b84b05f51 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../js/url.js?1675526020"></script>
-    <script src="../js/variant.js?1675526020"></script>
+    <link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../js/url.js?1675546459"></script>
+    <script src="../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -177,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../js/search.js?1675526021" defer></script>
+        <script src="../js/auto-complete.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -266,7 +266,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -302,12 +303,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../js/buttons.js?1675526021"></script>
+          <script async src="../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../js/theme.js?1675526021" defer></script>
+    <script src="../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/dev/index.print.html b/dev/index.print.html
index a1367e664d..c74c9735d0 100644
--- a/dev/index.print.html
+++ b/dev/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../js/url.js?1675526022"></script>
-    <script src="../js/variant.js?1675526022"></script>
+    <link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../js/url.js?1675546461"></script>
+    <script src="../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -445,10 +445,10 @@
 <p>
 		
 		
-<a href="#image-3a394ebac8f5cf3cb82cdc032731c1f2" class="lightbox-link">
+<a href="#image-249d060637f5ee15bc024240bc695f54" class="lightbox-link">
 <img src="../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-3a394ebac8f5cf3cb82cdc032731c1f2">
+<a href="javascript:history.back();" class="lightbox" id="image-249d060637f5ee15bc024240bc695f54">
 <img src="../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="hero-image">Hero Image</h2>
@@ -482,20 +482,20 @@
 <p>
 		
 		
-<a href="#image-1f465360a0f1397bdc20368339093f4f" class="lightbox-link">
+<a href="#image-16ee75980a6b532d196f6413421b15da" class="lightbox-link">
 <img src="../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-1f465360a0f1397bdc20368339093f4f">
+<a href="javascript:history.back();" class="lightbox" id="image-16ee75980a6b532d196f6413421b15da">
 <img src="../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
 <p>
 		
 		
-<a href="#image-c5c56f0d71e7601576d7757e145e8f9d" class="lightbox-link">
+<a href="#image-9e70634f76cdf60c804ed9bb6de06edc" class="lightbox-link">
 <img src="../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c5c56f0d71e7601576d7757e145e8f9d">
+<a href="javascript:history.back();" class="lightbox" id="image-9e70634f76cdf60c804ed9bb6de06edc">
 <img src="../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -506,8 +506,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../js/theme.js?1675526022" defer></script>
+    <script src="../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/dev/maintaining/index.html b/dev/maintaining/index.html
index d8bf24609b..0064fdf844 100644
--- a/dev/maintaining/index.html
+++ b/dev/maintaining/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -376,12 +376,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -465,7 +465,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -501,12 +502,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/dev/maintaining/index.print.html b/dev/maintaining/index.print.html
index 22a8665779..51635b856a 100644
--- a/dev/maintaining/index.print.html
+++ b/dev/maintaining/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -267,8 +267,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/dev/screenshots/index.html b/dev/screenshots/index.html
index 9662cb11ee..b5c6ea2e1b 100644
--- a/dev/screenshots/index.html
+++ b/dev/screenshots/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -145,10 +145,10 @@
 <p>
 		
 		
-<a href="#image-3a394ebac8f5cf3cb82cdc032731c1f2" class="lightbox-link">
+<a href="#image-249d060637f5ee15bc024240bc695f54" class="lightbox-link">
 <img src="../../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-3a394ebac8f5cf3cb82cdc032731c1f2">
+<a href="javascript:history.back();" class="lightbox" id="image-249d060637f5ee15bc024240bc695f54">
 <img src="../../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="hero-image">Hero Image</h2>
@@ -182,20 +182,20 @@
 <p>
 		
 		
-<a href="#image-1f465360a0f1397bdc20368339093f4f" class="lightbox-link">
+<a href="#image-16ee75980a6b532d196f6413421b15da" class="lightbox-link">
 <img src="../../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-1f465360a0f1397bdc20368339093f4f">
+<a href="javascript:history.back();" class="lightbox" id="image-16ee75980a6b532d196f6413421b15da">
 <img src="../../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
 <p>
 		
 		
-<a href="#image-c5c56f0d71e7601576d7757e145e8f9d" class="lightbox-link">
+<a href="#image-9e70634f76cdf60c804ed9bb6de06edc" class="lightbox-link">
 <img src="../../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c5c56f0d71e7601576d7757e145e8f9d">
+<a href="javascript:history.back();" class="lightbox" id="image-9e70634f76cdf60c804ed9bb6de06edc">
 <img src="../../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -277,12 +277,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -366,7 +366,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -402,12 +403,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/dev/screenshots/index.print.html b/dev/screenshots/index.print.html
index ad3c7be3f0..d682916f54 100644
--- a/dev/screenshots/index.print.html
+++ b/dev/screenshots/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -109,10 +109,10 @@
 <p>
 		
 		
-<a href="#image-3a394ebac8f5cf3cb82cdc032731c1f2" class="lightbox-link">
+<a href="#image-249d060637f5ee15bc024240bc695f54" class="lightbox-link">
 <img src="../../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-3a394ebac8f5cf3cb82cdc032731c1f2">
+<a href="javascript:history.back();" class="lightbox" id="image-249d060637f5ee15bc024240bc695f54">
 <img src="../../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="hero-image">Hero Image</h2>
@@ -146,20 +146,20 @@
 <p>
 		
 		
-<a href="#image-1f465360a0f1397bdc20368339093f4f" class="lightbox-link">
+<a href="#image-16ee75980a6b532d196f6413421b15da" class="lightbox-link">
 <img src="../../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-1f465360a0f1397bdc20368339093f4f">
+<a href="javascript:history.back();" class="lightbox" id="image-16ee75980a6b532d196f6413421b15da">
 <img src="../../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
 <p>
 		
 		
-<a href="#image-c5c56f0d71e7601576d7757e145e8f9d" class="lightbox-link">
+<a href="#image-9e70634f76cdf60c804ed9bb6de06edc" class="lightbox-link">
 <img src="../../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c5c56f0d71e7601576d7757e145e8f9d">
+<a href="javascript:history.back();" class="lightbox" id="image-9e70634f76cdf60c804ed9bb6de06edc">
 <img src="../../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -169,8 +169,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/index.html b/index.html
index cf83a7bc49..12e60daeb3 100644
--- a/index.html
+++ b/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="./index.xml" rel="alternate" type="application/rss+xml" title="Hugo Relearn Theme">
     <link href="./index.print.html" rel="alternate" type="text/html" title="Hugo Relearn Theme">
-    <link href="./images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="./css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="./css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="./css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1675526020" rel="stylesheet">
-    <link href="./css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="./css/ie.css?1675526020" rel="stylesheet">
-    <link href="./css/variant.css?1675526020" rel="stylesheet">
-    <link href="./css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="./js/url.js?1675526020"></script>
-    <script src="./js/variant.js?1675526020"></script>
+    <link href="./css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="./css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="./css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="./css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1675546459" rel="stylesheet">
+    <link href="./css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="./css/ie.css?1675546459" rel="stylesheet">
+    <link href="./css/variant.css?1675546459" rel="stylesheet">
+    <link href="./css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="./js/url.js?1675546459"></script>
+    <script src="./js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -245,12 +245,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="./js/auto-complete.js?1675526021" defer></script>
-        <script src="./js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="./js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="./js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="./js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="./js/search.js?1675526021" defer></script>
+        <script src="./js/auto-complete.js?1675546460" defer></script>
+        <script src="./js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="./js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="./js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="./js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="./js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -330,7 +330,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -366,12 +367,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="./js/buttons.js?1675526021"></script>
+          <script async src="./js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="./js/clipboard.min.js?1675526021" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="./js/theme.js?1675526021" defer></script>
+    <script src="./js/clipboard.min.js?1675546460" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="./js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/index.print.html b/index.print.html
index ef5306346e..6cce4a9099 100644
--- a/index.print.html
+++ b/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/index.html" rel="canonical" type="text/html" title="Hugo Relearn Theme">
     <link href="./index.xml" rel="alternate" type="application/rss+xml" title="Hugo Relearn Theme">
-    <link href="./images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="./css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="./css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="./css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1675526022" rel="stylesheet">
-    <link href="./css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="./css/ie.css?1675526022" rel="stylesheet">
-    <link href="./css/variant.css?1675526022" rel="stylesheet">
-    <link href="./css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="./css/format-print.css?1675526022" rel="stylesheet">
-    <script src="./js/url.js?1675526022"></script>
-    <script src="./js/variant.js?1675526022"></script>
+    <link href="./css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="./css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="./css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="./css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1675546461" rel="stylesheet">
+    <link href="./css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="./css/ie.css?1675546461" rel="stylesheet">
+    <link href="./css/variant.css?1675546461" rel="stylesheet">
+    <link href="./css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="./css/format-print.css?1675546461" rel="stylesheet">
+    <script src="./js/url.js?1675546461"></script>
+    <script src="./js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -174,6 +174,11 @@
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;{{&#34;</span><span class="na">js</span><span class="err">/</span><span class="na">jquery</span><span class="err">.</span><span class="na">min</span><span class="err">.</span><span class="na">js</span><span class="err">&#34;|</span> <span class="na">relURL</span><span class="err">}}{{</span> <span class="na">if</span> <span class="err">$</span><span class="na">assetBusting</span> <span class="err">}}?{{</span> <span class="na">now</span><span class="err">.</span><span class="na">Unix</span> <span class="err">}}{{</span> <span class="na">end</span> <span class="err">}}&#34;</span> <span class="na">defer</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </span></span></code></pre></div></li>
 <li>
+<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> The theme is now capable to visually <a href="./basics/customization/#adjust-to-os-settings">adapt to your OS&rsquo;s light/dark mode setting</a>.</p>
+<p>This is also the new default setting if you haven&rsquo;t configured <code>themeVariant</code> in your <code>config.toml</code>.</p>
+<p>Additionally you are able to configure the variants to be taken for light/dark mode with the new <code>themeVariantAuto</code> parameter.</p>
+</li>
+<li>
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> In the effort to comply with WCAG standards, the implementation of the <a href="./shortcodes/expand/"><code>expand</code> shortcode</a> was changed. While Internet Explorer 11 has issues in displaying it, the functionality still works.</p>
 </li>
 <li>
@@ -716,10 +721,10 @@
 <p>Thanks to the simplicity of Hugo, this page is as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> of the <a href="https://gohugo.io/getting-started/installing/" target="_blank">Hugo binary</a> for your OS (Windows, Linux, Mac).</p>
 <p>
-<a href="#image-962b21b1a42daaac573551148ad5df13" class="lightbox-link">
+<a href="#image-d98b8d930d749e3491a164415642b23f" class="lightbox-link">
 <img src="./basics/requirements/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-962b21b1a42daaac573551148ad5df13">
+<a href="javascript:history.back();" class="lightbox" id="image-d98b8d930d749e3491a164415642b23f">
 <img src="./basics/requirements/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -756,10 +761,10 @@
 </span></span></code></pre></div><p>renders as</p>
 <p>
 		
-<a href="#image-cfd613b30cc1cb08bc50dc04ade6fa07" class="lightbox-link">
+<a href="#image-0f2fa2554160e192f305c38bcfeebfba" class="lightbox-link">
 <img src="./basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-cfd613b30cc1cb08bc50dc04ade6fa07">
+<a href="javascript:history.back();" class="lightbox" id="image-0f2fa2554160e192f305c38bcfeebfba">
 <img src="./basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="lightbox-image" loading="lazy">
 </a></p>
 <p>The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command</p>
@@ -868,8 +873,8 @@
 </span></span><span class="line"><span class="cl">  <span class="c"># Order sections in menu by &#34;weight&#34; or &#34;title&#34;. Default to &#34;weight&#34;;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># this can be overridden in the pages frontmatter</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s2">&#34;weight&#34;</span>
-</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme with a variant one. Eg. can be &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
-</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme with a variant one. Eg. can be &#34;auto&#34;, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
+</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># Change the title separator. Default to &#34;::&#34;.</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">titleSeparator</span> <span class="p">=</span> <span class="s2">&#34;-&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># If set to true, the menu in the sidebar will be displayed in a collapsible tree view. Although the functionality works with old browsers (IE11), the display of the expander icons is limited to modern browsers</span>
@@ -912,10 +917,10 @@
 </span></span></code></pre></div><p>You can access this page by either clicking on the magnifier glass or by typing some search term and pressing <code>ENTER</code> inside of the menu&rsquo;s search box .</p>
 <p>
 		
-<a href="#image-3a6e333074062481b806851de331ed97" class="lightbox-link">
+<a href="#image-7656a9565262bb716dd7a6e836429c5f" class="lightbox-link">
 <img src="./basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-3a6e333074062481b806851de331ed97">
+<a href="javascript:history.back();" class="lightbox" id="image-7656a9565262bb716dd7a6e836429c5f">
 <img src="./basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot of the dedicated search page" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="activate-print-support">Activate print support</h2>
@@ -964,10 +969,10 @@ default values:</p>
 </span></span></code></pre></div><p>The home button is going to look like this:</p>
 <p>
 		
-<a href="#image-f0b57f3dfbdcfcc74a359debe6046ff7" class="lightbox-link">
+<a href="#image-8bd27c647190febeb6b9585d9b710b68" class="lightbox-link">
 <img src="./basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f0b57f3dfbdcfcc74a359debe6046ff7">
+<a href="javascript:history.back();" class="lightbox" id="image-8bd27c647190febeb6b9585d9b710b68">
 <img src="./basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -1037,7 +1042,16 @@ You could use an <code>img</code> HTML tag and reference an image created under
 <p>If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">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>
-<h3 id="roll-your-own">Roll your own</h3>
+<h3 id="adjust-to-os-settings">Adjust to OS Settings</h3>
+<p>You can also cause the site to adjust to your OS settings for light/dark mode. Just set the <code>themeVariant</code> to <code>auto</code>. That&rsquo;s it.</p>
+<p>If you&rsquo;ve set multiple variants, you can drop <code>auto</code> at any position, but usually it makes sense to set it in the first position and make it the default.</p>
+<div class="highlight"><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="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><p>If you don&rsquo;t configure anything else, the theme will use <code>relearn-light</code> for light mode and <code>relearn-dark</code> for dark mode.</p>
+<p>If you don&rsquo;t like that, you can set <code>themeVariantAuto</code>. The first element is the variant for light mode, the second for dark mode</p>
+<div class="highlight"><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="s2">&#34;learn&#34;</span><span class="p">,</span> <span class="s2">&#34;neon&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><h3 id="roll-your-own">Roll your own</h3>
 <p>If you are not happy with the shipped variants you can either copy and rename one of the shipped files from <code>themes/hugo-theme-relearn/static/css</code> to <code>static/css</code>, edit them afterwards to your liking in a text editor and configure the <code>themeVariant</code> parameter in your <code>config.toml</code> or just use the <a href="./basics/generator/">interactive variant generator</a>.</p>
 <h3 id="output-formats">Output formats</h3>
 <p>Certain parts of the theme can be changed for support of your own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if you define a new output format <code>PLAINTEXT</code> in your <code>config.toml</code>, you can add a file <code>layouts/partials/header.plaintext.html</code> to change the way, the page header should look like for that output format.</p>
@@ -2111,10 +2125,10 @@ window.variants && variants.generator( '#vargenerator' );
 </span></span><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span></code></pre></div><p>
 		
-<a href="#image-c8336c25870b2b891bab4384184a3278" class="lightbox-link">
+<a href="#image-8a59328991f39f448beecd221197dd75" class="lightbox-link">
 <img src="./cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title with icon" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c8336c25870b2b891bab4384184a3278">
+<a href="javascript:history.back();" class="lightbox" id="image-8a59328991f39f448beecd221197dd75">
 <img src="./cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title with icon" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="ordering-sibling-menupage-entries">Ordering sibling menu/page entries</h3>
@@ -2160,10 +2174,10 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 <p>A <strong>Home</strong> page is the starting page of your project. It&rsquo;s best to have only one page of this kind in your project.</p>
 <p>
 		
-<a href="#image-6fc540ac644ddc61f864a46d9f3f55cf" class="lightbox-link">
+<a href="#image-8837f365c66fdaa4e715fba441f88fea" class="lightbox-link">
 <img src="./cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6fc540ac644ddc61f864a46d9f3f55cf">
+<a href="javascript:history.back();" class="lightbox" id="image-8837f365c66fdaa4e715fba441f88fea">
 <img src="./cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a home page, run the following command</p>
@@ -2179,10 +2193,10 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 <p>A <strong>Chapter</strong> displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.</p>
 <p>
 		
-<a href="#image-77b912eb81e571dffb6de0a3378766bf" class="lightbox-link">
+<a href="#image-985b528da29d6cfba413c1728de9d022" class="lightbox-link">
 <img src="./cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-77b912eb81e571dffb6de0a3378766bf">
+<a href="javascript:history.back();" class="lightbox" id="image-985b528da29d6cfba413c1728de9d022">
 <img src="./cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a chapter page, run the following command</p>
@@ -2200,10 +2214,10 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
 <p>A <strong>Default</strong> page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.</p>
 <p>
 		
-<a href="#image-e9f6dabf1b67a4021b4014d396254f5b" class="lightbox-link">
+<a href="#image-1fb628904e8458d97bf363a79877a2bb" class="lightbox-link">
 <img src="./cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-e9f6dabf1b67a4021b4014d396254f5b">
+<a href="javascript:history.back();" class="lightbox" id="image-1fb628904e8458d97bf363a79877a2bb">
 <img src="./cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>To create a default page, run either one of the following commands</p>
@@ -2777,10 +2791,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-f866b0a4563f962399e7b00f70471519" class="lightbox-link">
+<a href="#image-469dfe7c752af377585ca0d47527c166" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f866b0a4563f962399e7b00f70471519">
+<a href="javascript:history.back();" class="lightbox" id="image-469dfe7c752af377585ca0d47527c166">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2794,10 +2808,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-b061381355d10a9905cf667ddeae3af0" class="lightbox-link">
+<a href="#image-1661d9f906dbaf0bea9aaa4c6cb4b087" class="lightbox-link">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b061381355d10a9905cf667ddeae3af0">
+<a href="javascript:history.back();" class="lightbox" id="image-1661d9f906dbaf0bea9aaa4c6cb4b087">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2813,10 +2827,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-2862b378e6c4fc39b02f2cbec364b113" class="lightbox-link">
+<a href="#image-04f38d748341210b5cdc98a1300be336" class="lightbox-link">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2862b378e6c4fc39b02f2cbec364b113">
+<a href="javascript:history.back();" class="lightbox" id="image-04f38d748341210b5cdc98a1300be336">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2832,10 +2846,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-fd62265444bf25f3914a86f8c9e66d43" class="lightbox-link">
+<a href="#image-d0136022c35f4a8ab64fa74f0c25b4e7" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-fd62265444bf25f3914a86f8c9e66d43">
+<a href="javascript:history.back();" class="lightbox" id="image-d0136022c35f4a8ab64fa74f0c25b4e7">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2847,10 +2861,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-020c00a9c3ca1689674c48e018956756" class="lightbox-link">
+<a href="#image-90e0602e6b7d02f805558f85d829fcbc" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-020c00a9c3ca1689674c48e018956756">
+<a href="javascript:history.back();" class="lightbox" id="image-90e0602e6b7d02f805558f85d829fcbc">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2863,10 +2877,10 @@ line 3 of code
 <p>
 		
 		
-<a href="#image-f924c3724fb2b8d0d2a10f0ceaa0288b" class="lightbox-link">
+<a href="#image-fdb13a6d259c6cc529fb39fea2d2f59f" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: 40vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f924c3724fb2b8d0d2a10f0ceaa0288b">
+<a href="javascript:history.back();" class="lightbox" id="image-fdb13a6d259c6cc529fb39fea2d2f59f">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2881,10 +2895,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-a0734fce59c40540af21012851d31479" class="lightbox-link">
+<a href="#image-f5b27d342a4fc4a06ab8e4ad8c9273fb" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="shadow bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-a0734fce59c40540af21012851d31479">
+<a href="javascript:history.back();" class="lightbox" id="image-f5b27d342a4fc4a06ab8e4ad8c9273fb">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2897,10 +2911,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-c6ef33a9e1fdfe1fd8ed4e47fe9d9fe8" class="lightbox-link">
+<a href="#image-bf9a4113a90de6ecdb0a4214d0e9a0a2" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="border" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c6ef33a9e1fdfe1fd8ed4e47fe9d9fe8">
+<a href="javascript:history.back();" class="lightbox" id="image-bf9a4113a90de6ecdb0a4214d0e9a0a2">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2913,10 +2927,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-f36a15b16bdfac1f83cca08313124f4d" class="lightbox-link">
+<a href="#image-5e495d1b03541013e28efebf127067b3" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f36a15b16bdfac1f83cca08313124f4d">
+<a href="javascript:history.back();" class="lightbox" id="image-5e495d1b03541013e28efebf127067b3">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2929,10 +2943,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-053381fe94b22b2f306f31a52e233936" class="lightbox-link">
+<a href="#image-ce7b64342b17411a18f3e9dd0883b81c" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="right" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-053381fe94b22b2f306f31a52e233936">
+<a href="javascript:history.back();" class="lightbox" id="image-ce7b64342b17411a18f3e9dd0883b81c">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2948,34 +2962,34 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-bae6f60c68c6b3d21cef189150574e63" class="lightbox-link">
+<a href="#image-dac997a7f5220d088fc3b4ce5df8b382" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="inline bg-white" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-bae6f60c68c6b3d21cef189150574e63">
+<a href="javascript:history.back();" class="lightbox" id="image-dac997a7f5220d088fc3b4ce5df8b382">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-f07c3c33f3b2b385d7946f47935c46d1" class="lightbox-link">
+<a href="#image-43ce22c97590f7e82d10d3dd6a0818b2" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f07c3c33f3b2b385d7946f47935c46d1">
+<a href="javascript:history.back();" class="lightbox" id="image-43ce22c97590f7e82d10d3dd6a0818b2">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-6fbca4fe08d982560dd4951982150f39" class="lightbox-link">
+<a href="#image-3ed119758e69521bd030703b380aff03" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6fbca4fe08d982560dd4951982150f39">
+<a href="javascript:history.back();" class="lightbox" id="image-3ed119758e69521bd030703b380aff03">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-47179f337b0d1393ab5aa69cc5b9065b" class="lightbox-link">
+<a href="#image-feafd96f682f6443ea775f1d5aedb27c" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-47179f337b0d1393ab5aa69cc5b9065b">
+<a href="javascript:history.back();" class="lightbox" id="image-feafd96f682f6443ea775f1d5aedb27c">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2988,10 +3002,10 @@ line 3 of code
   <div class="box-content">
 <p>
 		
-<a href="#image-981330562eb6d712d0b1258fb9b324f1" class="lightbox-link">
+<a href="#image-f56c01380f31d45cd716b3781491d739" class="lightbox-link">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="shadow border left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-981330562eb6d712d0b1258fb9b324f1">
+<a href="javascript:history.back();" class="lightbox" id="image-f56c01380f31d45cd716b3781491d739">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -3195,10 +3209,10 @@ However, if you want to keep the title but change its value, it can be overridde
 </ul>
 <p>
 		
-<a href="#image-32dfe224300a38b63266d36f1e1528bf" class="lightbox-link">
+<a href="#image-731ea2757c62eb7407299fc76e2b85a1" class="lightbox-link">
 <img src="./cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-32dfe224300a38b63266d36f1e1528bf">
+<a href="javascript:history.back();" class="lightbox" id="image-731ea2757c62eb7407299fc76e2b85a1">
 <img src="./cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="basic-configuration">Basic configuration</h2>
@@ -4463,14 +4477,14 @@ So its content is used as description.</p>
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-741f986258e10d27978c394bf975be4c" aria-controls="expandcontent-741f986258e10d27978c394bf975be4c" >
-    <label class="expand-label" for="expand-741f986258e10d27978c394bf975be4c" >
+    <input type="checkbox" id="expand-040c73fdfc43b9caaaecd53c8579f2c2" aria-controls="expandcontent-040c73fdfc43b9caaaecd53c8579f2c2" >
+    <label class="expand-label" for="expand-040c73fdfc43b9caaaecd53c8579f2c2" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-741f986258e10d27978c394bf975be4c" class="expand-content">
+    <div id="expandcontent-040c73fdfc43b9caaaecd53c8579f2c2" class="expand-content">
 Thank you!
     </div>
 </div>
@@ -4569,14 +4583,14 @@ Thank you!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-656e3835ae57c8f8aba41f1ff0d30c81" aria-controls="expandcontent-656e3835ae57c8f8aba41f1ff0d30c81" >
-    <label class="expand-label" for="expand-656e3835ae57c8f8aba41f1ff0d30c81" >
+    <input type="checkbox" id="expand-dd30352706d256f136784198037707de" aria-controls="expandcontent-dd30352706d256f136784198037707de" >
+    <label class="expand-label" for="expand-dd30352706d256f136784198037707de" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-656e3835ae57c8f8aba41f1ff0d30c81" class="expand-content">
+    <div id="expandcontent-dd30352706d256f136784198037707de" class="expand-content">
 Yes, you did it!
     </div>
 </div>
@@ -4584,14 +4598,14 @@ Yes, you did it!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-b32fdab4eea35c9f3bb18b847e8a1b41" aria-controls="expandcontent-b32fdab4eea35c9f3bb18b847e8a1b41"  checked>
-    <label class="expand-label" for="expand-b32fdab4eea35c9f3bb18b847e8a1b41" >
+    <input type="checkbox" id="expand-11e19cac73268e6a1ae8fbea8dc6f4da" aria-controls="expandcontent-11e19cac73268e6a1ae8fbea8dc6f4da"  checked>
+    <label class="expand-label" for="expand-11e19cac73268e6a1ae8fbea8dc6f4da" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-b32fdab4eea35c9f3bb18b847e8a1b41" class="expand-content">
+    <div id="expandcontent-11e19cac73268e6a1ae8fbea8dc6f4da" class="expand-content">
 No need to press you!
     </div>
 </div>
@@ -4613,14 +4627,14 @@ No need to press you!
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-52a7c32a15ffb6dbcbe7f93807cec98e" aria-controls="expandcontent-52a7c32a15ffb6dbcbe7f93807cec98e" >
-    <label class="expand-label" for="expand-52a7c32a15ffb6dbcbe7f93807cec98e" >
+    <input type="checkbox" id="expand-5c32501d5e90a2feeaa65b57374a2c68" aria-controls="expandcontent-5c32501d5e90a2feeaa65b57374a2c68" >
+    <label class="expand-label" for="expand-5c32501d5e90a2feeaa65b57374a2c68" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Show me almost endless possibilities
     </label>
-    <div id="expandcontent-52a7c32a15ffb6dbcbe7f93807cec98e" class="expand-content">
+    <div id="expandcontent-5c32501d5e90a2feeaa65b57374a2c68" class="expand-content">
 <p>You can add standard markdown syntax:</p>
 <ul>
 <li>multiple paragraphs</li>
@@ -6492,8 +6506,8 @@ mindmap
               </section>        </div>
       </main>
     </div>
-    <script src="./js/clipboard.min.js?1675526022" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1675526022" defer></script>
+    <script src="./js/clipboard.min.js?1675546461" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1675546461" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -6522,24 +6536,24 @@ mindmap
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="./js/mathjax/tex-mml-chtml.js?1675526022"></script>
-    <script src="./js/d3/d3-color.min.js?1675526022" defer></script>
-    <script src="./js/d3/d3-dispatch.min.js?1675526022" defer></script>
-    <script src="./js/d3/d3-drag.min.js?1675526022" defer></script>
-    <script src="./js/d3/d3-ease.min.js?1675526022" defer></script>
-    <script src="./js/d3/d3-interpolate.min.js?1675526022" defer></script>
-    <script src="./js/d3/d3-selection.min.js?1675526022" defer></script>
-    <script src="./js/d3/d3-timer.min.js?1675526022" defer></script>
-    <script src="./js/d3/d3-transition.min.js?1675526022" defer></script>
-    <script src="./js/d3/d3-zoom.min.js?1675526022" defer></script>
-    <script src="./js/mermaid.min.js?1675526022" defer></script>
+    <script id="MathJax-script" async src="./js/mathjax/tex-mml-chtml.js?1675546461"></script>
+    <script src="./js/d3/d3-color.min.js?1675546461" defer></script>
+    <script src="./js/d3/d3-dispatch.min.js?1675546461" defer></script>
+    <script src="./js/d3/d3-drag.min.js?1675546461" defer></script>
+    <script src="./js/d3/d3-ease.min.js?1675546461" defer></script>
+    <script src="./js/d3/d3-interpolate.min.js?1675546461" defer></script>
+    <script src="./js/d3/d3-selection.min.js?1675546461" defer></script>
+    <script src="./js/d3/d3-timer.min.js?1675546461" defer></script>
+    <script src="./js/d3/d3-transition.min.js?1675546461" defer></script>
+    <script src="./js/d3/d3-zoom.min.js?1675546461" defer></script>
+    <script src="./js/mermaid.min.js?1675546461" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="./js/rapidoc-min.js?1675526022" defer></script>
+    <script src="./js/rapidoc-min.js?1675546461" defer></script>
     <script>
       window.themeUseSwagger = JSON.parse("{}");
     </script>
-    <script src="./js/theme.js?1675526022" defer></script>
+    <script src="./js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/index.search.js b/index.search.js
index 3f01703166..32c06542e6 100644
--- a/index.search.js
+++ b/index.search.js
@@ -35,7 +35,7 @@ var relearn_search_index = [
     "uri": "/cont/index.html"
   },
   {
-    "content": "This document shows you what’s new in the latest release. For a detailed list of changes, see the history page.\n0.95.0 The minimum required Hugo version.\nBreaking A change that requires action by you after upgrading to assure the site is still functional.\nChange A change in default behavior that may requires action by you if you want to revert it.\nNew Marks new behavior you might find interesting or comes configurable.\n5.11.0 (not yet released) Change The theme removed the popular jQuery library from its distribution.\nIn case you made changes to the theme that are dependend on this library you can place a copy of jQuery into your static/js directory and load it from your own layouts/partials/custom-header.html like this:\n\u003cscript src=\"{{\"js/jquery.min.js\"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}\" defer\u003e\u003c/script\u003e Change In the effort to comply with WCAG standards, the implementation of the expand shortcode was changed. While Internet Explorer 11 has issues in displaying it, the functionality still works.\nChange The JavaScript code for handling image lightboxes (provided by Featherlight) was replaced by a CSS-only solution.\nThis also changed the lightbox effects parameter from featherlight=false to lightbox=false. Nevertheless you don’t need to change anything as the old name will be used as a fallback.\nNew Translation for Czech. This language is not supported for search.\nNew GitHub releases are also now tagged for the main version (eg. 1.2.x) and major version (eg. 1.x) making it easier for you to pin the theme to a certain version.\n5.10.0 (2023-01-25) New The attachments, badge, button and notice shortcodes have a new parameter color to set arbitrary CSS color values.\nAdditionally the --ACCENT-color brand color introduced in version 5.8.0 is now supported with these shortcodes.\n5.9.0 (2022-12-23) Change The required folder name for the attachments shortcode was changed for leaf bundles.\nPreviously, the attachments for leaf bundles in non-multilang setups were required to be in a files subdirectory. For page bundles and leaf bundles in multilang setups they were always required to be in a _index.\u003cLANGCODE\u003e.files or index.\u003cLANGCODE\u003e.files subdirectory accordingly.\nThis added unnessessary complexity. So attachments for leaf bundles in non-multilang setups can now also reside in a index.files directory. Although the old files directory is now deprecated, if both directories are present, only the old files directory will be used for compatiblity.\nChange Absolute links prefixed with http:// or https:// are now opened in a separate browser tab.\nYou can revert back to the old behavior by defining externalLinkTarget=\"_self\" in the params section of your config.toml.\nNew The theme now supports Hugo’s module system.\n5.8.0 (2022-12-08) New The new badge shortcode is now available to add highly configurable markers to your content as you can see it on this page.\nNew The new icon shortcode simplyfies the usage of icons. This can even be combined with also new badge shortcode.\nNew The theme now supports some of GFM (GitHub Flavored Markdown) syntax and Hugo Markdown extensions, namely task lists, defintion lists and footnotes.\nNew A new color --ACCENT-color was introduced which is used for highlightning search results on the page. In case you simply don’t care, you don’t need to change anything in your variant stylesheet as the old yellow color is still used as default.\n5.7.0 (2022-11-29) Change The Korean language translation for this theme is now available with the language code ko. Formerly the country code kr was used instead.\nNew The button shortcode can now also be used as a real button inside of HTML forms - although this is a pretty rare use case. The documentation was updated accordingly.\nNew The search now supports the Korean language.\n5.6.0 (2022-11-18) New This release introduces an additional dedicated search page. On this page, displayed search results have more space making it easier scanning thru large number of results.\nTo activate this feature, you need to configure it in your config.toml as a new outputformat SEARCHPAGE for the home page. If you don’t configure it, no dedicated search page will be accessible and the theme works as before.\nYou can access the search page by either clicking on the magnifier glass or pressing enter inside of the search box.\nNew Keyboard handling for the TOC and search was improved.\nPressing CTRL+ALT+t now will not only toggle the TOC overlay but also places the focus to the first heading on opening. Subsequently this makes it possible to easily select headings by using the TAB key.\nThe search received its own brand new keyboard shortcut CTRL+ALT+f. This will focus the cursor inside of the the search box so you can immediately start your search by typing.\nNew You are now able to turn off the generation of generator meta tags in your HTML head to hide the used versions of Hugo and this theme.\nTo configure this in your config.toml make sure to set Hugo’s disableHugoGeneratorInject=true and also [params] disableGeneratorVersion=true, otherwise Hugo will generate a meta tag into your home page automagically.\nNew Creation of your project gets a little bit faster with this release.\nThis addresses increased build time with the 5.x releases. The theme now heavily caches partial results leading to improved performance. To further increase performance, unnecessary parts of the page are now skipped for creation of the print output (eg. menus, navigation bar, etc.).\n5.5.0 (2022-11-06) Change The way images are processed has changed. Now images are lazy loaded by default which speeds up page load on slow networks and/or big pages and also the print preview.\nFor that the JavaScript code to handle the lightbox and image effects on the client side was removed in favour for static generation of those effects on the server.\nIf you have used HTML directly in your Markdown files, this now has the downside that it doesn’t respect the effect query parameter anymore. In this case you have to migrate all your HTML img URLs manually to the respective HTML attributes.\nOld New \u003cimg src=\"pic.png?width=20vw\u0026classes=shadow,border\"\u003e \u003cimg src=\"pic.png\" style=\"width:20vw;\" class=\"shadow border\"\u003e 5.4.0 (2022-11-01) Change With the proper settings in your config.toml your page is now servable from the local file system using file:// URLs.\nPlease note that the searchbox will only work for this if you reconfigure your outputformat for the homepage in your config.toml from JSON to SEARCH. The now deprecated JSON outputformat still works as before, so there is no need to reconfigure your installation if it is only served from http:// or https://.\nChange The button shortcode has a new parameter target to set the destination frame/window for the URL to open. If not given, it defaults to a new window/tab for external URLs or is not set at all for internal URLs. Previously even internal URLs where opened in a new window/tab.\nNew The math shortcode and mermaid shortcode now also support the align parameter if codefence syntax is used.\nNew Support for languages that are written right to left (like Arabic). This is only implemented for the content area but not the navigation sidebar. This feature is not available in Internet Explorer 11.\nNew Translation for Finnish (Suomi).\n5.3.0 (2022-10-07) Change In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed. The functionality of the new implementation does not work with old browsers (Internet Explorer 11).\nNew Image formatting has two new classes to align images to the left or right. Additionally, the already existing inline option is now documented.\nNew Printing for the swagger shortcode was optimized to expand sections that are usually closed in interactive mode. This requires print support to be configured.\n5.2.0 (2022-08-03) Change If you’ve set collapsibleMenu = true in your config.toml, the menu will be expanded if a search term is found in a collapsed submenu. The menu will return to its initial collapse state once the search term does not match any submenus. 5.1.0 (2022-07-15) 0.95.0 This release requires a newer Hugo version.\nChange Because the print preview URLs were non deterministic for normal pages in comparison to page bundles, this is now changed. Each print preview is now accessible by adding a index.print.html to the default URL.\nYou can revert this behavior by overwriting the PRINT output format setting in your config.tomlto:\n[outputFormats] [outputFormats.PRINT] name= \"PRINT\" baseName = \"index\" path = \"_print\" isHTML = true mediaType = 'text/html' permalinkable = false 5.0.0 (2022-07-05) Breaking The theme changed how JavaScript and CSS dependencies are loaded to provide a better performance. In case you’ve added own JavaScript code that depends on the themes jQuery implementation, you have to put it into a separate *.js file (if not already) and add the defer keyword to the script element. Eg.\n\u003cscript defer src=\"myscript.js\"\u003e\u003c/script\u003e Change The way archetypes are used to generate output has changed. The new systems allows you, to redefine existing archetypes or even generate your own ones.\nYour existing markdown files will still work like before and therefore you don’t need to change anything after the upgrade. Nevertheless, it is recommended to adapt your existing markdown files to the new way as follows:\nfor your home page, add the frontmatter parameter archetype = \"home\" and remove the leading heading\nfor all files containing the deprecated frontmatter parameter chapter = true, replace it with archetype = \"chapter\" and remove the leading headings\nChange The frontmatter options pre / post were renamed to menuPre / menuPost. The old options will still be used if the new options aren’t set. Therefore you don’t need to change anything after the upgrade.\nNew Adding new partials heading-pre.html / heading-post.html and according frontmatter options headingPre / headingPost to modify the way your page`s main heading gets styled.\nNew The new shortcode math is available to add beautiful math and chemical formulae. See the documentation for available features. This feature will not work with Internet Explorer 11.\n4.2.0 (2022-06-23) Breaking The second parameter for the include shortcode was switched in meaning and was renamed from showfirstheading to hidefirstheading. If you haven’t used this parameter in your shortcode, the default behavior hasn’t changed and you don’t need to change anything.\nIf you’ve used the second boolean parameter, you have to rename it and invert its value to achieve the same behavior.\nChange Previously, if the tabs shortcode could not find a tab item because, the tabs ended up empty. Now the first tab is selected instead.\nChange The landingPageURL was removed from config.toml. You can safely remove this as well from your configuration as it is not used anymore. The theme will detect the landing page URL automatically.\nNew All shortcodes can now be also called from your partials. Examples for this are added to the documentation of each shortcode.\n4.1.0 (2022-06-12) New While fixing issues with the search functionality for non Latin languages, you can now configure to have multiple languages on a single page. 4.0.0 (2022-06-05) Breaking The custom_css config parameter was removed from the configuration. If used in an existing installation, it can be achieved by overriding the custom-header.html template in a much more generic manner.\nBreaking Because anchor hover color was not configurable without introducing more complexity to the variant stylesheets, we decided to remove --MAIN-ANCHOR-color instead. You don’t need to change anything in your custom color stylesheet as the anchors now get their colors from --MAIN-LINK-color and --MAIN-ANCHOR-HOVER-color respectively.\nNew All shortcodes now support named parameter. The positional parameter are still supported but will not be enhanced with new features, so you don’t need to change anything in your installation.\nThis applies to expand, include, notice and siteparam.\nNew The button shortcode received some love and now has a parameter for the color style similar to other shortcodes.\nNew New colors --PRIMARY-color and --SECONDARY-color were added to provide easier modification of your custom style. Shortcodes with a color style can now have primary or secondary as additional values.\nThese two colors are the default for other, more specific color variables. You don’t need to change anything in your existing custom color stylesheets as those variables get reasonable default values.\nNew Translation for Polish. This language is not supported for search.\nNew The documentation for all shortcodes were revised.\n3.4.0 (2022-04-03) Breaking If you had previously overwritten the custom-footer.html partial to add visual elements below the content of your page, you have to move this content to the new partial content-footer.html. custom-footer.html was never meant to contain HTML other than additional styles and JavaScript.\nNew If you prefer expandable/collapsible menu items, you can now set collapsibleMenu=true in your config.toml. This will add arrows to all menu items that contain sub menus. The menu will expand/collapse without navigation if you click on an arrow.\nNew You can activate print support in your config.toml to add the capability to print whole chapters or even the complete site.\nNew Translation for Traditional Chinese.\n3.3.0 (2022-03-28) New Introduction of new CSS variables to set the font. The theme distinguishes between --MAIN-font for all content text and --CODE-font for inline or block code. There are additional overrides for all headings. See the theme variant generator of the exampleSite for all available variables.\nNew The new shortcode swagger is available to include a UI for REST OpenAPI Specifications. See the documentation for available features. This feature will not work with Internet Explorer 11.\n3.2.0 (2022-03-19) 0.93.0 This release requires a newer Hugo version.\nChange In this release the Mermaid JavaScript library will only be loaded on demand if the page contains a Mermaid shortcode or is using Mermaid codefences. This changes the behavior of disableMermaid config option as follows: If a Mermaid shortcode or codefence is found, the option will be ignored and Mermaid will be loaded regardlessly.\nThe option is still useful in case you are using scripting to set up your graph. In this case no shortcode or codefence is involved and the library is not loaded by default. In this case you can set disableMermaid=false in your frontmatter to force the library to be loaded. See the theme variant generator of the exampleSite for an example.\nNew Additional color variant variable --MERMAID-theme to set the variant’s Mermaid theme. This causes the Mermaid theme to switch with the color variant if it defers from the setting of the formerly selected color variant.\n3.1.0 (2022-03-15) New attachment and notice shortcodes have a new parameter to override the default icon. Allowed values are all Font Awesome 5 Free icons. 3.0.0 (2022-02-22) Breaking We made changes to the menu footer. If you have your menu-footer.html partial overridden, you may have to review the styling (eg. margins/paddings) in your partial. For a reference take a look into the menu-footer.html partial that is coming with the exampleSite.\nThis change was made to allow your own menu footer to be placed right after the so called prefooter that comes with the theme (containing the language switch and Clear history functionality).\nBreaking We have changed the default colors from the original Learn theme (the purple menu header) to the Relearn defaults (the light green menu header) as used in the official documentation.\nThis change will only affect your installation if you’ve not set the themeVariant parameter in your config.toml. If you still want to use the Learn color variant, you have to explicitly set themeVariant=\"learn\" in your config.toml.\nNote, that this will also affect your site if viewed with Internet Explorer 11 but in this case it can not be reconfigured as Internet Explorer does not support CSS variables.\nChange Due to a bug, that we couldn’t fix in a general manner for color variants, we decided to remove --MENU-SEARCH-BOX-ICONS-color and introduced --MENU-SEARCH-color instead. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nChange For consistency reasons, we renamed --MENU-SEARCH-BOX-color to --MENU-SEARCH-BORDER-color. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nNew With this release you are now capable to define your own dark mode variants.\nTo make this possible, we have introduced a lot more color variables you can use in your color variants. Your old variants will still work and don’t need to be changed as appropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.\nTo see what’s now possible, see the new variants relearn-dark and neon that are coming with this release.\nNew To make the creation of new variants easier for you, we’ve added a new interactive theme variant generator. This feature will not work with Internet Explorer 11.\nNew You can now configure multiple color variants in your config.toml. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the menu footer. See the documentation for configuration.\nNote, that the new variant switch will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant switcher will not be displayed with Internet Explorer 11.\n2.9.0 (2021-11-19) Breaking This release removes the themes implementation of ref/relref in favor for Hugos standard implementation. This is because of inconsistencies with the themes implementation. In advantage, your project becomes standard compliant and exchanging this theme in your project to some other theme will be effortless.\nIn a standard compliant form you must not link to the *.md file but to its logical name. You’ll see, referencing other pages becomes much easier. All three types result in the same reference:\nType Non-Standard Standard Branch bundle basics/configuration/_index.md basics/configuration Leaf bundle basics/configuration/index.md basics/configuration Page basics/configuration.md basics/configuration If you’ve linked from a page of one language to a page of another language, conversion is a bit more difficult but Hugo got you covered as well.\nAlso, the old themes implementation allowed refs to non-existing content. This will cause Hugos implementation to show the error below and abort the generation. If your project relies on this old behavior, you can reconfigure the error handling of Hugos implementation.\nIn the best case your usage of the old implementation is already standard compliant and you don’t need to change anything. You’ll notice this very easily once you’ve started hugo server after an upgrade and no errors are written to the console.\nYou may see errors on the console after the update in the form:\nERROR 2021/11/19 22:29:10 [en] REF_NOT_FOUND: Ref \"basics/configuration/_index.md\": \"hugo-theme-relearn\\exampleSite\\content\\_index.en.md:19:22\": page not found In this case, you must apply one of two options:\nCopy the old implementation files theme/hugo-theme-relearn/layouts/shortcode/ref.html and theme/hugo-theme-relearn/layouts/shortcode/relref.html to your own projects layouts/shortcode/ref.html and layouts/shortcode/relref.html respectively. This is not recommended as your project will still rely on non-standard behavior afterwards.\nStart up a text editor with regular expression support for search and replace. Apply the following conversions in the given order on all *.md files. This is the recommended choice.\nType Search Replace by Branch bundle (ref\\s+\"[^\"]*)/_index\\.md\" $1\" Leaf bundle (ref\\s+\"[^\"]*)/index\\.md\" $1\" Page (ref\\s+\"[^\"]*)\\.md\" $1\" 2.8.0 (2021-11-03) Change Although never officially documented, this release removes the font Novacento/Novecento. If you use it in an overwritten CSS please replace it with Work Sans. This change was necessary as Novacento did not provide all Latin special characters and lead to mixed styled character text eg. for Czech.\nNew The theme now supports favicons served from static/images/ named as favicon or logo in SVG, PNG or ICO format out of the box. An overridden partial layouts/partials/favicon.html may not be necessary anymore in most cases.\nNew You can hide the table of contents menu for the whole site by setting the disableToc option in your config.toml. For an example see the example configuration.\n2.7.0 (2021-10-24) New Optional second parameter for notice shortcode to set title in box header. 2.6.0 (2021-10-21) New Your site can now be served from a subfolder if you set baseURL and canonifyURLs=true in your config.toml. See the documentation for a detailed example. 2.5.0 (2021-10-08) Change New colors --CODE-BLOCK-color and --CODE-BLOCK-BG-color were added to provide a fallback for Hugos syntax highlighting in case guessSyntax=true is set. Ideally the colors are set to the same values as the ones from your chosen chroma style. 2.4.0 (2021-10-07) Change Creation of customized stylesheets was simplified down to only contain the CSS variables. Everything else can and should be deleted from your custom stylesheet to assure everything works fine. For the predefined stylesheet variants, this change is already included.\nNew Hidden pages are displayed by default in their according tags page. You can now turn off this behavior by setting disableTagHiddenPages=true in your config.toml.\nNew You can define the expansion state of your menus for the whole site by setting the alwaysopen option in your config.toml. Please see further documentation for possible values and default behavior.\nNew New frontmatter ordersectionsby option to change immediate children sorting in menu and children shortcode. Possible values are title or weight.\nNew Alternate content of a page is now advertised in the HTML meta tags. See Hugo documentation.\n2.3.0 (2021-09-13) 0.81.0 This release requires a newer Hugo version.\nNew Showcase multilanguage features by providing a documentation translation “fer us pirrrates”. There will be no other translations besides the original English one and the Pirates one due to maintenance constraints.\n2.2.0 (2021-09-09) New Hidden pages are displayed by default in the sitemap generated by Hugo and are therefore visible for search engine indexing. You can now turn off this behavior by setting disableSeoHiddenPages=true in your config.toml. 2.1.0 (2021-09-07) 0.69.0 This release requires a newer Hugo version.\nChange In case the site’s structure contains additional *.md files not part of the site (eg files that are meant to be included by site pages - see CHANGELOG.md in the exampleSite), they will now be ignored by the search.\nNew Hidden pages are indexed for the site search by default. You can now turn off this behavior by setting disableSearchHiddenPages=true in your config.toml.\nNew If a search term is found in an expand shortcode, the expand will be opened.\nNew The menu will scroll the active item into view on load.\n2.0.0 (2021-08-28) Change Syntax highlighting was switched to the built in Hugo mechanism. You may need to configure a new stylesheet or decide to roll you own as described on in the Hugo documentation\nChange In the predefined stylesheets there was a typo and --MENU-HOME-LINK-HOVERED-color must be changed to --MENU-HOME-LINK-HOVER-color. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nChange --MENU-HOME-LINK-color and --MENU-HOME-LINK-HOVER-color were missing in the documentation. You should add them to your custom stylesheets if you want to override the defaults.\nChange Arrow navigation and children shortcode were ignoring setting for ordersectionsby. This is now changed and may result in different sorting order of your sub pages.\nChange If hidden pages are accessed directly by typing their URL, they will be exposed in the menu.\nChange A page without a title will be treated as hidden=true.\nNew You can define the expansion state of your menus in the frontmatter. Please see further documentation for possible values and default behavior.\nNew New partials for defining pre/post content for menu items and the content. See documentation for further reading.\nNew Shortcode children with new parameter containerstyle.\nNew New shortcode include to include arbitrary file content into a page.\n1.2.0 (2021-07-26) New Shortcode expand with new parameter to open on page load. 1.1.0 (2021-07-02) New Mermaid config options can be set in config.toml. 1.0.0 (2021-07-01) 0.65.0 The version requirement for Hugo is the same as for the Learn theme version 2.5.0 on 2021-07-01.\nNew Initial fork of the Learn theme based on Learn 2.5.0 on 2021-07-01. This introduces no new features besides a global rename to Relearn and a new logo. For the reasons behind forking the Learn theme, see this comment in the Learn issues.\n",
+    "content": "This document shows you what’s new in the latest release. For a detailed list of changes, see the history page.\n0.95.0 The minimum required Hugo version.\nBreaking A change that requires action by you after upgrading to assure the site is still functional.\nChange A change in default behavior that may requires action by you if you want to revert it.\nNew Marks new behavior you might find interesting or comes configurable.\n5.11.0 (not yet released) Change The theme removed the popular jQuery library from its distribution.\nIn case you made changes to the theme that are dependend on this library you can place a copy of jQuery into your static/js directory and load it from your own layouts/partials/custom-header.html like this:\n\u003cscript src=\"{{\"js/jquery.min.js\"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}\" defer\u003e\u003c/script\u003e Change The theme is now capable to visually adapt to your OS’s light/dark mode setting.\nThis is also the new default setting if you haven’t configured themeVariant in your config.toml.\nAdditionally you are able to configure the variants to be taken for light/dark mode with the new themeVariantAuto parameter.\nChange In the effort to comply with WCAG standards, the implementation of the expand shortcode was changed. While Internet Explorer 11 has issues in displaying it, the functionality still works.\nChange The JavaScript code for handling image lightboxes (provided by Featherlight) was replaced by a CSS-only solution.\nThis also changed the lightbox effects parameter from featherlight=false to lightbox=false. Nevertheless you don’t need to change anything as the old name will be used as a fallback.\nNew Translation for Czech. This language is not supported for search.\nNew GitHub releases are also now tagged for the main version (eg. 1.2.x) and major version (eg. 1.x) making it easier for you to pin the theme to a certain version.\n5.10.0 (2023-01-25) New The attachments, badge, button and notice shortcodes have a new parameter color to set arbitrary CSS color values.\nAdditionally the --ACCENT-color brand color introduced in version 5.8.0 is now supported with these shortcodes.\n5.9.0 (2022-12-23) Change The required folder name for the attachments shortcode was changed for leaf bundles.\nPreviously, the attachments for leaf bundles in non-multilang setups were required to be in a files subdirectory. For page bundles and leaf bundles in multilang setups they were always required to be in a _index.\u003cLANGCODE\u003e.files or index.\u003cLANGCODE\u003e.files subdirectory accordingly.\nThis added unnessessary complexity. So attachments for leaf bundles in non-multilang setups can now also reside in a index.files directory. Although the old files directory is now deprecated, if both directories are present, only the old files directory will be used for compatiblity.\nChange Absolute links prefixed with http:// or https:// are now opened in a separate browser tab.\nYou can revert back to the old behavior by defining externalLinkTarget=\"_self\" in the params section of your config.toml.\nNew The theme now supports Hugo’s module system.\n5.8.0 (2022-12-08) New The new badge shortcode is now available to add highly configurable markers to your content as you can see it on this page.\nNew The new icon shortcode simplyfies the usage of icons. This can even be combined with also new badge shortcode.\nNew The theme now supports some of GFM (GitHub Flavored Markdown) syntax and Hugo Markdown extensions, namely task lists, defintion lists and footnotes.\nNew A new color --ACCENT-color was introduced which is used for highlightning search results on the page. In case you simply don’t care, you don’t need to change anything in your variant stylesheet as the old yellow color is still used as default.\n5.7.0 (2022-11-29) Change The Korean language translation for this theme is now available with the language code ko. Formerly the country code kr was used instead.\nNew The button shortcode can now also be used as a real button inside of HTML forms - although this is a pretty rare use case. The documentation was updated accordingly.\nNew The search now supports the Korean language.\n5.6.0 (2022-11-18) New This release introduces an additional dedicated search page. On this page, displayed search results have more space making it easier scanning thru large number of results.\nTo activate this feature, you need to configure it in your config.toml as a new outputformat SEARCHPAGE for the home page. If you don’t configure it, no dedicated search page will be accessible and the theme works as before.\nYou can access the search page by either clicking on the magnifier glass or pressing enter inside of the search box.\nNew Keyboard handling for the TOC and search was improved.\nPressing CTRL+ALT+t now will not only toggle the TOC overlay but also places the focus to the first heading on opening. Subsequently this makes it possible to easily select headings by using the TAB key.\nThe search received its own brand new keyboard shortcut CTRL+ALT+f. This will focus the cursor inside of the the search box so you can immediately start your search by typing.\nNew You are now able to turn off the generation of generator meta tags in your HTML head to hide the used versions of Hugo and this theme.\nTo configure this in your config.toml make sure to set Hugo’s disableHugoGeneratorInject=true and also [params] disableGeneratorVersion=true, otherwise Hugo will generate a meta tag into your home page automagically.\nNew Creation of your project gets a little bit faster with this release.\nThis addresses increased build time with the 5.x releases. The theme now heavily caches partial results leading to improved performance. To further increase performance, unnecessary parts of the page are now skipped for creation of the print output (eg. menus, navigation bar, etc.).\n5.5.0 (2022-11-06) Change The way images are processed has changed. Now images are lazy loaded by default which speeds up page load on slow networks and/or big pages and also the print preview.\nFor that the JavaScript code to handle the lightbox and image effects on the client side was removed in favour for static generation of those effects on the server.\nIf you have used HTML directly in your Markdown files, this now has the downside that it doesn’t respect the effect query parameter anymore. In this case you have to migrate all your HTML img URLs manually to the respective HTML attributes.\nOld New \u003cimg src=\"pic.png?width=20vw\u0026classes=shadow,border\"\u003e \u003cimg src=\"pic.png\" style=\"width:20vw;\" class=\"shadow border\"\u003e 5.4.0 (2022-11-01) Change With the proper settings in your config.toml your page is now servable from the local file system using file:// URLs.\nPlease note that the searchbox will only work for this if you reconfigure your outputformat for the homepage in your config.toml from JSON to SEARCH. The now deprecated JSON outputformat still works as before, so there is no need to reconfigure your installation if it is only served from http:// or https://.\nChange The button shortcode has a new parameter target to set the destination frame/window for the URL to open. If not given, it defaults to a new window/tab for external URLs or is not set at all for internal URLs. Previously even internal URLs where opened in a new window/tab.\nNew The math shortcode and mermaid shortcode now also support the align parameter if codefence syntax is used.\nNew Support for languages that are written right to left (like Arabic). This is only implemented for the content area but not the navigation sidebar. This feature is not available in Internet Explorer 11.\nNew Translation for Finnish (Suomi).\n5.3.0 (2022-10-07) Change In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed. The functionality of the new implementation does not work with old browsers (Internet Explorer 11).\nNew Image formatting has two new classes to align images to the left or right. Additionally, the already existing inline option is now documented.\nNew Printing for the swagger shortcode was optimized to expand sections that are usually closed in interactive mode. This requires print support to be configured.\n5.2.0 (2022-08-03) Change If you’ve set collapsibleMenu = true in your config.toml, the menu will be expanded if a search term is found in a collapsed submenu. The menu will return to its initial collapse state once the search term does not match any submenus. 5.1.0 (2022-07-15) 0.95.0 This release requires a newer Hugo version.\nChange Because the print preview URLs were non deterministic for normal pages in comparison to page bundles, this is now changed. Each print preview is now accessible by adding a index.print.html to the default URL.\nYou can revert this behavior by overwriting the PRINT output format setting in your config.tomlto:\n[outputFormats] [outputFormats.PRINT] name= \"PRINT\" baseName = \"index\" path = \"_print\" isHTML = true mediaType = 'text/html' permalinkable = false 5.0.0 (2022-07-05) Breaking The theme changed how JavaScript and CSS dependencies are loaded to provide a better performance. In case you’ve added own JavaScript code that depends on the themes jQuery implementation, you have to put it into a separate *.js file (if not already) and add the defer keyword to the script element. Eg.\n\u003cscript defer src=\"myscript.js\"\u003e\u003c/script\u003e Change The way archetypes are used to generate output has changed. The new systems allows you, to redefine existing archetypes or even generate your own ones.\nYour existing markdown files will still work like before and therefore you don’t need to change anything after the upgrade. Nevertheless, it is recommended to adapt your existing markdown files to the new way as follows:\nfor your home page, add the frontmatter parameter archetype = \"home\" and remove the leading heading\nfor all files containing the deprecated frontmatter parameter chapter = true, replace it with archetype = \"chapter\" and remove the leading headings\nChange The frontmatter options pre / post were renamed to menuPre / menuPost. The old options will still be used if the new options aren’t set. Therefore you don’t need to change anything after the upgrade.\nNew Adding new partials heading-pre.html / heading-post.html and according frontmatter options headingPre / headingPost to modify the way your page`s main heading gets styled.\nNew The new shortcode math is available to add beautiful math and chemical formulae. See the documentation for available features. This feature will not work with Internet Explorer 11.\n4.2.0 (2022-06-23) Breaking The second parameter for the include shortcode was switched in meaning and was renamed from showfirstheading to hidefirstheading. If you haven’t used this parameter in your shortcode, the default behavior hasn’t changed and you don’t need to change anything.\nIf you’ve used the second boolean parameter, you have to rename it and invert its value to achieve the same behavior.\nChange Previously, if the tabs shortcode could not find a tab item because, the tabs ended up empty. Now the first tab is selected instead.\nChange The landingPageURL was removed from config.toml. You can safely remove this as well from your configuration as it is not used anymore. The theme will detect the landing page URL automatically.\nNew All shortcodes can now be also called from your partials. Examples for this are added to the documentation of each shortcode.\n4.1.0 (2022-06-12) New While fixing issues with the search functionality for non Latin languages, you can now configure to have multiple languages on a single page. 4.0.0 (2022-06-05) Breaking The custom_css config parameter was removed from the configuration. If used in an existing installation, it can be achieved by overriding the custom-header.html template in a much more generic manner.\nBreaking Because anchor hover color was not configurable without introducing more complexity to the variant stylesheets, we decided to remove --MAIN-ANCHOR-color instead. You don’t need to change anything in your custom color stylesheet as the anchors now get their colors from --MAIN-LINK-color and --MAIN-ANCHOR-HOVER-color respectively.\nNew All shortcodes now support named parameter. The positional parameter are still supported but will not be enhanced with new features, so you don’t need to change anything in your installation.\nThis applies to expand, include, notice and siteparam.\nNew The button shortcode received some love and now has a parameter for the color style similar to other shortcodes.\nNew New colors --PRIMARY-color and --SECONDARY-color were added to provide easier modification of your custom style. Shortcodes with a color style can now have primary or secondary as additional values.\nThese two colors are the default for other, more specific color variables. You don’t need to change anything in your existing custom color stylesheets as those variables get reasonable default values.\nNew Translation for Polish. This language is not supported for search.\nNew The documentation for all shortcodes were revised.\n3.4.0 (2022-04-03) Breaking If you had previously overwritten the custom-footer.html partial to add visual elements below the content of your page, you have to move this content to the new partial content-footer.html. custom-footer.html was never meant to contain HTML other than additional styles and JavaScript.\nNew If you prefer expandable/collapsible menu items, you can now set collapsibleMenu=true in your config.toml. This will add arrows to all menu items that contain sub menus. The menu will expand/collapse without navigation if you click on an arrow.\nNew You can activate print support in your config.toml to add the capability to print whole chapters or even the complete site.\nNew Translation for Traditional Chinese.\n3.3.0 (2022-03-28) New Introduction of new CSS variables to set the font. The theme distinguishes between --MAIN-font for all content text and --CODE-font for inline or block code. There are additional overrides for all headings. See the theme variant generator of the exampleSite for all available variables.\nNew The new shortcode swagger is available to include a UI for REST OpenAPI Specifications. See the documentation for available features. This feature will not work with Internet Explorer 11.\n3.2.0 (2022-03-19) 0.93.0 This release requires a newer Hugo version.\nChange In this release the Mermaid JavaScript library will only be loaded on demand if the page contains a Mermaid shortcode or is using Mermaid codefences. This changes the behavior of disableMermaid config option as follows: If a Mermaid shortcode or codefence is found, the option will be ignored and Mermaid will be loaded regardlessly.\nThe option is still useful in case you are using scripting to set up your graph. In this case no shortcode or codefence is involved and the library is not loaded by default. In this case you can set disableMermaid=false in your frontmatter to force the library to be loaded. See the theme variant generator of the exampleSite for an example.\nNew Additional color variant variable --MERMAID-theme to set the variant’s Mermaid theme. This causes the Mermaid theme to switch with the color variant if it defers from the setting of the formerly selected color variant.\n3.1.0 (2022-03-15) New attachment and notice shortcodes have a new parameter to override the default icon. Allowed values are all Font Awesome 5 Free icons. 3.0.0 (2022-02-22) Breaking We made changes to the menu footer. If you have your menu-footer.html partial overridden, you may have to review the styling (eg. margins/paddings) in your partial. For a reference take a look into the menu-footer.html partial that is coming with the exampleSite.\nThis change was made to allow your own menu footer to be placed right after the so called prefooter that comes with the theme (containing the language switch and Clear history functionality).\nBreaking We have changed the default colors from the original Learn theme (the purple menu header) to the Relearn defaults (the light green menu header) as used in the official documentation.\nThis change will only affect your installation if you’ve not set the themeVariant parameter in your config.toml. If you still want to use the Learn color variant, you have to explicitly set themeVariant=\"learn\" in your config.toml.\nNote, that this will also affect your site if viewed with Internet Explorer 11 but in this case it can not be reconfigured as Internet Explorer does not support CSS variables.\nChange Due to a bug, that we couldn’t fix in a general manner for color variants, we decided to remove --MENU-SEARCH-BOX-ICONS-color and introduced --MENU-SEARCH-color instead. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nChange For consistency reasons, we renamed --MENU-SEARCH-BOX-color to --MENU-SEARCH-BORDER-color. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nNew With this release you are now capable to define your own dark mode variants.\nTo make this possible, we have introduced a lot more color variables you can use in your color variants. Your old variants will still work and don’t need to be changed as appropriate fallback values are used by the theme. Nevertheless, the new colors allow for much more customization.\nTo see what’s now possible, see the new variants relearn-dark and neon that are coming with this release.\nNew To make the creation of new variants easier for you, we’ve added a new interactive theme variant generator. This feature will not work with Internet Explorer 11.\nNew You can now configure multiple color variants in your config.toml. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the menu footer. See the documentation for configuration.\nNote, that the new variant switch will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant switcher will not be displayed with Internet Explorer 11.\n2.9.0 (2021-11-19) Breaking This release removes the themes implementation of ref/relref in favor for Hugos standard implementation. This is because of inconsistencies with the themes implementation. In advantage, your project becomes standard compliant and exchanging this theme in your project to some other theme will be effortless.\nIn a standard compliant form you must not link to the *.md file but to its logical name. You’ll see, referencing other pages becomes much easier. All three types result in the same reference:\nType Non-Standard Standard Branch bundle basics/configuration/_index.md basics/configuration Leaf bundle basics/configuration/index.md basics/configuration Page basics/configuration.md basics/configuration If you’ve linked from a page of one language to a page of another language, conversion is a bit more difficult but Hugo got you covered as well.\nAlso, the old themes implementation allowed refs to non-existing content. This will cause Hugos implementation to show the error below and abort the generation. If your project relies on this old behavior, you can reconfigure the error handling of Hugos implementation.\nIn the best case your usage of the old implementation is already standard compliant and you don’t need to change anything. You’ll notice this very easily once you’ve started hugo server after an upgrade and no errors are written to the console.\nYou may see errors on the console after the update in the form:\nERROR 2021/11/19 22:29:10 [en] REF_NOT_FOUND: Ref \"basics/configuration/_index.md\": \"hugo-theme-relearn\\exampleSite\\content\\_index.en.md:19:22\": page not found In this case, you must apply one of two options:\nCopy the old implementation files theme/hugo-theme-relearn/layouts/shortcode/ref.html and theme/hugo-theme-relearn/layouts/shortcode/relref.html to your own projects layouts/shortcode/ref.html and layouts/shortcode/relref.html respectively. This is not recommended as your project will still rely on non-standard behavior afterwards.\nStart up a text editor with regular expression support for search and replace. Apply the following conversions in the given order on all *.md files. This is the recommended choice.\nType Search Replace by Branch bundle (ref\\s+\"[^\"]*)/_index\\.md\" $1\" Leaf bundle (ref\\s+\"[^\"]*)/index\\.md\" $1\" Page (ref\\s+\"[^\"]*)\\.md\" $1\" 2.8.0 (2021-11-03) Change Although never officially documented, this release removes the font Novacento/Novecento. If you use it in an overwritten CSS please replace it with Work Sans. This change was necessary as Novacento did not provide all Latin special characters and lead to mixed styled character text eg. for Czech.\nNew The theme now supports favicons served from static/images/ named as favicon or logo in SVG, PNG or ICO format out of the box. An overridden partial layouts/partials/favicon.html may not be necessary anymore in most cases.\nNew You can hide the table of contents menu for the whole site by setting the disableToc option in your config.toml. For an example see the example configuration.\n2.7.0 (2021-10-24) New Optional second parameter for notice shortcode to set title in box header. 2.6.0 (2021-10-21) New Your site can now be served from a subfolder if you set baseURL and canonifyURLs=true in your config.toml. See the documentation for a detailed example. 2.5.0 (2021-10-08) Change New colors --CODE-BLOCK-color and --CODE-BLOCK-BG-color were added to provide a fallback for Hugos syntax highlighting in case guessSyntax=true is set. Ideally the colors are set to the same values as the ones from your chosen chroma style. 2.4.0 (2021-10-07) Change Creation of customized stylesheets was simplified down to only contain the CSS variables. Everything else can and should be deleted from your custom stylesheet to assure everything works fine. For the predefined stylesheet variants, this change is already included.\nNew Hidden pages are displayed by default in their according tags page. You can now turn off this behavior by setting disableTagHiddenPages=true in your config.toml.\nNew You can define the expansion state of your menus for the whole site by setting the alwaysopen option in your config.toml. Please see further documentation for possible values and default behavior.\nNew New frontmatter ordersectionsby option to change immediate children sorting in menu and children shortcode. Possible values are title or weight.\nNew Alternate content of a page is now advertised in the HTML meta tags. See Hugo documentation.\n2.3.0 (2021-09-13) 0.81.0 This release requires a newer Hugo version.\nNew Showcase multilanguage features by providing a documentation translation “fer us pirrrates”. There will be no other translations besides the original English one and the Pirates one due to maintenance constraints.\n2.2.0 (2021-09-09) New Hidden pages are displayed by default in the sitemap generated by Hugo and are therefore visible for search engine indexing. You can now turn off this behavior by setting disableSeoHiddenPages=true in your config.toml. 2.1.0 (2021-09-07) 0.69.0 This release requires a newer Hugo version.\nChange In case the site’s structure contains additional *.md files not part of the site (eg files that are meant to be included by site pages - see CHANGELOG.md in the exampleSite), they will now be ignored by the search.\nNew Hidden pages are indexed for the site search by default. You can now turn off this behavior by setting disableSearchHiddenPages=true in your config.toml.\nNew If a search term is found in an expand shortcode, the expand will be opened.\nNew The menu will scroll the active item into view on load.\n2.0.0 (2021-08-28) Change Syntax highlighting was switched to the built in Hugo mechanism. You may need to configure a new stylesheet or decide to roll you own as described on in the Hugo documentation\nChange In the predefined stylesheets there was a typo and --MENU-HOME-LINK-HOVERED-color must be changed to --MENU-HOME-LINK-HOVER-color. You don’t need to change anything in your custom color stylesheet as the old name will be used as a fallback.\nChange --MENU-HOME-LINK-color and --MENU-HOME-LINK-HOVER-color were missing in the documentation. You should add them to your custom stylesheets if you want to override the defaults.\nChange Arrow navigation and children shortcode were ignoring setting for ordersectionsby. This is now changed and may result in different sorting order of your sub pages.\nChange If hidden pages are accessed directly by typing their URL, they will be exposed in the menu.\nChange A page without a title will be treated as hidden=true.\nNew You can define the expansion state of your menus in the frontmatter. Please see further documentation for possible values and default behavior.\nNew New partials for defining pre/post content for menu items and the content. See documentation for further reading.\nNew Shortcode children with new parameter containerstyle.\nNew New shortcode include to include arbitrary file content into a page.\n1.2.0 (2021-07-26) New Shortcode expand with new parameter to open on page load. 1.1.0 (2021-07-02) New Mermaid config options can be set in config.toml. 1.0.0 (2021-07-01) 0.65.0 The version requirement for Hugo is the same as for the Learn theme version 2.5.0 on 2021-07-01.\nNew Initial fork of the Learn theme based on Learn 2.5.0 on 2021-07-01. This introduces no new features besides a global rename to Relearn and a new logo. For the reasons behind forking the Learn theme, see this comment in the Learn issues.\n",
     "description": "",
     "tags": null,
     "title": "What's New",
@@ -125,7 +125,7 @@ var relearn_search_index = [
     "uri": "/basics/installation/index.html"
   },
   {
-    "content": "Global site parameters On top of Hugo global configuration, the Relearn theme lets you define the following parameters in your config.toml (here, values are default).\nNote that some of these parameters are explained in details in other sections of this documentation.\n[params] # This controls whether submenus will be expanded (true), or collapsed (false) in the # menu; if no setting is given, the first menu level is set to false, all others to true; # this can be overridden in the pages frontmatter alwaysopen = true # Prefix URL to edit current page. Will display an \"Edit\" button on top right hand corner of every page. # Useful to give opportunity to people to create merge request for your doc. # See the config.toml file from this documentation site to have an example. editURL = \"\" # Author of the site, will be used in meta information author = \"\" # Description of the site, will be used in meta information description = \"\" # Shows a checkmark for visited pages on the menu showVisitedLinks = false # Disable search function. It will hide search bar disableSearch = false # Disable search in hidden pages, otherwise they will be shown in search box disableSearchHiddenPages = false # Disables hidden pages from showing up in the sitemap and on Google (et all), otherwise they may be indexed by search engines disableSeoHiddenPages = false # Disables hidden pages from showing up on the tags page although the tag term will be displayed even if all pages are hidden disableTagHiddenPages = false # Javascript and CSS cache are automatically busted when new version of site is generated. # Set this to true to disable this behavior (some proxies don't handle well this optimization) disableAssetsBusting = false # Set this to true if you want to disable generation for generator version meta tags of hugo and the theme; # don't forget to also set Hugo's disableHugoGeneratorInject=true, otherwise it will generate a meta tag into your home page disableGeneratorVersion = false # Set this to true to disable copy-to-clipboard button for inline code. disableInlineCopyToClipBoard = false # A title for shortcuts in menu is set by default. Set this to true to disable it. disableShortcutsTitle = false # If set to false, a Home button will appear below the search bar on the menu. # It is redirecting to the landing page of the current language if specified. (Default is \"/\") disableLandingPageButton = true # When using mulitlingual website, disable the switch language button. disableLanguageSwitchingButton = false # Hide breadcrumbs in the header and only show the current page title disableBreadcrumb = true # If set to true, hide table of contents menu in the header of all pages disableToc = false # If set to false, load the MathJax module on every page regardless if a MathJax shortcode is present disableMathJax = false # Specifies the remote location of the MathJax js customMathJaxURL = \"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js\" # Initialization parameter for MathJax, see MathJax documentation mathJaxInitialize = \"{}\" # If set to false, load the Mermaid module on every page regardless if a Mermaid shortcode or Mermaid codefence is present disableMermaid = false # Specifies the remote location of the Mermaid js customMermaidURL = \"https://unpkg.com/mermaid/dist/mermaid.min.js\" # Initialization parameter for Mermaid, see Mermaid documentation mermaidInitialize = \"{ \\\"theme\\\": \\\"default\\\" }\" # If set to false, load the Swagger module on every page regardless if a Swagger shortcode is present disableSwagger = false # Specifies the remote location of the RapiDoc js customSwaggerURL = \"https://unpkg.com/rapidoc/dist/rapidoc-min.js\" # Initialization parameter for Swagger, see RapiDoc documentation swaggerInitialize = \"{ \\\"theme\\\": \\\"light\\\" }\" # Hide Next and Previous page buttons normally displayed full height beside content disableNextPrev = true # Order sections in menu by \"weight\" or \"title\". Default to \"weight\"; # this can be overridden in the pages frontmatter ordersectionsby = \"weight\" # Change default color scheme with a variant one. Eg. can be \"red\", \"blue\", \"green\" or an array like [ \"blue\", \"green\" ]. themeVariant = \"relearn-light\" # Change the title separator. Default to \"::\". titleSeparator = \"-\" # If set to true, the menu in the sidebar will be displayed in a collapsible tree view. Although the functionality works with old browsers (IE11), the display of the expander icons is limited to modern browsers collapsibleMenu = false # If a single page can contain content in multiple languages, add those here additionalContentLanguage = [ \"en\" ] # If set to true, no index.html will be appended to prettyURLs; this will cause pages not # to be servable from the file system disableExplicitIndexURLs = false # For external links you can define how they are opened in your browser; this setting will only be applied to the content area but not the shortcut menu externalLinkTarget = \"_blank\" Serving your page from a subfolder If your site is served from a subfolder, eg. https://example.com/mysite/, you have to set the following lines to your config.toml\nbaseURL = \"https://example.com/mysite/\" canonifyURLs = true relativeURLs = true Without canonifyURLs=true URLs in sublemental pages (like sitemap.xml, rss.xml) will be generated falsly while your HTML files will still work. See https://github.com/gohugoio/hugo/issues/5226.\nServing your page from the filesystem If you want your page served from the filesystem by using URLs starting with file:// you’ll need the following configuration in your config.toml:\nrelativeURLs = true The theme will append an additional index.html to all branch bundle links by default to make the page be servable from the file system. If you don’t care about the file system and only serve your page via a webserver you can also generate the links without this change by adding this to your config.toml\n[params] disableExplicitIndexURLs = true Note If you want to use the search feature from the file system using an older installation of the theme make sure to change your outputformat for the homepage from the now deprecated JSON to SEARCH as seen below.\nActivate search If not already present, add the following lines in the same config.toml file.\n[outputs] home = [\"HTML\", \"RSS\", \"SEARCH\"] This will generate a search index file at the root of your public folder ready to be consumed by the Lunr search library. Note that the SEARCH outputformat was named JSON in previous releases but was implemented differently. Although JSON still works, it is now deprecated.\nActivate dedicated search page You can add a dedicated search page for your page by adding the SEARCHPAGE outputformat to your home page by adding the following lines in your config.toml file.\n[outputs] home = [\"HTML\", \"RSS\", \"SEARCH\", \"SEARCHPAGE\"] You can access this page by either clicking on the magnifier glass or by typing some search term and pressing ENTER inside of the menu’s search box .\nActivate print support You can activate print support to add the capability to print whole chapters or even the complete site. Just add the PRINT output format to your home, section and page in your config.toml as seen below:\n[outputs] home = [\"HTML\", \"RSS\", \"PRINT\", \"SEARCH\"] section = [\"HTML\", \"RSS\", \"PRINT\"] page = [\"HTML\", \"RSS\", \"PRINT\"] This will add a little printer icon in the top bar. It will switch the page to print preview when clicked. You can then send this page to the printer by using your browser’s usual print functionality.\nNote The resulting URL will not be configured ugly in terms of Hugo’s URL handling even if you’ve set uglyURLs=true in your config.toml. This is due to the fact that for one mime type only one suffix can be configured.\nNevertheless, if you’re unhappy with the resulting URLs you can manually redefine outputFormats.PRINT in your own config.toml to your liking.\nMathJax The MathJax configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. See Math for additional documentation.\nExample MathJax is globally disabled. By default it won’t be loaded by any page.\nOn page “Physics” you coded some JavaScript for a dynamic formulae. You can set the MathJax parameters locally to load mathJax on this page.\nYou also can disable MathJax for specific pages while globally enabled.\nMermaid The Mermaid configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. See Mermaid for additional documentation.\nExample Mermaid is globally disabled. By default it won’t be loaded by any page.\nOn page “Architecture” you coded some JavaScript to dynamically generate a class diagram. You can set the Mermaid parameters locally to load mermaid on this page.\nYou also can disable Mermaid for specific pages while globally enabled.\nHome Button Configuration If the disableLandingPageButton option is set to false, a Home button will appear on the left menu. It is an alternative for clicking on the logo. To edit the appearance, you will have to configure two parameters for the defined languages:\n[Languages] [Languages.en] ... landingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Home\" ... [Languages.pir] ... landingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Arrr! Homme\" ... If those params are not configured for a specific language, they will get their default values:\nlandingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Home\" The home button is going to look like this:\n",
+    "content": "Global site parameters On top of Hugo global configuration, the Relearn theme lets you define the following parameters in your config.toml (here, values are default).\nNote that some of these parameters are explained in details in other sections of this documentation.\n[params] # This controls whether submenus will be expanded (true), or collapsed (false) in the # menu; if no setting is given, the first menu level is set to false, all others to true; # this can be overridden in the pages frontmatter alwaysopen = true # Prefix URL to edit current page. Will display an \"Edit\" button on top right hand corner of every page. # Useful to give opportunity to people to create merge request for your doc. # See the config.toml file from this documentation site to have an example. editURL = \"\" # Author of the site, will be used in meta information author = \"\" # Description of the site, will be used in meta information description = \"\" # Shows a checkmark for visited pages on the menu showVisitedLinks = false # Disable search function. It will hide search bar disableSearch = false # Disable search in hidden pages, otherwise they will be shown in search box disableSearchHiddenPages = false # Disables hidden pages from showing up in the sitemap and on Google (et all), otherwise they may be indexed by search engines disableSeoHiddenPages = false # Disables hidden pages from showing up on the tags page although the tag term will be displayed even if all pages are hidden disableTagHiddenPages = false # Javascript and CSS cache are automatically busted when new version of site is generated. # Set this to true to disable this behavior (some proxies don't handle well this optimization) disableAssetsBusting = false # Set this to true if you want to disable generation for generator version meta tags of hugo and the theme; # don't forget to also set Hugo's disableHugoGeneratorInject=true, otherwise it will generate a meta tag into your home page disableGeneratorVersion = false # Set this to true to disable copy-to-clipboard button for inline code. disableInlineCopyToClipBoard = false # A title for shortcuts in menu is set by default. Set this to true to disable it. disableShortcutsTitle = false # If set to false, a Home button will appear below the search bar on the menu. # It is redirecting to the landing page of the current language if specified. (Default is \"/\") disableLandingPageButton = true # When using mulitlingual website, disable the switch language button. disableLanguageSwitchingButton = false # Hide breadcrumbs in the header and only show the current page title disableBreadcrumb = true # If set to true, hide table of contents menu in the header of all pages disableToc = false # If set to false, load the MathJax module on every page regardless if a MathJax shortcode is present disableMathJax = false # Specifies the remote location of the MathJax js customMathJaxURL = \"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js\" # Initialization parameter for MathJax, see MathJax documentation mathJaxInitialize = \"{}\" # If set to false, load the Mermaid module on every page regardless if a Mermaid shortcode or Mermaid codefence is present disableMermaid = false # Specifies the remote location of the Mermaid js customMermaidURL = \"https://unpkg.com/mermaid/dist/mermaid.min.js\" # Initialization parameter for Mermaid, see Mermaid documentation mermaidInitialize = \"{ \\\"theme\\\": \\\"default\\\" }\" # If set to false, load the Swagger module on every page regardless if a Swagger shortcode is present disableSwagger = false # Specifies the remote location of the RapiDoc js customSwaggerURL = \"https://unpkg.com/rapidoc/dist/rapidoc-min.js\" # Initialization parameter for Swagger, see RapiDoc documentation swaggerInitialize = \"{ \\\"theme\\\": \\\"light\\\" }\" # Hide Next and Previous page buttons normally displayed full height beside content disableNextPrev = true # Order sections in menu by \"weight\" or \"title\". Default to \"weight\"; # this can be overridden in the pages frontmatter ordersectionsby = \"weight\" # Change default color scheme with a variant one. Eg. can be \"auto\", \"red\", \"blue\", \"green\" or an array like [ \"blue\", \"green\" ]. themeVariant = \"auto\" # Change the title separator. Default to \"::\". titleSeparator = \"-\" # If set to true, the menu in the sidebar will be displayed in a collapsible tree view. Although the functionality works with old browsers (IE11), the display of the expander icons is limited to modern browsers collapsibleMenu = false # If a single page can contain content in multiple languages, add those here additionalContentLanguage = [ \"en\" ] # If set to true, no index.html will be appended to prettyURLs; this will cause pages not # to be servable from the file system disableExplicitIndexURLs = false # For external links you can define how they are opened in your browser; this setting will only be applied to the content area but not the shortcut menu externalLinkTarget = \"_blank\" Serving your page from a subfolder If your site is served from a subfolder, eg. https://example.com/mysite/, you have to set the following lines to your config.toml\nbaseURL = \"https://example.com/mysite/\" canonifyURLs = true relativeURLs = true Without canonifyURLs=true URLs in sublemental pages (like sitemap.xml, rss.xml) will be generated falsly while your HTML files will still work. See https://github.com/gohugoio/hugo/issues/5226.\nServing your page from the filesystem If you want your page served from the filesystem by using URLs starting with file:// you’ll need the following configuration in your config.toml:\nrelativeURLs = true The theme will append an additional index.html to all branch bundle links by default to make the page be servable from the file system. If you don’t care about the file system and only serve your page via a webserver you can also generate the links without this change by adding this to your config.toml\n[params] disableExplicitIndexURLs = true Note If you want to use the search feature from the file system using an older installation of the theme make sure to change your outputformat for the homepage from the now deprecated JSON to SEARCH as seen below.\nActivate search If not already present, add the following lines in the same config.toml file.\n[outputs] home = [\"HTML\", \"RSS\", \"SEARCH\"] This will generate a search index file at the root of your public folder ready to be consumed by the Lunr search library. Note that the SEARCH outputformat was named JSON in previous releases but was implemented differently. Although JSON still works, it is now deprecated.\nActivate dedicated search page You can add a dedicated search page for your page by adding the SEARCHPAGE outputformat to your home page by adding the following lines in your config.toml file.\n[outputs] home = [\"HTML\", \"RSS\", \"SEARCH\", \"SEARCHPAGE\"] You can access this page by either clicking on the magnifier glass or by typing some search term and pressing ENTER inside of the menu’s search box .\nActivate print support You can activate print support to add the capability to print whole chapters or even the complete site. Just add the PRINT output format to your home, section and page in your config.toml as seen below:\n[outputs] home = [\"HTML\", \"RSS\", \"PRINT\", \"SEARCH\"] section = [\"HTML\", \"RSS\", \"PRINT\"] page = [\"HTML\", \"RSS\", \"PRINT\"] This will add a little printer icon in the top bar. It will switch the page to print preview when clicked. You can then send this page to the printer by using your browser’s usual print functionality.\nNote The resulting URL will not be configured ugly in terms of Hugo’s URL handling even if you’ve set uglyURLs=true in your config.toml. This is due to the fact that for one mime type only one suffix can be configured.\nNevertheless, if you’re unhappy with the resulting URLs you can manually redefine outputFormats.PRINT in your own config.toml to your liking.\nMathJax The MathJax configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. See Math for additional documentation.\nExample MathJax is globally disabled. By default it won’t be loaded by any page.\nOn page “Physics” you coded some JavaScript for a dynamic formulae. You can set the MathJax parameters locally to load mathJax on this page.\nYou also can disable MathJax for specific pages while globally enabled.\nMermaid The Mermaid configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. See Mermaid for additional documentation.\nExample Mermaid is globally disabled. By default it won’t be loaded by any page.\nOn page “Architecture” you coded some JavaScript to dynamically generate a class diagram. You can set the Mermaid parameters locally to load mermaid on this page.\nYou also can disable Mermaid for specific pages while globally enabled.\nHome Button Configuration If the disableLandingPageButton option is set to false, a Home button will appear on the left menu. It is an alternative for clicking on the logo. To edit the appearance, you will have to configure two parameters for the defined languages:\n[Languages] [Languages.en] ... landingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Home\" ... [Languages.pir] ... landingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Arrr! Homme\" ... If those params are not configured for a specific language, they will get their default values:\nlandingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Home\" The home button is going to look like this:\n",
     "description": "",
     "tags": null,
     "title": "Configuration",
@@ -142,7 +142,7 @@ var relearn_search_index = [
     "uri": "/shortcodes/children/children-2/index.html"
   },
   {
-    "content": "The Relearn theme has been built to be as configurable as possible by defining multiple partials\nIn themes/hugo-theme-relearn/layouts/partials/, you will find all the partials defined for this theme. If you need to overwrite something, don’t change the code directly. Instead follow this page. You’d create a new partial in the layouts/partials folder of your local project. This partial will have the priority.\nThis theme defines the following partials :\nheader.html: the header of the page. See output-formats footer.html: the footer of the page. See output-formats body.html: the body of the page. The body may contain of one or many articles. See output-formats article.html: the output for a single article, can contain elements around your content. See output-formats menu.html: left menu. Not meant to be overwritten search.html: search box. Not meant to be overwritten custom-header.html: custom headers in page. Meant to be overwritten when adding CSS imports. Don’t forget to include style HTML tag directive in your file. custom-footer.html: custom footer in page. Meant to be overwritten when adding JavaScript. Don’t forget to include javascript HTML tag directive in your file. favicon.html: the favicon heading-pre.html: side-wide configuration to prepend to pages title headings. If you override this, it is your responsibility to take the page’s headingPre setting into account. heading-post.html: side-wide configuration to append to pages title headings. If you override this, it is your responsibility to take the page’s headingPost setting into account. logo.html: the logo, on top left hand corner meta.html: HTML meta tags, if you want to change default behavior menu-pre.html: side-wide configuration to prepend to menu items. If you override this, it is your responsibility to take the page’s menuPre setting into account. menu-post.html: side-wide configuration to append to menu items. If you override this, it is your responsibility to take the page’s menuPost setting into account. menu-footer.html: footer of the the left menu toc.html: table of contents content.html: the content page itself. This can be overridden if you want to display page’s meta data above or below the content. content-footer: footer below the content, has a default implementation but you can overwrite it if you don’t like it. Change the logo Create a new file in layouts/partials/ named logo.html. Then write any HTML you want. You could use an img HTML tag and reference an image created under the static folder, or you could paste a SVG definition!\nNote The size of the logo will adapt automatically\nChange the favicon If your favicon is a SVG, PNG or ICO, just drop off your image in your local static/images/ folder and name it favicon.svg, favicon.png or favicon.ico respectively.\nIf no favicon file is found, the theme will lookup the alternative filename logo in the same location and will repeat the search for the list of supported file types.\nIf you need to change this default behavior, create a new file in layouts/partials/ named favicon.html. Then write something like this:\n\u003clink rel=\"icon\" href=\"/images/favicon.bmp\" type=\"image/bmp\"\u003e Change the colors The Relearn theme lets you choose between some predefined color variants in light or dark mode, but feel free to add one yourself!\nYou can preview the shipped variants by changing them in the variant selector at the bottom of the menu.\nSingle variant Set the themeVariant value with the name of your theme file. That’s it!\n[params] themeVariant = \"relearn-light\" In the above example your theme file has to be named theme-relearn-light.css\nMultiple variants You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the menu footer.\n[params] # Change default color scheme with a variant one. themeVariant = [ \"relearn-light\", \"relearn-dark\" ] Tip If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation according to Hugo’s documentation, and @import this stylesheet in your color variant stylesheet. For an example, take a look into theme-relearn-light.css and config.toml of the exampleSite.\nRoll your own If you are not happy with the shipped variants you can either copy and rename one of the shipped files from themes/hugo-theme-relearn/static/css to static/css, edit them afterwards to your liking in a text editor and configure the themeVariant parameter in your config.toml or just use the interactive variant generator.\nOutput formats Certain parts of the theme can be changed for support of your own output formats. Eg. if you define a new output format PLAINTEXT in your config.toml, you can add a file layouts/partials/header.plaintext.html to change the way, the page header should look like for that output format.\n",
+    "content": "The Relearn theme has been built to be as configurable as possible by defining multiple partials\nIn themes/hugo-theme-relearn/layouts/partials/, you will find all the partials defined for this theme. If you need to overwrite something, don’t change the code directly. Instead follow this page. You’d create a new partial in the layouts/partials folder of your local project. This partial will have the priority.\nThis theme defines the following partials :\nheader.html: the header of the page. See output-formats footer.html: the footer of the page. See output-formats body.html: the body of the page. The body may contain of one or many articles. See output-formats article.html: the output for a single article, can contain elements around your content. See output-formats menu.html: left menu. Not meant to be overwritten search.html: search box. Not meant to be overwritten custom-header.html: custom headers in page. Meant to be overwritten when adding CSS imports. Don’t forget to include style HTML tag directive in your file. custom-footer.html: custom footer in page. Meant to be overwritten when adding JavaScript. Don’t forget to include javascript HTML tag directive in your file. favicon.html: the favicon heading-pre.html: side-wide configuration to prepend to pages title headings. If you override this, it is your responsibility to take the page’s headingPre setting into account. heading-post.html: side-wide configuration to append to pages title headings. If you override this, it is your responsibility to take the page’s headingPost setting into account. logo.html: the logo, on top left hand corner meta.html: HTML meta tags, if you want to change default behavior menu-pre.html: side-wide configuration to prepend to menu items. If you override this, it is your responsibility to take the page’s menuPre setting into account. menu-post.html: side-wide configuration to append to menu items. If you override this, it is your responsibility to take the page’s menuPost setting into account. menu-footer.html: footer of the the left menu toc.html: table of contents content.html: the content page itself. This can be overridden if you want to display page’s meta data above or below the content. content-footer: footer below the content, has a default implementation but you can overwrite it if you don’t like it. Change the logo Create a new file in layouts/partials/ named logo.html. Then write any HTML you want. You could use an img HTML tag and reference an image created under the static folder, or you could paste a SVG definition!\nNote The size of the logo will adapt automatically\nChange the favicon If your favicon is a SVG, PNG or ICO, just drop off your image in your local static/images/ folder and name it favicon.svg, favicon.png or favicon.ico respectively.\nIf no favicon file is found, the theme will lookup the alternative filename logo in the same location and will repeat the search for the list of supported file types.\nIf you need to change this default behavior, create a new file in layouts/partials/ named favicon.html. Then write something like this:\n\u003clink rel=\"icon\" href=\"/images/favicon.bmp\" type=\"image/bmp\"\u003e Change the colors The Relearn theme lets you choose between some predefined color variants in light or dark mode, but feel free to add one yourself!\nYou can preview the shipped variants by changing them in the variant selector at the bottom of the menu.\nSingle variant Set the themeVariant value with the name of your theme file. That’s it!\n[params] themeVariant = \"relearn-light\" In the above example your theme file has to be named theme-relearn-light.css\nMultiple variants You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the menu footer.\n[params] # Change default color scheme with a variant one. themeVariant = [ \"relearn-light\", \"relearn-dark\" ] Tip If you want to switch the syntax highlighting theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation according to Hugo’s documentation, and @import this stylesheet in your color variant stylesheet. For an example, take a look into theme-relearn-light.css and config.toml of the exampleSite.\nAdjust to OS Settings You can also cause the site to adjust to your OS settings for light/dark mode. Just set the themeVariant to auto. That’s it.\nIf you’ve set multiple variants, you can drop auto at any position, but usually it makes sense to set it in the first position and make it the default.\n[params] themeVariant = [ \"auto\", \"red\" ] If you don’t configure anything else, the theme will use relearn-light for light mode and relearn-dark for dark mode.\nIf you don’t like that, you can set themeVariantAuto. The first element is the variant for light mode, the second for dark mode\n[params] themeVariantAuto = [ \"learn\", \"neon\" ] Roll your own If you are not happy with the shipped variants you can either copy and rename one of the shipped files from themes/hugo-theme-relearn/static/css to static/css, edit them afterwards to your liking in a text editor and configure the themeVariant parameter in your config.toml or just use the interactive variant generator.\nOutput formats Certain parts of the theme can be changed for support of your own output formats. Eg. if you define a new output format PLAINTEXT in your config.toml, you can add a file layouts/partials/header.plaintext.html to change the way, the page header should look like for that output format.\n",
     "description": "",
     "tags": null,
     "title": "Customization",
diff --git a/more/credits/index.html b/more/credits/index.html
index ef18cb9cbb..b51d9f559e 100644
--- a/more/credits/index.html
+++ b/more/credits/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="../../more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Credits :: Hugo Relearn Theme">
     <link href="../../more/credits/index.print.html" rel="alternate" type="text/html" title="Credits :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -219,12 +219,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -304,7 +304,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -340,12 +341,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/more/credits/index.print.html b/more/credits/index.print.html
index 95a5c3a543..601561a77a 100644
--- a/more/credits/index.print.html
+++ b/more/credits/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/more/credits/index.html" rel="canonical" type="text/html" title="Credits :: Hugo Relearn Theme">
     <link href="../../more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Credits :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -132,8 +132,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/more/showcase/index.html b/more/showcase/index.html
index 0c36fbd076..cffa16d062 100644
--- a/more/showcase/index.html
+++ b/more/showcase/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="../../more/showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Hugo Relearn Theme">
     <link href="../../more/showcase/index.print.html" rel="alternate" type="text/html" title="Showcase :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -105,28 +105,28 @@
 <h2 id="gobolinux-wikihttpswikigobolinuxorg-by-neonsysorg"><a href="https://wiki.gobolinux.org/" target="_blank">GoboLinux Wiki</a> by NEONsys.org</h2>
 <p>
 		
-<a href="#image-bb0ef875c845f8cf599940d9358d128e" class="lightbox-link">
+<a href="#image-5ae217c549a43466a806f72da2716803" class="lightbox-link">
 <img src="../../more/showcase/gobolinux.png?width=60pc&amp;classes=shadow" alt="GoboLinux image" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-bb0ef875c845f8cf599940d9358d128e">
+<a href="javascript:history.back();" class="lightbox" id="image-5ae217c549a43466a806f72da2716803">
 <img src="../../more/showcase/gobolinux.png?width=60pc&amp;classes=shadow" alt="GoboLinux image" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="bitshttpsbits-trainingdetraining-by-dr-lutz-gollan"><a href="https://bits-training.de/training/" target="_blank">BITS</a> by Dr. Lutz Gollan</h2>
 <p>
 		
-<a href="#image-90d074222e08cab6814637b236cbf3df" class="lightbox-link">
+<a href="#image-0fd6b17b372fd3b063aa536df7cfa32f" class="lightbox-link">
 <img src="../../more/showcase/bits-train.png?width=60pc&amp;classes=shadow" alt="BITS image" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-90d074222e08cab6814637b236cbf3df">
+<a href="javascript:history.back();" class="lightbox" id="image-0fd6b17b372fd3b063aa536df7cfa32f">
 <img src="../../more/showcase/bits-train.png?width=60pc&amp;classes=shadow" alt="BITS image" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="pamasol-electricshttpspamasolgithubiode-by-pamasol--swiss-aerosol-solutions"><a href="https://pamasol.github.io/de/" target="_blank">Pamasol Electrics</a> by Pamasol – Swiss Aerosol Solutions</h2>
 <p>
 		
-<a href="#image-df184fcac5f09700dc86fcd2cb53acaa" class="lightbox-link">
+<a href="#image-2b9d877283f03d38c33d79346b4f4dd4" class="lightbox-link">
 <img src="../../more/showcase/pamasol-electrics-portal.png?width=60pc&amp;classes=shadow" alt="Pamasol Electrics" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-df184fcac5f09700dc86fcd2cb53acaa">
+<a href="javascript:history.back();" class="lightbox" id="image-2b9d877283f03d38c33d79346b4f4dd4">
 <img src="../../more/showcase/pamasol-electrics-portal.png?width=60pc&amp;classes=shadow" alt="Pamasol Electrics" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -208,12 +208,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -293,7 +293,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -329,12 +330,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/more/showcase/index.print.html b/more/showcase/index.print.html
index 37e33a0aae..3aaf4baa97 100644
--- a/more/showcase/index.print.html
+++ b/more/showcase/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/more/showcase/index.html" rel="canonical" type="text/html" title="Showcase :: Hugo Relearn Theme">
     <link href="../../more/showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -78,28 +78,28 @@
 <h2 id="gobolinux-wikihttpswikigobolinuxorg-by-neonsysorg"><a href="https://wiki.gobolinux.org/" target="_blank">GoboLinux Wiki</a> by NEONsys.org</h2>
 <p>
 		
-<a href="#image-bb0ef875c845f8cf599940d9358d128e" class="lightbox-link">
+<a href="#image-5ae217c549a43466a806f72da2716803" class="lightbox-link">
 <img src="../../more/showcase/gobolinux.png?width=60pc&amp;classes=shadow" alt="GoboLinux image" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-bb0ef875c845f8cf599940d9358d128e">
+<a href="javascript:history.back();" class="lightbox" id="image-5ae217c549a43466a806f72da2716803">
 <img src="../../more/showcase/gobolinux.png?width=60pc&amp;classes=shadow" alt="GoboLinux image" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="bitshttpsbits-trainingdetraining-by-dr-lutz-gollan"><a href="https://bits-training.de/training/" target="_blank">BITS</a> by Dr. Lutz Gollan</h2>
 <p>
 		
-<a href="#image-90d074222e08cab6814637b236cbf3df" class="lightbox-link">
+<a href="#image-0fd6b17b372fd3b063aa536df7cfa32f" class="lightbox-link">
 <img src="../../more/showcase/bits-train.png?width=60pc&amp;classes=shadow" alt="BITS image" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-90d074222e08cab6814637b236cbf3df">
+<a href="javascript:history.back();" class="lightbox" id="image-0fd6b17b372fd3b063aa536df7cfa32f">
 <img src="../../more/showcase/bits-train.png?width=60pc&amp;classes=shadow" alt="BITS image" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="pamasol-electricshttpspamasolgithubiode-by-pamasol--swiss-aerosol-solutions"><a href="https://pamasol.github.io/de/" target="_blank">Pamasol Electrics</a> by Pamasol – Swiss Aerosol Solutions</h2>
 <p>
 		
-<a href="#image-df184fcac5f09700dc86fcd2cb53acaa" class="lightbox-link">
+<a href="#image-2b9d877283f03d38c33d79346b4f4dd4" class="lightbox-link">
 <img src="../../more/showcase/pamasol-electrics-portal.png?width=60pc&amp;classes=shadow" alt="Pamasol Electrics" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-df184fcac5f09700dc86fcd2cb53acaa">
+<a href="javascript:history.back();" class="lightbox" id="image-2b9d877283f03d38c33d79346b4f4dd4">
 <img src="../../more/showcase/pamasol-electrics-portal.png?width=60pc&amp;classes=shadow" alt="Pamasol Electrics" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -109,8 +109,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/pir/404.html b/pir/404.html
index 11a6202b71..cc0b42bc2b 100644
--- a/pir/404.html
+++ b/pir/404.html
@@ -8,20 +8,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>404 Page not found :: Cap&#39;n Hugo Relearrrn Theme</title>
-    <link href="../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../js/url.js?1675526022"></script>
-    <script src="../js/variant.js?1675526022"></script>
+    <link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../js/url.js?1675546461"></script>
+    <script src="../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -37,7 +37,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       p, li, ul {
diff --git a/pir/basics/configuration/index.html b/pir/basics/configuration/index.html
index 2193c9ea5a..a736a6b16f 100644
--- a/pir/basics/configuration/index.html
+++ b/pir/basics/configuration/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/configuration/index.print.html" rel="alternate" type="text/html" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,8 +167,8 @@
 </span></span><span class="line"><span class="cl">  <span class="c"># Order sections 'n menu by &#34;weight&#34; or &#34;title&#34;. Default t' &#34;weight&#34;;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># this can be overridden 'n th' planks frontmatter</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s2">&#34;weight&#34;</span>
-</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme wit' a variant one. Eg. can be &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
-</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme wit' a variant one. Eg. can be &#34;auto&#34;, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
+</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># Change th' title separator. Default t' &#34;::&#34;.</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">titleSeparator</span> <span class="p">=</span> <span class="s2">&#34;-&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># If set t' true, th' menu 'n th' sidebar will be displayed 'n a collaps'ble tree view. Although th' functionality works wit' old browsers (IE11), th' display o' th' expander ay'cons be limited t' modern browsers</span>
@@ -211,10 +211,10 @@
 </span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
 <p>
 		
-<a href="#image-959db1604cc422b349fa81e51a1772af" class="lightbox-link">
+<a href="#image-4e57128ee71e758ab88c512122704b84" class="lightbox-link">
 <img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-959db1604cc422b349fa81e51a1772af">
+<a href="javascript:history.back();" class="lightbox" id="image-4e57128ee71e758ab88c512122704b84">
 <img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="activate-print-support">Activate print support</h2>
@@ -263,10 +263,10 @@ default values:</p>
 </span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
 <p>
 		
-<a href="#image-415aabe5b592ef4b2587d4587e7ce778" class="lightbox-link">
+<a href="#image-da7a7c854b10bd34fefa713da0e432d1" class="lightbox-link">
 <img src="../../../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-415aabe5b592ef4b2587d4587e7ce778">
+<a href="javascript:history.back();" class="lightbox" id="image-da7a7c854b10bd34fefa713da0e432d1">
 <img src="../../../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -349,12 +349,12 @@ default values:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -434,7 +434,8 @@ default values:</p>
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -470,12 +471,12 @@ default values:</p>
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/basics/configuration/index.print.html b/pir/basics/configuration/index.print.html
index b5c26ec593..e6544a06de 100644
--- a/pir/basics/configuration/index.print.html
+++ b/pir/basics/configuration/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/configuration/index.html" rel="canonical" type="text/html" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/configuration/index.xml" rel="alternate" type="application/rss+xml" title="Configurrrat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -152,8 +152,8 @@
 </span></span><span class="line"><span class="cl">  <span class="c"># Order sections 'n menu by &#34;weight&#34; or &#34;title&#34;. Default t' &#34;weight&#34;;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># this can be overridden 'n th' planks frontmatter</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s2">&#34;weight&#34;</span>
-</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme wit' a variant one. Eg. can be &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
-</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme wit' a variant one. Eg. can be &#34;auto&#34;, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
+</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># Change th' title separator. Default t' &#34;::&#34;.</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">titleSeparator</span> <span class="p">=</span> <span class="s2">&#34;-&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># If set t' true, th' menu 'n th' sidebar will be displayed 'n a collaps'ble tree view. Although th' functionality works wit' old browsers (IE11), th' display o' th' expander ay'cons be limited t' modern browsers</span>
@@ -196,10 +196,10 @@
 </span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
 <p>
 		
-<a href="#image-959db1604cc422b349fa81e51a1772af" class="lightbox-link">
+<a href="#image-4e57128ee71e758ab88c512122704b84" class="lightbox-link">
 <img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-959db1604cc422b349fa81e51a1772af">
+<a href="javascript:history.back();" class="lightbox" id="image-4e57128ee71e758ab88c512122704b84">
 <img src="../../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="activate-print-support">Activate print support</h2>
@@ -248,10 +248,10 @@ default values:</p>
 </span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
 <p>
 		
-<a href="#image-415aabe5b592ef4b2587d4587e7ce778" class="lightbox-link">
+<a href="#image-da7a7c854b10bd34fefa713da0e432d1" class="lightbox-link">
 <img src="../../../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-415aabe5b592ef4b2587d4587e7ce778">
+<a href="javascript:history.back();" class="lightbox" id="image-da7a7c854b10bd34fefa713da0e432d1">
 <img src="../../../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -262,8 +262,8 @@ default values:</p>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.html b/pir/basics/customization/index.html
index acbb2a2737..15e41f03a9 100644
--- a/pir/basics/customization/index.html
+++ b/pir/basics/customization/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/customization/index.print.html" rel="alternate" type="text/html" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -158,7 +158,16 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
 <p>If ye want t' switch th' rules highlight'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">accord'n t' Hugo&rsquo;s documentat'n</a>, an' <code>@import</code> this stylesheet 'n yer color variant stylesheet. For an example, take a look into <code>theme-relearn-light.css</code> an' <code>config.toml</code> o' th' exampleSite.</p>
   </div>
 </div>
-<h3 id="roll-your-own">Roll yer own</h3>
+<h3 id="adjust-to-os-settings">Adjust t' OS Sett'ns</h3>
+<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code>. That&rsquo;s it.</p>
+<p>If you&rsquo;ve set multiple variants, ye can drop <code>auto</code> at any posit'n, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.</p>
+<div class="highlight"><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="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><p>If ye don&rsquo;t configure anyth'n else, th' theme will use <code>relearn-light</code> fer light mode an' <code>relearn-dark</code> fer dark mode.</p>
+<p>If ye don&rsquo;t like that, ye can set <code>themeVariantAuto</code>. Th' first element be th' variant fer light mode, th' second fer dark mode</p>
+<div class="highlight"><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="s2">&#34;learn&#34;</span><span class="p">,</span> <span class="s2">&#34;neon&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><h3 id="roll-your-own">Roll yer own</h3>
 <p>If ye be not happy wit' th' shipped variants ye can either copy an' rename one o' th' shipped files from <code>themes/hugo-theme-relearn/static/css</code> t' <code>static/css</code>, edit them afterwards t' yer lik'n 'n a text editor an' configure th' <code>themeVariant</code> parameter 'n yer <code>config.toml</code> or just use th' <a href="../../../basics/generator/">interactive variant generator</a>.</p>
 <h3 id="output-formats">Output formats</h3>
 <p>Certain parts o' th' theme can be changed fer support o' yer own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if ye define a new output format <code>PLAINTEXT</code> 'n yer <code>config.toml</code>, ye can add a file <code>layouts/partials/header.plaintext.html</code> t' change th' way, th' plank header should look like fer that output format.</p>
@@ -242,12 +251,12 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -327,7 +336,8 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -363,12 +373,12 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.print.html b/pir/basics/customization/index.print.html
index fcf05d8669..19339ca201 100644
--- a/pir/basics/customization/index.print.html
+++ b/pir/basics/customization/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/customization/index.html" rel="canonical" type="text/html" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/customization/index.xml" rel="alternate" type="application/rss+xml" title="Customizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -143,7 +143,16 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
 <p>If ye want t' switch th' rules highlight'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">accord'n t' Hugo&rsquo;s documentat'n</a>, an' <code>@import</code> this stylesheet 'n yer color variant stylesheet. For an example, take a look into <code>theme-relearn-light.css</code> an' <code>config.toml</code> o' th' exampleSite.</p>
   </div>
 </div>
-<h3 id="roll-your-own">Roll yer own</h3>
+<h3 id="adjust-to-os-settings">Adjust t' OS Sett'ns</h3>
+<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code>. That&rsquo;s it.</p>
+<p>If you&rsquo;ve set multiple variants, ye can drop <code>auto</code> at any posit'n, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.</p>
+<div class="highlight"><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="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><p>If ye don&rsquo;t configure anyth'n else, th' theme will use <code>relearn-light</code> fer light mode an' <code>relearn-dark</code> fer dark mode.</p>
+<p>If ye don&rsquo;t like that, ye can set <code>themeVariantAuto</code>. Th' first element be th' variant fer light mode, th' second fer dark mode</p>
+<div class="highlight"><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="s2">&#34;learn&#34;</span><span class="p">,</span> <span class="s2">&#34;neon&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><h3 id="roll-your-own">Roll yer own</h3>
 <p>If ye be not happy wit' th' shipped variants ye can either copy an' rename one o' th' shipped files from <code>themes/hugo-theme-relearn/static/css</code> t' <code>static/css</code>, edit them afterwards t' yer lik'n 'n a text editor an' configure th' <code>themeVariant</code> parameter 'n yer <code>config.toml</code> or just use th' <a href="../../../basics/generator/">interactive variant generator</a>.</p>
 <h3 id="output-formats">Output formats</h3>
 <p>Certain parts o' th' theme can be changed fer support o' yer own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if ye define a new output format <code>PLAINTEXT</code> 'n yer <code>config.toml</code>, ye can add a file <code>layouts/partials/header.plaintext.html</code> t' change th' way, th' plank header should look like fer that output format.</p>
@@ -155,8 +164,8 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/basics/generator/index.html b/pir/basics/generator/index.html
index 4ddb4b48d7..5c5e9f863d 100644
--- a/pir/basics/generator/index.html
+++ b/pir/basics/generator/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/generator/index.print.html" rel="alternate" type="text/html" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -227,12 +227,12 @@ window.variants && variants.generator( '#vargenerator' );
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -312,7 +312,8 @@ window.variants && variants.generator( '#vargenerator' );
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -348,12 +349,12 @@ window.variants && variants.generator( '#vargenerator' );
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/basics/generator/index.print.html b/pir/basics/generator/index.print.html
index fc480cb8f9..d662f30078 100644
--- a/pir/basics/generator/index.print.html
+++ b/pir/basics/generator/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel="canonical" type="text/html" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/generator/index.xml" rel="alternate" type="application/rss+xml" title="Stylesheet generrrat&#39;r :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -140,8 +140,8 @@ window.variants && variants.generator( '#vargenerator' );
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.html b/pir/basics/history/index.html
index 98bef1e6e6..38867d9d45 100644
--- a/pir/basics/history/index.html
+++ b/pir/basics/history/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/history/index.xml" rel="alternate" type="application/rss+xml" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/history/index.print.html" rel="alternate" type="text/html" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -1090,12 +1090,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -1175,7 +1175,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -1211,12 +1212,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.print.html b/pir/basics/history/index.print.html
index 4a94965c97..f5df1d238a 100644
--- a/pir/basics/history/index.print.html
+++ b/pir/basics/history/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/history/index.html" rel="canonical" type="text/html" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/history/index.xml" rel="alternate" type="application/rss+xml" title="Historrry :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -1003,8 +1003,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/basics/index.html b/pir/basics/index.html
index 7a648c95a5..003aabb67c 100644
--- a/pir/basics/index.html
+++ b/pir/basics/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/basics/index.print.html" rel="alternate" type="text/html" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -180,12 +180,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../js/search.js?1675526023" defer></script>
+        <script src="../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -265,7 +265,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -301,12 +302,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526023"></script>
+          <script async src="../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../js/theme.js?1675526023" defer></script>
+    <script src="../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/basics/index.print.html b/pir/basics/index.print.html
index d3168d1a8c..6fc1cf3fdb 100644
--- a/pir/basics/index.print.html
+++ b/pir/basics/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/index.html" rel="canonical" type="text/html" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/basics/index.xml" rel="alternate" type="application/rss+xml" title="Basics :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../js/url.js?1675526024"></script>
-    <script src="../../js/variant.js?1675526024"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../js/url.js?1675546464"></script>
+    <script src="../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -119,6 +119,11 @@
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;{{&#34;</span><span class="na">js</span><span class="err">/</span><span class="na">jquery</span><span class="err">.</span><span class="na">min</span><span class="err">.</span><span class="na">js</span><span class="err">&#34;|</span> <span class="na">relURL</span><span class="err">}}{{</span> <span class="na">if</span> <span class="err">$</span><span class="na">assetBust'n</span> <span class="err">}}?{{</span> <span class="na">now</span><span class="err">.</span><span class="na">Unix</span> <span class="err">}}{{</span> <span class="na">end</span> <span class="err">}}&#34;</span> <span class="na">defer</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </span></span></code></pre></div></li>
 <li>
+<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Th' theme be now cap'ble t' visually <a href="../../basics/customization/#adjust-to-os-settings">adapt t' yer OS&rsquo;s light/dark mode sett'n</a>.</p>
+<p>This be also th' new default sett'n if ye haven&rsquo;t configured <code>themeVariant</code> 'n yer <code>config.toml</code>.</p>
+<p>Additionally ye be able t' configure th' variants t' be taken fer light/dark mode wit' th' new <code>themeVariantAuto</code> parameter.</p>
+</li>
+<li>
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' <a href="../../shortcodes/expand/"><code>expand</code> shortcode</a> was changed. While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.</p>
 </li>
 <li>
@@ -670,10 +675,10 @@
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
 <p>
-<a href="#image-bf166618aa3c80f80c059b7861fef88e" class="lightbox-link">
+<a href="#image-32bcf2118c48ba88b6a9eebc5c6dcc5d" class="lightbox-link">
 <img src="../../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-bf166618aa3c80f80c059b7861fef88e">
+<a href="javascript:history.back();" class="lightbox" id="image-32bcf2118c48ba88b6a9eebc5c6dcc5d">
 <img src="../../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -719,10 +724,10 @@
 </span></span></code></pre></div><p>renders as</p>
 <p>
 		
-<a href="#image-950499cf282a78d569b170f38062856b" class="lightbox-link">
+<a href="#image-175c8b0408309ef065edd04a9864ad99" class="lightbox-link">
 <img src="../../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-950499cf282a78d569b170f38062856b">
+<a href="javascript:history.back();" class="lightbox" id="image-175c8b0408309ef065edd04a9864ad99">
 <img src="../../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="lightbox-image" loading="lazy">
 </a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
@@ -840,8 +845,8 @@
 </span></span><span class="line"><span class="cl">  <span class="c"># Order sections 'n menu by &#34;weight&#34; or &#34;title&#34;. Default t' &#34;weight&#34;;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># this can be overridden 'n th' planks frontmatter</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s2">&#34;weight&#34;</span>
-</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme wit' a variant one. Eg. can be &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
-</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme wit' a variant one. Eg. can be &#34;auto&#34;, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
+</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># Change th' title separator. Default t' &#34;::&#34;.</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">titleSeparator</span> <span class="p">=</span> <span class="s2">&#34;-&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># If set t' true, th' menu 'n th' sidebar will be displayed 'n a collaps'ble tree view. Although th' functionality works wit' old browsers (IE11), th' display o' th' expander ay'cons be limited t' modern browsers</span>
@@ -884,10 +889,10 @@
 </span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
 <p>
 		
-<a href="#image-959db1604cc422b349fa81e51a1772af" class="lightbox-link">
+<a href="#image-4e57128ee71e758ab88c512122704b84" class="lightbox-link">
 <img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-959db1604cc422b349fa81e51a1772af">
+<a href="javascript:history.back();" class="lightbox" id="image-4e57128ee71e758ab88c512122704b84">
 <img src="../../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="activate-print-support">Activate print support</h2>
@@ -936,10 +941,10 @@ default values:</p>
 </span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
 <p>
 		
-<a href="#image-415aabe5b592ef4b2587d4587e7ce778" class="lightbox-link">
+<a href="#image-da7a7c854b10bd34fefa713da0e432d1" class="lightbox-link">
 <img src="../../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-415aabe5b592ef4b2587d4587e7ce778">
+<a href="javascript:history.back();" class="lightbox" id="image-da7a7c854b10bd34fefa713da0e432d1">
 <img src="../../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -1018,7 +1023,16 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
 <p>If ye want t' switch th' rules highlight'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">accord'n t' Hugo&rsquo;s documentat'n</a>, an' <code>@import</code> this stylesheet 'n yer color variant stylesheet. For an example, take a look into <code>theme-relearn-light.css</code> an' <code>config.toml</code> o' th' exampleSite.</p>
   </div>
 </div>
-<h3 id="roll-your-own">Roll yer own</h3>
+<h3 id="adjust-to-os-settings">Adjust t' OS Sett'ns</h3>
+<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code>. That&rsquo;s it.</p>
+<p>If you&rsquo;ve set multiple variants, ye can drop <code>auto</code> at any posit'n, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.</p>
+<div class="highlight"><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="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><p>If ye don&rsquo;t configure anyth'n else, th' theme will use <code>relearn-light</code> fer light mode an' <code>relearn-dark</code> fer dark mode.</p>
+<p>If ye don&rsquo;t like that, ye can set <code>themeVariantAuto</code>. Th' first element be th' variant fer light mode, th' second fer dark mode</p>
+<div class="highlight"><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="s2">&#34;learn&#34;</span><span class="p">,</span> <span class="s2">&#34;neon&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><h3 id="roll-your-own">Roll yer own</h3>
 <p>If ye be not happy wit' th' shipped variants ye can either copy an' rename one o' th' shipped files from <code>themes/hugo-theme-relearn/static/css</code> t' <code>static/css</code>, edit them afterwards t' yer lik'n 'n a text editor an' configure th' <code>themeVariant</code> parameter 'n yer <code>config.toml</code> or just use th' <a href="../../basics/generator/">interactive variant generator</a>.</p>
 <h3 id="output-formats">Output formats</h3>
 <p>Certain parts o' th' theme can be changed fer support o' yer own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if ye define a new output format <code>PLAINTEXT</code> 'n yer <code>config.toml</code>, ye can add a file <code>layouts/partials/header.plaintext.html</code> t' change th' way, th' plank header should look like fer that output format.</p>
@@ -2024,8 +2038,8 @@ window.variants && variants.generator( '#vargenerator' );
           </section>        </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../js/theme.js?1675526024" defer></script>
+    <script src="../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.html b/pir/basics/installation/index.html
index 674f2cdd52..2ba42f6b56 100644
--- a/pir/basics/installation/index.html
+++ b/pir/basics/installation/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/installation/index.print.html" rel="alternate" type="text/html" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -125,10 +125,10 @@
 </span></span></code></pre></div><p>renders as</p>
 <p>
 		
-<a href="#image-950499cf282a78d569b170f38062856b" class="lightbox-link">
+<a href="#image-175c8b0408309ef065edd04a9864ad99" class="lightbox-link">
 <img src="../../../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-950499cf282a78d569b170f38062856b">
+<a href="javascript:history.back();" class="lightbox" id="image-175c8b0408309ef065edd04a9864ad99">
 <img src="../../../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="lightbox-image" loading="lazy">
 </a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
@@ -241,12 +241,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -326,7 +326,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -362,12 +363,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.print.html b/pir/basics/installation/index.print.html
index 69ef5d6cb0..a057b41ccc 100644
--- a/pir/basics/installation/index.print.html
+++ b/pir/basics/installation/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/installation/index.html" rel="canonical" type="text/html" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/installation/index.xml" rel="alternate" type="application/rss+xml" title="Installat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -110,10 +110,10 @@
 </span></span></code></pre></div><p>renders as</p>
 <p>
 		
-<a href="#image-950499cf282a78d569b170f38062856b" class="lightbox-link">
+<a href="#image-175c8b0408309ef065edd04a9864ad99" class="lightbox-link">
 <img src="../../../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-950499cf282a78d569b170f38062856b">
+<a href="javascript:history.back();" class="lightbox" id="image-175c8b0408309ef065edd04a9864ad99">
 <img src="../../../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="lightbox-image" loading="lazy">
 </a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
@@ -154,8 +154,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.html b/pir/basics/migration/index.html
index 3bb4e35f52..827d2ed5ce 100644
--- a/pir/basics/migration/index.html
+++ b/pir/basics/migration/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/migration/index.print.html" rel="alternate" type="text/html" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -114,6 +114,11 @@
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;{{&#34;</span><span class="na">js</span><span class="err">/</span><span class="na">jquery</span><span class="err">.</span><span class="na">min</span><span class="err">.</span><span class="na">js</span><span class="err">&#34;|</span> <span class="na">relURL</span><span class="err">}}{{</span> <span class="na">if</span> <span class="err">$</span><span class="na">assetBust'n</span> <span class="err">}}?{{</span> <span class="na">now</span><span class="err">.</span><span class="na">Unix</span> <span class="err">}}{{</span> <span class="na">end</span> <span class="err">}}&#34;</span> <span class="na">defer</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </span></span></code></pre></div></li>
 <li>
+<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Th' theme be now cap'ble t' visually <a href="../../../basics/customization/#adjust-to-os-settings">adapt t' yer OS&rsquo;s light/dark mode sett'n</a>.</p>
+<p>This be also th' new default sett'n if ye haven&rsquo;t configured <code>themeVariant</code> 'n yer <code>config.toml</code>.</p>
+<p>Additionally ye be able t' configure th' variants t' be taken fer light/dark mode wit' th' new <code>themeVariantAuto</code> parameter.</p>
+</li>
+<li>
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' <a href="../../../shortcodes/expand/"><code>expand</code> shortcode</a> was changed. While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.</p>
 </li>
 <li>
@@ -725,12 +730,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -810,7 +815,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -846,12 +852,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.print.html b/pir/basics/migration/index.print.html
index ec184c2503..9d872d5fe9 100644
--- a/pir/basics/migration/index.print.html
+++ b/pir/basics/migration/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/migration/index.html" rel="canonical" type="text/html" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/migration/index.xml" rel="alternate" type="application/rss+xml" title="What&#39;s New :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -99,6 +99,11 @@
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;{{&#34;</span><span class="na">js</span><span class="err">/</span><span class="na">jquery</span><span class="err">.</span><span class="na">min</span><span class="err">.</span><span class="na">js</span><span class="err">&#34;|</span> <span class="na">relURL</span><span class="err">}}{{</span> <span class="na">if</span> <span class="err">$</span><span class="na">assetBust'n</span> <span class="err">}}?{{</span> <span class="na">now</span><span class="err">.</span><span class="na">Unix</span> <span class="err">}}{{</span> <span class="na">end</span> <span class="err">}}&#34;</span> <span class="na">defer</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </span></span></code></pre></div></li>
 <li>
+<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Th' theme be now cap'ble t' visually <a href="../../../basics/customization/#adjust-to-os-settings">adapt t' yer OS&rsquo;s light/dark mode sett'n</a>.</p>
+<p>This be also th' new default sett'n if ye haven&rsquo;t configured <code>themeVariant</code> 'n yer <code>config.toml</code>.</p>
+<p>Additionally ye be able t' configure th' variants t' be taken fer light/dark mode wit' th' new <code>themeVariantAuto</code> parameter.</p>
+</li>
+<li>
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' <a href="../../../shortcodes/expand/"><code>expand</code> shortcode</a> was changed. While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.</p>
 </li>
 <li>
@@ -638,8 +643,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.html b/pir/basics/requirements/index.html
index fbcd25a9d3..5a726f3254 100644
--- a/pir/basics/requirements/index.html
+++ b/pir/basics/requirements/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/requirements/index.print.html" rel="alternate" type="text/html" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -102,10 +102,10 @@
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
 <p>
-<a href="#image-bf166618aa3c80f80c059b7861fef88e" class="lightbox-link">
+<a href="#image-32bcf2118c48ba88b6a9eebc5c6dcc5d" class="lightbox-link">
 <img src="../../../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-bf166618aa3c80f80c059b7861fef88e">
+<a href="javascript:history.back();" class="lightbox" id="image-32bcf2118c48ba88b6a9eebc5c6dcc5d">
 <img src="../../../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -188,12 +188,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -273,7 +273,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -309,12 +310,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.print.html b/pir/basics/requirements/index.print.html
index ffc17cb401..261a61736a 100644
--- a/pir/basics/requirements/index.print.html
+++ b/pir/basics/requirements/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/requirements/index.html" rel="canonical" type="text/html" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/basics/requirements/index.xml" rel="alternate" type="application/rss+xml" title="Requirrrements :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -87,10 +87,10 @@
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
 <p>
-<a href="#image-bf166618aa3c80f80c059b7861fef88e" class="lightbox-link">
+<a href="#image-32bcf2118c48ba88b6a9eebc5c6dcc5d" class="lightbox-link">
 <img src="../../../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-bf166618aa3c80f80c059b7861fef88e">
+<a href="javascript:history.back();" class="lightbox" id="image-32bcf2118c48ba88b6a9eebc5c6dcc5d">
 <img src="../../../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -101,8 +101,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/categories/index.html b/pir/categories/index.html
index c49e6b0330..8700d046ee 100644
--- a/pir/categories/index.html
+++ b/pir/categories/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/categories/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/categories/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/categories/index.xml" rel="alternate" type="application/rss+xml" title="Categories :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -158,12 +158,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../js/search.js?1675526024" defer></script>
+        <script src="../../js/auto-complete.js?1675546464" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -243,7 +243,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -279,12 +280,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526024"></script>
+          <script async src="../../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../js/theme.js?1675526024" defer></script>
+    <script src="../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.html b/pir/cont/archetypes/index.html
index c8e57ef771..80601511d6 100644
--- a/pir/cont/archetypes/index.html
+++ b/pir/cont/archetypes/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/archetypes/index.print.html" rel="alternate" type="text/html" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -106,10 +106,10 @@
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
 <p>
 		
-<a href="#image-6c1ca9c6e72cf1345167399968852fd2" class="lightbox-link">
+<a href="#image-1ad4864f004e6a0867582f3921b536f5" class="lightbox-link">
 <img src="../../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6c1ca9c6e72cf1345167399968852fd2">
+<a href="javascript:history.back();" class="lightbox" id="image-1ad4864f004e6a0867582f3921b536f5">
 <img src="../../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a home plank, run th' follow'n command</p>
@@ -125,10 +125,10 @@
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
 <p>
 		
-<a href="#image-76f89cf5645f172661314d36768b0b4d" class="lightbox-link">
+<a href="#image-9e9466e5e5f25a5c059b6701d2f15126" class="lightbox-link">
 <img src="../../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-76f89cf5645f172661314d36768b0b4d">
+<a href="javascript:history.back();" class="lightbox" id="image-9e9466e5e5f25a5c059b6701d2f15126">
 <img src="../../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
@@ -146,10 +146,10 @@
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
 <p>
 		
-<a href="#image-884da5b30e3c406d9f841bd1a436454b" class="lightbox-link">
+<a href="#image-0551f56be7839da102e373b0ebd3cde8" class="lightbox-link">
 <img src="../../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-884da5b30e3c406d9f841bd1a436454b">
+<a href="javascript:history.back();" class="lightbox" id="image-0551f56be7839da102e373b0ebd3cde8">
 <img src="../../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
@@ -279,12 +279,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -364,7 +364,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -400,12 +401,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.print.html b/pir/cont/archetypes/index.print.html
index bd94e327d2..46d2dd0c3f 100644
--- a/pir/cont/archetypes/index.print.html
+++ b/pir/cont/archetypes/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/archetypes/index.html" rel="canonical" type="text/html" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/archetypes/index.xml" rel="alternate" type="application/rss+xml" title="Arrrchetypes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -91,10 +91,10 @@
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
 <p>
 		
-<a href="#image-6c1ca9c6e72cf1345167399968852fd2" class="lightbox-link">
+<a href="#image-1ad4864f004e6a0867582f3921b536f5" class="lightbox-link">
 <img src="../../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6c1ca9c6e72cf1345167399968852fd2">
+<a href="javascript:history.back();" class="lightbox" id="image-1ad4864f004e6a0867582f3921b536f5">
 <img src="../../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a home plank, run th' follow'n command</p>
@@ -110,10 +110,10 @@
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
 <p>
 		
-<a href="#image-76f89cf5645f172661314d36768b0b4d" class="lightbox-link">
+<a href="#image-9e9466e5e5f25a5c059b6701d2f15126" class="lightbox-link">
 <img src="../../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-76f89cf5645f172661314d36768b0b4d">
+<a href="javascript:history.back();" class="lightbox" id="image-9e9466e5e5f25a5c059b6701d2f15126">
 <img src="../../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
@@ -131,10 +131,10 @@
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
 <p>
 		
-<a href="#image-884da5b30e3c406d9f841bd1a436454b" class="lightbox-link">
+<a href="#image-0551f56be7839da102e373b0ebd3cde8" class="lightbox-link">
 <img src="../../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-884da5b30e3c406d9f841bd1a436454b">
+<a href="javascript:history.back();" class="lightbox" id="image-0551f56be7839da102e373b0ebd3cde8">
 <img src="../../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
@@ -192,8 +192,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.html b/pir/cont/i18n/index.html
index 361008ec0e..e200ad994e 100644
--- a/pir/cont/i18n/index.html
+++ b/pir/cont/i18n/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/i18n/index.print.html" rel="alternate" type="text/html" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -109,10 +109,10 @@
 </ul>
 <p>
 		
-<a href="#image-6591f298046abd7ad47d249b47ecf729" class="lightbox-link">
+<a href="#image-8a98a345eb6f1b3a73a622f055213f19" class="lightbox-link">
 <img src="../../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6591f298046abd7ad47d249b47ecf729">
+<a href="javascript:history.back();" class="lightbox" id="image-8a98a345eb6f1b3a73a622f055213f19">
 <img src="../../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
@@ -283,12 +283,12 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -368,7 +368,8 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -404,12 +405,12 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.print.html b/pir/cont/i18n/index.print.html
index be1903cfb9..1f2cc7d68c 100644
--- a/pir/cont/i18n/index.print.html
+++ b/pir/cont/i18n/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/i18n/index.html" rel="canonical" type="text/html" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/i18n/index.xml" rel="alternate" type="application/rss+xml" title="Multilingual an&#39; i18n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -94,10 +94,10 @@
 </ul>
 <p>
 		
-<a href="#image-6591f298046abd7ad47d249b47ecf729" class="lightbox-link">
+<a href="#image-8a98a345eb6f1b3a73a622f055213f19" class="lightbox-link">
 <img src="../../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6591f298046abd7ad47d249b47ecf729">
+<a href="javascript:history.back();" class="lightbox" id="image-8a98a345eb6f1b3a73a622f055213f19">
 <img src="../../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
@@ -196,8 +196,8 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/cont/index.html b/pir/cont/index.html
index 46008741a6..878248f5e2 100644
--- a/pir/cont/index.html
+++ b/pir/cont/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/cont/index.xml" rel="alternate" type="application/rss+xml" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/cont/index.print.html" rel="alternate" type="text/html" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -180,12 +180,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../js/search.js?1675526023" defer></script>
+        <script src="../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -265,7 +265,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -301,12 +302,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526023"></script>
+          <script async src="../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../js/theme.js?1675526023" defer></script>
+    <script src="../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/cont/index.print.html b/pir/cont/index.print.html
index 9a1dae6a5c..7b3b4509d2 100644
--- a/pir/cont/index.print.html
+++ b/pir/cont/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/index.html" rel="canonical" type="text/html" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/cont/index.xml" rel="alternate" type="application/rss+xml" title="Rambl&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../js/url.js?1675526024"></script>
-    <script src="../../js/variant.js?1675526024"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../js/url.js?1675546464"></script>
+    <script src="../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -178,10 +178,10 @@
 </span></span><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span></code></pre></div><p>
 		
-<a href="#image-23d5d948ec876fb99c59a6601ab25871" class="lightbox-link">
+<a href="#image-82f5a8c693e6b0d52307f43ad6c3b6c5" class="lightbox-link">
 <img src="../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title wit' icon" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-23d5d948ec876fb99c59a6601ab25871">
+<a href="javascript:history.back();" class="lightbox" id="image-82f5a8c693e6b0d52307f43ad6c3b6c5">
 <img src="../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title wit' icon" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
@@ -236,10 +236,10 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
 <p>
 		
-<a href="#image-6c1ca9c6e72cf1345167399968852fd2" class="lightbox-link">
+<a href="#image-1ad4864f004e6a0867582f3921b536f5" class="lightbox-link">
 <img src="../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6c1ca9c6e72cf1345167399968852fd2">
+<a href="javascript:history.back();" class="lightbox" id="image-1ad4864f004e6a0867582f3921b536f5">
 <img src="../../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a home plank, run th' follow'n command</p>
@@ -255,10 +255,10 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
 <p>
 		
-<a href="#image-76f89cf5645f172661314d36768b0b4d" class="lightbox-link">
+<a href="#image-9e9466e5e5f25a5c059b6701d2f15126" class="lightbox-link">
 <img src="../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-76f89cf5645f172661314d36768b0b4d">
+<a href="javascript:history.back();" class="lightbox" id="image-9e9466e5e5f25a5c059b6701d2f15126">
 <img src="../../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
@@ -276,10 +276,10 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
 <p>
 		
-<a href="#image-884da5b30e3c406d9f841bd1a436454b" class="lightbox-link">
+<a href="#image-0551f56be7839da102e373b0ebd3cde8" class="lightbox-link">
 <img src="../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-884da5b30e3c406d9f841bd1a436454b">
+<a href="javascript:history.back();" class="lightbox" id="image-0551f56be7839da102e373b0ebd3cde8">
 <img src="../../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
@@ -862,10 +862,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-5cf6ace5b5cfa82aedd9d2ad8c7c08f0" class="lightbox-link">
+<a href="#image-c5f0eea8196db9e41cfbf78bd055402e" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-5cf6ace5b5cfa82aedd9d2ad8c7c08f0">
+<a href="javascript:history.back();" class="lightbox" id="image-c5f0eea8196db9e41cfbf78bd055402e">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -879,10 +879,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-244ea842fcb5eceb6cce60b51cc2c8d6" class="lightbox-link">
+<a href="#image-153d787fefee872df4e415d163b4cb18" class="lightbox-link">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-244ea842fcb5eceb6cce60b51cc2c8d6">
+<a href="javascript:history.back();" class="lightbox" id="image-153d787fefee872df4e415d163b4cb18">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -898,10 +898,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-6b7581227dc37cc6c321f26041d39d27" class="lightbox-link">
+<a href="#image-68369c67da93aac8c7d01c01785d8394" class="lightbox-link">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6b7581227dc37cc6c321f26041d39d27">
+<a href="javascript:history.back();" class="lightbox" id="image-68369c67da93aac8c7d01c01785d8394">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -917,10 +917,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-077632e2785d88b164453214746733d9" class="lightbox-link">
+<a href="#image-0dfc165eefe138764c3254a7f984656b" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-077632e2785d88b164453214746733d9">
+<a href="javascript:history.back();" class="lightbox" id="image-0dfc165eefe138764c3254a7f984656b">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -932,10 +932,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-a06db8eb3cc80509814c8b6e82ca9914" class="lightbox-link">
+<a href="#image-10b2ffc1485bc766333ca2f325fb5b4c" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-a06db8eb3cc80509814c8b6e82ca9914">
+<a href="javascript:history.back();" class="lightbox" id="image-10b2ffc1485bc766333ca2f325fb5b4c">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -948,10 +948,10 @@ line 3 o' code
 <p>
 		
 		
-<a href="#image-5396f002c55820937dd14504ebad37a2" class="lightbox-link">
+<a href="#image-fa6c6323c72e22bea17e650f5c24e567" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: 40vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-5396f002c55820937dd14504ebad37a2">
+<a href="javascript:history.back();" class="lightbox" id="image-fa6c6323c72e22bea17e650f5c24e567">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -966,10 +966,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-2d59400e75ecb187dc1a40c950c40f03" class="lightbox-link">
+<a href="#image-af436651627a207e6d2c393faecc4a7f" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="shadow bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2d59400e75ecb187dc1a40c950c40f03">
+<a href="javascript:history.back();" class="lightbox" id="image-af436651627a207e6d2c393faecc4a7f">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -982,10 +982,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-9df67227368507863622531e0b10f116" class="lightbox-link">
+<a href="#image-a07efe77196726ab62c6e77cdb57168e" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="border" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9df67227368507863622531e0b10f116">
+<a href="javascript:history.back();" class="lightbox" id="image-a07efe77196726ab62c6e77cdb57168e">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -998,10 +998,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-f21e5c1053b1f0bc331062143299f5f4" class="lightbox-link">
+<a href="#image-d40c9eca675d99567fb862f5141c5cff" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f21e5c1053b1f0bc331062143299f5f4">
+<a href="javascript:history.back();" class="lightbox" id="image-d40c9eca675d99567fb862f5141c5cff">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -1014,10 +1014,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-4d70852093a2eb2dc3b54365f707606d" class="lightbox-link">
+<a href="#image-0094181d1fc9a36f2c3ed6b74da67fe3" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="right" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-4d70852093a2eb2dc3b54365f707606d">
+<a href="javascript:history.back();" class="lightbox" id="image-0094181d1fc9a36f2c3ed6b74da67fe3">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -1033,34 +1033,34 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-9c20af82a94eee5cb82068c960e559ae" class="lightbox-link">
+<a href="#image-47b5fbcec344aa4c01cca3e36fae172d" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="inline bg-white" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9c20af82a94eee5cb82068c960e559ae">
+<a href="javascript:history.back();" class="lightbox" id="image-47b5fbcec344aa4c01cca3e36fae172d">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-8301854d10da7999b2d6d68570e346d2" class="lightbox-link">
+<a href="#image-2192b73c2e43eff1a7a4245986b584d4" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-8301854d10da7999b2d6d68570e346d2">
+<a href="javascript:history.back();" class="lightbox" id="image-2192b73c2e43eff1a7a4245986b584d4">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-7a3d3c3cb6eefbf1cf0377807e4b01c7" class="lightbox-link">
+<a href="#image-02af2e3185d6bd2f964d5517b47bb5d9" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-7a3d3c3cb6eefbf1cf0377807e4b01c7">
+<a href="javascript:history.back();" class="lightbox" id="image-02af2e3185d6bd2f964d5517b47bb5d9">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-d6558d74ad4f99a1464c08c042b5ae7f" class="lightbox-link">
+<a href="#image-855b1b8b02dbdaf3938b2431767c0827" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-d6558d74ad4f99a1464c08c042b5ae7f">
+<a href="javascript:history.back();" class="lightbox" id="image-855b1b8b02dbdaf3938b2431767c0827">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -1073,10 +1073,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-7da785ee74af4b0009ba93258ef508f4" class="lightbox-link">
+<a href="#image-8d63752a6b07cef97d90c5f37b2cf895" class="lightbox-link">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="shadow border left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-7da785ee74af4b0009ba93258ef508f4">
+<a href="javascript:history.back();" class="lightbox" id="image-8d63752a6b07cef97d90c5f37b2cf895">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -1307,10 +1307,10 @@ However, if ye want t' keep th' title but change its value, it can be overridden
 </ul>
 <p>
 		
-<a href="#image-6591f298046abd7ad47d249b47ecf729" class="lightbox-link">
+<a href="#image-8a98a345eb6f1b3a73a622f055213f19" class="lightbox-link">
 <img src="../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6591f298046abd7ad47d249b47ecf729">
+<a href="javascript:history.back();" class="lightbox" id="image-8a98a345eb6f1b3a73a622f055213f19">
 <img src="../../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
@@ -1444,8 +1444,8 @@ You&rsquo;ll see error reports 'n yer browsers console log fer each unsupported
           </section>        </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../js/theme.js?1675526024" defer></script>
+    <script src="../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.html b/pir/cont/markdown/index.html
index d8e2641547..d1e925e7fe 100644
--- a/pir/cont/markdown/index.html
+++ b/pir/cont/markdown/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/markdown/index.print.html" rel="alternate" type="text/html" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -615,10 +615,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-5cf6ace5b5cfa82aedd9d2ad8c7c08f0" class="lightbox-link">
+<a href="#image-c5f0eea8196db9e41cfbf78bd055402e" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-5cf6ace5b5cfa82aedd9d2ad8c7c08f0">
+<a href="javascript:history.back();" class="lightbox" id="image-c5f0eea8196db9e41cfbf78bd055402e">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -632,10 +632,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-244ea842fcb5eceb6cce60b51cc2c8d6" class="lightbox-link">
+<a href="#image-153d787fefee872df4e415d163b4cb18" class="lightbox-link">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-244ea842fcb5eceb6cce60b51cc2c8d6">
+<a href="javascript:history.back();" class="lightbox" id="image-153d787fefee872df4e415d163b4cb18">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -651,10 +651,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-6b7581227dc37cc6c321f26041d39d27" class="lightbox-link">
+<a href="#image-68369c67da93aac8c7d01c01785d8394" class="lightbox-link">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6b7581227dc37cc6c321f26041d39d27">
+<a href="javascript:history.back();" class="lightbox" id="image-68369c67da93aac8c7d01c01785d8394">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -670,10 +670,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-077632e2785d88b164453214746733d9" class="lightbox-link">
+<a href="#image-0dfc165eefe138764c3254a7f984656b" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-077632e2785d88b164453214746733d9">
+<a href="javascript:history.back();" class="lightbox" id="image-0dfc165eefe138764c3254a7f984656b">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -685,10 +685,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-a06db8eb3cc80509814c8b6e82ca9914" class="lightbox-link">
+<a href="#image-10b2ffc1485bc766333ca2f325fb5b4c" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-a06db8eb3cc80509814c8b6e82ca9914">
+<a href="javascript:history.back();" class="lightbox" id="image-10b2ffc1485bc766333ca2f325fb5b4c">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -701,10 +701,10 @@ line 3 o' code
 <p>
 		
 		
-<a href="#image-5396f002c55820937dd14504ebad37a2" class="lightbox-link">
+<a href="#image-fa6c6323c72e22bea17e650f5c24e567" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: 40vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-5396f002c55820937dd14504ebad37a2">
+<a href="javascript:history.back();" class="lightbox" id="image-fa6c6323c72e22bea17e650f5c24e567">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -719,10 +719,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-2d59400e75ecb187dc1a40c950c40f03" class="lightbox-link">
+<a href="#image-af436651627a207e6d2c393faecc4a7f" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="shadow bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2d59400e75ecb187dc1a40c950c40f03">
+<a href="javascript:history.back();" class="lightbox" id="image-af436651627a207e6d2c393faecc4a7f">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -735,10 +735,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-9df67227368507863622531e0b10f116" class="lightbox-link">
+<a href="#image-a07efe77196726ab62c6e77cdb57168e" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="border" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9df67227368507863622531e0b10f116">
+<a href="javascript:history.back();" class="lightbox" id="image-a07efe77196726ab62c6e77cdb57168e">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -751,10 +751,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-f21e5c1053b1f0bc331062143299f5f4" class="lightbox-link">
+<a href="#image-d40c9eca675d99567fb862f5141c5cff" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f21e5c1053b1f0bc331062143299f5f4">
+<a href="javascript:history.back();" class="lightbox" id="image-d40c9eca675d99567fb862f5141c5cff">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -767,10 +767,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-4d70852093a2eb2dc3b54365f707606d" class="lightbox-link">
+<a href="#image-0094181d1fc9a36f2c3ed6b74da67fe3" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="right" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-4d70852093a2eb2dc3b54365f707606d">
+<a href="javascript:history.back();" class="lightbox" id="image-0094181d1fc9a36f2c3ed6b74da67fe3">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -786,34 +786,34 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-9c20af82a94eee5cb82068c960e559ae" class="lightbox-link">
+<a href="#image-47b5fbcec344aa4c01cca3e36fae172d" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="inline bg-white" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9c20af82a94eee5cb82068c960e559ae">
+<a href="javascript:history.back();" class="lightbox" id="image-47b5fbcec344aa4c01cca3e36fae172d">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-8301854d10da7999b2d6d68570e346d2" class="lightbox-link">
+<a href="#image-2192b73c2e43eff1a7a4245986b584d4" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-8301854d10da7999b2d6d68570e346d2">
+<a href="javascript:history.back();" class="lightbox" id="image-2192b73c2e43eff1a7a4245986b584d4">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-7a3d3c3cb6eefbf1cf0377807e4b01c7" class="lightbox-link">
+<a href="#image-02af2e3185d6bd2f964d5517b47bb5d9" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-7a3d3c3cb6eefbf1cf0377807e4b01c7">
+<a href="javascript:history.back();" class="lightbox" id="image-02af2e3185d6bd2f964d5517b47bb5d9">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-d6558d74ad4f99a1464c08c042b5ae7f" class="lightbox-link">
+<a href="#image-855b1b8b02dbdaf3938b2431767c0827" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-d6558d74ad4f99a1464c08c042b5ae7f">
+<a href="javascript:history.back();" class="lightbox" id="image-855b1b8b02dbdaf3938b2431767c0827">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -826,10 +826,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-7da785ee74af4b0009ba93258ef508f4" class="lightbox-link">
+<a href="#image-8d63752a6b07cef97d90c5f37b2cf895" class="lightbox-link">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="shadow border left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-7da785ee74af4b0009ba93258ef508f4">
+<a href="javascript:history.back();" class="lightbox" id="image-8d63752a6b07cef97d90c5f37b2cf895">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -926,12 +926,12 @@ line 3 o' code
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -1011,7 +1011,8 @@ line 3 o' code
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -1047,12 +1048,12 @@ line 3 o' code
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.print.html b/pir/cont/markdown/index.print.html
index fd3a1e681e..7bdabe586d 100644
--- a/pir/cont/markdown/index.print.html
+++ b/pir/cont/markdown/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/markdown/index.html" rel="canonical" type="text/html" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/markdown/index.xml" rel="alternate" type="application/rss+xml" title="Marrrkdown rules :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -600,10 +600,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-5cf6ace5b5cfa82aedd9d2ad8c7c08f0" class="lightbox-link">
+<a href="#image-c5f0eea8196db9e41cfbf78bd055402e" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-5cf6ace5b5cfa82aedd9d2ad8c7c08f0">
+<a href="javascript:history.back();" class="lightbox" id="image-c5f0eea8196db9e41cfbf78bd055402e">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -617,10 +617,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-244ea842fcb5eceb6cce60b51cc2c8d6" class="lightbox-link">
+<a href="#image-153d787fefee872df4e415d163b4cb18" class="lightbox-link">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-244ea842fcb5eceb6cce60b51cc2c8d6">
+<a href="javascript:history.back();" class="lightbox" id="image-153d787fefee872df4e415d163b4cb18">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -636,10 +636,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-6b7581227dc37cc6c321f26041d39d27" class="lightbox-link">
+<a href="#image-68369c67da93aac8c7d01c01785d8394" class="lightbox-link">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6b7581227dc37cc6c321f26041d39d27">
+<a href="javascript:history.back();" class="lightbox" id="image-68369c67da93aac8c7d01c01785d8394">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -655,10 +655,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-077632e2785d88b164453214746733d9" class="lightbox-link">
+<a href="#image-0dfc165eefe138764c3254a7f984656b" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-077632e2785d88b164453214746733d9">
+<a href="javascript:history.back();" class="lightbox" id="image-0dfc165eefe138764c3254a7f984656b">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -670,10 +670,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-a06db8eb3cc80509814c8b6e82ca9914" class="lightbox-link">
+<a href="#image-10b2ffc1485bc766333ca2f325fb5b4c" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-a06db8eb3cc80509814c8b6e82ca9914">
+<a href="javascript:history.back();" class="lightbox" id="image-10b2ffc1485bc766333ca2f325fb5b4c">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -686,10 +686,10 @@ line 3 o' code
 <p>
 		
 		
-<a href="#image-5396f002c55820937dd14504ebad37a2" class="lightbox-link">
+<a href="#image-fa6c6323c72e22bea17e650f5c24e567" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: 40vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-5396f002c55820937dd14504ebad37a2">
+<a href="javascript:history.back();" class="lightbox" id="image-fa6c6323c72e22bea17e650f5c24e567">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -704,10 +704,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-2d59400e75ecb187dc1a40c950c40f03" class="lightbox-link">
+<a href="#image-af436651627a207e6d2c393faecc4a7f" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="shadow bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2d59400e75ecb187dc1a40c950c40f03">
+<a href="javascript:history.back();" class="lightbox" id="image-af436651627a207e6d2c393faecc4a7f">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -720,10 +720,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-9df67227368507863622531e0b10f116" class="lightbox-link">
+<a href="#image-a07efe77196726ab62c6e77cdb57168e" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="border" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9df67227368507863622531e0b10f116">
+<a href="javascript:history.back();" class="lightbox" id="image-a07efe77196726ab62c6e77cdb57168e">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -736,10 +736,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-f21e5c1053b1f0bc331062143299f5f4" class="lightbox-link">
+<a href="#image-d40c9eca675d99567fb862f5141c5cff" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f21e5c1053b1f0bc331062143299f5f4">
+<a href="javascript:history.back();" class="lightbox" id="image-d40c9eca675d99567fb862f5141c5cff">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -752,10 +752,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-4d70852093a2eb2dc3b54365f707606d" class="lightbox-link">
+<a href="#image-0094181d1fc9a36f2c3ed6b74da67fe3" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="right" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-4d70852093a2eb2dc3b54365f707606d">
+<a href="javascript:history.back();" class="lightbox" id="image-0094181d1fc9a36f2c3ed6b74da67fe3">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -771,34 +771,34 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-9c20af82a94eee5cb82068c960e559ae" class="lightbox-link">
+<a href="#image-47b5fbcec344aa4c01cca3e36fae172d" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="inline bg-white" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9c20af82a94eee5cb82068c960e559ae">
+<a href="javascript:history.back();" class="lightbox" id="image-47b5fbcec344aa4c01cca3e36fae172d">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-8301854d10da7999b2d6d68570e346d2" class="lightbox-link">
+<a href="#image-2192b73c2e43eff1a7a4245986b584d4" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-8301854d10da7999b2d6d68570e346d2">
+<a href="javascript:history.back();" class="lightbox" id="image-2192b73c2e43eff1a7a4245986b584d4">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-7a3d3c3cb6eefbf1cf0377807e4b01c7" class="lightbox-link">
+<a href="#image-02af2e3185d6bd2f964d5517b47bb5d9" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-7a3d3c3cb6eefbf1cf0377807e4b01c7">
+<a href="javascript:history.back();" class="lightbox" id="image-02af2e3185d6bd2f964d5517b47bb5d9">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-d6558d74ad4f99a1464c08c042b5ae7f" class="lightbox-link">
+<a href="#image-855b1b8b02dbdaf3938b2431767c0827" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-d6558d74ad4f99a1464c08c042b5ae7f">
+<a href="javascript:history.back();" class="lightbox" id="image-855b1b8b02dbdaf3938b2431767c0827">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -811,10 +811,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-7da785ee74af4b0009ba93258ef508f4" class="lightbox-link">
+<a href="#image-8d63752a6b07cef97d90c5f37b2cf895" class="lightbox-link">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="shadow border left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-7da785ee74af4b0009ba93258ef508f4">
+<a href="javascript:history.back();" class="lightbox" id="image-8d63752a6b07cef97d90c5f37b2cf895">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -839,8 +839,8 @@ line 3 o' code
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.html b/pir/cont/menushortcuts/index.html
index acf53d2c93..b60059cb97 100644
--- a/pir/cont/menushortcuts/index.html
+++ b/pir/cont/menushortcuts/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/menushortcuts/index.print.html" rel="alternate" type="text/html" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -287,12 +287,12 @@ However, if ye want t' keep th' title but change its value, it can be overridden
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -372,7 +372,8 @@ However, if ye want t' keep th' title but change its value, it can be overridden
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -408,12 +409,12 @@ However, if ye want t' keep th' title but change its value, it can be overridden
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.print.html b/pir/cont/menushortcuts/index.print.html
index d7e42f98aa..bc4de2eb5d 100644
--- a/pir/cont/menushortcuts/index.print.html
+++ b/pir/cont/menushortcuts/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/menushortcuts/index.html" rel="canonical" type="text/html" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/menushortcuts/index.xml" rel="alternate" type="application/rss+xml" title="Menu extrrra shorrrtcuts :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -200,8 +200,8 @@ However, if ye want t' keep th' title but change its value, it can be overridden
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.html b/pir/cont/pages/index.html
index 50d66fc9f1..036e22a25e 100644
--- a/pir/cont/pages/index.html
+++ b/pir/cont/pages/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="Planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/pages/index.print.html" rel="alternate" type="text/html" title="Planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -173,10 +173,10 @@
 </span></span><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span></code></pre></div><p>
 		
-<a href="#image-23d5d948ec876fb99c59a6601ab25871" class="lightbox-link">
+<a href="#image-82f5a8c693e6b0d52307f43ad6c3b6c5" class="lightbox-link">
 <img src="../../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title wit' icon" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-23d5d948ec876fb99c59a6601ab25871">
+<a href="javascript:history.back();" class="lightbox" id="image-82f5a8c693e6b0d52307f43ad6c3b6c5">
 <img src="../../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title wit' icon" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
@@ -287,12 +287,12 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -372,7 +372,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -408,12 +409,12 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.print.html b/pir/cont/pages/index.print.html
index 66dd3b154c..49191beeb5 100644
--- a/pir/cont/pages/index.print.html
+++ b/pir/cont/pages/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/pages/index.html" rel="canonical" type="text/html" title="Planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/pages/index.xml" rel="alternate" type="application/rss+xml" title="Planks orrrganizat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -158,10 +158,10 @@
 </span></span><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span></code></pre></div><p>
 		
-<a href="#image-23d5d948ec876fb99c59a6601ab25871" class="lightbox-link">
+<a href="#image-82f5a8c693e6b0d52307f43ad6c3b6c5" class="lightbox-link">
 <img src="../../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title wit' icon" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-23d5d948ec876fb99c59a6601ab25871">
+<a href="javascript:history.back();" class="lightbox" id="image-82f5a8c693e6b0d52307f43ad6c3b6c5">
 <img src="../../../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title wit' icon" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
@@ -200,8 +200,8 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/cont/syntaxhighlight/index.html b/pir/cont/syntaxhighlight/index.html
index 48646e7cdc..9abdb9d654 100644
--- a/pir/cont/syntaxhighlight/index.html
+++ b/pir/cont/syntaxhighlight/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/syntaxhighlight/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/syntaxhighlight/index.xml" rel="alternate" type="application/rss+xml" title="Code highlight&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/syntaxhighlight/index.print.html" rel="alternate" type="text/html" title="Code highlight&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -224,12 +224,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -309,7 +309,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -345,12 +346,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/pir/cont/syntaxhighlight/index.print.html b/pir/cont/syntaxhighlight/index.print.html
index 45d1f513c7..805c87c9b0 100644
--- a/pir/cont/syntaxhighlight/index.print.html
+++ b/pir/cont/syntaxhighlight/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/syntaxhighlight/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/syntaxhighlight/index.html" rel="canonical" type="text/html" title="Code highlight&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/syntaxhighlight/index.xml" rel="alternate" type="application/rss+xml" title="Code highlight&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -137,8 +137,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/cont/tags/index.html b/pir/cont/tags/index.html
index c0e66660fe..3628f245d8 100644
--- a/pir/cont/tags/index.html
+++ b/pir/cont/tags/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/tags/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/cont/tags/index.xml" rel="alternate" type="application/rss+xml" title="Tags :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/tags/index.print.html" rel="alternate" type="text/html" title="Tags :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -200,12 +200,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -285,7 +285,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -321,12 +322,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/pir/cont/tags/index.print.html b/pir/cont/tags/index.print.html
index a4a6d4a3c4..e5cb89cdc7 100644
--- a/pir/cont/tags/index.print.html
+++ b/pir/cont/tags/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/tags/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/cont/tags/index.html" rel="canonical" type="text/html" title="Tags :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/cont/tags/index.xml" rel="alternate" type="application/rss+xml" title="Tags :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -113,8 +113,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/dev/contributing/index.html b/pir/dev/contributing/index.html
index e3a51aca27..bdaafd2555 100644
--- a/pir/dev/contributing/index.html
+++ b/pir/dev/contributing/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -295,12 +295,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -384,7 +384,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -420,12 +421,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/dev/contributing/index.print.html b/pir/dev/contributing/index.print.html
index a4b45f8051..bcb20a257d 100644
--- a/pir/dev/contributing/index.print.html
+++ b/pir/dev/contributing/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/contributing/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/contributing/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -208,8 +208,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/dev/index.html b/pir/dev/index.html
index 16d82b8438..f88a0b0a36 100644
--- a/pir/dev/index.html
+++ b/pir/dev/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -186,12 +186,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../js/search.js?1675526023" defer></script>
+        <script src="../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526023"></script>
+          <script async src="../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../js/theme.js?1675526023" defer></script>
+    <script src="../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/dev/index.print.html b/pir/dev/index.print.html
index bff4a9e8dd..b0861cfb3e 100644
--- a/pir/dev/index.print.html
+++ b/pir/dev/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../js/url.js?1675526024"></script>
-    <script src="../../js/variant.js?1675526024"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../js/url.js?1675546464"></script>
+    <script src="../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -480,10 +480,10 @@
 <p>
 		
 		
-<a href="#image-b967e7e9ad3f0e5ae42d88b34d211f55" class="lightbox-link">
+<a href="#image-edf34bfc688cfc70f07c9e8b0601df38" class="lightbox-link">
 <img src="../../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b967e7e9ad3f0e5ae42d88b34d211f55">
+<a href="javascript:history.back();" class="lightbox" id="image-edf34bfc688cfc70f07c9e8b0601df38">
 <img src="../../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="hero-image">Hero Image</h2>
@@ -517,20 +517,20 @@
 <p>
 		
 		
-<a href="#image-9c096c21bd3e4b565db4551fb38f5e54" class="lightbox-link">
+<a href="#image-df8c952e2d8eba1fce325173d703458a" class="lightbox-link">
 <img src="../../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9c096c21bd3e4b565db4551fb38f5e54">
+<a href="javascript:history.back();" class="lightbox" id="image-df8c952e2d8eba1fce325173d703458a">
 <img src="../../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
 <p>
 		
 		
-<a href="#image-fefdf9cbce7c02d1be1e924fce7e8c48" class="lightbox-link">
+<a href="#image-0a744bec00ebbd1663daf723f7ee51fa" class="lightbox-link">
 <img src="../../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-fefdf9cbce7c02d1be1e924fce7e8c48">
+<a href="javascript:history.back();" class="lightbox" id="image-0a744bec00ebbd1663daf723f7ee51fa">
 <img src="../../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -542,8 +542,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../js/theme.js?1675526024" defer></script>
+    <script src="../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/dev/maintaining/index.html b/pir/dev/maintaining/index.html
index 9bc9e13965..9e02cc36f8 100644
--- a/pir/dev/maintaining/index.html
+++ b/pir/dev/maintaining/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -363,12 +363,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -452,7 +452,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -488,12 +489,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/dev/maintaining/index.print.html b/pir/dev/maintaining/index.print.html
index 9356bfff8d..8a22c95c41 100644
--- a/pir/dev/maintaining/index.print.html
+++ b/pir/dev/maintaining/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/maintaining/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/maintaining/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -276,8 +276,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/dev/screenshots/index.html b/pir/dev/screenshots/index.html
index 8ab8f3cd55..4b2216a0dc 100644
--- a/pir/dev/screenshots/index.html
+++ b/pir/dev/screenshots/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -132,10 +132,10 @@
 <p>
 		
 		
-<a href="#image-b967e7e9ad3f0e5ae42d88b34d211f55" class="lightbox-link">
+<a href="#image-edf34bfc688cfc70f07c9e8b0601df38" class="lightbox-link">
 <img src="../../../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b967e7e9ad3f0e5ae42d88b34d211f55">
+<a href="javascript:history.back();" class="lightbox" id="image-edf34bfc688cfc70f07c9e8b0601df38">
 <img src="../../../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="hero-image">Hero Image</h2>
@@ -169,20 +169,20 @@
 <p>
 		
 		
-<a href="#image-9c096c21bd3e4b565db4551fb38f5e54" class="lightbox-link">
+<a href="#image-df8c952e2d8eba1fce325173d703458a" class="lightbox-link">
 <img src="../../../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9c096c21bd3e4b565db4551fb38f5e54">
+<a href="javascript:history.back();" class="lightbox" id="image-df8c952e2d8eba1fce325173d703458a">
 <img src="../../../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
 <p>
 		
 		
-<a href="#image-fefdf9cbce7c02d1be1e924fce7e8c48" class="lightbox-link">
+<a href="#image-0a744bec00ebbd1663daf723f7ee51fa" class="lightbox-link">
 <img src="../../../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-fefdf9cbce7c02d1be1e924fce7e8c48">
+<a href="javascript:history.back();" class="lightbox" id="image-0a744bec00ebbd1663daf723f7ee51fa">
 <img src="../../../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -265,12 +265,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -354,7 +354,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -390,12 +391,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/dev/screenshots/index.print.html b/pir/dev/screenshots/index.print.html
index c50f8937b2..cf84e10e24 100644
--- a/pir/dev/screenshots/index.print.html
+++ b/pir/dev/screenshots/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/dev/screenshots/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/dev/screenshots/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -117,10 +117,10 @@
 <p>
 		
 		
-<a href="#image-b967e7e9ad3f0e5ae42d88b34d211f55" class="lightbox-link">
+<a href="#image-edf34bfc688cfc70f07c9e8b0601df38" class="lightbox-link">
 <img src="../../../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b967e7e9ad3f0e5ae42d88b34d211f55">
+<a href="javascript:history.back();" class="lightbox" id="image-edf34bfc688cfc70f07c9e8b0601df38">
 <img src="../../../images/screenshot.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Screenshot" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="hero-image">Hero Image</h2>
@@ -154,20 +154,20 @@
 <p>
 		
 		
-<a href="#image-9c096c21bd3e4b565db4551fb38f5e54" class="lightbox-link">
+<a href="#image-df8c952e2d8eba1fce325173d703458a" class="lightbox-link">
 <img src="../../../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9c096c21bd3e4b565db4551fb38f5e54">
+<a href="javascript:history.back();" class="lightbox" id="image-df8c952e2d8eba1fce325173d703458a">
 <img src="../../../images/hero.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="Hero" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="preview-imagestnpng">Preview <code>images/tn.png</code></h3>
 <p>
 		
 		
-<a href="#image-fefdf9cbce7c02d1be1e924fce7e8c48" class="lightbox-link">
+<a href="#image-0a744bec00ebbd1663daf723f7ee51fa" class="lightbox-link">
 <img src="../../../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="shadow" style="height: 100%; width: 100%;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-fefdf9cbce7c02d1be1e924fce7e8c48">
+<a href="javascript:history.back();" class="lightbox" id="image-0a744bec00ebbd1663daf723f7ee51fa">
 <img src="../../../images/tn.png?classes=shadow&amp;width=100%25&amp;height=100%25" alt="tn" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -178,8 +178,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/index.html b/pir/index.html
index 7197584fbd..be63e82cc6 100644
--- a/pir/index.html
+++ b/pir/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="../pir/index.xml" rel="alternate" type="application/rss+xml" title="Cap&#39;n Hugo Relearrrn Theme">
     <link href="../pir/index.print.html" rel="alternate" type="text/html" title="Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../js/url.js?1675526022"></script>
-    <script src="../js/variant.js?1675526022"></script>
+    <link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../js/url.js?1675546461"></script>
+    <script src="../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -240,12 +240,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1675526023" defer></script>
-        <script src="../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../js/search.js?1675526023" defer></script>
+        <script src="../js/auto-complete.js?1675546462" defer></script>
+        <script src="../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -325,7 +325,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -361,12 +362,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../js/buttons.js?1675526023"></script>
+          <script async src="../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../js/theme.js?1675526023" defer></script>
+    <script src="../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/index.print.html b/pir/index.print.html
index b76c814dbc..3a27659ace 100644
--- a/pir/index.print.html
+++ b/pir/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/index.html" rel="canonical" type="text/html" title="Cap&#39;n Hugo Relearrrn Theme">
     <link href="../pir/index.xml" rel="alternate" type="application/rss+xml" title="Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../js/url.js?1675526024"></script>
-    <script src="../js/variant.js?1675526024"></script>
+    <link href="../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../js/url.js?1675546464"></script>
+    <script src="../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -200,6 +200,11 @@
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;{{&#34;</span><span class="na">js</span><span class="err">/</span><span class="na">jquery</span><span class="err">.</span><span class="na">min</span><span class="err">.</span><span class="na">js</span><span class="err">&#34;|</span> <span class="na">relURL</span><span class="err">}}{{</span> <span class="na">if</span> <span class="err">$</span><span class="na">assetBust'n</span> <span class="err">}}?{{</span> <span class="na">now</span><span class="err">.</span><span class="na">Unix</span> <span class="err">}}{{</span> <span class="na">end</span> <span class="err">}}&#34;</span> <span class="na">defer</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </span></span></code></pre></div></li>
 <li>
+<p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> Th' theme be now cap'ble t' visually <a href="../basics/customization/#adjust-to-os-settings">adapt t' yer OS&rsquo;s light/dark mode sett'n</a>.</p>
+<p>This be also th' new default sett'n if ye haven&rsquo;t configured <code>themeVariant</code> 'n yer <code>config.toml</code>.</p>
+<p>Additionally ye be able t' configure th' variants t' be taken fer light/dark mode wit' th' new <code>themeVariantAuto</code> parameter.</p>
+</li>
+<li>
 <p><span class="badge cstyle note badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-exclamation-circle"></i></span><span class="badge-content">Change</span></span> In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' <a href="../shortcodes/expand/"><code>expand</code> shortcode</a> was changed. While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.</p>
 </li>
 <li>
@@ -751,10 +756,10 @@
 <p>Thanks t' th' simplicity o' Cap'n Hugo, this plank be as empty as this theme needs requirements.</p>
 <p>Just download at least version <span class="badge cstyle default badge-with-title"><span class="badge-title"><i class="fab fa-hackerrank"></i></span><span class="badge-content" style="background-color: fuchsia;">0.95.0</span></span> o' th' <a href="https://gohugo.io/getting-started/installing/" target="_blank">Cap'n Hugo binary</a> fer yer OS (Windows, Linux, Mac).</p>
 <p>
-<a href="#image-bf166618aa3c80f80c059b7861fef88e" class="lightbox-link">
+<a href="#image-32bcf2118c48ba88b6a9eebc5c6dcc5d" class="lightbox-link">
 <img src="../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-bf166618aa3c80f80c059b7861fef88e">
+<a href="javascript:history.back();" class="lightbox" id="image-32bcf2118c48ba88b6a9eebc5c6dcc5d">
 <img src="../basics/requirements/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -800,10 +805,10 @@
 </span></span></code></pre></div><p>renders as</p>
 <p>
 		
-<a href="#image-950499cf282a78d569b170f38062856b" class="lightbox-link">
+<a href="#image-175c8b0408309ef065edd04a9864ad99" class="lightbox-link">
 <img src="../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-950499cf282a78d569b170f38062856b">
+<a href="javascript:history.back();" class="lightbox" id="image-175c8b0408309ef065edd04a9864ad99">
 <img src="../basics/installation/chapter.png?classes=shadow&amp;width=60pc" alt="A Chapter" class="lightbox-image" loading="lazy">
 </a></p>
 <p>Th' Relearrrn theme provides archetypes t' create skeletons fer yer website. Begin by creat'n yer first chapter plank wit' th' follow'n command</p>
@@ -921,8 +926,8 @@
 </span></span><span class="line"><span class="cl">  <span class="c"># Order sections 'n menu by &#34;weight&#34; or &#34;title&#34;. Default t' &#34;weight&#34;;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># this can be overridden 'n th' planks frontmatter</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">ordersectionsby</span> <span class="p">=</span> <span class="s2">&#34;weight&#34;</span>
-</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme wit' a variant one. Eg. can be &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
-</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;relearn-light&#34;</span>
+</span></span><span class="line"><span class="cl">  <span class="c"># Change default color scheme wit' a variant one. Eg. can be &#34;auto&#34;, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34; or an array like [ &#34;blue&#34;, &#34;green&#34; ].</span>
+</span></span><span class="line"><span class="cl">  <span class="nx">themeVariant</span> <span class="p">=</span> <span class="s2">&#34;auto&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># Change th' title separator. Default t' &#34;::&#34;.</span>
 </span></span><span class="line"><span class="cl">  <span class="nx">titleSeparator</span> <span class="p">=</span> <span class="s2">&#34;-&#34;</span>
 </span></span><span class="line"><span class="cl">  <span class="c"># If set t' true, th' menu 'n th' sidebar will be displayed 'n a collaps'ble tree view. Although th' functionality works wit' old browsers (IE11), th' display o' th' expander ay'cons be limited t' modern browsers</span>
@@ -965,10 +970,10 @@
 </span></span></code></pre></div><p>Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n <code>ENTER</code> inside o' th' menu&rsquo;s search box .</p>
 <p>
 		
-<a href="#image-959db1604cc422b349fa81e51a1772af" class="lightbox-link">
+<a href="#image-4e57128ee71e758ab88c512122704b84" class="lightbox-link">
 <img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-959db1604cc422b349fa81e51a1772af">
+<a href="javascript:history.back();" class="lightbox" id="image-4e57128ee71e758ab88c512122704b84">
 <img src="../basics/configuration/search_page.png?&amp;width=60pc" alt="Screenshot o' th' dedicated search page" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="activate-print-support">Activate print support</h2>
@@ -1017,10 +1022,10 @@ default values:</p>
 </span></span></code></pre></div><p>Th' home button be go'n t' look like this:</p>
 <p>
 		
-<a href="#image-415aabe5b592ef4b2587d4587e7ce778" class="lightbox-link">
+<a href="#image-da7a7c854b10bd34fefa713da0e432d1" class="lightbox-link">
 <img src="../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-415aabe5b592ef4b2587d4587e7ce778">
+<a href="javascript:history.back();" class="lightbox" id="image-da7a7c854b10bd34fefa713da0e432d1">
 <img src="../basics/configuration/home_button_defaults.png?classes=shadow&amp;width=300px" alt="Default Home Button" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -1099,7 +1104,16 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
 <p>If ye want t' switch th' rules highlight'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n <a href="https://gohugo.io/content-management/syntax-highlighting/" target="_blank">accord'n t' Hugo&rsquo;s documentat'n</a>, an' <code>@import</code> this stylesheet 'n yer color variant stylesheet. For an example, take a look into <code>theme-relearn-light.css</code> an' <code>config.toml</code> o' th' exampleSite.</p>
   </div>
 </div>
-<h3 id="roll-your-own">Roll yer own</h3>
+<h3 id="adjust-to-os-settings">Adjust t' OS Sett'ns</h3>
+<p>Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' <code>themeVariant</code> t' <code>auto</code>. That&rsquo;s it.</p>
+<p>If you&rsquo;ve set multiple variants, ye can drop <code>auto</code> at any posit'n, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.</p>
+<div class="highlight"><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="s2">&#34;auto&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><p>If ye don&rsquo;t configure anyth'n else, th' theme will use <code>relearn-light</code> fer light mode an' <code>relearn-dark</code> fer dark mode.</p>
+<p>If ye don&rsquo;t like that, ye can set <code>themeVariantAuto</code>. Th' first element be th' variant fer light mode, th' second fer dark mode</p>
+<div class="highlight"><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="s2">&#34;learn&#34;</span><span class="p">,</span> <span class="s2">&#34;neon&#34;</span> <span class="p">]</span>
+</span></span></code></pre></div><h3 id="roll-your-own">Roll yer own</h3>
 <p>If ye be not happy wit' th' shipped variants ye can either copy an' rename one o' th' shipped files from <code>themes/hugo-theme-relearn/static/css</code> t' <code>static/css</code>, edit them afterwards t' yer lik'n 'n a text editor an' configure th' <code>themeVariant</code> parameter 'n yer <code>config.toml</code> or just use th' <a href="../basics/generator/">interactive variant generator</a>.</p>
 <h3 id="output-formats">Output formats</h3>
 <p>Certain parts o' th' theme can be changed fer support o' yer own <a href="https://gohugo.io/templates/output-formats/" target="_blank">output formats</a>. Eg. if ye define a new output format <code>PLAINTEXT</code> 'n yer <code>config.toml</code>, ye can add a file <code>layouts/partials/header.plaintext.html</code> t' change th' way, th' plank header should look like fer that output format.</p>
@@ -2209,10 +2223,10 @@ window.variants && variants.generator( '#vargenerator' );
 </span></span><span class="line"><span class="cl"><span class="err">+++</span>
 </span></span></code></pre></div><p>
 		
-<a href="#image-23d5d948ec876fb99c59a6601ab25871" class="lightbox-link">
+<a href="#image-82f5a8c693e6b0d52307f43ad6c3b6c5" class="lightbox-link">
 <img src="../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title wit' icon" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-23d5d948ec876fb99c59a6601ab25871">
+<a href="javascript:history.back();" class="lightbox" id="image-82f5a8c693e6b0d52307f43ad6c3b6c5">
 <img src="../cont/pages/frontmatter-icon.png?classes=shadow&amp;width=300px" alt="Title wit' icon" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="ordering-sibling-menupage-entries">Order'n sibl'n menu/page entries</h3>
@@ -2267,10 +2281,10 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 <p>A <strong>Home</strong> plank be th' start'n plank o' yer project. It&rsquo;s best t' have only one plank o' this kind 'n yer project.</p>
 <p>
 		
-<a href="#image-6c1ca9c6e72cf1345167399968852fd2" class="lightbox-link">
+<a href="#image-1ad4864f004e6a0867582f3921b536f5" class="lightbox-link">
 <img src="../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6c1ca9c6e72cf1345167399968852fd2">
+<a href="javascript:history.back();" class="lightbox" id="image-1ad4864f004e6a0867582f3921b536f5">
 <img src="../cont/archetypes/pages-home.png?classes=shadow&amp;width=60pc" alt="Home page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a home plank, run th' follow'n command</p>
@@ -2286,10 +2300,10 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 <p>A <strong>Chapter</strong> displays a plank meant t' be used as introduct'n fer a set o' child planks. Commonly, it contains a simple title an' a catch line t' define rrrambl'n that can be found below it.</p>
 <p>
 		
-<a href="#image-76f89cf5645f172661314d36768b0b4d" class="lightbox-link">
+<a href="#image-9e9466e5e5f25a5c059b6701d2f15126" class="lightbox-link">
 <img src="../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-76f89cf5645f172661314d36768b0b4d">
+<a href="javascript:history.back();" class="lightbox" id="image-9e9466e5e5f25a5c059b6701d2f15126">
 <img src="../cont/archetypes/pages-chapter.png?classes=shadow&amp;width=60pc" alt="Chapter page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a chapter plank, run th' follow'n command</p>
@@ -2307,10 +2321,10 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
 <p>A <strong>Default</strong> plank be any other rrrambl'n plank. If ye set an unknown archetype 'n yer frontmatter, this archetype will be used t' generate th' plank.</p>
 <p>
 		
-<a href="#image-884da5b30e3c406d9f841bd1a436454b" class="lightbox-link">
+<a href="#image-0551f56be7839da102e373b0ebd3cde8" class="lightbox-link">
 <img src="../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-884da5b30e3c406d9f841bd1a436454b">
+<a href="javascript:history.back();" class="lightbox" id="image-0551f56be7839da102e373b0ebd3cde8">
 <img src="../cont/archetypes/pages-default.png?classes=shadow&amp;width=60pc" alt="Default page" class="lightbox-image" loading="lazy">
 </a></p>
 <p>T' create a default plank, run either one o' th' follow'n commands</p>
@@ -2893,10 +2907,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-5cf6ace5b5cfa82aedd9d2ad8c7c08f0" class="lightbox-link">
+<a href="#image-c5f0eea8196db9e41cfbf78bd055402e" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-5cf6ace5b5cfa82aedd9d2ad8c7c08f0">
+<a href="javascript:history.back();" class="lightbox" id="image-c5f0eea8196db9e41cfbf78bd055402e">
 <img src="https://octodex.github.com/images/spocktocat.png?width=20vw&amp;classes=bg-white" alt="Spock" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2910,10 +2924,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-244ea842fcb5eceb6cce60b51cc2c8d6" class="lightbox-link">
+<a href="#image-153d787fefee872df4e415d163b4cb18" class="lightbox-link">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-244ea842fcb5eceb6cce60b51cc2c8d6">
+<a href="javascript:history.back();" class="lightbox" id="image-153d787fefee872df4e415d163b4cb18">
 <img src="https://octodex.github.com/images/jean-luc-picat.jpg?width=20vw" alt="Picard" title="Jean Luc Picard" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2929,10 +2943,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-6b7581227dc37cc6c321f26041d39d27" class="lightbox-link">
+<a href="#image-68369c67da93aac8c7d01c01785d8394" class="lightbox-link">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6b7581227dc37cc6c321f26041d39d27">
+<a href="javascript:history.back();" class="lightbox" id="image-68369c67da93aac8c7d01c01785d8394">
 <img src="https://octodex.github.com/images/trekkie.jpg?width=20vw" alt="La Forge" title="Geordi La Forge" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2948,10 +2962,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-077632e2785d88b164453214746733d9" class="lightbox-link">
+<a href="#image-0dfc165eefe138764c3254a7f984656b" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-077632e2785d88b164453214746733d9">
+<a href="javascript:history.back();" class="lightbox" id="image-0dfc165eefe138764c3254a7f984656b">
 <img src="https://octodex.github.com/images/minion.png?width=20vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2963,10 +2977,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-a06db8eb3cc80509814c8b6e82ca9914" class="lightbox-link">
+<a href="#image-10b2ffc1485bc766333ca2f325fb5b4c" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-a06db8eb3cc80509814c8b6e82ca9914">
+<a href="javascript:history.back();" class="lightbox" id="image-10b2ffc1485bc766333ca2f325fb5b4c">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2979,10 +2993,10 @@ line 3 o' code
 <p>
 		
 		
-<a href="#image-5396f002c55820937dd14504ebad37a2" class="lightbox-link">
+<a href="#image-fa6c6323c72e22bea17e650f5c24e567" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="bg-white" style="height: 50px; width: 40vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-5396f002c55820937dd14504ebad37a2">
+<a href="javascript:history.back();" class="lightbox" id="image-fa6c6323c72e22bea17e650f5c24e567">
 <img src="https://octodex.github.com/images/minion.png?height=50px&amp;width=40vw&amp;classes=bg-white" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -2997,10 +3011,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-2d59400e75ecb187dc1a40c950c40f03" class="lightbox-link">
+<a href="#image-af436651627a207e6d2c393faecc4a7f" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="shadow bg-white" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2d59400e75ecb187dc1a40c950c40f03">
+<a href="javascript:history.back();" class="lightbox" id="image-af436651627a207e6d2c393faecc4a7f">
 <img src="https://octodex.github.com/images/spidertocat.png?width=20vw&amp;classes=shadow,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -3013,10 +3027,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-9df67227368507863622531e0b10f116" class="lightbox-link">
+<a href="#image-a07efe77196726ab62c6e77cdb57168e" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="border" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9df67227368507863622531e0b10f116">
+<a href="javascript:history.back();" class="lightbox" id="image-a07efe77196726ab62c6e77cdb57168e">
 <img src="https://octodex.github.com/images/droctocat.png?width=20vw&amp;classes=border" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -3029,10 +3043,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-f21e5c1053b1f0bc331062143299f5f4" class="lightbox-link">
+<a href="#image-d40c9eca675d99567fb862f5141c5cff" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-f21e5c1053b1f0bc331062143299f5f4">
+<a href="javascript:history.back();" class="lightbox" id="image-d40c9eca675d99567fb862f5141c5cff">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=20vw&amp;classes=left" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -3045,10 +3059,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-4d70852093a2eb2dc3b54365f707606d" class="lightbox-link">
+<a href="#image-0094181d1fc9a36f2c3ed6b74da67fe3" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="right" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-4d70852093a2eb2dc3b54365f707606d">
+<a href="javascript:history.back();" class="lightbox" id="image-0094181d1fc9a36f2c3ed6b74da67fe3">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=20vw&amp;classes=right" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -3064,34 +3078,34 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-9c20af82a94eee5cb82068c960e559ae" class="lightbox-link">
+<a href="#image-47b5fbcec344aa4c01cca3e36fae172d" class="lightbox-link">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="inline bg-white" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-9c20af82a94eee5cb82068c960e559ae">
+<a href="javascript:history.back();" class="lightbox" id="image-47b5fbcec344aa4c01cca3e36fae172d">
 <img src="https://octodex.github.com/images/spidertocat.png?width=10vw&amp;classes=inline,bg-white" alt="Spidertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-8301854d10da7999b2d6d68570e346d2" class="lightbox-link">
+<a href="#image-2192b73c2e43eff1a7a4245986b584d4" class="lightbox-link">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-8301854d10da7999b2d6d68570e346d2">
+<a href="javascript:history.back();" class="lightbox" id="image-2192b73c2e43eff1a7a4245986b584d4">
 <img src="https://octodex.github.com/images/droctocat.png?width=10vw&amp;classes=inline" alt="DrOctocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-7a3d3c3cb6eefbf1cf0377807e4b01c7" class="lightbox-link">
+<a href="#image-02af2e3185d6bd2f964d5517b47bb5d9" class="lightbox-link">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-7a3d3c3cb6eefbf1cf0377807e4b01c7">
+<a href="javascript:history.back();" class="lightbox" id="image-02af2e3185d6bd2f964d5517b47bb5d9">
 <img src="https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&amp;classes=inline" alt="Supertocat" class="lightbox-image" loading="lazy">
 </a>
 
 		
-<a href="#image-d6558d74ad4f99a1464c08c042b5ae7f" class="lightbox-link">
+<a href="#image-855b1b8b02dbdaf3938b2431767c0827" class="lightbox-link">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="inline" style="height: auto; width: 10vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-d6558d74ad4f99a1464c08c042b5ae7f">
+<a href="javascript:history.back();" class="lightbox" id="image-855b1b8b02dbdaf3938b2431767c0827">
 <img src="https://octodex.github.com/images/riddlocat.jpg?width=10vw&amp;classes=inline" alt="Riddlocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -3104,10 +3118,10 @@ line 3 o' code
   <div class="box-content">
 <p>
 		
-<a href="#image-7da785ee74af4b0009ba93258ef508f4" class="lightbox-link">
+<a href="#image-8d63752a6b07cef97d90c5f37b2cf895" class="lightbox-link">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="shadow border left" style="height: auto; width: 20vw;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-7da785ee74af4b0009ba93258ef508f4">
+<a href="javascript:history.back();" class="lightbox" id="image-8d63752a6b07cef97d90c5f37b2cf895">
 <img src="https://octodex.github.com/images/xtocat.jpg?width=20vw&amp;classes=shadow,border,left" alt="X-tocat" class="lightbox-image" loading="lazy">
 </a></p>
   </div>
@@ -3338,10 +3352,10 @@ However, if ye want t' keep th' title but change its value, it can be overridden
 </ul>
 <p>
 		
-<a href="#image-6591f298046abd7ad47d249b47ecf729" class="lightbox-link">
+<a href="#image-8a98a345eb6f1b3a73a622f055213f19" class="lightbox-link">
 <img src="../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="shadow" style="height: auto; width: 300px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6591f298046abd7ad47d249b47ecf729">
+<a href="javascript:history.back();" class="lightbox" id="image-8a98a345eb6f1b3a73a622f055213f19">
 <img src="../cont/i18n/i18n-menu.gif?classes=shadow&amp;width=300px" alt="I18n menu" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="basic-configuration">Basic configurat'n</h2>
@@ -4766,14 +4780,14 @@ So its rrrambl'n be used as descript'n.</p>
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-0fffcf6a46d9ba1d94850cd511901d74" aria-controls="expandcontent-0fffcf6a46d9ba1d94850cd511901d74" >
-    <label class="expand-label" for="expand-0fffcf6a46d9ba1d94850cd511901d74" >
+    <input type="checkbox" id="expand-7a2e3346e1d4f60e18134875c9369a4e" aria-controls="expandcontent-7a2e3346e1d4f60e18134875c9369a4e" >
+    <label class="expand-label" for="expand-7a2e3346e1d4f60e18134875c9369a4e" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-0fffcf6a46d9ba1d94850cd511901d74" class="expand-content">
+    <div id="expandcontent-7a2e3346e1d4f60e18134875c9369a4e" class="expand-content">
 Thank ye!
     </div>
 </div>
@@ -4872,14 +4886,14 @@ Thank ye!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-042fcf6f90331511fdee1eb44ad957f1" aria-controls="expandcontent-042fcf6f90331511fdee1eb44ad957f1" >
-    <label class="expand-label" for="expand-042fcf6f90331511fdee1eb44ad957f1" >
+    <input type="checkbox" id="expand-f762fa6a6b07ce89c9d08f713adbaaa9" aria-controls="expandcontent-f762fa6a6b07ce89c9d08f713adbaaa9" >
+    <label class="expand-label" for="expand-f762fa6a6b07ce89c9d08f713adbaaa9" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-042fcf6f90331511fdee1eb44ad957f1" class="expand-content">
+    <div id="expandcontent-f762fa6a6b07ce89c9d08f713adbaaa9" class="expand-content">
 Yes, ye did it!
     </div>
 </div>
@@ -4887,14 +4901,14 @@ Yes, ye did it!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-ce6346250f449539d138d57f393142d9" aria-controls="expandcontent-ce6346250f449539d138d57f393142d9"  checked>
-    <label class="expand-label" for="expand-ce6346250f449539d138d57f393142d9" >
+    <input type="checkbox" id="expand-bd08e15f1c1c85ae3b299c310fd973aa" aria-controls="expandcontent-bd08e15f1c1c85ae3b299c310fd973aa"  checked>
+    <label class="expand-label" for="expand-bd08e15f1c1c85ae3b299c310fd973aa" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-ce6346250f449539d138d57f393142d9" class="expand-content">
+    <div id="expandcontent-bd08e15f1c1c85ae3b299c310fd973aa" class="expand-content">
 No need t' press ye!
     </div>
 </div>
@@ -4916,14 +4930,14 @@ No need t' press ye!
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-8ded371bf3bcefc2e77951846daaaad7" aria-controls="expandcontent-8ded371bf3bcefc2e77951846daaaad7" >
-    <label class="expand-label" for="expand-8ded371bf3bcefc2e77951846daaaad7" >
+    <input type="checkbox" id="expand-d7e3b5d0d37635ea19e34eb973643d09" aria-controls="expandcontent-d7e3b5d0d37635ea19e34eb973643d09" >
+    <label class="expand-label" for="expand-d7e3b5d0d37635ea19e34eb973643d09" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Show me almost endless possibilities
     </label>
-    <div id="expandcontent-8ded371bf3bcefc2e77951846daaaad7" class="expand-content">
+    <div id="expandcontent-d7e3b5d0d37635ea19e34eb973643d09" class="expand-content">
 <p>Ye can add standard markdown rules:</p>
 <ul>
 <li>multiple paragraphs</li>
@@ -6868,8 +6882,8 @@ mindmap
               </section>        </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../js/theme.js?1675526024" defer></script>
+    <script src="../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/index.search.js b/pir/index.search.js
index 5eac683e33..f01ce7cbb1 100644
--- a/pir/index.search.js
+++ b/pir/index.search.js
@@ -35,7 +35,7 @@ var relearn_search_index = [
     "uri": "/pir/cont/index.html"
   },
   {
-    "content": " Arrr! Pirrrates Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.\nThis document shows ye what’s new 'n th' latest release. For a detailed list o' changes, see th' history plank.\n0.95.0 Th' minimum required Cap'n Hugo version.\nBreak'n A change that requires act'n by ye aft upgrad'n t' assure th' ship be still functional.\nChange A change 'n default behavior that may requires act'n by ye if ye want t' revert it.\nNew Marks new behavior ye might find interest'n or comes configur'ble.\n5.11.0 (not yet released) Change Th' theme removed th' popular jQuery library from its distribut'n.\nIn case ye made changes t' th' theme that be dependend on this library ye can place a copy o' jQuery into yer static/js directory an' board it from yer own layouts/partials/custom-header.html like this:\n\u003cscript src=\"{{\"js/jquery.min.js\"| relURL}}{{ if $assetBust'n }}?{{ now.Unix }}{{ end }}\" defer\u003e\u003c/script\u003e Change In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' expand shortcode was changed. While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.\nChange Th' JavaScript code fer handl'n image lightboxes (provided by Featherlight) was replaced by a CSS-only solut'n.\nThis also changed th' lightbox effects parameter from featherlight=false t' lightbox=false. Nevertheless ye don’t need t' change anyth'n as th' old name will be used as a fallback.\nNew Translat'n fer Czech. This language be not supported fer search.\nNew GitHub releases be also now tagged fer th' main version (eg. 1.2.x) an' major version (eg. 1.x) mak'n it easier fer ye t' pin th' theme t' a certain version.\n5.10.0 (2023-01-25) New Th' attachments, badge, button an' notice shorrrtcodes have a new parameter color t' set arbitrary CSS color values.\nAdditionally th' --ACCENT-color brand color introduced 'n version 5.8.0 be now supported wit' these shorrrtcodes.\n5.9.0 (2022-12-23) Change Th' required folder name fer th' attachments shortcode was changed fer leaf bundles.\nPreviously, th' attachments fer leaf bundles 'n non-multilang setups were required t' be 'n a files subdirectory. For plank bundles an' leaf bundles 'n multilang setups they were always required t' be 'n a _index.\u003cLANGCODE\u003e.files or index.\u003cLANGCODE\u003e.files subdirectory accordingly.\nThis added unnessessary complexity. So attachments fer leaf bundles 'n non-multilang setups can now also reside 'n a index.files directory. Although th' old files directory be now deprecated, if both directories be present, only th' old files directory will be used fer compatiblity.\nChange Absolute links prefixed wit' http:// or https:// be now opened 'n a separate browser tab.\nYe can revert back t' th' old behavior by defin'n externalLinkTarget=\"_self\" 'n th' params section o' yer config.toml.\nNew Th' theme now supports Hugo’s module system.\n5.8.0 (2022-12-08) New Th' new badge shortcode be now avail'ble t' add highly configur'ble markers t' yer rrrambl'n as ye can see it on this plank.\nNew Th' new ay'con shortcode simplyfies th' usage o' ay'cons. This can even be combined wit' also new badge shortcode.\nNew Th' theme now supports some o' GFM (GitHub Flavored Markdown) rules an' Cap'n Hugo Marrrkdown extensions, namely task lists, defint'n lists an' footnotes.\nNew A new color --ACCENT-color was introduced which be used fer highlightn'n search results on th' plank. In case ye simply don’t care, ye don’t need t' change anyth'n 'n yer variant stylesheet as th' old yellow color be still used as default.\n5.7.0 (2022-11-29) Change Th' Korean language translat'n fer this theme be now avail'ble wit' th' language code ko. Formerly th' country code kr was used instead.\nNew Th' button shortcode can now also be used as a real button inside o' HTML forms - although this be a pretty rare use case. Th' documentat'n was updated accordingly.\nNew Th' search now supports th' Korean language.\n5.6.0 (2022-11-18) New This release introduces an additional dedicated search plank. On this plank, displayed search results have more space mak'n it easier scann'n thru large number o' results.\nT' activate this feature, ye need t' configure it 'n yer config.toml as a new outputformat SEARCHPAGE fer th' home plank. If ye don’t configure it, no dedicated search plank will be access'ble an' th' theme works as before.\nYe can access th' search plank by either click'n on th' magnifier glass or press'n enter inside o' th' search box.\nNew Keyboard handl'n fer th' TOC an' search was improved.\nPress'n CTRL+ALT+t now will not only toggle th' TOC overlay but also places th' focus t' th' first head'n on open'n. Subsequently this makes it poss'ble t' easily select head'ns by us'n th' TAB key.\nTh' search received its own brand new keyboard shortcut CTRL+ALT+f. This will focus th' cursor inside o' th' the search box so ye can immediately start yer search by typ'n.\nNew Ye be now able t' turn off th' generat'n o' generator meta tags 'n yer HTML head t' hide th' used versions o' Cap'n Hugo an' this theme.\nT' configure this 'n yer config.toml make sure t' set Hugo’s disableHugoGeneratorInject=true an' also [params] disableGeneratorVersion=true, otherwise Cap'n Hugo will generate a meta tag into yer home plank automagically.\nNew Creat'n o' yer project gets a little bit faster wit' this release.\nThis addresses increased build time wit' th' 5.x releases. Th' theme now heavily caches partial results lead'n t' improved performance. T' further increase performance, unnecessary parts o' th' plank be now skipped fer creat'n o' th' print output (eg. menus, navigat'n bar, etc.).\n5.5.0 (2022-11-06) Change Th' way images be processed has changed. Now images be lazy boarded by default which speeds up plank board on slow networks and/or big planks an' also th' print preview.\nFor that th' JavaScript code t' handle th' lightbox an' image effects on th' client side was removed 'n favour fer static generat'n o' those effects on th' server.\nIf ye have used HTML directly 'n yer Marrrkdown files, this now has th' downside that it doesn’t respect th' effect query parameter anymore. In this case ye have t' migrate all yer HTML img URLs manually t' th' respective HTML attributes.\nOld New \u003cimg src=\"pic.png?width=20vw\u0026classes=shadow,border\"\u003e \u003cimg src=\"pic.png\" style=\"width:20vw;\" class=\"shadow border\"\u003e 5.4.0 (2022-11-01) Change Wit' th' proper sett'ns 'n yer config.toml yer plank be now serv'ble from th' local file system us'n file:// URLs.\nPlease note that th' searchbox will only work fer this if ye reconfigure yer outputformat fer th' homepage 'n yer config.toml from JSON t' SEARCH. Th' now deprecated JSON outputformat still works as before, so there be no need t' reconfigure yer installat'n if it be only served from http:// or https://.\nChange Th' button shortcode has a new parameter target t' set th' destinat'n frame/window fer th' URL t' open. If not given, it defaults t' a new window/tab fer external URLs or be not set at all fer internal URLs. Previously even internal URLs whar' opened 'n a new window/tab.\nNew Th' math shortcode an' mermaid shortcode now also support th' align parameter if codefence rules be used.\nNew Support fer languages that be written right t' left (like Arabic). This be only implemented fer th' rrrambl'n area but not th' navigat'n sidebar. This feature be not avail'ble 'n Internet Explorer 11.\nNew Translat'n fer Finnish (Suomi).\n5.3.0 (2022-10-07) Change In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' collaps'ble menu was changed. Th' functionality o' th' new implementat'n does not work wit' old browsers (Internet Explorer 11).\nNew Image formatt'n has two new classes t' align images t' th' left or right. Additionally, th' already exist'n inline opt'n be now documented.\nNew Print'n fer th' swagger shortcode was optimized t' expand sections that be usually closed 'n interactive mode. This requires print support t' be configured.\n5.2.0 (2022-08-03) Change If you’ve set collapsibleMenu = true 'n yer config.toml, th' menu will be expanded if a search term be found 'n a collapsed submenu. Th' menu will return t' its initial collapse state once th' search term does not match any submenus. 5.1.0 (2022-07-15) 0.95.0 This release requires a newer Cap'n Hugo version.\nChange Because th' print preview URLs were non deterministic fer normal planks 'n comparison t' plank bundles, this be now changed. Each print preview be now access'ble by add'n a index.print.html t' th' default URL.\nYe can revert this behavior by overwrit'n th' PRINT output format sett'n 'n yer config.tomlt':\n[outputFormats] [outputFormats.PRINT] name= \"PRINT\" baseName = \"index\" path = \"_print\" isHTML = true mediaType = 'text/html' permalink'ble = false 5.0.0 (2022-07-05) Break'n Th' theme changed how JavaScript an' CSS dependencies be boarded t' provide a better performance. In case you’ve added own JavaScript code that depends on th' themes jQuery implementat'n, ye have t' put it into a separate *.js file (if not already) an' add th' defer keyword t' th' script element. Eg.\n\u003cscript defer src=\"myscript.js\"\u003e\u003c/script\u003e Change Th' way archetypes be used t' generate output has changed. Th' new systems allows ye, t' redefine exist'n archetypes or even generate yer own ones.\nYer exist'n markdown files will still work like before an' therefore ye don’t need t' change anyth'n aft th' upgrade. Nevertheless, it be recommended t' adapt yer exist'n markdown files t' th' new way as follows:\nfer yer home plank, add th' frontmatter parameter archetype = \"home\" an' remove th' lead'n head'n\nfer all files contain'n th' deprecated frontmatter parameter chapter = true, replace it wit' archetype = \"chapter\" an' remove th' lead'n head'ns\nChange Th' frontmatter opt'ns pre / post were renamed t' menuPre / menuPost. Th' old opt'ns will still be used if th' new opt'ns aren’t set. Therefore ye don’t need t' change anyth'n aft th' upgrade.\nNew Add'n new partials heading-pre.html / heading-post.html an' accord'n frontmatter opt'ns headingPre / headingPost t' modify th' way yer page`s main head'n gets styled.\nNew Th' new shortcode math be avail'ble t' add beautiful math an' chemical formulae. See th' documentat'n fer avail'ble features. This feature will not work wit' Internet Explorer 11.\n4.2.0 (2022-06-23) Break'n Th' second parameter fer th' include shortcode was switched 'n mean'n an' was renamed from showfirsthead'n t' hidefirsthead'n. If ye haven’t used this parameter 'n yer shortcode, th' default behavior hasn’t changed an' ye don’t need t' change anyth'n.\nIf you’ve used th' second boolean parameter, ye have t' rename it an' invert its value t' achieve th' same behavior.\nChange Previously, if th' tabs shortcode could not find a tab item because, th' tabs ended up empty. Now th' first tab be selected instead.\nChange Th' landingPageURL was removed from config.toml. Ye can safely remove this as well from yer configurat'n as it be not used anymore. Th' theme will detect th' land'n plank URL automatically.\nNew All shorrrtcodes can now be also called from yer partials. Examples fer this be added t' th' documentat'n o' each shortcode.\n4.1.0 (2022-06-12) New While fix'n issues wit' th' search functionality fer non Latin languages, ye can now configure t' have multiple languages on a single plank. 4.0.0 (2022-06-05) Break'n Th' custom_css config parameter was removed from th' configurat'n. If used 'n an exist'n installat'n, it can be achieved by overrid'n th' custom-header.html template 'n a much more generic manner.\nBreak'n Because anchor hover color was not configur'ble without introduc'n more complexity t' th' variant stylesheets, we decided t' remove --MAIN-ANCHOR-color instead. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' anchors now get their colors from --MAIN-LINK-color an' --MAIN-ANCHOR-HOVER-color respectively.\nNew All shorrrtcodes now support named parameter. Th' positional parameter be still supported but will not be enhanced wit' new features, so ye don’t need t' change anyth'n 'n yer installat'n.\nThis applies t' expand, include, notice an' siteparam.\nNew Th' button shortcode received some love an' now has a parameter fer th' color style similar t' other shorrrtcodes.\nNew New colors --PRIMARY-color an' --SECONDARY-color were added t' provide easier modificat'n o' yer custom style. Shorrrtcodes wit' a color style can now have primary or secondary as additional values.\nThese two colors be th' default fer other, more specific color variables. Ye don’t need t' change anyth'n 'n yer exist'n custom color stylesheets as those variables get reason'ble default values.\nNew Translat'n fer Polish. This language be not supported fer search.\nNew Th' documentat'n fer all shorrrtcodes were revised.\n3.4.0 (2022-04-03) Break'n If ye had previously overwritten th' custom-footer.html partial t' add visual elements below th' rrrambl'n o' yer plank, ye have t' move this rrrambl'n t' th' new partial content-footer.html. custom-footer.html was never meant t' contain HTML other than additional styles an' JavaScript.\nNew If ye prefer expandable/collaps'ble menu items, ye can now set collapsibleMenu=true 'n yer config.toml. This will add arrows t' all menu items that contain sub menus. Th' menu will expand/collapse without navigat'n if ye click on an arrow.\nNew Ye can activate print support 'n yer config.toml t' add th' capability t' print whole chapters or even th' complete ship.\nNew Translat'n fer Traditional Chinese.\n3.3.0 (2022-03-28) New Introduct'n o' new CSS variables t' set th' font. Th' theme distinguishes between --MAIN-font fer all rrrambl'n text an' --CODE-font fer inline or block code. There be additional overrides fer all head'ns. See th' theme variant generator o' th' exampleSite fer all avail'ble variables.\nNew Th' new shortcode swagger be avail'ble t' include a UI fer REST OpenAPI Specificat'ns. See th' documentat'n fer avail'ble features. This feature will not work wit' Internet Explorer 11.\n3.2.0 (2022-03-19) 0.93.0 This release requires a newer Cap'n Hugo version.\nChange In this release th' Merrrmaid JavaScript library will only be boarded on demand if th' plank contains a Merrrmaid shortcode or be us'n Merrrmaid codefences. This changes th' behavior o' disableMermaid config opt'n as follows: If a Merrrmaid shortcode or codefence be found, th' opt'n will be ignored an' Merrrmaid will be boarded regardlessly.\nTh' opt'n be still useful 'n case ye be us'n script'n t' set up yer graph. In this case no shortcode or codefence be involved an' th' library be not boarded by default. In this case ye can set disableMermaid=false 'n yer frontmatter t' force th' library t' be boarded. See th' theme variant generator o' th' exampleSite fer an example.\nNew Additional color variant vari'ble --MERMAID-theme t' set th' variant’s Merrrmaid theme. This causes th' Merrrmaid theme t' switch wit' th' color variant if it defers from th' sett'n o' th' formerly selected color variant.\n3.1.0 (2022-03-15) New attachment an' notice shorrrtcodes have a new parameter t' override th' default ay'con. Allowed values be all Font Awesome 5 Free ay'cons. 3.0.0 (2022-02-22) Break'n We made changes t' th' menu footer. If ye have yer menu-footer.html partial overridden, ye may have t' review th' styl'n (eg. margins/paddings) 'n yer partial. For a reference take a look into th' menu-footer.html partial that be com'n wit' th' exampleSite.\nThis change was made t' allow yer own menu footer t' be placed right aft th' so called prefooter that comes wit' th' theme (contain'n th' language switch an' Clear history functionality).\nBreak'n We have changed th' default colors from th' original Learrrn theme (the purple menu header) t' th' Relearrrn defaults (the light green menu header) as used 'n th' official documentat'n.\nThis change will only affect yer installat'n if you’ve not set th' themeVariant parameter 'n yer config.toml. If ye still want t' use th' Learrrn color variant, ye have t' explicitly set themeVariant=\"learn\" 'n yer config.toml.\nAvast, that this will also affect yer ship if viewed wit' Internet Explorer 11 but 'n this case it can not be reconfigured as Internet Explorer does not support CSS variables.\nChange Due t' a bug, that we couldn’t fix 'n a general manner fer color variants, we decided t' remove --MENU-SEARCH-BOX-ICONS-color an' introduced --MENU-SEARCH-color instead. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nChange For consistency reasons, we renamed --MENU-SEARCH-BOX-color t' --MENU-SEARCH-BORDER-color. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nNew Wit' this release ye be now cap'ble t' define yer own dark mode variants.\nT' make this poss'ble, we have introduced a lot more color variables ye can use 'n yer color variants. Yer old variants will still work an' don’t need t' be changed as appropriate fallback values be used by th' theme. Nevertheless, th' new colors allow fer much more customizat'n.\nT' see what’s now poss'ble, see th' new variants relearn-dark an' neon that be com'n wit' this release.\nNew T' make th' creat'n o' new variants easier fer ye, we’ve added a new interactive theme variant generator. This feature will not work wit' Internet Explorer 11.\nNew Ye can now configure multiple color variants 'n yer config.toml. In this case, th' first variant be th' default chosen on first view an' a variant switch will be shown 'n th' menu footer. See th' documentat'n fer configurat'n.\nAvast, that th' new variant switch will not work wit' Internet Explorer 11 as it does not support CSS variables. Therefore, th' variant switcher will not be displayed wit' Internet Explorer 11.\n2.9.0 (2021-11-19) Break'n This release removes th' themes implementat'n o' ref/relref 'n favor fer Hugos standard implementat'n. This be because o' inconsistencies wit' th' themes implementat'n. In advantage, yer project becomes standard compliant an' exchang'n this theme 'n yer project t' some other theme will be effortless.\nIn a standard compliant form ye must not link t' th' *.md file but t' its logical name. You’ll see, referenc'n other planks becomes much easier. All three types result 'n th' same reference:\nType Non-Standard Standard Branch bundle basics/configuration/_index.md basics/configurat'n Leaf bundle basics/configuration/index.md basics/configurat'n Plank basics/configurat'n.md basics/configurat'n If you’ve linked from a plank o' one language t' a plank o' another language, conversion be a bit more difficult but Cap'n Hugo got ye covered as well.\nAlso, th' old themes implementat'n allowed refs t' non-exist'n rrrambl'n. This will cause Hugos implementat'n t' show th' error below an' abort th' generat'n. If yer project relies on this old behavior, ye can reconfigure th' error handl'n o' Hugos implementat'n.\nIn th' best case yer usage o' th' old implementat'n be already standard compliant an' ye don’t need t' change anyth'n. You’ll notice this very easily once you’ve started hugo server aft an upgrade an' no errors be written t' th' console.\nYe may see errors on th' console aft th' update 'n th' form:\nERROR 2021/11/19 22:29:10 [en] REF_NOT_FOUND: Ref \"basics/configuration/_index.md\": \"hugo-theme-relearn\\exampleSite\\content\\_index.en.md:19:22\": plank not found In this case, ye must apply one o' two opt'ns:\nCopy th' old implementat'n files theme/hugo-theme-relearn/layouts/shortcode/ref.html an' theme/hugo-theme-relearn/layouts/shortcode/relref.html t' yer own projects layouts/shortcode/ref.html an' layouts/shortcode/relref.html respectively. This be not recommended as yer project will still rely on non-standard behavior afterwards.\nStart up a text editor wit' regular expression support fer search an' replace. Apply th' follow'n conversions 'n th' given order on all *.md files. This be th' recommended choice.\nType Search Replace by Branch bundle (ref\\s+\"[^\"]*)/_index\\.md\" $1\" Leaf bundle (ref\\s+\"[^\"]*)/index\\.md\" $1\" Plank (ref\\s+\"[^\"]*)\\.md\" $1\" 2.8.0 (2021-11-03) Change Although never officially documented, this release removes th' font Novacento/Novecento. If ye use it 'n an overwritten CSS please replace it wit' Work Sans. This change was necessary as Novacento did not provide all Latin special characters an' lead t' mixed styled character text eg. fer Czech.\nNew Th' theme now supports favicons served from static/images/ named as favicon or logo 'n SVG, PNG or ICO format out o' th' box. An overridden partial layouts/partials/favicon.html may not be necessary anymore 'n most cases.\nNew Ye can hide th' t'ble o' contents menu fer th' whole ship by sett'n th' disableToc opt'n 'n yer config.toml. For an example see th' example configurat'n.\n2.7.0 (2021-10-24) New Optional second parameter fer notice shortcode t' set title 'n box header. 2.6.0 (2021-10-21) New Yer ship can now be served from a subfolder if ye set baseURL an' canonifyURLs=true 'n yer config.toml. See th' documentat'n fer a detailed example. 2.5.0 (2021-10-08) Change New colors --CODE-BLOCK-color an' --CODE-BLOCK-BG-color were added t' provide a fallback fer Hugos rules highlight'n 'n case guessSyntax=true be set. Ideally th' colors be set t' th' same values as th' ones from yer chosen chroma style. 2.4.0 (2021-10-07) Change Creat'n o' customized stylesheets was simplified down t' only contain th' CSS variables. Everyth'n else can an' should be deleted from yer custom stylesheet t' assure everyth'n works fine. For th' predefined stylesheet variants, this change be already included.\nNew Hidden planks be displayed by default 'n their accord'n tags plank. Ye can now turn off this behavior by sett'n disableTagHiddenPages=true 'n yer config.toml.\nNew Ye can define th' expansion state o' yer menus fer th' whole ship by sett'n th' alwaysopen opt'n 'n yer config.toml. Please see further documentat'n fer poss'ble values an' default behavior.\nNew New frontmatter ordersectionsby opt'n t' change immediate children sort'n 'n menu an' children shortcode. Poss'ble values be title or weight.\nNew Alternate rrrambl'n o' a plank be now advertised 'n th' HTML meta tags. See Cap'n Hugo documentat'n.\n2.3.0 (2021-09-13) 0.81.0 This release requires a newer Cap'n Hugo version.\nNew Showcase multilanguage features by provid'n a documentat'n translat'n “fer us pirrrates”. There will be no other translat'ns besides th' original English one an' th' Pirates one due t' maintenance constraints.\n2.2.0 (2021-09-09) New Hidden planks be displayed by default 'n th' sitemap generated by Cap'n Hugo an' be therefore vis'ble fer search engine index'n. Ye can now turn off this behavior by sett'n disableSeoHiddenPages=true 'n yer config.toml. 2.1.0 (2021-09-07) 0.69.0 This release requires a newer Cap'n Hugo version.\nChange In case th' site’s structure contains additional *.md files not part o' th' ship (eg files that be meant t' be included by ship planks - see CHANGELOG.md 'n th' exampleSite), they will now be ignored by th' search.\nNew Hidden planks be indexed fer th' ship search by default. Ye can now turn off this behavior by sett'n disableSearchHiddenPages=true 'n yer config.toml.\nNew If a search term be found 'n an expand shortcode, th' expand will be opened.\nNew Th' menu will scroll th' active item into view on board.\n2.0.0 (2021-08-28) Change Rules highlight'n was switched t' th' built 'n Hugo mechanism. Ye may need t' configure a new stylesheet or decide t' roll ye own as described on 'n th' Cap'n Hugo documentat'n\nChange In th' predefined stylesheets there was a typo an' --MENU-HOME-LINK-HOVERED-color must be changed t' --MENU-HOME-LINK-HOVER-color. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nChange --MENU-HOME-LINK-color an' --MENU-HOME-LINK-HOVER-color were miss'n 'n th' documentat'n. Ye should add them t' yer custom stylesheets if ye want t' override th' defaults.\nChange Arrow navigat'n an' children shortcode were ignor'n sett'n fer ordersectionsby. This be now changed an' may result 'n different sort'n order o' yer sub planks.\nChange If hidden planks be accessed directly by typ'n their URL, they will be exposed 'n th' menu.\nChange A plank without a title will be treated as hidden=true.\nNew Ye can define th' expansion state o' yer menus 'n th' frontmatter. Please see further documentat'n fer poss'ble values an' default behavior.\nNew New partials fer defin'n pre/post rrrambl'n fer menu items an' th' rrrambl'n. See documentat'n fer further read'n.\nNew Shortcode children wit' new parameter containerstyle.\nNew New shortcode include t' include arbitrary file rrrambl'n into a plank.\n1.2.0 (2021-07-26) New Shortcode expand wit' new parameter t' open on plank board. 1.1.0 (2021-07-02) New Merrrmaid config opt'ns can be set 'n config.toml. 1.0.0 (2021-07-01) 0.65.0 Th' version requirement fer Cap'n Hugo be th' same as fer th' Learrrn theme version 2.5.0 on 2021-07-01.\nNew Initial fork o' th' Learrrn theme based on Learrrn 2.5.0 on 2021-07-01. This introduces no new features besides a global rename t' Relearrrn an' a new logo. For th' reasons behind fork'n th' Learrrn theme, see this comment 'n th' Learrrn issues.\n",
+    "content": " Arrr! Pirrrates Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.\nThis document shows ye what’s new 'n th' latest release. For a detailed list o' changes, see th' history plank.\n0.95.0 Th' minimum required Cap'n Hugo version.\nBreak'n A change that requires act'n by ye aft upgrad'n t' assure th' ship be still functional.\nChange A change 'n default behavior that may requires act'n by ye if ye want t' revert it.\nNew Marks new behavior ye might find interest'n or comes configur'ble.\n5.11.0 (not yet released) Change Th' theme removed th' popular jQuery library from its distribut'n.\nIn case ye made changes t' th' theme that be dependend on this library ye can place a copy o' jQuery into yer static/js directory an' board it from yer own layouts/partials/custom-header.html like this:\n\u003cscript src=\"{{\"js/jquery.min.js\"| relURL}}{{ if $assetBust'n }}?{{ now.Unix }}{{ end }}\" defer\u003e\u003c/script\u003e Change Th' theme be now cap'ble t' visually adapt t' yer OS’s light/dark mode sett'n.\nThis be also th' new default sett'n if ye haven’t configured themeVariant 'n yer config.toml.\nAdditionally ye be able t' configure th' variants t' be taken fer light/dark mode wit' th' new themeVariantAuto parameter.\nChange In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' expand shortcode was changed. While Internet Explorer 11 has issues 'n display'n it, th' functionality still works.\nChange Th' JavaScript code fer handl'n image lightboxes (provided by Featherlight) was replaced by a CSS-only solut'n.\nThis also changed th' lightbox effects parameter from featherlight=false t' lightbox=false. Nevertheless ye don’t need t' change anyth'n as th' old name will be used as a fallback.\nNew Translat'n fer Czech. This language be not supported fer search.\nNew GitHub releases be also now tagged fer th' main version (eg. 1.2.x) an' major version (eg. 1.x) mak'n it easier fer ye t' pin th' theme t' a certain version.\n5.10.0 (2023-01-25) New Th' attachments, badge, button an' notice shorrrtcodes have a new parameter color t' set arbitrary CSS color values.\nAdditionally th' --ACCENT-color brand color introduced 'n version 5.8.0 be now supported wit' these shorrrtcodes.\n5.9.0 (2022-12-23) Change Th' required folder name fer th' attachments shortcode was changed fer leaf bundles.\nPreviously, th' attachments fer leaf bundles 'n non-multilang setups were required t' be 'n a files subdirectory. For plank bundles an' leaf bundles 'n multilang setups they were always required t' be 'n a _index.\u003cLANGCODE\u003e.files or index.\u003cLANGCODE\u003e.files subdirectory accordingly.\nThis added unnessessary complexity. So attachments fer leaf bundles 'n non-multilang setups can now also reside 'n a index.files directory. Although th' old files directory be now deprecated, if both directories be present, only th' old files directory will be used fer compatiblity.\nChange Absolute links prefixed wit' http:// or https:// be now opened 'n a separate browser tab.\nYe can revert back t' th' old behavior by defin'n externalLinkTarget=\"_self\" 'n th' params section o' yer config.toml.\nNew Th' theme now supports Hugo’s module system.\n5.8.0 (2022-12-08) New Th' new badge shortcode be now avail'ble t' add highly configur'ble markers t' yer rrrambl'n as ye can see it on this plank.\nNew Th' new ay'con shortcode simplyfies th' usage o' ay'cons. This can even be combined wit' also new badge shortcode.\nNew Th' theme now supports some o' GFM (GitHub Flavored Markdown) rules an' Cap'n Hugo Marrrkdown extensions, namely task lists, defint'n lists an' footnotes.\nNew A new color --ACCENT-color was introduced which be used fer highlightn'n search results on th' plank. In case ye simply don’t care, ye don’t need t' change anyth'n 'n yer variant stylesheet as th' old yellow color be still used as default.\n5.7.0 (2022-11-29) Change Th' Korean language translat'n fer this theme be now avail'ble wit' th' language code ko. Formerly th' country code kr was used instead.\nNew Th' button shortcode can now also be used as a real button inside o' HTML forms - although this be a pretty rare use case. Th' documentat'n was updated accordingly.\nNew Th' search now supports th' Korean language.\n5.6.0 (2022-11-18) New This release introduces an additional dedicated search plank. On this plank, displayed search results have more space mak'n it easier scann'n thru large number o' results.\nT' activate this feature, ye need t' configure it 'n yer config.toml as a new outputformat SEARCHPAGE fer th' home plank. If ye don’t configure it, no dedicated search plank will be access'ble an' th' theme works as before.\nYe can access th' search plank by either click'n on th' magnifier glass or press'n enter inside o' th' search box.\nNew Keyboard handl'n fer th' TOC an' search was improved.\nPress'n CTRL+ALT+t now will not only toggle th' TOC overlay but also places th' focus t' th' first head'n on open'n. Subsequently this makes it poss'ble t' easily select head'ns by us'n th' TAB key.\nTh' search received its own brand new keyboard shortcut CTRL+ALT+f. This will focus th' cursor inside o' th' the search box so ye can immediately start yer search by typ'n.\nNew Ye be now able t' turn off th' generat'n o' generator meta tags 'n yer HTML head t' hide th' used versions o' Cap'n Hugo an' this theme.\nT' configure this 'n yer config.toml make sure t' set Hugo’s disableHugoGeneratorInject=true an' also [params] disableGeneratorVersion=true, otherwise Cap'n Hugo will generate a meta tag into yer home plank automagically.\nNew Creat'n o' yer project gets a little bit faster wit' this release.\nThis addresses increased build time wit' th' 5.x releases. Th' theme now heavily caches partial results lead'n t' improved performance. T' further increase performance, unnecessary parts o' th' plank be now skipped fer creat'n o' th' print output (eg. menus, navigat'n bar, etc.).\n5.5.0 (2022-11-06) Change Th' way images be processed has changed. Now images be lazy boarded by default which speeds up plank board on slow networks and/or big planks an' also th' print preview.\nFor that th' JavaScript code t' handle th' lightbox an' image effects on th' client side was removed 'n favour fer static generat'n o' those effects on th' server.\nIf ye have used HTML directly 'n yer Marrrkdown files, this now has th' downside that it doesn’t respect th' effect query parameter anymore. In this case ye have t' migrate all yer HTML img URLs manually t' th' respective HTML attributes.\nOld New \u003cimg src=\"pic.png?width=20vw\u0026classes=shadow,border\"\u003e \u003cimg src=\"pic.png\" style=\"width:20vw;\" class=\"shadow border\"\u003e 5.4.0 (2022-11-01) Change Wit' th' proper sett'ns 'n yer config.toml yer plank be now serv'ble from th' local file system us'n file:// URLs.\nPlease note that th' searchbox will only work fer this if ye reconfigure yer outputformat fer th' homepage 'n yer config.toml from JSON t' SEARCH. Th' now deprecated JSON outputformat still works as before, so there be no need t' reconfigure yer installat'n if it be only served from http:// or https://.\nChange Th' button shortcode has a new parameter target t' set th' destinat'n frame/window fer th' URL t' open. If not given, it defaults t' a new window/tab fer external URLs or be not set at all fer internal URLs. Previously even internal URLs whar' opened 'n a new window/tab.\nNew Th' math shortcode an' mermaid shortcode now also support th' align parameter if codefence rules be used.\nNew Support fer languages that be written right t' left (like Arabic). This be only implemented fer th' rrrambl'n area but not th' navigat'n sidebar. This feature be not avail'ble 'n Internet Explorer 11.\nNew Translat'n fer Finnish (Suomi).\n5.3.0 (2022-10-07) Change In th' effort t' comply wit' WCAG standards, th' implementat'n o' th' collaps'ble menu was changed. Th' functionality o' th' new implementat'n does not work wit' old browsers (Internet Explorer 11).\nNew Image formatt'n has two new classes t' align images t' th' left or right. Additionally, th' already exist'n inline opt'n be now documented.\nNew Print'n fer th' swagger shortcode was optimized t' expand sections that be usually closed 'n interactive mode. This requires print support t' be configured.\n5.2.0 (2022-08-03) Change If you’ve set collapsibleMenu = true 'n yer config.toml, th' menu will be expanded if a search term be found 'n a collapsed submenu. Th' menu will return t' its initial collapse state once th' search term does not match any submenus. 5.1.0 (2022-07-15) 0.95.0 This release requires a newer Cap'n Hugo version.\nChange Because th' print preview URLs were non deterministic fer normal planks 'n comparison t' plank bundles, this be now changed. Each print preview be now access'ble by add'n a index.print.html t' th' default URL.\nYe can revert this behavior by overwrit'n th' PRINT output format sett'n 'n yer config.tomlt':\n[outputFormats] [outputFormats.PRINT] name= \"PRINT\" baseName = \"index\" path = \"_print\" isHTML = true mediaType = 'text/html' permalink'ble = false 5.0.0 (2022-07-05) Break'n Th' theme changed how JavaScript an' CSS dependencies be boarded t' provide a better performance. In case you’ve added own JavaScript code that depends on th' themes jQuery implementat'n, ye have t' put it into a separate *.js file (if not already) an' add th' defer keyword t' th' script element. Eg.\n\u003cscript defer src=\"myscript.js\"\u003e\u003c/script\u003e Change Th' way archetypes be used t' generate output has changed. Th' new systems allows ye, t' redefine exist'n archetypes or even generate yer own ones.\nYer exist'n markdown files will still work like before an' therefore ye don’t need t' change anyth'n aft th' upgrade. Nevertheless, it be recommended t' adapt yer exist'n markdown files t' th' new way as follows:\nfer yer home plank, add th' frontmatter parameter archetype = \"home\" an' remove th' lead'n head'n\nfer all files contain'n th' deprecated frontmatter parameter chapter = true, replace it wit' archetype = \"chapter\" an' remove th' lead'n head'ns\nChange Th' frontmatter opt'ns pre / post were renamed t' menuPre / menuPost. Th' old opt'ns will still be used if th' new opt'ns aren’t set. Therefore ye don’t need t' change anyth'n aft th' upgrade.\nNew Add'n new partials heading-pre.html / heading-post.html an' accord'n frontmatter opt'ns headingPre / headingPost t' modify th' way yer page`s main head'n gets styled.\nNew Th' new shortcode math be avail'ble t' add beautiful math an' chemical formulae. See th' documentat'n fer avail'ble features. This feature will not work wit' Internet Explorer 11.\n4.2.0 (2022-06-23) Break'n Th' second parameter fer th' include shortcode was switched 'n mean'n an' was renamed from showfirsthead'n t' hidefirsthead'n. If ye haven’t used this parameter 'n yer shortcode, th' default behavior hasn’t changed an' ye don’t need t' change anyth'n.\nIf you’ve used th' second boolean parameter, ye have t' rename it an' invert its value t' achieve th' same behavior.\nChange Previously, if th' tabs shortcode could not find a tab item because, th' tabs ended up empty. Now th' first tab be selected instead.\nChange Th' landingPageURL was removed from config.toml. Ye can safely remove this as well from yer configurat'n as it be not used anymore. Th' theme will detect th' land'n plank URL automatically.\nNew All shorrrtcodes can now be also called from yer partials. Examples fer this be added t' th' documentat'n o' each shortcode.\n4.1.0 (2022-06-12) New While fix'n issues wit' th' search functionality fer non Latin languages, ye can now configure t' have multiple languages on a single plank. 4.0.0 (2022-06-05) Break'n Th' custom_css config parameter was removed from th' configurat'n. If used 'n an exist'n installat'n, it can be achieved by overrid'n th' custom-header.html template 'n a much more generic manner.\nBreak'n Because anchor hover color was not configur'ble without introduc'n more complexity t' th' variant stylesheets, we decided t' remove --MAIN-ANCHOR-color instead. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' anchors now get their colors from --MAIN-LINK-color an' --MAIN-ANCHOR-HOVER-color respectively.\nNew All shorrrtcodes now support named parameter. Th' positional parameter be still supported but will not be enhanced wit' new features, so ye don’t need t' change anyth'n 'n yer installat'n.\nThis applies t' expand, include, notice an' siteparam.\nNew Th' button shortcode received some love an' now has a parameter fer th' color style similar t' other shorrrtcodes.\nNew New colors --PRIMARY-color an' --SECONDARY-color were added t' provide easier modificat'n o' yer custom style. Shorrrtcodes wit' a color style can now have primary or secondary as additional values.\nThese two colors be th' default fer other, more specific color variables. Ye don’t need t' change anyth'n 'n yer exist'n custom color stylesheets as those variables get reason'ble default values.\nNew Translat'n fer Polish. This language be not supported fer search.\nNew Th' documentat'n fer all shorrrtcodes were revised.\n3.4.0 (2022-04-03) Break'n If ye had previously overwritten th' custom-footer.html partial t' add visual elements below th' rrrambl'n o' yer plank, ye have t' move this rrrambl'n t' th' new partial content-footer.html. custom-footer.html was never meant t' contain HTML other than additional styles an' JavaScript.\nNew If ye prefer expandable/collaps'ble menu items, ye can now set collapsibleMenu=true 'n yer config.toml. This will add arrows t' all menu items that contain sub menus. Th' menu will expand/collapse without navigat'n if ye click on an arrow.\nNew Ye can activate print support 'n yer config.toml t' add th' capability t' print whole chapters or even th' complete ship.\nNew Translat'n fer Traditional Chinese.\n3.3.0 (2022-03-28) New Introduct'n o' new CSS variables t' set th' font. Th' theme distinguishes between --MAIN-font fer all rrrambl'n text an' --CODE-font fer inline or block code. There be additional overrides fer all head'ns. See th' theme variant generator o' th' exampleSite fer all avail'ble variables.\nNew Th' new shortcode swagger be avail'ble t' include a UI fer REST OpenAPI Specificat'ns. See th' documentat'n fer avail'ble features. This feature will not work wit' Internet Explorer 11.\n3.2.0 (2022-03-19) 0.93.0 This release requires a newer Cap'n Hugo version.\nChange In this release th' Merrrmaid JavaScript library will only be boarded on demand if th' plank contains a Merrrmaid shortcode or be us'n Merrrmaid codefences. This changes th' behavior o' disableMermaid config opt'n as follows: If a Merrrmaid shortcode or codefence be found, th' opt'n will be ignored an' Merrrmaid will be boarded regardlessly.\nTh' opt'n be still useful 'n case ye be us'n script'n t' set up yer graph. In this case no shortcode or codefence be involved an' th' library be not boarded by default. In this case ye can set disableMermaid=false 'n yer frontmatter t' force th' library t' be boarded. See th' theme variant generator o' th' exampleSite fer an example.\nNew Additional color variant vari'ble --MERMAID-theme t' set th' variant’s Merrrmaid theme. This causes th' Merrrmaid theme t' switch wit' th' color variant if it defers from th' sett'n o' th' formerly selected color variant.\n3.1.0 (2022-03-15) New attachment an' notice shorrrtcodes have a new parameter t' override th' default ay'con. Allowed values be all Font Awesome 5 Free ay'cons. 3.0.0 (2022-02-22) Break'n We made changes t' th' menu footer. If ye have yer menu-footer.html partial overridden, ye may have t' review th' styl'n (eg. margins/paddings) 'n yer partial. For a reference take a look into th' menu-footer.html partial that be com'n wit' th' exampleSite.\nThis change was made t' allow yer own menu footer t' be placed right aft th' so called prefooter that comes wit' th' theme (contain'n th' language switch an' Clear history functionality).\nBreak'n We have changed th' default colors from th' original Learrrn theme (the purple menu header) t' th' Relearrrn defaults (the light green menu header) as used 'n th' official documentat'n.\nThis change will only affect yer installat'n if you’ve not set th' themeVariant parameter 'n yer config.toml. If ye still want t' use th' Learrrn color variant, ye have t' explicitly set themeVariant=\"learn\" 'n yer config.toml.\nAvast, that this will also affect yer ship if viewed wit' Internet Explorer 11 but 'n this case it can not be reconfigured as Internet Explorer does not support CSS variables.\nChange Due t' a bug, that we couldn’t fix 'n a general manner fer color variants, we decided t' remove --MENU-SEARCH-BOX-ICONS-color an' introduced --MENU-SEARCH-color instead. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nChange For consistency reasons, we renamed --MENU-SEARCH-BOX-color t' --MENU-SEARCH-BORDER-color. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nNew Wit' this release ye be now cap'ble t' define yer own dark mode variants.\nT' make this poss'ble, we have introduced a lot more color variables ye can use 'n yer color variants. Yer old variants will still work an' don’t need t' be changed as appropriate fallback values be used by th' theme. Nevertheless, th' new colors allow fer much more customizat'n.\nT' see what’s now poss'ble, see th' new variants relearn-dark an' neon that be com'n wit' this release.\nNew T' make th' creat'n o' new variants easier fer ye, we’ve added a new interactive theme variant generator. This feature will not work wit' Internet Explorer 11.\nNew Ye can now configure multiple color variants 'n yer config.toml. In this case, th' first variant be th' default chosen on first view an' a variant switch will be shown 'n th' menu footer. See th' documentat'n fer configurat'n.\nAvast, that th' new variant switch will not work wit' Internet Explorer 11 as it does not support CSS variables. Therefore, th' variant switcher will not be displayed wit' Internet Explorer 11.\n2.9.0 (2021-11-19) Break'n This release removes th' themes implementat'n o' ref/relref 'n favor fer Hugos standard implementat'n. This be because o' inconsistencies wit' th' themes implementat'n. In advantage, yer project becomes standard compliant an' exchang'n this theme 'n yer project t' some other theme will be effortless.\nIn a standard compliant form ye must not link t' th' *.md file but t' its logical name. You’ll see, referenc'n other planks becomes much easier. All three types result 'n th' same reference:\nType Non-Standard Standard Branch bundle basics/configuration/_index.md basics/configurat'n Leaf bundle basics/configuration/index.md basics/configurat'n Plank basics/configurat'n.md basics/configurat'n If you’ve linked from a plank o' one language t' a plank o' another language, conversion be a bit more difficult but Cap'n Hugo got ye covered as well.\nAlso, th' old themes implementat'n allowed refs t' non-exist'n rrrambl'n. This will cause Hugos implementat'n t' show th' error below an' abort th' generat'n. If yer project relies on this old behavior, ye can reconfigure th' error handl'n o' Hugos implementat'n.\nIn th' best case yer usage o' th' old implementat'n be already standard compliant an' ye don’t need t' change anyth'n. You’ll notice this very easily once you’ve started hugo server aft an upgrade an' no errors be written t' th' console.\nYe may see errors on th' console aft th' update 'n th' form:\nERROR 2021/11/19 22:29:10 [en] REF_NOT_FOUND: Ref \"basics/configuration/_index.md\": \"hugo-theme-relearn\\exampleSite\\content\\_index.en.md:19:22\": plank not found In this case, ye must apply one o' two opt'ns:\nCopy th' old implementat'n files theme/hugo-theme-relearn/layouts/shortcode/ref.html an' theme/hugo-theme-relearn/layouts/shortcode/relref.html t' yer own projects layouts/shortcode/ref.html an' layouts/shortcode/relref.html respectively. This be not recommended as yer project will still rely on non-standard behavior afterwards.\nStart up a text editor wit' regular expression support fer search an' replace. Apply th' follow'n conversions 'n th' given order on all *.md files. This be th' recommended choice.\nType Search Replace by Branch bundle (ref\\s+\"[^\"]*)/_index\\.md\" $1\" Leaf bundle (ref\\s+\"[^\"]*)/index\\.md\" $1\" Plank (ref\\s+\"[^\"]*)\\.md\" $1\" 2.8.0 (2021-11-03) Change Although never officially documented, this release removes th' font Novacento/Novecento. If ye use it 'n an overwritten CSS please replace it wit' Work Sans. This change was necessary as Novacento did not provide all Latin special characters an' lead t' mixed styled character text eg. fer Czech.\nNew Th' theme now supports favicons served from static/images/ named as favicon or logo 'n SVG, PNG or ICO format out o' th' box. An overridden partial layouts/partials/favicon.html may not be necessary anymore 'n most cases.\nNew Ye can hide th' t'ble o' contents menu fer th' whole ship by sett'n th' disableToc opt'n 'n yer config.toml. For an example see th' example configurat'n.\n2.7.0 (2021-10-24) New Optional second parameter fer notice shortcode t' set title 'n box header. 2.6.0 (2021-10-21) New Yer ship can now be served from a subfolder if ye set baseURL an' canonifyURLs=true 'n yer config.toml. See th' documentat'n fer a detailed example. 2.5.0 (2021-10-08) Change New colors --CODE-BLOCK-color an' --CODE-BLOCK-BG-color were added t' provide a fallback fer Hugos rules highlight'n 'n case guessSyntax=true be set. Ideally th' colors be set t' th' same values as th' ones from yer chosen chroma style. 2.4.0 (2021-10-07) Change Creat'n o' customized stylesheets was simplified down t' only contain th' CSS variables. Everyth'n else can an' should be deleted from yer custom stylesheet t' assure everyth'n works fine. For th' predefined stylesheet variants, this change be already included.\nNew Hidden planks be displayed by default 'n their accord'n tags plank. Ye can now turn off this behavior by sett'n disableTagHiddenPages=true 'n yer config.toml.\nNew Ye can define th' expansion state o' yer menus fer th' whole ship by sett'n th' alwaysopen opt'n 'n yer config.toml. Please see further documentat'n fer poss'ble values an' default behavior.\nNew New frontmatter ordersectionsby opt'n t' change immediate children sort'n 'n menu an' children shortcode. Poss'ble values be title or weight.\nNew Alternate rrrambl'n o' a plank be now advertised 'n th' HTML meta tags. See Cap'n Hugo documentat'n.\n2.3.0 (2021-09-13) 0.81.0 This release requires a newer Cap'n Hugo version.\nNew Showcase multilanguage features by provid'n a documentat'n translat'n “fer us pirrrates”. There will be no other translat'ns besides th' original English one an' th' Pirates one due t' maintenance constraints.\n2.2.0 (2021-09-09) New Hidden planks be displayed by default 'n th' sitemap generated by Cap'n Hugo an' be therefore vis'ble fer search engine index'n. Ye can now turn off this behavior by sett'n disableSeoHiddenPages=true 'n yer config.toml. 2.1.0 (2021-09-07) 0.69.0 This release requires a newer Cap'n Hugo version.\nChange In case th' site’s structure contains additional *.md files not part o' th' ship (eg files that be meant t' be included by ship planks - see CHANGELOG.md 'n th' exampleSite), they will now be ignored by th' search.\nNew Hidden planks be indexed fer th' ship search by default. Ye can now turn off this behavior by sett'n disableSearchHiddenPages=true 'n yer config.toml.\nNew If a search term be found 'n an expand shortcode, th' expand will be opened.\nNew Th' menu will scroll th' active item into view on board.\n2.0.0 (2021-08-28) Change Rules highlight'n was switched t' th' built 'n Hugo mechanism. Ye may need t' configure a new stylesheet or decide t' roll ye own as described on 'n th' Cap'n Hugo documentat'n\nChange In th' predefined stylesheets there was a typo an' --MENU-HOME-LINK-HOVERED-color must be changed t' --MENU-HOME-LINK-HOVER-color. Ye don’t need t' change anyth'n 'n yer custom color stylesheet as th' old name will be used as a fallback.\nChange --MENU-HOME-LINK-color an' --MENU-HOME-LINK-HOVER-color were miss'n 'n th' documentat'n. Ye should add them t' yer custom stylesheets if ye want t' override th' defaults.\nChange Arrow navigat'n an' children shortcode were ignor'n sett'n fer ordersectionsby. This be now changed an' may result 'n different sort'n order o' yer sub planks.\nChange If hidden planks be accessed directly by typ'n their URL, they will be exposed 'n th' menu.\nChange A plank without a title will be treated as hidden=true.\nNew Ye can define th' expansion state o' yer menus 'n th' frontmatter. Please see further documentat'n fer poss'ble values an' default behavior.\nNew New partials fer defin'n pre/post rrrambl'n fer menu items an' th' rrrambl'n. See documentat'n fer further read'n.\nNew Shortcode children wit' new parameter containerstyle.\nNew New shortcode include t' include arbitrary file rrrambl'n into a plank.\n1.2.0 (2021-07-26) New Shortcode expand wit' new parameter t' open on plank board. 1.1.0 (2021-07-02) New Merrrmaid config opt'ns can be set 'n config.toml. 1.0.0 (2021-07-01) 0.65.0 Th' version requirement fer Cap'n Hugo be th' same as fer th' Learrrn theme version 2.5.0 on 2021-07-01.\nNew Initial fork o' th' Learrrn theme based on Learrrn 2.5.0 on 2021-07-01. This introduces no new features besides a global rename t' Relearrrn an' a new logo. For th' reasons behind fork'n th' Learrrn theme, see this comment 'n th' Learrrn issues.\n",
     "description": "",
     "tags": null,
     "title": "What's New",
@@ -125,7 +125,7 @@ var relearn_search_index = [
     "uri": "/pir/basics/installation/index.html"
   },
   {
-    "content": " Arrr! Pirrrates Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.\nGlobal ship parameters On top o' Cap'n Hugo global configurat'n, th' Relearrrn theme lets ye define th' follow'n parameters 'n yer config.toml (here, values be default).\nAvast that some o' these parameters be explained 'n details 'n other sections o' this documentat'n.\n[params] # This controls whether submenus will be expanded (true), or collapsed (false) 'n th' # menu; if no sett'n be given, th' first menu level be set t' false, all others t' true; # this can be overridden 'n th' planks frontmatter alwaysopen = true # Prefix URL t' edit current plank. Will display an \"Edit\" button on top right hand corner o' every plank. # Useful t' give opportunity t' people t' create merge request fer yer doc. # See th' config.toml file from this documentat'n ship t' have an example. editURL = \"\" # Author o' th' ship, will be used 'n meta informat'n author = \"\" # Descript'n o' th' ship, will be used 'n meta informat'n descript'n = \"\" # Shows a checkmark fer visited planks on th' menu showVisitedLinks = false # Dis'ble search funct'n. It will hide search bar disableSearch = false # Dis'ble search 'n hidden planks, otherwise they will be shown 'n search box disableSearchHiddenPages = false # Disables hidden planks from show'n up 'n th' sitemap an' on Google (et all), otherwise they may be indexed by search engines disableSeoHiddenPages = false # Disables hidden planks from show'n up on th' tags plank although th' tag term will be displayed even if all planks be hidden disableTagHiddenPages = false # Javascript an' CSS cache be automatically busted when new version o' ship be generated. # Set this t' true t' dis'ble this behavior (some proxies don't handle well this optimization) disableAssetsBust'n = false # Set this t' true if ye want t' dis'ble generat'n fer generator version meta tags o' hugo an' th' theme; # don't forget t' also set Hugo's disableHugoGeneratorInject=true, otherwise it will generate a meta tag into yer home plank disableGeneratorVersion = false # Set this t' true t' dis'ble copy-to-clipboard button fer inline code. disableInlineCopyToClipBoard = false # A title fer shortcuts 'n menu be set by default. Set this t' true t' dis'ble it. disableShortcutsTitle = false # If set t' false, a Home button will appear below th' search bar on th' menu. # It be redirect'n t' th' land'n plank o' th' current language if specified. (Default be \"/\") disableLandingPageButton = true # When us'n mulitlingual website, dis'ble th' switch language button. disableLanguageSwitchingButton = false # Hide breadcrumbs 'n th' header an' only show th' current plank title disableBreadcrumb = true # If set t' true, hide t'ble o' contents menu 'n th' header o' all planks disableToc = false # If set t' false, board th' MathJax module on every plank regardless if a MathJax shortcode be present disableMathJax = false # Specifies th' remote locat'n o' th' MathJax js customMathJaxURL = \"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js\" # Initializat'n parameter fer MathJax, see MathJax documentat'n mathJaxInitialize = \"{}\" # If set t' false, board th' Merrrmaid module on every plank regardless if a Merrrmaid shortcode or Merrrmaid codefence be present disableMermaid = false # Specifies th' remote locat'n o' th' Merrrmaid js customMermaidURL = \"https://unpkg.com/mermaid/dist/mermaid.min.js\" # Initializat'n parameter fer Merrrmaid, see Merrrmaid documentat'n mermaidInitialize = \"{ \\\"theme\\\": \\\"default\\\" }\" # If set t' false, board th' Swagger module on every plank regardless if a Swagger shortcode be present disableSwagger = false # Specifies th' remote locat'n o' th' RapiDoc js customSwaggerURL = \"https://unpkg.com/rapidoc/dist/rapidoc-min.js\" # Initializat'n parameter fer Swagger, see RapiDoc documentat'n swaggerInitialize = \"{ \\\"theme\\\": \\\"light\\\" }\" # Hide Next an' Previous plank buttons normally displayed full height beside rrrambl'n disableNextPrev = true # Order sections 'n menu by \"weight\" or \"title\". Default t' \"weight\"; # this can be overridden 'n th' planks frontmatter ordersectionsby = \"weight\" # Change default color scheme wit' a variant one. Eg. can be \"red\", \"blue\", \"green\" or an array like [ \"blue\", \"green\" ]. themeVariant = \"relearn-light\" # Change th' title separator. Default t' \"::\". titleSeparator = \"-\" # If set t' true, th' menu 'n th' sidebar will be displayed 'n a collaps'ble tree view. Although th' functionality works wit' old browsers (IE11), th' display o' th' expander ay'cons be limited t' modern browsers collapsibleMenu = false # If a single plank can contain rrrambl'n 'n multiple languages, add those here additionalContentLanguage = [ \"en\" ] # If set t' true, no index.html will be appended t' prettyURLs; this will cause planks not # t' be serv'ble from th' file system disableExplicitIndexURLs = false # For external links ye can define how they be opened 'n yer browser; this sett'n will only be applied t' th' rrrambl'n area but not th' shortcut menu externalLinkTarget = \"_blank\" Serv'n yer plank from a subfolder If yer ship be served from a subfolder, eg. https://example.com/mysite/, ye have t' set th' follow'n lines t' yer config.toml\nbaseURL = \"https://example.com/mysite/\" canonifyURLs = true relativeURLs = true Without canonifyURLs=true URLs 'n sublemental planks (like sitemap.xml, rss.xml) will be generated falsly while yer HTML files will still work. See https://github.com/gohugoio/hugo/issues/5226.\nServ'n yer plank from th' filesystem If ye want yer plank served from th' filesystem by us'n URLs start'n wit' file:// you’ll need th' follow'n configurat'n 'n yer config.toml:\nrelativeURLs = true Th' theme will append an additional index.html t' all branch bundle links by default t' make th' plank be serv'ble from th' file system. If ye don’t care about th' file system an' only serve yer plank via a webserver ye can also generate th' links without this change by add'n this t' yer config.toml\n[params] disableExplicitIndexURLs = true Avast If ye want t' use th' search feature from th' file system us'n an older installat'n o' th' theme make sure t' change yer outputformat fer th' homepage from th' now deprecated JSON t' SEARCH as seen below.\nActivate search If not already present, add th' follow'n lines 'n th' same config.toml file.\n[outputs] home = [\"HTML\", \"RSS\", \"SEARCH\"] This will generate a search index file at th' root o' yer public folder ready t' be consumed by th' Lunr search library. Avast that th' SEARCH outputformat was named JSON 'n previous releases but was implemented differently. Although JSON still works, it be now deprecated.\nActivate dedicated search plank Ye can add a dedicated search plank fer yer plank by add'n th' SEARCHPAGE outputformat t' yer home plank by add'n th' follow'n lines 'n yer config.toml file.\n[outputs] home = [\"HTML\", \"RSS\", \"SEARCH\", \"SEARCHPAGE\"] Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n ENTER inside o' th' menu’s search box .\nActivate print support Ye can activate print support t' add th' capability t' print whole chapters or even th' complete ship. Just add th' PRINT output format t' yer home, section an' plank 'n yer config.toml as seen below:\n[outputs] home = [\"HTML\", \"RSS\", \"PRINT\", \"SEARCH\"] section = [\"HTML\", \"RSS\", \"PRINT\"] plank = [\"HTML\", \"RSS\", \"PRINT\"] This will add a little printer ay'con 'n th' top bar. It will switch th' plank t' print preview when clicked. Ye can then send this plank t' th' printer by us'n yer browser’s usual print functionality.\nAvast Th' result'n URL will not be configured ugly 'n terms o' Hugo’s URL handl'n even if you’ve set uglyURLs=true 'n yer config.toml. This be due t' th' fact that fer one mime type only one suffix can be configured.\nNevertheless, if you’re unhappy wit' th' result'n URLs ye can manually redefine outputFormats.PRINT 'n yer own config.toml t' yer lik'n.\nMathJax Th' MathJax configurat'n parameters can also be set on a specific plank. In this case, th' global parameter would be overwritten by th' local one. See Math fer additional documentat'n.\nExample MathJax be globally disabled. By default it won’t be boarded by any plank.\nOn plank “Physics” ye coded some JavaScript fer a dynamic formulae. Ye can set th' MathJax parameters locally t' board mathJax on this plank.\nYe also can dis'ble MathJax fer specific planks while globally enabled.\nMerrrmaid Th' Merrrmaid configurat'n parameters can also be set on a specific plank. In this case, th' global parameter would be overwritten by th' local one. See Merrrmaid fer additional documentat'n.\nExample Merrrmaid be globally disabled. By default it won’t be boarded by any plank.\nOn plank “Architecture” ye coded some JavaScript t' dynamically generate a class diagram. Ye can set th' Merrrmaid parameters locally t' board mermaid on this plank.\nYe also can dis'ble Merrrmaid fer specific planks while globally enabled.\nHome Button Configurat'n If th' disableLandingPageButton opt'n be set t' false, a Home button will appear on th' left menu. It be an alternative fer click'n on th' logo. T' edit th' appearance, ye will have t' configure two parameters fer th' defined languages:\n[Languages] [Languages.en] ... landingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Home\" ... [Languages.pir] ... landingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Arrr! Homme\" ... If those params be not configured fer a specific language, they will get their default values:\nlandingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Home\" Th' home button be go'n t' look like this:\n",
+    "content": " Arrr! Pirrrates Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.\nGlobal ship parameters On top o' Cap'n Hugo global configurat'n, th' Relearrrn theme lets ye define th' follow'n parameters 'n yer config.toml (here, values be default).\nAvast that some o' these parameters be explained 'n details 'n other sections o' this documentat'n.\n[params] # This controls whether submenus will be expanded (true), or collapsed (false) 'n th' # menu; if no sett'n be given, th' first menu level be set t' false, all others t' true; # this can be overridden 'n th' planks frontmatter alwaysopen = true # Prefix URL t' edit current plank. Will display an \"Edit\" button on top right hand corner o' every plank. # Useful t' give opportunity t' people t' create merge request fer yer doc. # See th' config.toml file from this documentat'n ship t' have an example. editURL = \"\" # Author o' th' ship, will be used 'n meta informat'n author = \"\" # Descript'n o' th' ship, will be used 'n meta informat'n descript'n = \"\" # Shows a checkmark fer visited planks on th' menu showVisitedLinks = false # Dis'ble search funct'n. It will hide search bar disableSearch = false # Dis'ble search 'n hidden planks, otherwise they will be shown 'n search box disableSearchHiddenPages = false # Disables hidden planks from show'n up 'n th' sitemap an' on Google (et all), otherwise they may be indexed by search engines disableSeoHiddenPages = false # Disables hidden planks from show'n up on th' tags plank although th' tag term will be displayed even if all planks be hidden disableTagHiddenPages = false # Javascript an' CSS cache be automatically busted when new version o' ship be generated. # Set this t' true t' dis'ble this behavior (some proxies don't handle well this optimization) disableAssetsBust'n = false # Set this t' true if ye want t' dis'ble generat'n fer generator version meta tags o' hugo an' th' theme; # don't forget t' also set Hugo's disableHugoGeneratorInject=true, otherwise it will generate a meta tag into yer home plank disableGeneratorVersion = false # Set this t' true t' dis'ble copy-to-clipboard button fer inline code. disableInlineCopyToClipBoard = false # A title fer shortcuts 'n menu be set by default. Set this t' true t' dis'ble it. disableShortcutsTitle = false # If set t' false, a Home button will appear below th' search bar on th' menu. # It be redirect'n t' th' land'n plank o' th' current language if specified. (Default be \"/\") disableLandingPageButton = true # When us'n mulitlingual website, dis'ble th' switch language button. disableLanguageSwitchingButton = false # Hide breadcrumbs 'n th' header an' only show th' current plank title disableBreadcrumb = true # If set t' true, hide t'ble o' contents menu 'n th' header o' all planks disableToc = false # If set t' false, board th' MathJax module on every plank regardless if a MathJax shortcode be present disableMathJax = false # Specifies th' remote locat'n o' th' MathJax js customMathJaxURL = \"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js\" # Initializat'n parameter fer MathJax, see MathJax documentat'n mathJaxInitialize = \"{}\" # If set t' false, board th' Merrrmaid module on every plank regardless if a Merrrmaid shortcode or Merrrmaid codefence be present disableMermaid = false # Specifies th' remote locat'n o' th' Merrrmaid js customMermaidURL = \"https://unpkg.com/mermaid/dist/mermaid.min.js\" # Initializat'n parameter fer Merrrmaid, see Merrrmaid documentat'n mermaidInitialize = \"{ \\\"theme\\\": \\\"default\\\" }\" # If set t' false, board th' Swagger module on every plank regardless if a Swagger shortcode be present disableSwagger = false # Specifies th' remote locat'n o' th' RapiDoc js customSwaggerURL = \"https://unpkg.com/rapidoc/dist/rapidoc-min.js\" # Initializat'n parameter fer Swagger, see RapiDoc documentat'n swaggerInitialize = \"{ \\\"theme\\\": \\\"light\\\" }\" # Hide Next an' Previous plank buttons normally displayed full height beside rrrambl'n disableNextPrev = true # Order sections 'n menu by \"weight\" or \"title\". Default t' \"weight\"; # this can be overridden 'n th' planks frontmatter ordersectionsby = \"weight\" # Change default color scheme wit' a variant one. Eg. can be \"auto\", \"red\", \"blue\", \"green\" or an array like [ \"blue\", \"green\" ]. themeVariant = \"auto\" # Change th' title separator. Default t' \"::\". titleSeparator = \"-\" # If set t' true, th' menu 'n th' sidebar will be displayed 'n a collaps'ble tree view. Although th' functionality works wit' old browsers (IE11), th' display o' th' expander ay'cons be limited t' modern browsers collapsibleMenu = false # If a single plank can contain rrrambl'n 'n multiple languages, add those here additionalContentLanguage = [ \"en\" ] # If set t' true, no index.html will be appended t' prettyURLs; this will cause planks not # t' be serv'ble from th' file system disableExplicitIndexURLs = false # For external links ye can define how they be opened 'n yer browser; this sett'n will only be applied t' th' rrrambl'n area but not th' shortcut menu externalLinkTarget = \"_blank\" Serv'n yer plank from a subfolder If yer ship be served from a subfolder, eg. https://example.com/mysite/, ye have t' set th' follow'n lines t' yer config.toml\nbaseURL = \"https://example.com/mysite/\" canonifyURLs = true relativeURLs = true Without canonifyURLs=true URLs 'n sublemental planks (like sitemap.xml, rss.xml) will be generated falsly while yer HTML files will still work. See https://github.com/gohugoio/hugo/issues/5226.\nServ'n yer plank from th' filesystem If ye want yer plank served from th' filesystem by us'n URLs start'n wit' file:// you’ll need th' follow'n configurat'n 'n yer config.toml:\nrelativeURLs = true Th' theme will append an additional index.html t' all branch bundle links by default t' make th' plank be serv'ble from th' file system. If ye don’t care about th' file system an' only serve yer plank via a webserver ye can also generate th' links without this change by add'n this t' yer config.toml\n[params] disableExplicitIndexURLs = true Avast If ye want t' use th' search feature from th' file system us'n an older installat'n o' th' theme make sure t' change yer outputformat fer th' homepage from th' now deprecated JSON t' SEARCH as seen below.\nActivate search If not already present, add th' follow'n lines 'n th' same config.toml file.\n[outputs] home = [\"HTML\", \"RSS\", \"SEARCH\"] This will generate a search index file at th' root o' yer public folder ready t' be consumed by th' Lunr search library. Avast that th' SEARCH outputformat was named JSON 'n previous releases but was implemented differently. Although JSON still works, it be now deprecated.\nActivate dedicated search plank Ye can add a dedicated search plank fer yer plank by add'n th' SEARCHPAGE outputformat t' yer home plank by add'n th' follow'n lines 'n yer config.toml file.\n[outputs] home = [\"HTML\", \"RSS\", \"SEARCH\", \"SEARCHPAGE\"] Ye can access this plank by either click'n on th' magnifier glass or by typ'n some search term an' press'n ENTER inside o' th' menu’s search box .\nActivate print support Ye can activate print support t' add th' capability t' print whole chapters or even th' complete ship. Just add th' PRINT output format t' yer home, section an' plank 'n yer config.toml as seen below:\n[outputs] home = [\"HTML\", \"RSS\", \"PRINT\", \"SEARCH\"] section = [\"HTML\", \"RSS\", \"PRINT\"] plank = [\"HTML\", \"RSS\", \"PRINT\"] This will add a little printer ay'con 'n th' top bar. It will switch th' plank t' print preview when clicked. Ye can then send this plank t' th' printer by us'n yer browser’s usual print functionality.\nAvast Th' result'n URL will not be configured ugly 'n terms o' Hugo’s URL handl'n even if you’ve set uglyURLs=true 'n yer config.toml. This be due t' th' fact that fer one mime type only one suffix can be configured.\nNevertheless, if you’re unhappy wit' th' result'n URLs ye can manually redefine outputFormats.PRINT 'n yer own config.toml t' yer lik'n.\nMathJax Th' MathJax configurat'n parameters can also be set on a specific plank. In this case, th' global parameter would be overwritten by th' local one. See Math fer additional documentat'n.\nExample MathJax be globally disabled. By default it won’t be boarded by any plank.\nOn plank “Physics” ye coded some JavaScript fer a dynamic formulae. Ye can set th' MathJax parameters locally t' board mathJax on this plank.\nYe also can dis'ble MathJax fer specific planks while globally enabled.\nMerrrmaid Th' Merrrmaid configurat'n parameters can also be set on a specific plank. In this case, th' global parameter would be overwritten by th' local one. See Merrrmaid fer additional documentat'n.\nExample Merrrmaid be globally disabled. By default it won’t be boarded by any plank.\nOn plank “Architecture” ye coded some JavaScript t' dynamically generate a class diagram. Ye can set th' Merrrmaid parameters locally t' board mermaid on this plank.\nYe also can dis'ble Merrrmaid fer specific planks while globally enabled.\nHome Button Configurat'n If th' disableLandingPageButton opt'n be set t' false, a Home button will appear on th' left menu. It be an alternative fer click'n on th' logo. T' edit th' appearance, ye will have t' configure two parameters fer th' defined languages:\n[Languages] [Languages.en] ... landingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Home\" ... [Languages.pir] ... landingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Arrr! Homme\" ... If those params be not configured fer a specific language, they will get their default values:\nlandingPageName = \"\u003ci class='fas fa-home'\u003e\u003c/i\u003e Home\" Th' home button be go'n t' look like this:\n",
     "description": "",
     "tags": null,
     "title": "Configurrrat'n",
@@ -142,7 +142,7 @@ var relearn_search_index = [
     "uri": "/pir/shortcodes/children/children-2/index.html"
   },
   {
-    "content": " Arrr! Pirrrates Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.\nTh' Relearrrn theme has been built t' be as configur'ble as poss'ble by defin'n multiple partials\nIn themes/hugo-theme-relearn/layouts/partials/, ye will find all th' partials defined fer this theme. If ye need t' overwrite someth'n, don’t change th' code directly. Instead follow this plank. You’d create a new partial 'n th' layouts/partials folder o' yer local project. This partial will have th' priority.\nThis theme defines th' follow'n partials :\nheader.html: th' header o' th' plank. See output-formats footer.html: th' footer o' th' plank. See output-formats body.html: th' body o' th' plank. Th' body may contain o' one or many articles. See output-formats article.html: th' output fer a single article, can contain elements around yer rrrambl'n. See output-formats menu.html: left menu. Not meant t' be overwritten search.html: search box. Not meant t' be overwritten custom-header.html: custom headers 'n plank. Meant t' be overwritten when add'n CSS imports. Don’t forget t' include style HTML tag directive 'n yer file. custom-footer.html: custom footer 'n plank. Meant t' be overwritten when add'n JavaScript. Don’t forget t' include javascript HTML tag directive 'n yer file. favicon.html: th' favicon heading-pre.html: side-wide configurat'n t' prepend t' planks title head'ns. If ye override this, it be yer responsibility t' take th' page’s headingPre sett'n into account. heading-post.html: side-wide configurat'n t' append t' planks title head'ns. If ye override this, it be yer responsibility t' take th' page’s headingPost sett'n into account. logo.html: th' logo, on top left hand corner meta.html: HTML meta tags, if ye want t' change default behavior menu-pre.html: side-wide configurat'n t' prepend t' menu items. If ye override this, it be yer responsibility t' take th' page’s menuPre sett'n into account. menu-post.html: side-wide configurat'n t' append t' menu items. If ye override this, it be yer responsibility t' take th' page’s menuPost sett'n into account. menu-footer.html: footer o' th' the left menu toc.html: t'ble o' contents rrrambl'n.html: th' rrrambl'n plank itself. This can be overridden if ye want t' display page’s meta data above or below th' rrrambl'n. content-footer: footer below th' rrrambl'n, has a default implementat'n but ye can overwrite it if ye don’t like it. Change th' logo Create a new file 'n layouts/partials/ named logo.html. Then write any HTML ye want. Ye could use an img HTML tag an' reference an image created under th' static folder, or ye could paste a SVG definit'n!\nAvast Th' size o' th' logo will adapt automatically\nChange th' favicon If yer favicon be a SVG, PNG or ICO, just drop off yer image 'n yer local static/images/ folder an' name it favicon.svg, favicon.png or favicon.ico respectively.\nIf no favicon file be found, th' theme will lookup th' alternative filename logo 'n th' same locat'n an' will repeat th' search fer th' list o' supported file types.\nIf ye need t' change this default behavior, create a new file 'n layouts/partials/ named favicon.html. Then write someth'n like this:\n\u003clink rel=\"icon\" href=\"/images/favicon.bmp\" type=\"image/bmp\"\u003e Change th' colors Th' Relearrrn theme lets ye choose between some predefined color variants 'n light or dark mode, but feel free t' add one yourself!\nYe can preview th' shipped variants by chang'n them 'n th' variant selector at th' bottom o' th' menu.\nSingle variant Set th' themeVariant value wit' th' name o' yer theme file. That’s it!\n[params] themeVariant = \"relearn-light\" In th' above example yer theme file has t' be named theme-relearn-light.css\nMultiple variants Ye can also set multiple variants. In this case, th' first variant be th' default chosen on first view an' a variant switch will be shown 'n th' menu footer.\n[params] # Change default color scheme wit' a variant one. themeVariant = [ \"relearn-light\", \"relearn-dark\" ] Smarrrt Arrrse If ye want t' switch th' rules highlight'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n accord'n t' Hugo’s documentat'n, an' @import this stylesheet 'n yer color variant stylesheet. For an example, take a look into theme-relearn-light.css an' config.toml o' th' exampleSite.\nRoll yer own If ye be not happy wit' th' shipped variants ye can either copy an' rename one o' th' shipped files from themes/hugo-theme-relearn/static/css t' static/css, edit them afterwards t' yer lik'n 'n a text editor an' configure th' themeVariant parameter 'n yer config.toml or just use th' interactive variant generator.\nOutput formats Certain parts o' th' theme can be changed fer support o' yer own output formats. Eg. if ye define a new output format PLAINTEXT 'n yer config.toml, ye can add a file layouts/partials/header.plaintext.html t' change th' way, th' plank header should look like fer that output format.\n",
+    "content": " Arrr! Pirrrates Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.\nTh' Relearrrn theme has been built t' be as configur'ble as poss'ble by defin'n multiple partials\nIn themes/hugo-theme-relearn/layouts/partials/, ye will find all th' partials defined fer this theme. If ye need t' overwrite someth'n, don’t change th' code directly. Instead follow this plank. You’d create a new partial 'n th' layouts/partials folder o' yer local project. This partial will have th' priority.\nThis theme defines th' follow'n partials :\nheader.html: th' header o' th' plank. See output-formats footer.html: th' footer o' th' plank. See output-formats body.html: th' body o' th' plank. Th' body may contain o' one or many articles. See output-formats article.html: th' output fer a single article, can contain elements around yer rrrambl'n. See output-formats menu.html: left menu. Not meant t' be overwritten search.html: search box. Not meant t' be overwritten custom-header.html: custom headers 'n plank. Meant t' be overwritten when add'n CSS imports. Don’t forget t' include style HTML tag directive 'n yer file. custom-footer.html: custom footer 'n plank. Meant t' be overwritten when add'n JavaScript. Don’t forget t' include javascript HTML tag directive 'n yer file. favicon.html: th' favicon heading-pre.html: side-wide configurat'n t' prepend t' planks title head'ns. If ye override this, it be yer responsibility t' take th' page’s headingPre sett'n into account. heading-post.html: side-wide configurat'n t' append t' planks title head'ns. If ye override this, it be yer responsibility t' take th' page’s headingPost sett'n into account. logo.html: th' logo, on top left hand corner meta.html: HTML meta tags, if ye want t' change default behavior menu-pre.html: side-wide configurat'n t' prepend t' menu items. If ye override this, it be yer responsibility t' take th' page’s menuPre sett'n into account. menu-post.html: side-wide configurat'n t' append t' menu items. If ye override this, it be yer responsibility t' take th' page’s menuPost sett'n into account. menu-footer.html: footer o' th' the left menu toc.html: t'ble o' contents rrrambl'n.html: th' rrrambl'n plank itself. This can be overridden if ye want t' display page’s meta data above or below th' rrrambl'n. content-footer: footer below th' rrrambl'n, has a default implementat'n but ye can overwrite it if ye don’t like it. Change th' logo Create a new file 'n layouts/partials/ named logo.html. Then write any HTML ye want. Ye could use an img HTML tag an' reference an image created under th' static folder, or ye could paste a SVG definit'n!\nAvast Th' size o' th' logo will adapt automatically\nChange th' favicon If yer favicon be a SVG, PNG or ICO, just drop off yer image 'n yer local static/images/ folder an' name it favicon.svg, favicon.png or favicon.ico respectively.\nIf no favicon file be found, th' theme will lookup th' alternative filename logo 'n th' same locat'n an' will repeat th' search fer th' list o' supported file types.\nIf ye need t' change this default behavior, create a new file 'n layouts/partials/ named favicon.html. Then write someth'n like this:\n\u003clink rel=\"icon\" href=\"/images/favicon.bmp\" type=\"image/bmp\"\u003e Change th' colors Th' Relearrrn theme lets ye choose between some predefined color variants 'n light or dark mode, but feel free t' add one yourself!\nYe can preview th' shipped variants by chang'n them 'n th' variant selector at th' bottom o' th' menu.\nSingle variant Set th' themeVariant value wit' th' name o' yer theme file. That’s it!\n[params] themeVariant = \"relearn-light\" In th' above example yer theme file has t' be named theme-relearn-light.css\nMultiple variants Ye can also set multiple variants. In this case, th' first variant be th' default chosen on first view an' a variant switch will be shown 'n th' menu footer.\n[params] # Change default color scheme wit' a variant one. themeVariant = [ \"relearn-light\", \"relearn-dark\" ] Smarrrt Arrrse If ye want t' switch th' rules highlight'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n accord'n t' Hugo’s documentat'n, an' @import this stylesheet 'n yer color variant stylesheet. For an example, take a look into theme-relearn-light.css an' config.toml o' th' exampleSite.\nAdjust t' OS Sett'ns Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' themeVariant t' auto. That’s it.\nIf you’ve set multiple variants, ye can drop auto at any posit'n, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.\n[params] themeVariant = [ \"auto\", \"red\" ] If ye don’t configure anyth'n else, th' theme will use relearn-light fer light mode an' relearn-dark fer dark mode.\nIf ye don’t like that, ye can set themeVariantAuto. Th' first element be th' variant fer light mode, th' second fer dark mode\n[params] themeVariantAuto = [ \"learn\", \"neon\" ] Roll yer own If ye be not happy wit' th' shipped variants ye can either copy an' rename one o' th' shipped files from themes/hugo-theme-relearn/static/css t' static/css, edit them afterwards t' yer lik'n 'n a text editor an' configure th' themeVariant parameter 'n yer config.toml or just use th' interactive variant generator.\nOutput formats Certain parts o' th' theme can be changed fer support o' yer own output formats. Eg. if ye define a new output format PLAINTEXT 'n yer config.toml, ye can add a file layouts/partials/header.plaintext.html t' change th' way, th' plank header should look like fer that output format.\n",
     "description": "",
     "tags": null,
     "title": "Customizat'n",
diff --git a/pir/more/credits/index.html b/pir/more/credits/index.html
index 54fa854c51..76fbed48e5 100644
--- a/pir/more/credits/index.html
+++ b/pir/more/credits/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/more/credits/index.print.html" rel="alternate" type="text/html" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -228,12 +228,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -313,7 +313,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -349,12 +350,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/more/credits/index.print.html b/pir/more/credits/index.print.html
index c9ee4b76e2..8a98d5269b 100644
--- a/pir/more/credits/index.print.html
+++ b/pir/more/credits/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/credits/index.html" rel="canonical" type="text/html" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/more/credits/index.xml" rel="alternate" type="application/rss+xml" title="Crrredits :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -141,8 +141,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/more/showcase/index.html b/pir/more/showcase/index.html
index dc6be198eb..a5f4def78b 100644
--- a/pir/more/showcase/index.html
+++ b/pir/more/showcase/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/more/showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/more/showcase/index.print.html" rel="alternate" type="text/html" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -101,28 +101,28 @@
 <h2 id="gobolinux-wikihttpswikigobolinuxorg-by-neonsysorg"><a href="https://wiki.gobolinux.org/" target="_blank">GoboLinux Wiki</a> by NEONsys.org</h2>
 <p>
 		
-<a href="#image-15cbaa4fd15ae67240086690d57e2125" class="lightbox-link">
+<a href="#image-eba0e3722902e9d7a6f7db75f2058637" class="lightbox-link">
 <img src="../../../more/showcase/gobolinux.png?width=60pc&amp;classes=shadow" alt="GoboLinux image" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-15cbaa4fd15ae67240086690d57e2125">
+<a href="javascript:history.back();" class="lightbox" id="image-eba0e3722902e9d7a6f7db75f2058637">
 <img src="../../../more/showcase/gobolinux.png?width=60pc&amp;classes=shadow" alt="GoboLinux image" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="bitshttpsbits-trainingdetraining-by-dr-lutz-gollan"><a href="https://bits-train'n.de/training/" target="_blank">BITS</a> by Dr. Lutz Gollan</h2>
 <p>
 		
-<a href="#image-a1825a31404dc50ac89da6b9f5bb81c6" class="lightbox-link">
+<a href="#image-864362efc587f1bab0826d3d70e5d8e2" class="lightbox-link">
 <img src="../../../more/showcase/bits-train.png?width=60pc&amp;classes=shadow" alt="BITS image" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-a1825a31404dc50ac89da6b9f5bb81c6">
+<a href="javascript:history.back();" class="lightbox" id="image-864362efc587f1bab0826d3d70e5d8e2">
 <img src="../../../more/showcase/bits-train.png?width=60pc&amp;classes=shadow" alt="BITS image" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="pamasol-electricshttpspamasolgithubiode-by-pamasol--swiss-aerosol-solutions"><a href="https://pamasol.github.io/de/" target="_blank">Pamasol Electrics</a> by Pamasol – Swiss Aerosol Solut'ns</h2>
 <p>
 		
-<a href="#image-6e59ce0a698cb07f5a109537403ce55b" class="lightbox-link">
+<a href="#image-fe4d58ca6dddd6f9b737db5bf889b975" class="lightbox-link">
 <img src="../../../more/showcase/pamasol-electrics-portal.png?width=60pc&amp;classes=shadow" alt="Pamasol Electrics" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6e59ce0a698cb07f5a109537403ce55b">
+<a href="javascript:history.back();" class="lightbox" id="image-fe4d58ca6dddd6f9b737db5bf889b975">
 <img src="../../../more/showcase/pamasol-electrics-portal.png?width=60pc&amp;classes=shadow" alt="Pamasol Electrics" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -205,12 +205,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -290,7 +290,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -326,12 +327,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/more/showcase/index.print.html b/pir/more/showcase/index.print.html
index febe6d4326..362cf6a602 100644
--- a/pir/more/showcase/index.print.html
+++ b/pir/more/showcase/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/showcase/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/more/showcase/index.html" rel="canonical" type="text/html" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/more/showcase/index.xml" rel="alternate" type="application/rss+xml" title="Showcase :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -86,28 +86,28 @@
 <h2 id="gobolinux-wikihttpswikigobolinuxorg-by-neonsysorg"><a href="https://wiki.gobolinux.org/" target="_blank">GoboLinux Wiki</a> by NEONsys.org</h2>
 <p>
 		
-<a href="#image-15cbaa4fd15ae67240086690d57e2125" class="lightbox-link">
+<a href="#image-eba0e3722902e9d7a6f7db75f2058637" class="lightbox-link">
 <img src="../../../more/showcase/gobolinux.png?width=60pc&amp;classes=shadow" alt="GoboLinux image" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-15cbaa4fd15ae67240086690d57e2125">
+<a href="javascript:history.back();" class="lightbox" id="image-eba0e3722902e9d7a6f7db75f2058637">
 <img src="../../../more/showcase/gobolinux.png?width=60pc&amp;classes=shadow" alt="GoboLinux image" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="bitshttpsbits-trainingdetraining-by-dr-lutz-gollan"><a href="https://bits-train'n.de/training/" target="_blank">BITS</a> by Dr. Lutz Gollan</h2>
 <p>
 		
-<a href="#image-a1825a31404dc50ac89da6b9f5bb81c6" class="lightbox-link">
+<a href="#image-864362efc587f1bab0826d3d70e5d8e2" class="lightbox-link">
 <img src="../../../more/showcase/bits-train.png?width=60pc&amp;classes=shadow" alt="BITS image" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-a1825a31404dc50ac89da6b9f5bb81c6">
+<a href="javascript:history.back();" class="lightbox" id="image-864362efc587f1bab0826d3d70e5d8e2">
 <img src="../../../more/showcase/bits-train.png?width=60pc&amp;classes=shadow" alt="BITS image" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="pamasol-electricshttpspamasolgithubiode-by-pamasol--swiss-aerosol-solutions"><a href="https://pamasol.github.io/de/" target="_blank">Pamasol Electrics</a> by Pamasol – Swiss Aerosol Solut'ns</h2>
 <p>
 		
-<a href="#image-6e59ce0a698cb07f5a109537403ce55b" class="lightbox-link">
+<a href="#image-fe4d58ca6dddd6f9b737db5bf889b975" class="lightbox-link">
 <img src="../../../more/showcase/pamasol-electrics-portal.png?width=60pc&amp;classes=shadow" alt="Pamasol Electrics" class="shadow" style="height: auto; width: 60pc;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6e59ce0a698cb07f5a109537403ce55b">
+<a href="javascript:history.back();" class="lightbox" id="image-fe4d58ca6dddd6f9b737db5bf889b975">
 <img src="../../../more/showcase/pamasol-electrics-portal.png?width=60pc&amp;classes=shadow" alt="Pamasol Electrics" class="lightbox-image" loading="lazy">
 </a></p>
 
@@ -118,8 +118,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/search.html b/pir/search.html
index 26cb3d286a..15adb54008 100644
--- a/pir/search.html
+++ b/pir/search.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/search.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/search.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/search.html" rel="canonical" type="text/html" title="Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../css/print.css?1675526024" rel="stylesheet" media="print">
-    <script src="../js/url.js?1675526024"></script>
-    <script src="../js/variant.js?1675526024"></script>
+    <link href="../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../css/print.css?1675546464" rel="stylesheet" media="print">
+    <script src="../js/url.js?1675546464"></script>
+    <script src="../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -174,12 +174,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1675526024" defer></script>
-        <script src="../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../js/search.js?1675526024" defer></script>
+        <script src="../js/auto-complete.js?1675546464" defer></script>
+        <script src="../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -259,7 +259,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -295,12 +296,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../js/buttons.js?1675526024"></script>
+          <script async src="../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../js/theme.js?1675526024" defer></script>
+    <script src="../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.html b/pir/shortcodes/attachments/index.html
index 3ad7c03a8b..80817f5ecf 100644
--- a/pir/shortcodes/attachments/index.html
+++ b/pir/shortcodes/attachments/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/attachments/index.print.html" rel="alternate" type="text/html" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -412,12 +412,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -497,7 +497,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -533,12 +534,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.print.html b/pir/shortcodes/attachments/index.print.html
index 9196f3cd87..8500a93349 100644
--- a/pir/shortcodes/attachments/index.print.html
+++ b/pir/shortcodes/attachments/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="canonical" type="text/html" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -325,8 +325,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/badge/index.html b/pir/shortcodes/badge/index.html
index 89affb2c9a..e95d914821 100644
--- a/pir/shortcodes/badge/index.html
+++ b/pir/shortcodes/badge/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/badge/index.print.html" rel="alternate" type="text/html" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -381,12 +381,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -466,7 +466,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -502,12 +503,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/badge/index.print.html b/pir/shortcodes/badge/index.print.html
index fea42083e7..405c102fae 100644
--- a/pir/shortcodes/badge/index.print.html
+++ b/pir/shortcodes/badge/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="canonical" type="text/html" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -294,8 +294,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.html b/pir/shortcodes/button/index.html
index 1e32d08a14..5c7abb0b18 100644
--- a/pir/shortcodes/button/index.html
+++ b/pir/shortcodes/button/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/button/index.print.html" rel="alternate" type="text/html" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -501,12 +501,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -586,7 +586,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -622,12 +623,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.print.html b/pir/shortcodes/button/index.print.html
index 612a42b57d..20fb8f1ec7 100644
--- a/pir/shortcodes/button/index.print.html
+++ b/pir/shortcodes/button/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="canonical" type="text/html" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -414,8 +414,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
index 409c6f54cd..bb37e17822 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -189,12 +189,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../../../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../../../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../../../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../../../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../../../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -278,7 +278,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -314,12 +315,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../../../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../../../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
index 1114b1c9f2..e0c0590b4a 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../../../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../../../../../../js/url.js?1675526024"></script>
-    <script src="../../../../../../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../../../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../../../../../../js/url.js?1675546464"></script>
+    <script src="../../../../../../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -102,8 +102,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../../../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../../../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
index 947ed36ab1..665e83833a 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -194,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -283,7 +283,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -319,12 +320,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
index c4e07a6a26..e5b8b2f369 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1675526024"></script>
-    <script src="../../../../../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1675546464"></script>
+    <script src="../../../../../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -128,8 +128,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
index df8cecf123..30ad97b136 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -193,12 +193,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -280,7 +280,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -316,12 +317,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
index 7844d8de4b..cfe018040b 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1675526024"></script>
-    <script src="../../../../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1675546464"></script>
+    <script src="../../../../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -109,8 +109,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
index 59d5782577..753adb7f7d 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -192,12 +192,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -279,7 +279,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -315,12 +316,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
index 8f53389696..0eebd2d2c3 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1675526024"></script>
-    <script src="../../../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1675546464"></script>
+    <script src="../../../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -135,8 +135,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
index 5dbd516275..808b95dbcd 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html" rel="alternate" type="text/html" title="Plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -188,12 +188,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -273,7 +273,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -309,12 +310,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
index c3d917af03..a49fc7cdc7 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="canonical" type="text/html" title="Plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1-1-2-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1675526024"></script>
-    <script src="../../../../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1675546464"></script>
+    <script src="../../../../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -101,8 +101,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
index f389bff306..679988e671 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html" rel="alternate" type="text/html" title="Plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -188,12 +188,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -273,7 +273,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -309,12 +310,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
index 427e03df20..dc9ab309fe 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="canonical" type="text/html" title="Plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1-1-2-2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1675526024"></script>
-    <script src="../../../../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1675546464"></script>
+    <script src="../../../../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -101,8 +101,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
index 033531de23..338e739211 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1-1-2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html" rel="alternate" type="text/html" title="Plank 1-1-2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -194,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -279,7 +279,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -315,12 +316,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
index b155b98008..5e844c75a0 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="canonical" type="text/html" title="Plank 1-1-2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1-1-2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1675526024"></script>
-    <script src="../../../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1675546464"></script>
+    <script src="../../../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -146,8 +146,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
index 8eca868e67..cd211ea6a5 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html" rel="alternate" type="text/html" title="Plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -187,12 +187,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -272,7 +272,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -308,12 +309,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
index 68aa206199..2298b9b1e2 100644
--- a/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="canonical" type="text/html" title="Plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1-1-3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1675526024"></script>
-    <script src="../../../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1675546464"></script>
+    <script src="../../../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -100,8 +100,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/index.html b/pir/shortcodes/children/children-1/children-1-1/index.html
index f9be5a5e05..8c3679388e 100644
--- a/pir/shortcodes/children/children-1/children-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.print.html" rel="alternate" type="text/html" title="Plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -194,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -279,7 +279,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -315,12 +316,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/children-1-1/index.print.html b/pir/shortcodes/children/children-1/children-1-1/index.print.html
index ac2f28b5f6..e0775212d7 100644
--- a/pir/shortcodes/children/children-1/children-1-1/index.print.html
+++ b/pir/shortcodes/children/children-1/children-1-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="canonical" type="text/html" title="Plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../../js/url.js?1675526024"></script>
-    <script src="../../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../../js/url.js?1675546464"></script>
+    <script src="../../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -192,8 +192,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/index.html b/pir/shortcodes/children/children-1/index.html
index 3a76e69ec9..864ca70713 100644
--- a/pir/shortcodes/children/children-1/index.html
+++ b/pir/shortcodes/children/children-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-1/index.print.html" rel="alternate" type="text/html" title="Plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -191,12 +191,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -276,7 +276,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -312,12 +313,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/index.print.html b/pir/shortcodes/children/children-1/index.print.html
index 140804b8d5..38c60411c1 100644
--- a/pir/shortcodes/children/children-1/index.print.html
+++ b/pir/shortcodes/children/children-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="canonical" type="text/html" title="Plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="Plank 1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -218,8 +218,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-2/index.html b/pir/shortcodes/children/children-2/index.html
index 6001217634..d96cf6cbbe 100644
--- a/pir/shortcodes/children/children-2/index.html
+++ b/pir/shortcodes/children/children-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="Plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-2/index.print.html" rel="alternate" type="text/html" title="Plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -186,12 +186,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -271,7 +271,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -307,12 +308,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-2/index.print.html b/pir/shortcodes/children/children-2/index.print.html
index 6bace9aaf5..8c8a2dd34b 100644
--- a/pir/shortcodes/children/children-2/index.print.html
+++ b/pir/shortcodes/children/children-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="canonical" type="text/html" title="Plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="Plank 2 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -99,8 +99,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/index.html b/pir/shortcodes/children/children-3/index.html
index c185609218..ba5fc69c53 100644
--- a/pir/shortcodes/children/children-3/index.html
+++ b/pir/shortcodes/children/children-3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="Plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-3/index.print.html" rel="alternate" type="text/html" title="Plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -191,12 +191,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -276,7 +276,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -312,12 +313,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/index.print.html b/pir/shortcodes/children/children-3/index.print.html
index 163e87d32d..33a8082beb 100644
--- a/pir/shortcodes/children/children-3/index.print.html
+++ b/pir/shortcodes/children/children-3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="canonical" type="text/html" title="Plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="Plank 3 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -125,8 +125,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/test3/index.html b/pir/shortcodes/children/children-3/test3/index.html
index 2b71f80306..0342f22aae 100644
--- a/pir/shortcodes/children/children-3/test3/index.html
+++ b/pir/shortcodes/children/children-3/test3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../pir/shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="Plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-3/test3/index.print.html" rel="alternate" type="text/html" title="Plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -186,12 +186,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -271,7 +271,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -307,12 +308,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/test3/index.print.html b/pir/shortcodes/children/children-3/test3/index.print.html
index a3a7b7c524..e6e1ef9a18 100644
--- a/pir/shortcodes/children/children-3/test3/index.print.html
+++ b/pir/shortcodes/children/children-3/test3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="canonical" type="text/html" title="Plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../../pir/shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="Plank 3-1 :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../../js/url.js?1675526024"></script>
-    <script src="../../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../../js/url.js?1675546464"></script>
+    <script src="../../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -99,8 +99,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-4/index.html b/pir/shortcodes/children/children-4/index.html
index 14ddef1c21..a95fc114d7 100644
--- a/pir/shortcodes/children/children-4/index.html
+++ b/pir/shortcodes/children/children-4/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -184,12 +184,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -270,7 +270,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -306,12 +307,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-4/index.print.html b/pir/shortcodes/children/children-4/index.print.html
index f881334627..d080e61329 100644
--- a/pir/shortcodes/children/children-4/index.print.html
+++ b/pir/shortcodes/children/children-4/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -97,8 +97,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.html b/pir/shortcodes/children/index.html
index d475adfbba..2c69e81987 100644
--- a/pir/shortcodes/children/index.html
+++ b/pir/shortcodes/children/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/children/index.print.html" rel="alternate" type="text/html" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -369,12 +369,12 @@ So its rrrambl'n be used as descript'n.</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -454,7 +454,8 @@ So its rrrambl'n be used as descript'n.</p>
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -490,12 +491,12 @@ So its rrrambl'n be used as descript'n.</p>
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.print.html b/pir/shortcodes/children/index.print.html
index 60e502550f..e296ad3f9d 100644
--- a/pir/shortcodes/children/index.print.html
+++ b/pir/shortcodes/children/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="canonical" type="text/html" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -505,8 +505,8 @@ So its rrrambl'n be used as descript'n.</p>
           </section>        </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.html b/pir/shortcodes/children/test/index.html
index eed089f75b..e23b9246ea 100644
--- a/pir/shortcodes/children/test/index.html
+++ b/pir/shortcodes/children/test/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../pir/shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="Plank X :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/test/index.print.html" rel="alternate" type="text/html" title="Plank X :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -181,12 +181,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -266,7 +266,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -302,12 +303,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.print.html b/pir/shortcodes/children/test/index.print.html
index 8178234a54..575e5c9536 100644
--- a/pir/shortcodes/children/test/index.print.html
+++ b/pir/shortcodes/children/test/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="canonical" type="text/html" title="Plank X :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../../pir/shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="Plank X :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -94,8 +94,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.html b/pir/shortcodes/expand/index.html
index ac26399d30..253678e9a2 100644
--- a/pir/shortcodes/expand/index.html
+++ b/pir/shortcodes/expand/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/expand/index.print.html" rel="alternate" type="text/html" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -102,14 +102,14 @@
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-0fffcf6a46d9ba1d94850cd511901d74" aria-controls="expandcontent-0fffcf6a46d9ba1d94850cd511901d74" >
-    <label class="expand-label" for="expand-0fffcf6a46d9ba1d94850cd511901d74" >
+    <input type="checkbox" id="expand-7a2e3346e1d4f60e18134875c9369a4e" aria-controls="expandcontent-7a2e3346e1d4f60e18134875c9369a4e" >
+    <label class="expand-label" for="expand-7a2e3346e1d4f60e18134875c9369a4e" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-0fffcf6a46d9ba1d94850cd511901d74" class="expand-content">
+    <div id="expandcontent-7a2e3346e1d4f60e18134875c9369a4e" class="expand-content">
 Thank ye!
     </div>
 </div>
@@ -208,14 +208,14 @@ Thank ye!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-042fcf6f90331511fdee1eb44ad957f1" aria-controls="expandcontent-042fcf6f90331511fdee1eb44ad957f1" >
-    <label class="expand-label" for="expand-042fcf6f90331511fdee1eb44ad957f1" >
+    <input type="checkbox" id="expand-f762fa6a6b07ce89c9d08f713adbaaa9" aria-controls="expandcontent-f762fa6a6b07ce89c9d08f713adbaaa9" >
+    <label class="expand-label" for="expand-f762fa6a6b07ce89c9d08f713adbaaa9" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-042fcf6f90331511fdee1eb44ad957f1" class="expand-content">
+    <div id="expandcontent-f762fa6a6b07ce89c9d08f713adbaaa9" class="expand-content">
 Yes, ye did it!
     </div>
 </div>
@@ -223,14 +223,14 @@ Yes, ye did it!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-ce6346250f449539d138d57f393142d9" aria-controls="expandcontent-ce6346250f449539d138d57f393142d9"  checked>
-    <label class="expand-label" for="expand-ce6346250f449539d138d57f393142d9" >
+    <input type="checkbox" id="expand-bd08e15f1c1c85ae3b299c310fd973aa" aria-controls="expandcontent-bd08e15f1c1c85ae3b299c310fd973aa"  checked>
+    <label class="expand-label" for="expand-bd08e15f1c1c85ae3b299c310fd973aa" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-ce6346250f449539d138d57f393142d9" class="expand-content">
+    <div id="expandcontent-bd08e15f1c1c85ae3b299c310fd973aa" class="expand-content">
 No need t' press ye!
     </div>
 </div>
@@ -252,14 +252,14 @@ No need t' press ye!
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-8ded371bf3bcefc2e77951846daaaad7" aria-controls="expandcontent-8ded371bf3bcefc2e77951846daaaad7" >
-    <label class="expand-label" for="expand-8ded371bf3bcefc2e77951846daaaad7" >
+    <input type="checkbox" id="expand-d7e3b5d0d37635ea19e34eb973643d09" aria-controls="expandcontent-d7e3b5d0d37635ea19e34eb973643d09" >
+    <label class="expand-label" for="expand-d7e3b5d0d37635ea19e34eb973643d09" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Show me almost endless possibilities
     </label>
-    <div id="expandcontent-8ded371bf3bcefc2e77951846daaaad7" class="expand-content">
+    <div id="expandcontent-d7e3b5d0d37635ea19e34eb973643d09" class="expand-content">
 <p>Ye can add standard markdown rules:</p>
 <ul>
 <li>multiple paragraphs</li>
@@ -355,12 +355,12 @@ No need t' press ye!
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -440,7 +440,8 @@ No need t' press ye!
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -476,12 +477,12 @@ No need t' press ye!
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.print.html b/pir/shortcodes/expand/index.print.html
index aad6929f9c..f00a8c318f 100644
--- a/pir/shortcodes/expand/index.print.html
+++ b/pir/shortcodes/expand/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="canonical" type="text/html" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -87,14 +87,14 @@
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-0fffcf6a46d9ba1d94850cd511901d74" aria-controls="expandcontent-0fffcf6a46d9ba1d94850cd511901d74" >
-    <label class="expand-label" for="expand-0fffcf6a46d9ba1d94850cd511901d74" >
+    <input type="checkbox" id="expand-7a2e3346e1d4f60e18134875c9369a4e" aria-controls="expandcontent-7a2e3346e1d4f60e18134875c9369a4e" >
+    <label class="expand-label" for="expand-7a2e3346e1d4f60e18134875c9369a4e" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-0fffcf6a46d9ba1d94850cd511901d74" class="expand-content">
+    <div id="expandcontent-7a2e3346e1d4f60e18134875c9369a4e" class="expand-content">
 Thank ye!
     </div>
 </div>
@@ -193,14 +193,14 @@ Thank ye!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-042fcf6f90331511fdee1eb44ad957f1" aria-controls="expandcontent-042fcf6f90331511fdee1eb44ad957f1" >
-    <label class="expand-label" for="expand-042fcf6f90331511fdee1eb44ad957f1" >
+    <input type="checkbox" id="expand-f762fa6a6b07ce89c9d08f713adbaaa9" aria-controls="expandcontent-f762fa6a6b07ce89c9d08f713adbaaa9" >
+    <label class="expand-label" for="expand-f762fa6a6b07ce89c9d08f713adbaaa9" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-042fcf6f90331511fdee1eb44ad957f1" class="expand-content">
+    <div id="expandcontent-f762fa6a6b07ce89c9d08f713adbaaa9" class="expand-content">
 Yes, ye did it!
     </div>
 </div>
@@ -208,14 +208,14 @@ Yes, ye did it!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-ce6346250f449539d138d57f393142d9" aria-controls="expandcontent-ce6346250f449539d138d57f393142d9"  checked>
-    <label class="expand-label" for="expand-ce6346250f449539d138d57f393142d9" >
+    <input type="checkbox" id="expand-bd08e15f1c1c85ae3b299c310fd973aa" aria-controls="expandcontent-bd08e15f1c1c85ae3b299c310fd973aa"  checked>
+    <label class="expand-label" for="expand-bd08e15f1c1c85ae3b299c310fd973aa" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-ce6346250f449539d138d57f393142d9" class="expand-content">
+    <div id="expandcontent-bd08e15f1c1c85ae3b299c310fd973aa" class="expand-content">
 No need t' press ye!
     </div>
 </div>
@@ -237,14 +237,14 @@ No need t' press ye!
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-8ded371bf3bcefc2e77951846daaaad7" aria-controls="expandcontent-8ded371bf3bcefc2e77951846daaaad7" >
-    <label class="expand-label" for="expand-8ded371bf3bcefc2e77951846daaaad7" >
+    <input type="checkbox" id="expand-d7e3b5d0d37635ea19e34eb973643d09" aria-controls="expandcontent-d7e3b5d0d37635ea19e34eb973643d09" >
+    <label class="expand-label" for="expand-d7e3b5d0d37635ea19e34eb973643d09" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Show me almost endless possibilities
     </label>
-    <div id="expandcontent-8ded371bf3bcefc2e77951846daaaad7" class="expand-content">
+    <div id="expandcontent-d7e3b5d0d37635ea19e34eb973643d09" class="expand-content">
 <p>Ye can add standard markdown rules:</p>
 <ul>
 <li>multiple paragraphs</li>
@@ -268,8 +268,8 @@ No need t' press ye!
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/icon/index.html b/pir/shortcodes/icon/index.html
index cd9395bad8..da0ac45390 100644
--- a/pir/shortcodes/icon/index.html
+++ b/pir/shortcodes/icon/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/icon/index.print.html" rel="alternate" type="text/html" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -289,12 +289,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -374,7 +374,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -410,12 +411,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/icon/index.print.html b/pir/shortcodes/icon/index.print.html
index 1db9e4f7d4..d456f6c873 100644
--- a/pir/shortcodes/icon/index.print.html
+++ b/pir/shortcodes/icon/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="canonical" type="text/html" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -202,8 +202,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.html b/pir/shortcodes/include/index.html
index 03f504b1d5..b0bc13886f 100644
--- a/pir/shortcodes/include/index.html
+++ b/pir/shortcodes/include/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/include/index.print.html" rel="alternate" type="text/html" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -272,12 +272,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -357,7 +357,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -393,12 +394,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.print.html b/pir/shortcodes/include/index.print.html
index 43544ef2b5..1308887e2d 100644
--- a/pir/shortcodes/include/index.print.html
+++ b/pir/shortcodes/include/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="canonical" type="text/html" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -185,8 +185,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.html b/pir/shortcodes/index.html
index 9a689ddefe..e214eb3e92 100644
--- a/pir/shortcodes/index.html
+++ b/pir/shortcodes/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/shortcodes/index.print.html" rel="alternate" type="text/html" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -200,12 +200,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../js/search.js?1675526023" defer></script>
+        <script src="../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -285,7 +285,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -321,12 +322,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526023"></script>
+          <script async src="../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../js/theme.js?1675526023" defer></script>
+    <script src="../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.print.html b/pir/shortcodes/index.print.html
index 94dc7d0d9e..04abd2a9cd 100644
--- a/pir/shortcodes/index.print.html
+++ b/pir/shortcodes/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="canonical" type="text/html" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../pir/shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shorrrtcodes :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../js/url.js?1675526024"></script>
-    <script src="../../js/variant.js?1675526024"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../js/url.js?1675546464"></script>
+    <script src="../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -1365,14 +1365,14 @@ So its rrrambl'n be used as descript'n.</p>
 <p>Th' <code>expand</code> shortcode displays an expandable/collaps'ble section o' text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-0fffcf6a46d9ba1d94850cd511901d74" aria-controls="expandcontent-0fffcf6a46d9ba1d94850cd511901d74" >
-    <label class="expand-label" for="expand-0fffcf6a46d9ba1d94850cd511901d74" >
+    <input type="checkbox" id="expand-7a2e3346e1d4f60e18134875c9369a4e" aria-controls="expandcontent-7a2e3346e1d4f60e18134875c9369a4e" >
+    <label class="expand-label" for="expand-7a2e3346e1d4f60e18134875c9369a4e" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-0fffcf6a46d9ba1d94850cd511901d74" class="expand-content">
+    <div id="expandcontent-7a2e3346e1d4f60e18134875c9369a4e" class="expand-content">
 Thank ye!
     </div>
 </div>
@@ -1471,14 +1471,14 @@ Thank ye!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">ye</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-042fcf6f90331511fdee1eb44ad957f1" aria-controls="expandcontent-042fcf6f90331511fdee1eb44ad957f1" >
-    <label class="expand-label" for="expand-042fcf6f90331511fdee1eb44ad957f1" >
+    <input type="checkbox" id="expand-f762fa6a6b07ce89c9d08f713adbaaa9" aria-controls="expandcontent-f762fa6a6b07ce89c9d08f713adbaaa9" >
+    <label class="expand-label" for="expand-f762fa6a6b07ce89c9d08f713adbaaa9" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-042fcf6f90331511fdee1eb44ad957f1" class="expand-content">
+    <div id="expandcontent-f762fa6a6b07ce89c9d08f713adbaaa9" class="expand-content">
 Yes, ye did it!
     </div>
 </div>
@@ -1486,14 +1486,14 @@ Yes, ye did it!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-ce6346250f449539d138d57f393142d9" aria-controls="expandcontent-ce6346250f449539d138d57f393142d9"  checked>
-    <label class="expand-label" for="expand-ce6346250f449539d138d57f393142d9" >
+    <input type="checkbox" id="expand-bd08e15f1c1c85ae3b299c310fd973aa" aria-controls="expandcontent-bd08e15f1c1c85ae3b299c310fd973aa"  checked>
+    <label class="expand-label" for="expand-bd08e15f1c1c85ae3b299c310fd973aa" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-ce6346250f449539d138d57f393142d9" class="expand-content">
+    <div id="expandcontent-bd08e15f1c1c85ae3b299c310fd973aa" class="expand-content">
 No need t' press ye!
     </div>
 </div>
@@ -1515,14 +1515,14 @@ No need t' press ye!
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-8ded371bf3bcefc2e77951846daaaad7" aria-controls="expandcontent-8ded371bf3bcefc2e77951846daaaad7" >
-    <label class="expand-label" for="expand-8ded371bf3bcefc2e77951846daaaad7" >
+    <input type="checkbox" id="expand-d7e3b5d0d37635ea19e34eb973643d09" aria-controls="expandcontent-d7e3b5d0d37635ea19e34eb973643d09" >
+    <label class="expand-label" for="expand-d7e3b5d0d37635ea19e34eb973643d09" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Show me almost endless possibilities
     </label>
-    <div id="expandcontent-8ded371bf3bcefc2e77951846daaaad7" class="expand-content">
+    <div id="expandcontent-d7e3b5d0d37635ea19e34eb973643d09" class="expand-content">
 <p>Ye can add standard markdown rules:</p>
 <ul>
 <li>multiple paragraphs</li>
@@ -3466,8 +3466,8 @@ mindmap
           </section>        </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../js/theme.js?1675526024" defer></script>
+    <script src="../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/math/index.html b/pir/shortcodes/math/index.html
index 8e77c18095..d36879dc76 100644
--- a/pir/shortcodes/math/index.html
+++ b/pir/shortcodes/math/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/math/index.print.html" rel="alternate" type="text/html" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -332,12 +332,12 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../../js/search.js?1675526022" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -417,7 +417,8 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -453,12 +454,12 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526022"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/math/index.print.html b/pir/shortcodes/math/index.print.html
index 844b879c75..0d8ecca389 100644
--- a/pir/shortcodes/math/index.print.html
+++ b/pir/shortcodes/math/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="canonical" type="text/html" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -245,8 +245,8 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.html b/pir/shortcodes/mermaid/index.html
index f66a9d8fe8..f615546fa5 100644
--- a/pir/shortcodes/mermaid/index.html
+++ b/pir/shortcodes/mermaid/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/mermaid/index.print.html" rel="alternate" type="text/html" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -726,12 +726,12 @@ mindmap
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -811,7 +811,8 @@ mindmap
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -847,12 +848,12 @@ mindmap
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.print.html b/pir/shortcodes/mermaid/index.print.html
index d7db71a803..0a729a4d60 100644
--- a/pir/shortcodes/mermaid/index.print.html
+++ b/pir/shortcodes/mermaid/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="canonical" type="text/html" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Merrrmaid :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -639,8 +639,8 @@ mindmap
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.html b/pir/shortcodes/notice/index.html
index 81b74e75ac..aca9a75d4d 100644
--- a/pir/shortcodes/notice/index.html
+++ b/pir/shortcodes/notice/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/notice/index.print.html" rel="alternate" type="text/html" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -505,12 +505,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -590,7 +590,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -626,12 +627,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.print.html b/pir/shortcodes/notice/index.print.html
index 9d02f204b7..4b344b61c4 100644
--- a/pir/shortcodes/notice/index.print.html
+++ b/pir/shortcodes/notice/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="canonical" type="text/html" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -418,8 +418,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.html b/pir/shortcodes/siteparam/index.html
index 6d95bac5a5..9b76521675 100644
--- a/pir/shortcodes/siteparam/index.html
+++ b/pir/shortcodes/siteparam/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="Ship param :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/siteparam/index.print.html" rel="alternate" type="text/html" title="Ship param :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -254,12 +254,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -339,7 +339,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -375,12 +376,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.print.html b/pir/shortcodes/siteparam/index.print.html
index d4fad59884..b58cb56dcc 100644
--- a/pir/shortcodes/siteparam/index.print.html
+++ b/pir/shortcodes/siteparam/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="canonical" type="text/html" title="Ship param :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="Ship param :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,8 +167,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/swagger/index.html b/pir/shortcodes/swagger/index.html
index 54dfbf44a3..da8c7af8c4 100644
--- a/pir/shortcodes/swagger/index.html
+++ b/pir/shortcodes/swagger/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/swagger/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/swagger/index.xml" rel="alternate" type="application/rss+xml" title="Swaggerrr :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/swagger/index.print.html" rel="alternate" type="text/html" title="Swaggerrr :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -276,12 +276,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -361,7 +361,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -397,12 +398,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/swagger/index.print.html b/pir/shortcodes/swagger/index.print.html
index f212bdf53f..470d241597 100644
--- a/pir/shortcodes/swagger/index.print.html
+++ b/pir/shortcodes/swagger/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/swagger/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/swagger/index.html" rel="canonical" type="text/html" title="Swaggerrr :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/swagger/index.xml" rel="alternate" type="application/rss+xml" title="Swaggerrr :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -189,8 +189,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.html b/pir/shortcodes/tabs/index.html
index 2f46f14c9b..88eb0a6875 100644
--- a/pir/shortcodes/tabs/index.html
+++ b/pir/shortcodes/tabs/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/tabs/index.print.html" rel="alternate" type="text/html" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -561,12 +561,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -646,7 +646,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -682,12 +683,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.print.html b/pir/shortcodes/tabs/index.print.html
index cecc33581f..cc77755ca0 100644
--- a/pir/shortcodes/tabs/index.print.html
+++ b/pir/shortcodes/tabs/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="canonical" type="text/html" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
     <link href="../../../pir/shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -474,8 +474,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tags/children/index.html b/pir/tags/children/index.html
index 353494a32d..0f49df7fca 100644
--- a/pir/tags/children/index.html
+++ b/pir/tags/children/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/children/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/children/index.xml" rel="alternate" type="application/rss+xml" title="children :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -173,12 +173,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../../../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -258,7 +258,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -294,12 +295,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tags/documentatn/index.html b/pir/tags/documentatn/index.html
index b4cbe2d329..4da51cf122 100644
--- a/pir/tags/documentatn/index.html
+++ b/pir/tags/documentatn/index.html
@@ -9,20 +9,20 @@
     <meta name="author" content="Sören Weber">
     <title>documentat&#39;n :: Cap&#39;n Hugo Relearrrn Theme</title>
     <link href="../../../pir/tags/documentatn/index.xml" rel="alternate" type="application/rss+xml" title="documentat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -157,12 +157,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../../../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -241,7 +241,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -277,12 +278,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tags/hidden/index.html b/pir/tags/hidden/index.html
index 31b7c51f7a..b444ced1c6 100644
--- a/pir/tags/hidden/index.html
+++ b/pir/tags/hidden/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/hidden/index.xml" rel="alternate" type="application/rss+xml" title="hidden :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -164,12 +164,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../../../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -249,7 +249,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -285,12 +286,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tags/index.html b/pir/tags/index.html
index e8cff7d1cb..09d50ec6d8 100644
--- a/pir/tags/index.html
+++ b/pir/tags/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/index.html" rel="alternate" hreflang="pir">
     <link href="../../pir/tags/index.xml" rel="alternate" type="application/rss+xml" title="Tags :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -163,12 +163,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../js/search.js?1675526024" defer></script>
+        <script src="../../js/auto-complete.js?1675546464" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -248,7 +248,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -284,12 +285,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526024"></script>
+          <script async src="../../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../js/theme.js?1675526024" defer></script>
+    <script src="../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tags/non-hidden/index.html b/pir/tags/non-hidden/index.html
index 869d930d5c..c0411b74b1 100644
--- a/pir/tags/non-hidden/index.html
+++ b/pir/tags/non-hidden/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/non-hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/non-hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../../pir/tags/non-hidden/index.xml" rel="alternate" type="application/rss+xml" title="non-hidden :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -168,12 +168,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../../../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -253,7 +253,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -289,12 +290,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tags/tutorrrial/index.html b/pir/tags/tutorrrial/index.html
index 4aa47ae898..60e7bb1656 100644
--- a/pir/tags/tutorrrial/index.html
+++ b/pir/tags/tutorrrial/index.html
@@ -9,20 +9,20 @@
     <meta name="author" content="Sören Weber">
     <title>tutorrrial :: Cap&#39;n Hugo Relearrrn Theme</title>
     <link href="../../../pir/tags/tutorrrial/index.xml" rel="alternate" type="application/rss+xml" title="tutorrrial :: Cap&#39;n Hugo Relearrrn Theme">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -157,12 +157,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../../../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -241,7 +241,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -277,12 +278,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/attach/attach1/index.html b/pir/tests/attach/attach1/index.html
index e1fda72c22..173f496aad 100644
--- a/pir/tests/attach/attach1/index.html
+++ b/pir/tests/attach/attach1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -177,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -282,7 +282,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -318,12 +319,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/tests/attach/attach1/index.print.html b/pir/tests/attach/attach1/index.print.html
index 39b208f7a5..1373ddb36b 100644
--- a/pir/tests/attach/attach1/index.print.html
+++ b/pir/tests/attach/attach1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -90,8 +90,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/attach/attach2/index.html b/pir/tests/attach/attach2/index.html
index b04ad884e5..cba9c8fabc 100644
--- a/pir/tests/attach/attach2/index.html
+++ b/pir/tests/attach/attach2/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach2/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach2/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach2/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -177,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -282,7 +282,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -318,12 +319,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/attach/attach2/index.print.html b/pir/tests/attach/attach2/index.print.html
index be6d30588e..256f87f123 100644
--- a/pir/tests/attach/attach2/index.print.html
+++ b/pir/tests/attach/attach2/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach2/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach2/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach2/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -90,8 +90,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/attach/attach3/index.html b/pir/tests/attach/attach3/index.html
index be5caf7ce0..d5013bfba7 100644
--- a/pir/tests/attach/attach3/index.html
+++ b/pir/tests/attach/attach3/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach3/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach3/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach3/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -177,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -282,7 +282,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -318,12 +319,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/attach/attach3/index.print.html b/pir/tests/attach/attach3/index.print.html
index 4941e2c674..650766c9a7 100644
--- a/pir/tests/attach/attach3/index.print.html
+++ b/pir/tests/attach/attach3/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach3/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach3/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach3/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -90,8 +90,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/attach/index.html b/pir/tests/attach/index.html
index 9621352583..88c3434821 100644
--- a/pir/tests/attach/index.html
+++ b/pir/tests/attach/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -186,12 +186,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/tests/attach/index.print.html b/pir/tests/attach/index.print.html
index 86e4b4d060..e6b1b6b5b5 100644
--- a/pir/tests/attach/index.print.html
+++ b/pir/tests/attach/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -147,8 +147,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/1/index.html b/pir/tests/chapters/1/index.html
index fdd1a5b2da..1f9b548f8a 100644
--- a/pir/tests/chapters/1/index.html
+++ b/pir/tests/chapters/1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/1/index.print.html b/pir/tests/chapters/1/index.print.html
index 6f580307f9..27f18fd32c 100644
--- a/pir/tests/chapters/1/index.print.html
+++ b/pir/tests/chapters/1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/10/index.html b/pir/tests/chapters/10/index.html
index 87a5f3be7a..2b8485152f 100644
--- a/pir/tests/chapters/10/index.html
+++ b/pir/tests/chapters/10/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/10/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/10/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/10/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/10/index.print.html b/pir/tests/chapters/10/index.print.html
index 12d91d56c1..fa030992b0 100644
--- a/pir/tests/chapters/10/index.print.html
+++ b/pir/tests/chapters/10/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/10/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/10/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/10/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/2/index.html b/pir/tests/chapters/2/index.html
index 8250da81dc..e651fad4dd 100644
--- a/pir/tests/chapters/2/index.html
+++ b/pir/tests/chapters/2/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/2/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/2/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/2/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/2/index.print.html b/pir/tests/chapters/2/index.print.html
index 04a9123e02..6206146c35 100644
--- a/pir/tests/chapters/2/index.print.html
+++ b/pir/tests/chapters/2/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/2/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/2/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/2/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/3/index.html b/pir/tests/chapters/3/index.html
index 7dba0653fa..7b4e9a8f57 100644
--- a/pir/tests/chapters/3/index.html
+++ b/pir/tests/chapters/3/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/3/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/3/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/3/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/3/index.print.html b/pir/tests/chapters/3/index.print.html
index 9246655b0e..f062978a5e 100644
--- a/pir/tests/chapters/3/index.print.html
+++ b/pir/tests/chapters/3/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/3/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/3/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/3/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/4/index.html b/pir/tests/chapters/4/index.html
index d726bdd65f..834844d36c 100644
--- a/pir/tests/chapters/4/index.html
+++ b/pir/tests/chapters/4/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/4/index.print.html b/pir/tests/chapters/4/index.print.html
index 9f4b506749..97a52934ec 100644
--- a/pir/tests/chapters/4/index.print.html
+++ b/pir/tests/chapters/4/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/5/index.html b/pir/tests/chapters/5/index.html
index 9349a11230..9d51acc554 100644
--- a/pir/tests/chapters/5/index.html
+++ b/pir/tests/chapters/5/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/5/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/5/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/5/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/5/index.print.html b/pir/tests/chapters/5/index.print.html
index d52c377fba..68ca57cd52 100644
--- a/pir/tests/chapters/5/index.print.html
+++ b/pir/tests/chapters/5/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/5/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/5/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/5/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/6/index.html b/pir/tests/chapters/6/index.html
index 1a5fe3e9ad..c066464c85 100644
--- a/pir/tests/chapters/6/index.html
+++ b/pir/tests/chapters/6/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/6/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/6/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/6/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/6/index.print.html b/pir/tests/chapters/6/index.print.html
index f80d5a4b42..4465408993 100644
--- a/pir/tests/chapters/6/index.print.html
+++ b/pir/tests/chapters/6/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/6/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/6/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/6/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/7/index.html b/pir/tests/chapters/7/index.html
index c9e705bc37..1ef8003329 100644
--- a/pir/tests/chapters/7/index.html
+++ b/pir/tests/chapters/7/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/7/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/7/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/7/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/7/index.print.html b/pir/tests/chapters/7/index.print.html
index 0edb1c24a3..5c94263018 100644
--- a/pir/tests/chapters/7/index.print.html
+++ b/pir/tests/chapters/7/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/7/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/7/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/7/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/8/index.html b/pir/tests/chapters/8/index.html
index 78b5e6a41a..acd3036111 100644
--- a/pir/tests/chapters/8/index.html
+++ b/pir/tests/chapters/8/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/8/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/8/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/8/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/8/index.print.html b/pir/tests/chapters/8/index.print.html
index a93e31b0fd..d5eee33320 100644
--- a/pir/tests/chapters/8/index.print.html
+++ b/pir/tests/chapters/8/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/8/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/8/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/8/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/9/index.html b/pir/tests/chapters/9/index.html
index c02dd4d73e..681c2dac3e 100644
--- a/pir/tests/chapters/9/index.html
+++ b/pir/tests/chapters/9/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/9/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/9/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/9/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../../js/search.js?1675526023" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -275,7 +275,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -311,12 +312,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/9/index.print.html b/pir/tests/chapters/9/index.print.html
index 4f374fe62c..2b6182b14a 100644
--- a/pir/tests/chapters/9/index.print.html
+++ b/pir/tests/chapters/9/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/9/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/9/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/9/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/children-1/index.html b/pir/tests/chapters/children-1/index.html
index 9bb33b8a23..4e48ab8482 100644
--- a/pir/tests/chapters/children-1/index.html
+++ b/pir/tests/chapters/children-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/children-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/children-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/children-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -180,12 +180,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../../js/search.js?1675526024" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -286,7 +286,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -322,12 +323,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/children-1/index.print.html b/pir/tests/chapters/children-1/index.print.html
index ef13699367..b4998a8077 100644
--- a/pir/tests/chapters/children-1/index.print.html
+++ b/pir/tests/chapters/children-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/children-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/children-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/children-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526024"></script>
-    <script src="../../../../js/variant.js?1675526024"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546464"></script>
+    <script src="../../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -93,8 +93,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/index.html b/pir/tests/chapters/index.html
index 4a1cdef9fb..15d00f2ae1 100644
--- a/pir/tests/chapters/index.html
+++ b/pir/tests/chapters/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -179,12 +179,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -284,7 +284,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -320,12 +321,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/tests/chapters/index.print.html b/pir/tests/chapters/index.print.html
index cd2c7511f8..e6da38e8c6 100644
--- a/pir/tests/chapters/index.print.html
+++ b/pir/tests/chapters/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -175,8 +175,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/code/index.html b/pir/tests/code/index.html
index 7d5256ec22..7545942ee5 100644
--- a/pir/tests/code/index.html
+++ b/pir/tests/code/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/code/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/code/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/code/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -204,12 +204,12 @@ Some preformatted stuff 'n HTML elements
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../../../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -309,7 +309,8 @@ Some preformatted stuff 'n HTML elements
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -345,12 +346,12 @@ Some preformatted stuff 'n HTML elements
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/code/index.print.html b/pir/tests/code/index.print.html
index 510ca03539..6ee979a76a 100644
--- a/pir/tests/code/index.print.html
+++ b/pir/tests/code/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/code/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/code/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/code/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -117,8 +117,8 @@ Some preformatted stuff 'n HTML elements
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/images/index.html b/pir/tests/images/index.html
index a81bfefdd0..b4276cec26 100644
--- a/pir/tests/images/index.html
+++ b/pir/tests/images/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/images/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/images/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/images/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -102,63 +102,63 @@
 <h2 id="markdown">Marrrkdown</h2>
 <h3 id="resource-svg">Resource SVG</h3>
 <p>
-<a href="#image-aa6ded2e2dc03584d6764ddfeaf0fa26" class="lightbox-link">
+<a href="#image-ad25feac4e60c6bffa9cb75fcbd11bff" class="lightbox-link">
 <img src="../../../tests/images/test.svg?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-aa6ded2e2dc03584d6764ddfeaf0fa26">
+<a href="javascript:history.back();" class="lightbox" id="image-ad25feac4e60c6bffa9cb75fcbd11bff">
 <img src="../../../tests/images/test.svg?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page">Relative t' plank</h3>
 <p>
-<a href="#image-0b0ec6ad9ede30840d654417eef0a117" class="lightbox-link">
+<a href="#image-3a956df48eedcac125936c97c9295439" class="lightbox-link">
 <img src="../../../tests/images/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-0b0ec6ad9ede30840d654417eef0a117">
+<a href="javascript:history.back();" class="lightbox" id="image-3a956df48eedcac125936c97c9295439">
 <img src="../../../tests/images/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page-up-level">Relative t' plank up level</h3>
 <p>
 		
-<a href="#image-6bcc10267b7d1e32ea3124a6e59e888a" class="lightbox-link">
+<a href="#image-9d03f3da07d1585317ee258049f268c6" class="lightbox-link">
 <img src="../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6bcc10267b7d1e32ea3124a6e59e888a">
+<a href="javascript:history.back();" class="lightbox" id="image-9d03f3da07d1585317ee258049f268c6">
 <img src="../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="static-svg">Static SVG</h3>
 <p>
 		
-<a href="#image-2cdd1f7d1de0ba1ebf6d610bdbffc264" class="lightbox-link">
+<a href="#image-d0ae5b22dcca4f9e07143c12a796cfe2" class="lightbox-link">
 <img src="../../../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2cdd1f7d1de0ba1ebf6d610bdbffc264">
+<a href="javascript:history.back();" class="lightbox" id="image-d0ae5b22dcca4f9e07143c12a796cfe2">
 <img src="../../../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-fully-qualified">External fully qualified</h3>
 <p>
 		
-<a href="#image-55b619850361c92cf40e2cee45f4ad14" class="lightbox-link">
+<a href="#image-819299d566ffc76b84d2bcb3c6f1b9c2" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-55b619850361c92cf40e2cee45f4ad14">
+<a href="javascript:history.back();" class="lightbox" id="image-819299d566ffc76b84d2bcb3c6f1b9c2">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme">External without scheme</h3>
 <p>
 		
-<a href="#image-8ebeaf4c140272015be6e079a915a628" class="lightbox-link">
+<a href="#image-48441a3fb31644d889f003d68aaa145b" class="lightbox-link">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-8ebeaf4c140272015be6e079a915a628">
+<a href="javascript:history.back();" class="lightbox" id="image-48441a3fb31644d889f003d68aaa145b">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme-and-scheme-separator">External without scheme an' scheme separator</h3>
 <p>
 		
-<a href="#image-b1f0a32e6b27463798d56231066a6c2b" class="lightbox-link">
+<a href="#image-0fbb8c944825e53aeb34edd4b23f4ddc" class="lightbox-link">
 <img src="octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b1f0a32e6b27463798d56231066a6c2b">
+<a href="javascript:history.back();" class="lightbox" id="image-0fbb8c944825e53aeb34edd4b23f4ddc">
 <img src="octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="html">HTML</h2>
@@ -256,12 +256,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../../../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -361,7 +361,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -397,12 +398,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/images/index.print.html b/pir/tests/images/index.print.html
index 09fa8ecc36..71b29b99c9 100644
--- a/pir/tests/images/index.print.html
+++ b/pir/tests/images/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/images/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/images/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/images/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -87,63 +87,63 @@
 <h2 id="markdown">Marrrkdown</h2>
 <h3 id="resource-svg">Resource SVG</h3>
 <p>
-<a href="#image-aa6ded2e2dc03584d6764ddfeaf0fa26" class="lightbox-link">
+<a href="#image-ad25feac4e60c6bffa9cb75fcbd11bff" class="lightbox-link">
 <img src="../../../tests/images/test.svg?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-aa6ded2e2dc03584d6764ddfeaf0fa26">
+<a href="javascript:history.back();" class="lightbox" id="image-ad25feac4e60c6bffa9cb75fcbd11bff">
 <img src="../../../tests/images/test.svg?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page">Relative t' plank</h3>
 <p>
-<a href="#image-0b0ec6ad9ede30840d654417eef0a117" class="lightbox-link">
+<a href="#image-3a956df48eedcac125936c97c9295439" class="lightbox-link">
 <img src="../../../tests/images/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-0b0ec6ad9ede30840d654417eef0a117">
+<a href="javascript:history.back();" class="lightbox" id="image-3a956df48eedcac125936c97c9295439">
 <img src="../../../tests/images/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page-up-level">Relative t' plank up level</h3>
 <p>
 		
-<a href="#image-6bcc10267b7d1e32ea3124a6e59e888a" class="lightbox-link">
+<a href="#image-9d03f3da07d1585317ee258049f268c6" class="lightbox-link">
 <img src="../../../pir/tests/images/../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6bcc10267b7d1e32ea3124a6e59e888a">
+<a href="javascript:history.back();" class="lightbox" id="image-9d03f3da07d1585317ee258049f268c6">
 <img src="../../../pir/tests/images/../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="static-svg">Static SVG</h3>
 <p>
 		
-<a href="#image-2cdd1f7d1de0ba1ebf6d610bdbffc264" class="lightbox-link">
+<a href="#image-d0ae5b22dcca4f9e07143c12a796cfe2" class="lightbox-link">
 <img src="../../../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2cdd1f7d1de0ba1ebf6d610bdbffc264">
+<a href="javascript:history.back();" class="lightbox" id="image-d0ae5b22dcca4f9e07143c12a796cfe2">
 <img src="../../../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-fully-qualified">External fully qualified</h3>
 <p>
 		
-<a href="#image-55b619850361c92cf40e2cee45f4ad14" class="lightbox-link">
+<a href="#image-819299d566ffc76b84d2bcb3c6f1b9c2" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-55b619850361c92cf40e2cee45f4ad14">
+<a href="javascript:history.back();" class="lightbox" id="image-819299d566ffc76b84d2bcb3c6f1b9c2">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme">External without scheme</h3>
 <p>
 		
-<a href="#image-8ebeaf4c140272015be6e079a915a628" class="lightbox-link">
+<a href="#image-48441a3fb31644d889f003d68aaa145b" class="lightbox-link">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-8ebeaf4c140272015be6e079a915a628">
+<a href="javascript:history.back();" class="lightbox" id="image-48441a3fb31644d889f003d68aaa145b">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme-and-scheme-separator">External without scheme an' scheme separator</h3>
 <p>
 		
-<a href="#image-b1f0a32e6b27463798d56231066a6c2b" class="lightbox-link">
+<a href="#image-0fbb8c944825e53aeb34edd4b23f4ddc" class="lightbox-link">
 <img src="../../../pir/tests/images/octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b1f0a32e6b27463798d56231066a6c2b">
+<a href="javascript:history.back();" class="lightbox" id="image-0fbb8c944825e53aeb34edd4b23f4ddc">
 <img src="../../../pir/tests/images/octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="html">HTML</h2>
@@ -169,8 +169,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/index.html b/pir/tests/index.html
index 673f438bdc..9eb8e54d37 100644
--- a/pir/tests/index.html
+++ b/pir/tests/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -189,12 +189,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../js/search.js?1675526024" defer></script>
+        <script src="../../js/auto-complete.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546463" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546463" defer></script>
+        <script src="../../js/search.js?1675546463" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -294,7 +294,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -330,12 +331,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526024"></script>
+          <script async src="../../js/buttons.js?1675546463"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../js/theme.js?1675526024" defer></script>
+    <script src="../../js/clipboard.min.js?1675546463" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546463" defer></script>
+    <script src="../../js/theme.js?1675546463" defer></script>
   </body>
 </html>
diff --git a/pir/tests/index.print.html b/pir/tests/index.print.html
index a0c968378a..ac1aff8a66 100644
--- a/pir/tests/index.print.html
+++ b/pir/tests/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../js/url.js?1675526024"></script>
-    <script src="../../js/variant.js?1675526024"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../js/url.js?1675546464"></script>
+    <script src="../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -334,63 +334,63 @@ Some preformatted stuff 'n HTML elements
 <h2 id="markdown">Marrrkdown</h2>
 <h3 id="resource-svg">Resource SVG</h3>
 <p>
-<a href="#image-aa6ded2e2dc03584d6764ddfeaf0fa26" class="lightbox-link">
+<a href="#image-ad25feac4e60c6bffa9cb75fcbd11bff" class="lightbox-link">
 <img src="../../tests/images/test.svg?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-aa6ded2e2dc03584d6764ddfeaf0fa26">
+<a href="javascript:history.back();" class="lightbox" id="image-ad25feac4e60c6bffa9cb75fcbd11bff">
 <img src="../../tests/images/test.svg?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page">Relative t' plank</h3>
 <p>
-<a href="#image-0b0ec6ad9ede30840d654417eef0a117" class="lightbox-link">
+<a href="#image-3a956df48eedcac125936c97c9295439" class="lightbox-link">
 <img src="../../tests/images/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-0b0ec6ad9ede30840d654417eef0a117">
+<a href="javascript:history.back();" class="lightbox" id="image-3a956df48eedcac125936c97c9295439">
 <img src="../../tests/images/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page-up-level">Relative t' plank up level</h3>
 <p>
 		
-<a href="#image-6bcc10267b7d1e32ea3124a6e59e888a" class="lightbox-link">
+<a href="#image-9d03f3da07d1585317ee258049f268c6" class="lightbox-link">
 <img src="../../pir/tests/images/../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-6bcc10267b7d1e32ea3124a6e59e888a">
+<a href="javascript:history.back();" class="lightbox" id="image-9d03f3da07d1585317ee258049f268c6">
 <img src="../../pir/tests/images/../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="static-svg">Static SVG</h3>
 <p>
 		
-<a href="#image-2cdd1f7d1de0ba1ebf6d610bdbffc264" class="lightbox-link">
+<a href="#image-d0ae5b22dcca4f9e07143c12a796cfe2" class="lightbox-link">
 <img src="../../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-2cdd1f7d1de0ba1ebf6d610bdbffc264">
+<a href="javascript:history.back();" class="lightbox" id="image-d0ae5b22dcca4f9e07143c12a796cfe2">
 <img src="../../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-fully-qualified">External fully qualified</h3>
 <p>
 		
-<a href="#image-55b619850361c92cf40e2cee45f4ad14" class="lightbox-link">
+<a href="#image-819299d566ffc76b84d2bcb3c6f1b9c2" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-55b619850361c92cf40e2cee45f4ad14">
+<a href="javascript:history.back();" class="lightbox" id="image-819299d566ffc76b84d2bcb3c6f1b9c2">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme">External without scheme</h3>
 <p>
 		
-<a href="#image-8ebeaf4c140272015be6e079a915a628" class="lightbox-link">
+<a href="#image-48441a3fb31644d889f003d68aaa145b" class="lightbox-link">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-8ebeaf4c140272015be6e079a915a628">
+<a href="javascript:history.back();" class="lightbox" id="image-48441a3fb31644d889f003d68aaa145b">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme-and-scheme-separator">External without scheme an' scheme separator</h3>
 <p>
 		
-<a href="#image-b1f0a32e6b27463798d56231066a6c2b" class="lightbox-link">
+<a href="#image-0fbb8c944825e53aeb34edd4b23f4ddc" class="lightbox-link">
 <img src="../../pir/tests/images/octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b1f0a32e6b27463798d56231066a6c2b">
+<a href="javascript:history.back();" class="lightbox" id="image-0fbb8c944825e53aeb34edd4b23f4ddc">
 <img src="../../pir/tests/images/octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="html">HTML</h2>
@@ -635,10 +635,10 @@ Some preformatted stuff 'n HTML elements
 <tr>
 <td>
 		
-<a href="#image-45b29115f352c851b55cc202a913eff5" class="lightbox-link">
+<a href="#image-4e49884da52f3b400d041b057fe85b16" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="shadow" style="height: auto; width: 24px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-45b29115f352c851b55cc202a913eff5">
+<a href="javascript:history.back();" class="lightbox" id="image-4e49884da52f3b400d041b057fe85b16">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="lightbox-image" loading="lazy">
 </a></td>
 </tr>
@@ -721,14 +721,14 @@ Some preformatted stuff 'n HTML elements
 <tr>
 <td>
 <div class="expand">
-    <input type="checkbox" id="expand-a6465668df6b0779757020dd14fcc79a" aria-controls="expandcontent-a6465668df6b0779757020dd14fcc79a" >
-    <label class="expand-label" for="expand-a6465668df6b0779757020dd14fcc79a" >
+    <input type="checkbox" id="expand-335090cc2ddf39a6542119dac84e90f3" aria-controls="expandcontent-335090cc2ddf39a6542119dac84e90f3" >
+    <label class="expand-label" for="expand-335090cc2ddf39a6542119dac84e90f3" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-a6465668df6b0779757020dd14fcc79a" class="expand-content">
+    <div id="expandcontent-335090cc2ddf39a6542119dac84e90f3" class="expand-content">
 Thank ye!
     </div>
 </div></td>
@@ -914,8 +914,8 @@ graph LR;
           </section>        </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../js/theme.js?1675526024" defer></script>
+    <script src="../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/tables/index.html b/pir/tests/tables/index.html
index 3e6fe00f31..54b93e2c8f 100644
--- a/pir/tests/tables/index.html
+++ b/pir/tests/tables/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/tables/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/tables/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/tables/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -308,10 +308,10 @@
 <tr>
 <td>
 		
-<a href="#image-45b29115f352c851b55cc202a913eff5" class="lightbox-link">
+<a href="#image-4e49884da52f3b400d041b057fe85b16" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="shadow" style="height: auto; width: 24px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-45b29115f352c851b55cc202a913eff5">
+<a href="javascript:history.back();" class="lightbox" id="image-4e49884da52f3b400d041b057fe85b16">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="lightbox-image" loading="lazy">
 </a></td>
 </tr>
@@ -394,14 +394,14 @@
 <tr>
 <td>
 <div class="expand">
-    <input type="checkbox" id="expand-a6465668df6b0779757020dd14fcc79a" aria-controls="expandcontent-a6465668df6b0779757020dd14fcc79a" >
-    <label class="expand-label" for="expand-a6465668df6b0779757020dd14fcc79a" >
+    <input type="checkbox" id="expand-335090cc2ddf39a6542119dac84e90f3" aria-controls="expandcontent-335090cc2ddf39a6542119dac84e90f3" >
+    <label class="expand-label" for="expand-335090cc2ddf39a6542119dac84e90f3" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-a6465668df6b0779757020dd14fcc79a" class="expand-content">
+    <div id="expandcontent-335090cc2ddf39a6542119dac84e90f3" class="expand-content">
 Thank ye!
     </div>
 </div></td>
@@ -627,12 +627,12 @@ graph LR;
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526024" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526024" defer></script>
-        <script src="../../../js/search.js?1675526024" defer></script>
+        <script src="../../../js/auto-complete.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546464" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546464" defer></script>
+        <script src="../../../js/search.js?1675546464" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -732,7 +732,8 @@ graph LR;
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -768,12 +769,12 @@ graph LR;
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526024"></script>
+          <script async src="../../../js/buttons.js?1675546464"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/tables/index.print.html b/pir/tests/tables/index.print.html
index bf6f4e057a..b94c1e8684 100644
--- a/pir/tests/tables/index.print.html
+++ b/pir/tests/tables/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/tables/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/tables/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/tables/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -293,10 +293,10 @@
 <tr>
 <td>
 		
-<a href="#image-45b29115f352c851b55cc202a913eff5" class="lightbox-link">
+<a href="#image-4e49884da52f3b400d041b057fe85b16" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="shadow" style="height: auto; width: 24px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-45b29115f352c851b55cc202a913eff5">
+<a href="javascript:history.back();" class="lightbox" id="image-4e49884da52f3b400d041b057fe85b16">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="lightbox-image" loading="lazy">
 </a></td>
 </tr>
@@ -379,14 +379,14 @@
 <tr>
 <td>
 <div class="expand">
-    <input type="checkbox" id="expand-a6465668df6b0779757020dd14fcc79a" aria-controls="expandcontent-a6465668df6b0779757020dd14fcc79a" >
-    <label class="expand-label" for="expand-a6465668df6b0779757020dd14fcc79a" >
+    <input type="checkbox" id="expand-335090cc2ddf39a6542119dac84e90f3" aria-controls="expandcontent-335090cc2ddf39a6542119dac84e90f3" >
+    <label class="expand-label" for="expand-335090cc2ddf39a6542119dac84e90f3" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-a6465668df6b0779757020dd14fcc79a" class="expand-content">
+    <div id="expandcontent-335090cc2ddf39a6542119dac84e90f3" class="expand-content">
 Thank ye!
     </div>
 </div></td>
@@ -540,8 +540,8 @@ graph LR;
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/pir/tests/width/index.html b/pir/tests/width/index.html
index c61f9a6286..7345eeb84a 100644
--- a/pir/tests/width/index.html
+++ b/pir/tests/width/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/width/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/width/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/width/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -192,12 +192,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526023" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526023" defer></script>
-        <script src="../../../js/search.js?1675526023" defer></script>
+        <script src="../../../js/auto-complete.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546462" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546462" defer></script>
+        <script src="../../../js/search.js?1675546462" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -297,7 +297,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -333,12 +334,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526023"></script>
+          <script async src="../../../js/buttons.js?1675546462"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526023" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526023" defer></script>
-    <script src="../../../js/theme.js?1675526023" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546462" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546462" defer></script>
+    <script src="../../../js/theme.js?1675546462" defer></script>
   </body>
 </html>
diff --git a/pir/tests/width/index.print.html b/pir/tests/width/index.print.html
index 7bd4bec169..71561bd041 100644
--- a/pir/tests/width/index.print.html
+++ b/pir/tests/width/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/width/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/width/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/width/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526022" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546461" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526024" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526024" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526024" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526024" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526024" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526024" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526024" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526024" rel="stylesheet">
-    <link href="../../../css/print.css?1675526024" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526024" rel="stylesheet">
-    <script src="../../../js/url.js?1675526024"></script>
-    <script src="../../../js/variant.js?1675526024"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546464" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546464" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546464" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546464" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546464" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546464" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546464" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546464" rel="stylesheet">
+    <link href="../../../css/print.css?1675546464" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546464" rel="stylesheet">
+    <script src="../../../js/url.js?1675546464"></script>
+    <script src="../../../js/variant.js?1675546464"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -105,8 +105,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526024" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526024" defer></script>
-    <script src="../../../js/theme.js?1675526024" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546464" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546464" defer></script>
+    <script src="../../../js/theme.js?1675546464" defer></script>
   </body>
 </html>
diff --git a/search.html b/search.html
index 9e9629c3d1..96069deec1 100644
--- a/search.html
+++ b/search.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/search.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/search.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/search.html" rel="canonical" type="text/html" title="Hugo Relearn Theme">
-    <link href="./images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="./images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="./css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="./css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="./css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="./css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="./css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="./css/theme.css?1675526022" rel="stylesheet">
-    <link href="./css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="./css/ie.css?1675526022" rel="stylesheet">
-    <link href="./css/variant.css?1675526022" rel="stylesheet">
-    <link href="./css/print.css?1675526022" rel="stylesheet" media="print">
-    <script src="./js/url.js?1675526022"></script>
-    <script src="./js/variant.js?1675526022"></script>
+    <link href="./css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="./css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="./css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="./css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="./css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="./css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="./css/theme.css?1675546461" rel="stylesheet">
+    <link href="./css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="./css/ie.css?1675546461" rel="stylesheet">
+    <link href="./css/variant.css?1675546461" rel="stylesheet">
+    <link href="./css/print.css?1675546461" rel="stylesheet" media="print">
+    <script src="./js/url.js?1675546461"></script>
+    <script src="./js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -174,12 +174,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="./js/auto-complete.js?1675526022" defer></script>
-        <script src="./js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="./js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="./js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="./js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="./js/search.js?1675526022" defer></script>
+        <script src="./js/auto-complete.js?1675546461" defer></script>
+        <script src="./js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="./js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="./js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="./js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="./js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -259,7 +259,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -295,12 +296,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="./js/buttons.js?1675526022"></script>
+          <script async src="./js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="./js/clipboard.min.js?1675526022" defer></script>
-    <script src="./js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="./js/theme.js?1675526022" defer></script>
+    <script src="./js/clipboard.min.js?1675546461" defer></script>
+    <script src="./js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="./js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.html b/shortcodes/attachments/index.html
index 4234914c6c..7ce8bbaf56 100644
--- a/shortcodes/attachments/index.html
+++ b/shortcodes/attachments/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Hugo Relearn Theme">
     <link href="../../shortcodes/attachments/index.print.html" rel="alternate" type="text/html" title="Attachments :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -424,12 +424,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -509,7 +509,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -545,12 +546,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.print.html b/shortcodes/attachments/index.print.html
index 5141899e79..350f9bfdb6 100644
--- a/shortcodes/attachments/index.print.html
+++ b/shortcodes/attachments/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/attachments/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/attachments/index.html" rel="canonical" type="text/html" title="Attachments :: Hugo Relearn Theme">
     <link href="../../shortcodes/attachments/index.xml" rel="alternate" type="application/rss+xml" title="Attachments :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -309,8 +309,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/badge/index.html b/shortcodes/badge/index.html
index df9f6032e7..702cf3a3ca 100644
--- a/shortcodes/badge/index.html
+++ b/shortcodes/badge/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Hugo Relearn Theme">
     <link href="../../shortcodes/badge/index.print.html" rel="alternate" type="text/html" title="Badge :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -393,12 +393,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -478,7 +478,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -514,12 +515,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/shortcodes/badge/index.print.html b/shortcodes/badge/index.print.html
index 04c0d54f19..752a8beb49 100644
--- a/shortcodes/badge/index.print.html
+++ b/shortcodes/badge/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/badge/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/badge/index.html" rel="canonical" type="text/html" title="Badge :: Hugo Relearn Theme">
     <link href="../../shortcodes/badge/index.xml" rel="alternate" type="application/rss+xml" title="Badge :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -285,8 +285,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.html b/shortcodes/button/index.html
index 94cd20507b..080653f1cc 100644
--- a/shortcodes/button/index.html
+++ b/shortcodes/button/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Hugo Relearn Theme">
     <link href="../../shortcodes/button/index.print.html" rel="alternate" type="text/html" title="Button :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -514,12 +514,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -599,7 +599,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -635,12 +636,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.print.html b/shortcodes/button/index.print.html
index 26b1954949..0b903fb88c 100644
--- a/shortcodes/button/index.print.html
+++ b/shortcodes/button/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/button/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/button/index.html" rel="canonical" type="text/html" title="Button :: Hugo Relearn Theme">
     <link href="../../shortcodes/button/index.xml" rel="alternate" type="application/rss+xml" title="Button :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -405,8 +405,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
index c973749417..7ef3f2544b 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../../../../../../js/url.js?1675526020"></script>
-    <script src="../../../../../../../../js/variant.js?1675526020"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../../../../../../js/url.js?1675546459"></script>
+    <script src="../../../../../../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -180,12 +180,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../../../../../../js/search.js?1675526021" defer></script>
+        <script src="../../../../../../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../../../../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../../../../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -269,7 +269,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -305,12 +306,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../../../../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../../../../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
index 2d3caff986..6098c033d4 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/children-1-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../../../../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../../../../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -93,8 +93,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../../../../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
index affedffba7..1e4ea67f5f 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../../../../../js/url.js?1675526020"></script>
-    <script src="../../../../../../../js/variant.js?1675526020"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../../../../../js/url.js?1675546459"></script>
+    <script src="../../../../../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -195,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../../../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../../../../../js/search.js?1675526021" defer></script>
+        <script src="../../../../../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../../../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../../../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -284,7 +284,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -320,12 +321,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../../../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../../../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
index ceee631765..2612b1635b 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../../../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../../../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -110,8 +110,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../../../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
index e4f71f796b..c750571695 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../../../../js/url.js?1675526020"></script>
-    <script src="../../../../../../js/variant.js?1675526020"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../../../../js/url.js?1675546459"></script>
+    <script src="../../../../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -194,12 +194,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/search.js?1675526021" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -281,7 +281,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -317,12 +318,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
index 0d2488bbf9..c8ed667d28 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -100,8 +100,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
index 7b96b7ab92..b686449f84 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../../../js/url.js?1675526020"></script>
-    <script src="../../../../../js/variant.js?1675526020"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../../../js/url.js?1675546459"></script>
+    <script src="../../../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -193,12 +193,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../../../js/search.js?1675526021" defer></script>
+        <script src="../../../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -280,7 +280,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -316,12 +317,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
index f4b7536491..f4a5bf0264 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -117,8 +117,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
index 2340319f06..1c68b1680b 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-1 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html" rel="alternate" type="text/html" title="page 1-1-2-1 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../../../../js/url.js?1675526020"></script>
-    <script src="../../../../../../js/variant.js?1675526020"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../../../../js/url.js?1675546459"></script>
+    <script src="../../../../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -179,12 +179,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/search.js?1675526021" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -264,7 +264,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -300,12 +301,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
index 23d623d95d..aac6b6f01a 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" rel="canonical" type="text/html" title="page 1-1-2-1 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-1 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -92,8 +92,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
index 7f47b46f34..a1ba60218a 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-2 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html" rel="alternate" type="text/html" title="page 1-1-2-2 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../../../../js/url.js?1675526020"></script>
-    <script src="../../../../../../js/variant.js?1675526020"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../../../../js/url.js?1675546459"></script>
+    <script src="../../../../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -179,12 +179,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../../../../js/search.js?1675526021" defer></script>
+        <script src="../../../../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -264,7 +264,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -300,12 +301,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
index b48c14319b..b3dbceb746 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" rel="canonical" type="text/html" title="page 1-1-2-2 :: Hugo Relearn Theme">
     <link href="../../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2-2 :: Hugo Relearn Theme">
-    <link href="../../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -92,8 +92,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
index 2c421ca013..22d7c7a454 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2 :: Hugo Relearn Theme">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html" rel="alternate" type="text/html" title="page 1-1-2 :: Hugo Relearn Theme">
-    <link href="../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../../../js/url.js?1675526020"></script>
-    <script src="../../../../../js/variant.js?1675526020"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../../../js/url.js?1675546459"></script>
+    <script src="../../../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -195,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../../../js/search.js?1675526021" defer></script>
+        <script src="../../../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -280,7 +280,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -316,12 +317,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
index d69326dbeb..1137563697 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" rel="canonical" type="text/html" title="page 1-1-2 :: Hugo Relearn Theme">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-2 :: Hugo Relearn Theme">
-    <link href="../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -119,8 +119,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
index 8944203257..8456d45f5e 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-3 :: Hugo Relearn Theme">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html" rel="alternate" type="text/html" title="page 1-1-3 :: Hugo Relearn Theme">
-    <link href="../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../../../js/url.js?1675526020"></script>
-    <script src="../../../../../js/variant.js?1675526020"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../../../js/url.js?1675546459"></script>
+    <script src="../../../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -178,12 +178,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../../../js/search.js?1675526021" defer></script>
+        <script src="../../../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -263,7 +263,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -299,12 +300,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
index 4088452e70..12ee6d8cdf 100644
--- a/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/children-1-1-3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" rel="canonical" type="text/html" title="page 1-1-3 :: Hugo Relearn Theme">
     <link href="../../../../../shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1-3 :: Hugo Relearn Theme">
-    <link href="../../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../../../js/url.js?1675526022"></script>
-    <script src="../../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../../../js/url.js?1675546461"></script>
+    <script src="../../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -91,8 +91,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/index.html b/shortcodes/children/children-1/children-1-1/index.html
index 631e731c7c..aa3f2baada 100644
--- a/shortcodes/children/children-1/children-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-1/children-1-1/index.print.html" rel="alternate" type="text/html" title="page 1-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526020"></script>
-    <script src="../../../../js/variant.js?1675526020"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546459"></script>
+    <script src="../../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -195,12 +195,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../../js/search.js?1675526021" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -280,7 +280,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -316,12 +317,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/children-1-1/index.print.html b/shortcodes/children/children-1/children-1-1/index.print.html
index 7122822092..5b85e87b22 100644
--- a/shortcodes/children/children-1/children-1-1/index.print.html
+++ b/shortcodes/children/children-1/children-1-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/index.html" rel="canonical" type="text/html" title="page 1-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-1/children-1-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -147,8 +147,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.html b/shortcodes/children/children-1/index.html
index 7a0c424874..04c543b2d1 100644
--- a/shortcodes/children/children-1/index.html
+++ b/shortcodes/children/children-1/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-1/index.print.html" rel="alternate" type="text/html" title="page 1 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -192,12 +192,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -277,7 +277,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -313,12 +314,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.print.html b/shortcodes/children/children-1/index.print.html
index 75eff284a0..f75c56b4de 100644
--- a/shortcodes/children/children-1/index.print.html
+++ b/shortcodes/children/children-1/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-1/index.html" rel="canonical" type="text/html" title="page 1 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-1/index.xml" rel="alternate" type="application/rss+xml" title="page 1 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -164,8 +164,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.html b/shortcodes/children/children-2/index.html
index 5f5bb28787..ec277854e1 100644
--- a/shortcodes/children/children-2/index.html
+++ b/shortcodes/children/children-2/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="page 2 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-2/index.print.html" rel="alternate" type="text/html" title="page 2 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -177,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -262,7 +262,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -298,12 +299,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.print.html b/shortcodes/children/children-2/index.print.html
index ead5405b8f..d5a47fb7a5 100644
--- a/shortcodes/children/children-2/index.print.html
+++ b/shortcodes/children/children-2/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-2/index.html" rel="canonical" type="text/html" title="page 2 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-2/index.xml" rel="alternate" type="application/rss+xml" title="page 2 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -90,8 +90,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.html b/shortcodes/children/children-3/index.html
index 8d500b99d2..0dd49f1328 100644
--- a/shortcodes/children/children-3/index.html
+++ b/shortcodes/children/children-3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="page 3 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-3/index.print.html" rel="alternate" type="text/html" title="page 3 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -192,12 +192,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -277,7 +277,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -313,12 +314,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.print.html b/shortcodes/children/children-3/index.print.html
index f9df62f568..ccd1d4d01f 100644
--- a/shortcodes/children/children-3/index.print.html
+++ b/shortcodes/children/children-3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-3/index.html" rel="canonical" type="text/html" title="page 3 :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/children-3/index.xml" rel="alternate" type="application/rss+xml" title="page 3 :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -107,8 +107,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/test3/index.html b/shortcodes/children/children-3/test3/index.html
index d8e40f24d3..c6756bd66a 100644
--- a/shortcodes/children/children-3/test3/index.html
+++ b/shortcodes/children/children-3/test3/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="../../../../shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="page 3-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-3/test3/index.print.html" rel="alternate" type="text/html" title="page 3-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../../js/url.js?1675526020"></script>
-    <script src="../../../../js/variant.js?1675526020"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../../js/url.js?1675546459"></script>
+    <script src="../../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -177,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../../js/search.js?1675526021" defer></script>
+        <script src="../../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -262,7 +262,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -298,12 +299,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/test3/index.print.html b/shortcodes/children/children-3/test3/index.print.html
index cc04ef3cd7..5373849265 100644
--- a/shortcodes/children/children-3/test3/index.print.html
+++ b/shortcodes/children/children-3/test3/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-3/test3/index.html" rel="canonical" type="text/html" title="page 3-1 :: Hugo Relearn Theme">
     <link href="../../../../shortcodes/children/children-3/test3/index.xml" rel="alternate" type="application/rss+xml" title="page 3-1 :: Hugo Relearn Theme">
-    <link href="../../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../../js/url.js?1675526022"></script>
-    <script src="../../../../js/variant.js?1675526022"></script>
+    <link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../../js/url.js?1675546461"></script>
+    <script src="../../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -90,8 +90,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.html b/shortcodes/children/children-4/index.html
index 0359e037bc..58983b5aa7 100644
--- a/shortcodes/children/children-4/index.html
+++ b/shortcodes/children/children-4/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -175,12 +175,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -261,7 +261,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -297,12 +298,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.print.html b/shortcodes/children/children-4/index.print.html
index 75880477c4..9201930f48 100644
--- a/shortcodes/children/children-4/index.print.html
+++ b/shortcodes/children/children-4/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/children-4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/children-4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -88,8 +88,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.html b/shortcodes/children/index.html
index c20f2380d2..2916eeb292 100644
--- a/shortcodes/children/index.html
+++ b/shortcodes/children/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Hugo Relearn Theme">
     <link href="../../shortcodes/children/index.print.html" rel="alternate" type="text/html" title="Children :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -383,12 +383,12 @@ So its content is used as description.</p>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -468,7 +468,8 @@ So its content is used as description.</p>
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -504,12 +505,12 @@ So its content is used as description.</p>
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.print.html b/shortcodes/children/index.print.html
index b4389c94c6..83491b2a80 100644
--- a/shortcodes/children/index.print.html
+++ b/shortcodes/children/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/index.html" rel="canonical" type="text/html" title="Children :: Hugo Relearn Theme">
     <link href="../../shortcodes/children/index.xml" rel="alternate" type="application/rss+xml" title="Children :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -406,8 +406,8 @@ So its content is used as description.</p>
           </section>        </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.html b/shortcodes/children/test/index.html
index 7bc7c424d6..bd5b722147 100644
--- a/shortcodes/children/test/index.html
+++ b/shortcodes/children/test/index.html
@@ -14,20 +14,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="../../../shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="page X :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/test/index.print.html" rel="alternate" type="text/html" title="page X :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -173,12 +173,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../../js/search.js?1675526020" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -258,7 +258,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -294,12 +295,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526020"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../../js/theme.js?1675526020" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.print.html b/shortcodes/children/test/index.print.html
index b61250bce7..018b4af223 100644
--- a/shortcodes/children/test/index.print.html
+++ b/shortcodes/children/test/index.print.html
@@ -14,21 +14,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/children/test/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/children/test/index.html" rel="canonical" type="text/html" title="page X :: Hugo Relearn Theme">
     <link href="../../../shortcodes/children/test/index.xml" rel="alternate" type="application/rss+xml" title="page X :: Hugo Relearn Theme">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -44,7 +44,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -86,8 +86,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.html b/shortcodes/expand/index.html
index 3a8c731103..c7368a6251 100644
--- a/shortcodes/expand/index.html
+++ b/shortcodes/expand/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Hugo Relearn Theme">
     <link href="../../shortcodes/expand/index.print.html" rel="alternate" type="text/html" title="Expand :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -115,14 +115,14 @@
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-741f986258e10d27978c394bf975be4c" aria-controls="expandcontent-741f986258e10d27978c394bf975be4c" >
-    <label class="expand-label" for="expand-741f986258e10d27978c394bf975be4c" >
+    <input type="checkbox" id="expand-040c73fdfc43b9caaaecd53c8579f2c2" aria-controls="expandcontent-040c73fdfc43b9caaaecd53c8579f2c2" >
+    <label class="expand-label" for="expand-040c73fdfc43b9caaaecd53c8579f2c2" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-741f986258e10d27978c394bf975be4c" class="expand-content">
+    <div id="expandcontent-040c73fdfc43b9caaaecd53c8579f2c2" class="expand-content">
 Thank you!
     </div>
 </div>
@@ -221,14 +221,14 @@ Thank you!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-656e3835ae57c8f8aba41f1ff0d30c81" aria-controls="expandcontent-656e3835ae57c8f8aba41f1ff0d30c81" >
-    <label class="expand-label" for="expand-656e3835ae57c8f8aba41f1ff0d30c81" >
+    <input type="checkbox" id="expand-dd30352706d256f136784198037707de" aria-controls="expandcontent-dd30352706d256f136784198037707de" >
+    <label class="expand-label" for="expand-dd30352706d256f136784198037707de" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-656e3835ae57c8f8aba41f1ff0d30c81" class="expand-content">
+    <div id="expandcontent-dd30352706d256f136784198037707de" class="expand-content">
 Yes, you did it!
     </div>
 </div>
@@ -236,14 +236,14 @@ Yes, you did it!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-b32fdab4eea35c9f3bb18b847e8a1b41" aria-controls="expandcontent-b32fdab4eea35c9f3bb18b847e8a1b41"  checked>
-    <label class="expand-label" for="expand-b32fdab4eea35c9f3bb18b847e8a1b41" >
+    <input type="checkbox" id="expand-11e19cac73268e6a1ae8fbea8dc6f4da" aria-controls="expandcontent-11e19cac73268e6a1ae8fbea8dc6f4da"  checked>
+    <label class="expand-label" for="expand-11e19cac73268e6a1ae8fbea8dc6f4da" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-b32fdab4eea35c9f3bb18b847e8a1b41" class="expand-content">
+    <div id="expandcontent-11e19cac73268e6a1ae8fbea8dc6f4da" class="expand-content">
 No need to press you!
     </div>
 </div>
@@ -265,14 +265,14 @@ No need to press you!
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-52a7c32a15ffb6dbcbe7f93807cec98e" aria-controls="expandcontent-52a7c32a15ffb6dbcbe7f93807cec98e" >
-    <label class="expand-label" for="expand-52a7c32a15ffb6dbcbe7f93807cec98e" >
+    <input type="checkbox" id="expand-5c32501d5e90a2feeaa65b57374a2c68" aria-controls="expandcontent-5c32501d5e90a2feeaa65b57374a2c68" >
+    <label class="expand-label" for="expand-5c32501d5e90a2feeaa65b57374a2c68" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Show me almost endless possibilities
     </label>
-    <div id="expandcontent-52a7c32a15ffb6dbcbe7f93807cec98e" class="expand-content">
+    <div id="expandcontent-5c32501d5e90a2feeaa65b57374a2c68" class="expand-content">
 <p>You can add standard markdown syntax:</p>
 <ul>
 <li>multiple paragraphs</li>
@@ -367,12 +367,12 @@ No need to press you!
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -452,7 +452,8 @@ No need to press you!
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -488,12 +489,12 @@ No need to press you!
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.print.html b/shortcodes/expand/index.print.html
index 4548de346c..86cd5cf466 100644
--- a/shortcodes/expand/index.print.html
+++ b/shortcodes/expand/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/expand/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/expand/index.html" rel="canonical" type="text/html" title="Expand :: Hugo Relearn Theme">
     <link href="../../shortcodes/expand/index.xml" rel="alternate" type="application/rss+xml" title="Expand :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -79,14 +79,14 @@
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-741f986258e10d27978c394bf975be4c" aria-controls="expandcontent-741f986258e10d27978c394bf975be4c" >
-    <label class="expand-label" for="expand-741f986258e10d27978c394bf975be4c" >
+    <input type="checkbox" id="expand-040c73fdfc43b9caaaecd53c8579f2c2" aria-controls="expandcontent-040c73fdfc43b9caaaecd53c8579f2c2" >
+    <label class="expand-label" for="expand-040c73fdfc43b9caaaecd53c8579f2c2" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-741f986258e10d27978c394bf975be4c" class="expand-content">
+    <div id="expandcontent-040c73fdfc43b9caaaecd53c8579f2c2" class="expand-content">
 Thank you!
     </div>
 </div>
@@ -185,14 +185,14 @@ Thank you!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-656e3835ae57c8f8aba41f1ff0d30c81" aria-controls="expandcontent-656e3835ae57c8f8aba41f1ff0d30c81" >
-    <label class="expand-label" for="expand-656e3835ae57c8f8aba41f1ff0d30c81" >
+    <input type="checkbox" id="expand-dd30352706d256f136784198037707de" aria-controls="expandcontent-dd30352706d256f136784198037707de" >
+    <label class="expand-label" for="expand-dd30352706d256f136784198037707de" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-656e3835ae57c8f8aba41f1ff0d30c81" class="expand-content">
+    <div id="expandcontent-dd30352706d256f136784198037707de" class="expand-content">
 Yes, you did it!
     </div>
 </div>
@@ -200,14 +200,14 @@ Yes, you did it!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-b32fdab4eea35c9f3bb18b847e8a1b41" aria-controls="expandcontent-b32fdab4eea35c9f3bb18b847e8a1b41"  checked>
-    <label class="expand-label" for="expand-b32fdab4eea35c9f3bb18b847e8a1b41" >
+    <input type="checkbox" id="expand-11e19cac73268e6a1ae8fbea8dc6f4da" aria-controls="expandcontent-11e19cac73268e6a1ae8fbea8dc6f4da"  checked>
+    <label class="expand-label" for="expand-11e19cac73268e6a1ae8fbea8dc6f4da" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-b32fdab4eea35c9f3bb18b847e8a1b41" class="expand-content">
+    <div id="expandcontent-11e19cac73268e6a1ae8fbea8dc6f4da" class="expand-content">
 No need to press you!
     </div>
 </div>
@@ -229,14 +229,14 @@ No need to press you!
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-52a7c32a15ffb6dbcbe7f93807cec98e" aria-controls="expandcontent-52a7c32a15ffb6dbcbe7f93807cec98e" >
-    <label class="expand-label" for="expand-52a7c32a15ffb6dbcbe7f93807cec98e" >
+    <input type="checkbox" id="expand-5c32501d5e90a2feeaa65b57374a2c68" aria-controls="expandcontent-5c32501d5e90a2feeaa65b57374a2c68" >
+    <label class="expand-label" for="expand-5c32501d5e90a2feeaa65b57374a2c68" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Show me almost endless possibilities
     </label>
-    <div id="expandcontent-52a7c32a15ffb6dbcbe7f93807cec98e" class="expand-content">
+    <div id="expandcontent-5c32501d5e90a2feeaa65b57374a2c68" class="expand-content">
 <p>You can add standard markdown syntax:</p>
 <ul>
 <li>multiple paragraphs</li>
@@ -259,8 +259,8 @@ No need to press you!
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/icon/index.html b/shortcodes/icon/index.html
index 6e7d9b908c..98671d9343 100644
--- a/shortcodes/icon/index.html
+++ b/shortcodes/icon/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Hugo Relearn Theme">
     <link href="../../shortcodes/icon/index.print.html" rel="alternate" type="text/html" title="Icon :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -302,12 +302,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -387,7 +387,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -423,12 +424,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/shortcodes/icon/index.print.html b/shortcodes/icon/index.print.html
index 0c328a6a91..4788ee9c76 100644
--- a/shortcodes/icon/index.print.html
+++ b/shortcodes/icon/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/icon/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/icon/index.html" rel="canonical" type="text/html" title="Icon :: Hugo Relearn Theme">
     <link href="../../shortcodes/icon/index.xml" rel="alternate" type="application/rss+xml" title="Icon :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -193,8 +193,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.html b/shortcodes/include/index.html
index afd73513d3..ef03fe591c 100644
--- a/shortcodes/include/index.html
+++ b/shortcodes/include/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Hugo Relearn Theme">
     <link href="../../shortcodes/include/index.print.html" rel="alternate" type="text/html" title="Include :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -282,12 +282,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -367,7 +367,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -403,12 +404,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.print.html b/shortcodes/include/index.print.html
index 3285da7a63..5525a62cd1 100644
--- a/shortcodes/include/index.print.html
+++ b/shortcodes/include/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/include/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/include/index.html" rel="canonical" type="text/html" title="Include :: Hugo Relearn Theme">
     <link href="../../shortcodes/include/index.xml" rel="alternate" type="application/rss+xml" title="Include :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -176,8 +176,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.html b/shortcodes/include_me/index.html
index ef57527119..7302146610 100644
--- a/shortcodes/include_me/index.html
+++ b/shortcodes/include_me/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Hugo Relearn Theme</title>
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -178,12 +178,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -263,7 +263,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -299,12 +300,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.print.html b/shortcodes/include_me/index.print.html
index 3942c96467..768d656692 100644
--- a/shortcodes/include_me/index.print.html
+++ b/shortcodes/include_me/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Hugo Relearn Theme</title>
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -91,8 +91,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/index.html b/shortcodes/index.html
index dd33c224cc..db07f0a157 100644
--- a/shortcodes/index.html
+++ b/shortcodes/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="../shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shortcodes :: Hugo Relearn Theme">
     <link href="../shortcodes/index.print.html" rel="alternate" type="text/html" title="Shortcodes :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../js/url.js?1675526020"></script>
-    <script src="../js/variant.js?1675526020"></script>
+    <link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../js/url.js?1675546459"></script>
+    <script src="../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -191,12 +191,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../js/search.js?1675526021" defer></script>
+        <script src="../js/auto-complete.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -276,7 +276,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -312,12 +313,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../js/buttons.js?1675526021"></script>
+          <script async src="../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../js/theme.js?1675526021" defer></script>
+    <script src="../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/index.print.html b/shortcodes/index.print.html
index 8e562a57e6..a130fe8883 100644
--- a/shortcodes/index.print.html
+++ b/shortcodes/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/index.html" rel="canonical" type="text/html" title="Shortcodes :: Hugo Relearn Theme">
     <link href="../shortcodes/index.xml" rel="alternate" type="application/rss+xml" title="Shortcodes :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../js/url.js?1675526022"></script>
-    <script src="../js/variant.js?1675526022"></script>
+    <link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../js/url.js?1675546461"></script>
+    <script src="../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -1215,14 +1215,14 @@ So its content is used as description.</p>
 <p>The <code>expand</code> shortcode displays an expandable/collapsible section of text.</p>
 
 <div class="expand">
-    <input type="checkbox" id="expand-741f986258e10d27978c394bf975be4c" aria-controls="expandcontent-741f986258e10d27978c394bf975be4c" >
-    <label class="expand-label" for="expand-741f986258e10d27978c394bf975be4c" >
+    <input type="checkbox" id="expand-040c73fdfc43b9caaaecd53c8579f2c2" aria-controls="expandcontent-040c73fdfc43b9caaaecd53c8579f2c2" >
+    <label class="expand-label" for="expand-040c73fdfc43b9caaaecd53c8579f2c2" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-741f986258e10d27978c394bf975be4c" class="expand-content">
+    <div id="expandcontent-040c73fdfc43b9caaaecd53c8579f2c2" class="expand-content">
 Thank you!
     </div>
 </div>
@@ -1321,14 +1321,14 @@ Thank you!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Yes</span><span class="p">,</span> <span class="nx">you</span> <span class="nx">did</span> <span class="nx">it</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-656e3835ae57c8f8aba41f1ff0d30c81" aria-controls="expandcontent-656e3835ae57c8f8aba41f1ff0d30c81" >
-    <label class="expand-label" for="expand-656e3835ae57c8f8aba41f1ff0d30c81" >
+    <input type="checkbox" id="expand-dd30352706d256f136784198037707de" aria-controls="expandcontent-dd30352706d256f136784198037707de" >
+    <label class="expand-label" for="expand-dd30352706d256f136784198037707de" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-656e3835ae57c8f8aba41f1ff0d30c81" class="expand-content">
+    <div id="expandcontent-dd30352706d256f136784198037707de" class="expand-content">
 Yes, you did it!
     </div>
 </div>
@@ -1336,14 +1336,14 @@ Yes, you did it!
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">expand</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">open</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">No</span> <span class="nx">need</span> <span class="nx">to</span> <span class="nx">press</span> <span class="nx">you</span><span class="p">!{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-b32fdab4eea35c9f3bb18b847e8a1b41" aria-controls="expandcontent-b32fdab4eea35c9f3bb18b847e8a1b41"  checked>
-    <label class="expand-label" for="expand-b32fdab4eea35c9f3bb18b847e8a1b41" >
+    <input type="checkbox" id="expand-11e19cac73268e6a1ae8fbea8dc6f4da" aria-controls="expandcontent-11e19cac73268e6a1ae8fbea8dc6f4da"  checked>
+    <label class="expand-label" for="expand-11e19cac73268e6a1ae8fbea8dc6f4da" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-b32fdab4eea35c9f3bb18b847e8a1b41" class="expand-content">
+    <div id="expandcontent-11e19cac73268e6a1ae8fbea8dc6f4da" class="expand-content">
 No need to press you!
     </div>
 </div>
@@ -1365,14 +1365,14 @@ No need to press you!
 </span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">expand</span> <span class="o">%</span><span class="p">}}</span>
 </span></span></code></pre></div>
 <div class="expand">
-    <input type="checkbox" id="expand-52a7c32a15ffb6dbcbe7f93807cec98e" aria-controls="expandcontent-52a7c32a15ffb6dbcbe7f93807cec98e" >
-    <label class="expand-label" for="expand-52a7c32a15ffb6dbcbe7f93807cec98e" >
+    <input type="checkbox" id="expand-5c32501d5e90a2feeaa65b57374a2c68" aria-controls="expandcontent-5c32501d5e90a2feeaa65b57374a2c68" >
+    <label class="expand-label" for="expand-5c32501d5e90a2feeaa65b57374a2c68" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Show me almost endless possibilities
     </label>
-    <div id="expandcontent-52a7c32a15ffb6dbcbe7f93807cec98e" class="expand-content">
+    <div id="expandcontent-5c32501d5e90a2feeaa65b57374a2c68" class="expand-content">
 <p>You can add standard markdown syntax:</p>
 <ul>
 <li>multiple paragraphs</li>
@@ -3243,8 +3243,8 @@ mindmap
           </section>        </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526022" defer></script>
+    <script src="../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546461" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -3273,24 +3273,24 @@ mindmap
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1675526022"></script>
-    <script src="../js/d3/d3-color.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1675526022" defer></script>
-    <script src="../js/mermaid.min.js?1675526022" defer></script>
+    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1675546461"></script>
+    <script src="../js/d3/d3-color.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1675546461" defer></script>
+    <script src="../js/mermaid.min.js?1675546461" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../js/rapidoc-min.js?1675526022" defer></script>
+    <script src="../js/rapidoc-min.js?1675546461" defer></script>
     <script>
       window.themeUseSwagger = JSON.parse("{}");
     </script>
-    <script src="../js/theme.js?1675526022" defer></script>
+    <script src="../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/math/index.html b/shortcodes/math/index.html
index 70ed1aad6f..f05706734a 100644
--- a/shortcodes/math/index.html
+++ b/shortcodes/math/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Hugo Relearn Theme">
     <link href="../../shortcodes/math/index.print.html" rel="alternate" type="text/html" title="Math :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -351,12 +351,12 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -436,7 +436,8 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -472,12 +473,12 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546459"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546459" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546459" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -506,7 +507,7 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1675526020"></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1675546459"></script>
+    <script src="../../js/theme.js?1675546459" defer></script>
   </body>
 </html>
diff --git a/shortcodes/math/index.print.html b/shortcodes/math/index.print.html
index 7f6f7f5f8c..9fb1c8f594 100644
--- a/shortcodes/math/index.print.html
+++ b/shortcodes/math/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/math/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/math/index.html" rel="canonical" type="text/html" title="Math :: Hugo Relearn Theme">
     <link href="../../shortcodes/math/index.xml" rel="alternate" type="application/rss+xml" title="Math :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -236,8 +236,8 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -266,7 +266,7 @@ $$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1675526022"></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1675546461"></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.html b/shortcodes/mermaid/index.html
index c77b2ace68..6ef3122cb1 100644
--- a/shortcodes/mermaid/index.html
+++ b/shortcodes/mermaid/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Mermaid :: Hugo Relearn Theme">
     <link href="../../shortcodes/mermaid/index.print.html" rel="alternate" type="text/html" title="Mermaid :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -753,12 +753,12 @@ mindmap
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546459" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546459" defer></script>
+        <script src="../../js/search.js?1675546459" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -838,7 +838,8 @@ mindmap
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -874,25 +875,25 @@ mindmap
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1675526020" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1675526020" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1675526020" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1675526020" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1675526020" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1675526020" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1675526020" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1675526020" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1675526020" defer></script>
-    <script src="../../js/mermaid.min.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1675546460" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1675546460" defer></script>
+    <script src="../../js/mermaid.min.js?1675546460" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.print.html b/shortcodes/mermaid/index.print.html
index 39af19985c..340f7bd6dc 100644
--- a/shortcodes/mermaid/index.print.html
+++ b/shortcodes/mermaid/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/mermaid/index.html" rel="canonical" type="text/html" title="Mermaid :: Hugo Relearn Theme">
     <link href="../../shortcodes/mermaid/index.xml" rel="alternate" type="application/rss+xml" title="Mermaid :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -630,21 +630,21 @@ mindmap
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-color.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1675526022" defer></script>
-    <script src="../../js/mermaid.min.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-color.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1675546461" defer></script>
+    <script src="../../js/mermaid.min.js?1675546461" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.html b/shortcodes/notice/index.html
index 7d1e2288ec..d2b4d606d0 100644
--- a/shortcodes/notice/index.html
+++ b/shortcodes/notice/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Hugo Relearn Theme">
     <link href="../../shortcodes/notice/index.print.html" rel="alternate" type="text/html" title="Notice :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -519,12 +519,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -604,7 +604,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -640,12 +641,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.print.html b/shortcodes/notice/index.print.html
index 5062df38f1..3f53264967 100644
--- a/shortcodes/notice/index.print.html
+++ b/shortcodes/notice/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/notice/index.html" rel="canonical" type="text/html" title="Notice :: Hugo Relearn Theme">
     <link href="../../shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -409,8 +409,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.html b/shortcodes/siteparam/index.html
index a0f425c336..ad2be3f9ab 100644
--- a/shortcodes/siteparam/index.html
+++ b/shortcodes/siteparam/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="Site param :: Hugo Relearn Theme">
     <link href="../../shortcodes/siteparam/index.print.html" rel="alternate" type="text/html" title="Site param :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -264,12 +264,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526020" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526020" defer></script>
-        <script src="../../js/search.js?1675526020" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -349,7 +349,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -385,12 +386,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526020"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526020" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526020" defer></script>
-    <script src="../../js/theme.js?1675526020" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.print.html b/shortcodes/siteparam/index.print.html
index b077c58fab..3e88fb761b 100644
--- a/shortcodes/siteparam/index.print.html
+++ b/shortcodes/siteparam/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/siteparam/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/siteparam/index.html" rel="canonical" type="text/html" title="Site param :: Hugo Relearn Theme">
     <link href="../../shortcodes/siteparam/index.xml" rel="alternate" type="application/rss+xml" title="Site param :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -158,8 +158,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/swagger/index.html b/shortcodes/swagger/index.html
index f4384a73a3..571c563e7a 100644
--- a/shortcodes/swagger/index.html
+++ b/shortcodes/swagger/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/swagger/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/swagger/index.xml" rel="alternate" type="application/rss+xml" title="Swagger :: Hugo Relearn Theme">
     <link href="../../shortcodes/swagger/index.print.html" rel="alternate" type="text/html" title="Swagger :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -291,12 +291,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -376,7 +376,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -412,16 +413,16 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/rapidoc-min.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/rapidoc-min.js?1675546461" defer></script>
     <script>
       window.themeUseSwagger = JSON.parse("{}");
     </script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/swagger/index.print.html b/shortcodes/swagger/index.print.html
index 20952b9029..312fc5f4bb 100644
--- a/shortcodes/swagger/index.print.html
+++ b/shortcodes/swagger/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/swagger/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/swagger/index.html" rel="canonical" type="text/html" title="Swagger :: Hugo Relearn Theme">
     <link href="../../shortcodes/swagger/index.xml" rel="alternate" type="application/rss+xml" title="Swagger :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -180,12 +180,12 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/rapidoc-min.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/rapidoc-min.js?1675546461" defer></script>
     <script>
       window.themeUseSwagger = JSON.parse("{}");
     </script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.html b/shortcodes/tabs/index.html
index c58bd4e82a..57def5716e 100644
--- a/shortcodes/tabs/index.html
+++ b/shortcodes/tabs/index.html
@@ -13,20 +13,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="../../shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Hugo Relearn Theme">
     <link href="../../shortcodes/tabs/index.print.html" rel="alternate" type="text/html" title="Tabs :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -573,12 +573,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -658,7 +658,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -694,12 +695,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.print.html b/shortcodes/tabs/index.print.html
index 9b566b7b4b..047308c2b3 100644
--- a/shortcodes/tabs/index.print.html
+++ b/shortcodes/tabs/index.print.html
@@ -13,21 +13,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/shortcodes/tabs/index.html" rel="alternate" hreflang="pir">
     <link href="https://McShelby.github.io/hugo-theme-relearn/shortcodes/tabs/index.html" rel="canonical" type="text/html" title="Tabs :: Hugo Relearn Theme">
     <link href="../../shortcodes/tabs/index.xml" rel="alternate" type="application/rss+xml" title="Tabs :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -43,7 +43,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -465,8 +465,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tags/children/index.html b/tags/children/index.html
index 285df92709..1c94148805 100644
--- a/tags/children/index.html
+++ b/tags/children/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/children/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/children/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/children/index.xml" rel="alternate" type="application/rss+xml" title="children :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -173,12 +173,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -258,7 +258,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -294,12 +295,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tags/documentation/index.html b/tags/documentation/index.html
index 800a1bb268..4ad6765c85 100644
--- a/tags/documentation/index.html
+++ b/tags/documentation/index.html
@@ -9,20 +9,20 @@
     <meta name="author" content="Sören Weber">
     <title>documentation :: Hugo Relearn Theme</title>
     <link href="../../tags/documentation/index.xml" rel="alternate" type="application/rss+xml" title="documentation :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -157,12 +157,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -241,7 +241,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -277,12 +278,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tags/hidden/index.html b/tags/hidden/index.html
index 8dc4b71a73..82847f8b4b 100644
--- a/tags/hidden/index.html
+++ b/tags/hidden/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/hidden/index.xml" rel="alternate" type="application/rss+xml" title="hidden :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -164,12 +164,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -249,7 +249,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -285,12 +286,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tags/index.html b/tags/index.html
index 80a6c4a4d7..9c9ad597f8 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/index.html" rel="alternate" hreflang="pir">
     <link href="../tags/index.xml" rel="alternate" type="application/rss+xml" title="Tags :: Hugo Relearn Theme">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../js/url.js?1675526020"></script>
-    <script src="../js/variant.js?1675526020"></script>
+    <link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../js/url.js?1675546459"></script>
+    <script src="../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -163,12 +163,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../js/search.js?1675526021" defer></script>
+        <script src="../js/auto-complete.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -248,7 +248,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -284,12 +285,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../js/buttons.js?1675526021"></script>
+          <script async src="../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../js/theme.js?1675526021" defer></script>
+    <script src="../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tags/non-hidden/index.html b/tags/non-hidden/index.html
index 7b60109531..c944fd749f 100644
--- a/tags/non-hidden/index.html
+++ b/tags/non-hidden/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tags/non-hidden/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tags/non-hidden/index.html" rel="alternate" hreflang="pir">
     <link href="../../tags/non-hidden/index.xml" rel="alternate" type="application/rss+xml" title="non-hidden :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -168,12 +168,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -253,7 +253,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -289,12 +290,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tags/tutorial-stuff/index.html b/tags/tutorial-stuff/index.html
index 2d2da9d9e6..10f0fbffaf 100644
--- a/tags/tutorial-stuff/index.html
+++ b/tags/tutorial-stuff/index.html
@@ -9,20 +9,20 @@
     <meta name="author" content="Sören Weber">
     <title>tutorial stuff :: Hugo Relearn Theme</title>
     <link href="../../tags/tutorial-stuff/index.xml" rel="alternate" type="application/rss+xml" title="tutorial stuff :: Hugo Relearn Theme">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -157,12 +157,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526022" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526022" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526022" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526022" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526022" defer></script>
-        <script src="../../js/search.js?1675526022" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -241,7 +241,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -277,12 +278,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526022"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/attach/attach1/index.html b/tests/attach/attach1/index.html
index 04d7f406b2..df598c77f0 100644
--- a/tests/attach/attach1/index.html
+++ b/tests/attach/attach1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -177,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -302,7 +302,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -338,12 +339,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/attach/attach1/index.print.html b/tests/attach/attach1/index.print.html
index 2668fd4579..43824b561f 100644
--- a/tests/attach/attach1/index.print.html
+++ b/tests/attach/attach1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -90,8 +90,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/attach/attach2/index.html b/tests/attach/attach2/index.html
index 3f0c0ef44f..efd2e74c4d 100644
--- a/tests/attach/attach2/index.html
+++ b/tests/attach/attach2/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach2/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach2/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach2/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -177,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -302,7 +302,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -338,12 +339,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/attach/attach2/index.print.html b/tests/attach/attach2/index.print.html
index 1455f4b182..ad40eb2a57 100644
--- a/tests/attach/attach2/index.print.html
+++ b/tests/attach/attach2/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach2/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach2/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach2/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -90,8 +90,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/attach/attach3/index.html b/tests/attach/attach3/index.html
index cb8ec0b1b7..fb1ddecff9 100644
--- a/tests/attach/attach3/index.html
+++ b/tests/attach/attach3/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach3/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach3/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach3/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -177,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -302,7 +302,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -338,12 +339,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/attach/attach3/index.print.html b/tests/attach/attach3/index.print.html
index 7f4a8e318c..1747a2222f 100644
--- a/tests/attach/attach3/index.print.html
+++ b/tests/attach/attach3/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach3/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/attach3/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/attach3/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -90,8 +90,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/attach/index.html b/tests/attach/index.html
index c9c8d3dd8b..e4bec7c07e 100644
--- a/tests/attach/index.html
+++ b/tests/attach/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -177,12 +177,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -302,7 +302,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -338,12 +339,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/attach/index.print.html b/tests/attach/index.print.html
index f4c3d0bf75..cdb7a6ae9c 100644
--- a/tests/attach/index.print.html
+++ b/tests/attach/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/attach/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/attach/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -138,8 +138,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/1/index.html b/tests/chapters/1/index.html
index 4b7b2da654..45cbb737ba 100644
--- a/tests/chapters/1/index.html
+++ b/tests/chapters/1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/1/index.print.html b/tests/chapters/1/index.print.html
index e3391404a0..a336baa8b0 100644
--- a/tests/chapters/1/index.print.html
+++ b/tests/chapters/1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/10/index.html b/tests/chapters/10/index.html
index 1cf0f6e176..3abc701e52 100644
--- a/tests/chapters/10/index.html
+++ b/tests/chapters/10/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/10/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/10/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/10/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/10/index.print.html b/tests/chapters/10/index.print.html
index 2fbdf27720..db0308ead0 100644
--- a/tests/chapters/10/index.print.html
+++ b/tests/chapters/10/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/10/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/10/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/10/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/11/index.html b/tests/chapters/11/index.html
index 8db4b4dbff..89b8cc1b4b 100644
--- a/tests/chapters/11/index.html
+++ b/tests/chapters/11/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>11 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/11/index.print.html b/tests/chapters/11/index.print.html
index bf244540cd..b9b9fa5e9c 100644
--- a/tests/chapters/11/index.print.html
+++ b/tests/chapters/11/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>11 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/12/index.html b/tests/chapters/12/index.html
index 25e8b75213..bad0ad4ce2 100644
--- a/tests/chapters/12/index.html
+++ b/tests/chapters/12/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>12 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/12/index.print.html b/tests/chapters/12/index.print.html
index 49bcdb03b3..0a1a194060 100644
--- a/tests/chapters/12/index.print.html
+++ b/tests/chapters/12/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>12 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/13/index.html b/tests/chapters/13/index.html
index d57ea4ec20..61827c522f 100644
--- a/tests/chapters/13/index.html
+++ b/tests/chapters/13/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>13 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/13/index.print.html b/tests/chapters/13/index.print.html
index 4b449e2c8d..37ae3d8e4d 100644
--- a/tests/chapters/13/index.print.html
+++ b/tests/chapters/13/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>13 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/14/index.html b/tests/chapters/14/index.html
index 42eac88d51..1dcb9e4d46 100644
--- a/tests/chapters/14/index.html
+++ b/tests/chapters/14/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>14 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/14/index.print.html b/tests/chapters/14/index.print.html
index 989da266b3..b8330f28ee 100644
--- a/tests/chapters/14/index.print.html
+++ b/tests/chapters/14/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>14 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/15/index.html b/tests/chapters/15/index.html
index 6077776c2e..547f67ddaa 100644
--- a/tests/chapters/15/index.html
+++ b/tests/chapters/15/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>15 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/15/index.print.html b/tests/chapters/15/index.print.html
index f6891a8392..1d59ed85d8 100644
--- a/tests/chapters/15/index.print.html
+++ b/tests/chapters/15/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>15 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/16/index.html b/tests/chapters/16/index.html
index d01c5cddb1..72f8b7ca58 100644
--- a/tests/chapters/16/index.html
+++ b/tests/chapters/16/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>16 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/16/index.print.html b/tests/chapters/16/index.print.html
index d28dbbfc36..03b79bc915 100644
--- a/tests/chapters/16/index.print.html
+++ b/tests/chapters/16/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>16 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/17/index.html b/tests/chapters/17/index.html
index 8f7cc5ba3b..56255d554a 100644
--- a/tests/chapters/17/index.html
+++ b/tests/chapters/17/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>17 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/17/index.print.html b/tests/chapters/17/index.print.html
index 0ae50c1a50..aa8e30b080 100644
--- a/tests/chapters/17/index.print.html
+++ b/tests/chapters/17/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>17 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/18/index.html b/tests/chapters/18/index.html
index 506b1a8ebf..135f16d8a4 100644
--- a/tests/chapters/18/index.html
+++ b/tests/chapters/18/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>18 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/18/index.print.html b/tests/chapters/18/index.print.html
index dfd2b2417d..3168b6c89f 100644
--- a/tests/chapters/18/index.print.html
+++ b/tests/chapters/18/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>18 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/19/index.html b/tests/chapters/19/index.html
index 92149991e3..579cc87e30 100644
--- a/tests/chapters/19/index.html
+++ b/tests/chapters/19/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>19 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/19/index.print.html b/tests/chapters/19/index.print.html
index 3e37ac48d9..fe2f99fdc5 100644
--- a/tests/chapters/19/index.print.html
+++ b/tests/chapters/19/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>19 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/2/index.html b/tests/chapters/2/index.html
index 349b9ea5fc..c78b6a09b0 100644
--- a/tests/chapters/2/index.html
+++ b/tests/chapters/2/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/2/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/2/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/2/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/2/index.print.html b/tests/chapters/2/index.print.html
index 3146eb6ed5..a14d06e591 100644
--- a/tests/chapters/2/index.print.html
+++ b/tests/chapters/2/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/2/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/2/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/2/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/20/index.html b/tests/chapters/20/index.html
index 21e43cf3ac..6e0852a586 100644
--- a/tests/chapters/20/index.html
+++ b/tests/chapters/20/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>20 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/20/index.print.html b/tests/chapters/20/index.print.html
index 2a01c12ac8..850bf9a769 100644
--- a/tests/chapters/20/index.print.html
+++ b/tests/chapters/20/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>20 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/21/index.html b/tests/chapters/21/index.html
index 0f1f4e5e99..dd98d3e6bc 100644
--- a/tests/chapters/21/index.html
+++ b/tests/chapters/21/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>21 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/21/index.print.html b/tests/chapters/21/index.print.html
index cbb71e5ccf..42c15046d2 100644
--- a/tests/chapters/21/index.print.html
+++ b/tests/chapters/21/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>21 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/22/index.html b/tests/chapters/22/index.html
index 1b90750a33..8de29f39fc 100644
--- a/tests/chapters/22/index.html
+++ b/tests/chapters/22/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>22 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/22/index.print.html b/tests/chapters/22/index.print.html
index 07cf055def..6644c216c4 100644
--- a/tests/chapters/22/index.print.html
+++ b/tests/chapters/22/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>22 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/23/index.html b/tests/chapters/23/index.html
index 5188e731ed..e8c8706ae8 100644
--- a/tests/chapters/23/index.html
+++ b/tests/chapters/23/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>23 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/23/index.print.html b/tests/chapters/23/index.print.html
index 0d54a19da4..1465c81229 100644
--- a/tests/chapters/23/index.print.html
+++ b/tests/chapters/23/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>23 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/24/index.html b/tests/chapters/24/index.html
index f2127582eb..e2c598e3f9 100644
--- a/tests/chapters/24/index.html
+++ b/tests/chapters/24/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>24 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/24/index.print.html b/tests/chapters/24/index.print.html
index fe3111df71..4df1ebf1bc 100644
--- a/tests/chapters/24/index.print.html
+++ b/tests/chapters/24/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>24 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/25/index.html b/tests/chapters/25/index.html
index 768113792d..8f1c7ac4a4 100644
--- a/tests/chapters/25/index.html
+++ b/tests/chapters/25/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>25 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/25/index.print.html b/tests/chapters/25/index.print.html
index 8fbac220f9..afc68072ce 100644
--- a/tests/chapters/25/index.print.html
+++ b/tests/chapters/25/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>25 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/26/index.html b/tests/chapters/26/index.html
index 1e3af25b6b..c068f74b92 100644
--- a/tests/chapters/26/index.html
+++ b/tests/chapters/26/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>26 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/26/index.print.html b/tests/chapters/26/index.print.html
index 60389be3ff..a1d84fd1dd 100644
--- a/tests/chapters/26/index.print.html
+++ b/tests/chapters/26/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>26 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/27/index.html b/tests/chapters/27/index.html
index 6e480d3189..b95ed37ac2 100644
--- a/tests/chapters/27/index.html
+++ b/tests/chapters/27/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>27 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/27/index.print.html b/tests/chapters/27/index.print.html
index f6a163cff6..d7571741a5 100644
--- a/tests/chapters/27/index.print.html
+++ b/tests/chapters/27/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>27 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/28/index.html b/tests/chapters/28/index.html
index e6b027b669..e5f2422c29 100644
--- a/tests/chapters/28/index.html
+++ b/tests/chapters/28/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>28 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/28/index.print.html b/tests/chapters/28/index.print.html
index db4d3f1817..087c400964 100644
--- a/tests/chapters/28/index.print.html
+++ b/tests/chapters/28/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>28 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/29/index.html b/tests/chapters/29/index.html
index a74c47d420..5fc23c6ec5 100644
--- a/tests/chapters/29/index.html
+++ b/tests/chapters/29/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>29 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/29/index.print.html b/tests/chapters/29/index.print.html
index 8305045ede..a6a76643ed 100644
--- a/tests/chapters/29/index.print.html
+++ b/tests/chapters/29/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>29 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/3/index.html b/tests/chapters/3/index.html
index c535c4d169..4c61b8e578 100644
--- a/tests/chapters/3/index.html
+++ b/tests/chapters/3/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/3/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/3/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/3/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/3/index.print.html b/tests/chapters/3/index.print.html
index 58726db29b..9838451dea 100644
--- a/tests/chapters/3/index.print.html
+++ b/tests/chapters/3/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/3/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/3/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/3/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/30/index.html b/tests/chapters/30/index.html
index 63ad803bc8..34b5570c98 100644
--- a/tests/chapters/30/index.html
+++ b/tests/chapters/30/index.html
@@ -9,20 +9,20 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>30 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -38,7 +38,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -167,12 +167,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -291,7 +291,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -327,12 +328,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/30/index.print.html b/tests/chapters/30/index.print.html
index f95aee3afc..7071cb24dd 100644
--- a/tests/chapters/30/index.print.html
+++ b/tests/chapters/30/index.print.html
@@ -9,21 +9,21 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>30 :: Hugo Relearn Theme</title>
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -39,7 +39,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -80,8 +80,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/4/index.html b/tests/chapters/4/index.html
index 7eac2ed7f3..edc96b1fb6 100644
--- a/tests/chapters/4/index.html
+++ b/tests/chapters/4/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/4/index.print.html b/tests/chapters/4/index.print.html
index b9605cf1f1..0df829befe 100644
--- a/tests/chapters/4/index.print.html
+++ b/tests/chapters/4/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/4/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/4/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/4/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/5/index.html b/tests/chapters/5/index.html
index 74ac44c677..05b2b95186 100644
--- a/tests/chapters/5/index.html
+++ b/tests/chapters/5/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/5/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/5/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/5/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/5/index.print.html b/tests/chapters/5/index.print.html
index 7884d30e26..1199c95001 100644
--- a/tests/chapters/5/index.print.html
+++ b/tests/chapters/5/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/5/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/5/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/5/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/6/index.html b/tests/chapters/6/index.html
index 3926eedf77..5f080c36d2 100644
--- a/tests/chapters/6/index.html
+++ b/tests/chapters/6/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/6/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/6/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/6/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/6/index.print.html b/tests/chapters/6/index.print.html
index 4d4dd32476..c844ddfd8b 100644
--- a/tests/chapters/6/index.print.html
+++ b/tests/chapters/6/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/6/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/6/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/6/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/7/index.html b/tests/chapters/7/index.html
index 1df678fad7..125967068b 100644
--- a/tests/chapters/7/index.html
+++ b/tests/chapters/7/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/7/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/7/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/7/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/7/index.print.html b/tests/chapters/7/index.print.html
index d9584531d8..5785122b82 100644
--- a/tests/chapters/7/index.print.html
+++ b/tests/chapters/7/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/7/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/7/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/7/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/8/index.html b/tests/chapters/8/index.html
index 6c1544fd5f..c9ee87504d 100644
--- a/tests/chapters/8/index.html
+++ b/tests/chapters/8/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/8/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/8/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/8/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/8/index.print.html b/tests/chapters/8/index.print.html
index fe5da5a630..48ed268ab8 100644
--- a/tests/chapters/8/index.print.html
+++ b/tests/chapters/8/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/8/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/8/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/8/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/9/index.html b/tests/chapters/9/index.html
index 54502ff81e..637d0427ed 100644
--- a/tests/chapters/9/index.html
+++ b/tests/chapters/9/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/9/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/9/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/9/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/9/index.print.html b/tests/chapters/9/index.print.html
index 84c7ccd4be..a757329e17 100644
--- a/tests/chapters/9/index.print.html
+++ b/tests/chapters/9/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/9/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/9/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/9/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -83,8 +83,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/children-1/index.html b/tests/chapters/children-1/index.html
index 6541cd4ecb..34d2c952bb 100644
--- a/tests/chapters/children-1/index.html
+++ b/tests/chapters/children-1/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/children-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/children-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/children-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../../js/url.js?1675526020"></script>
-    <script src="../../../js/variant.js?1675526020"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../../js/url.js?1675546459"></script>
+    <script src="../../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -171,12 +171,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../../js/search.js?1675526021" defer></script>
+        <script src="../../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -297,7 +297,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -333,12 +334,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../../js/buttons.js?1675526021"></script>
+          <script async src="../../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../../js/theme.js?1675526021" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/children-1/index.print.html b/tests/chapters/children-1/index.print.html
index 415538ebbb..3ff76eb92c 100644
--- a/tests/chapters/children-1/index.print.html
+++ b/tests/chapters/children-1/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/children-1/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/children-1/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/children-1/index.html" rel="alternate" hreflang="pir">
-    <link href="../../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../../js/url.js?1675526022"></script>
-    <script src="../../../js/variant.js?1675526022"></script>
+    <link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../../js/url.js?1675546461"></script>
+    <script src="../../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -84,8 +84,8 @@
         </div>
       </main>
     </div>
-    <script src="../../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../../js/theme.js?1675526022" defer></script>
+    <script src="../../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/index.html b/tests/chapters/index.html
index aecfa2d516..675ef5b83f 100644
--- a/tests/chapters/index.html
+++ b/tests/chapters/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -170,12 +170,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -295,7 +295,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -331,12 +332,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/chapters/index.print.html b/tests/chapters/index.print.html
index cbbe25a819..6007aa461b 100644
--- a/tests/chapters/index.print.html
+++ b/tests/chapters/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/chapters/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/chapters/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -326,8 +326,8 @@
           </section>        </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/code/index.html b/tests/code/index.html
index be1168f619..2fd10be78a 100644
--- a/tests/code/index.html
+++ b/tests/code/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/code/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/code/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/code/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -207,12 +207,12 @@ Some preformatted stuff in HTML elements
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -332,7 +332,8 @@ Some preformatted stuff in HTML elements
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -368,12 +369,12 @@ Some preformatted stuff in HTML elements
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/code/index.print.html b/tests/code/index.print.html
index dbdc12f96a..9fafbd0732 100644
--- a/tests/code/index.print.html
+++ b/tests/code/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/code/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/code/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/code/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -108,8 +108,8 @@ Some preformatted stuff in HTML elements
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/images/index.html b/tests/images/index.html
index b1fce58a8c..343a028295 100644
--- a/tests/images/index.html
+++ b/tests/images/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/images/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/images/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/images/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -125,63 +125,63 @@
 <h2 id="markdown">Markdown</h2>
 <h3 id="resource-svg">Resource SVG</h3>
 <p>
-<a href="#image-1563024c0580cf32311b615ad097bfca" class="lightbox-link">
+<a href="#image-42ab131f2298984bd6cb785c7b1b0d12" class="lightbox-link">
 <img src="../../tests/images/test.svg?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-1563024c0580cf32311b615ad097bfca">
+<a href="javascript:history.back();" class="lightbox" id="image-42ab131f2298984bd6cb785c7b1b0d12">
 <img src="../../tests/images/test.svg?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page">Relative to page</h3>
 <p>
-<a href="#image-20b1162c4ea5324e03261ee3f934dd2b" class="lightbox-link">
+<a href="#image-3d18be397dfc34ad91c069d67ba32ce0" class="lightbox-link">
 <img src="../../tests/images/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-20b1162c4ea5324e03261ee3f934dd2b">
+<a href="javascript:history.back();" class="lightbox" id="image-3d18be397dfc34ad91c069d67ba32ce0">
 <img src="../../tests/images/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page-up-level">Relative to page up level</h3>
 <p>
 		
-<a href="#image-12f88fd2afd5c1726bfcc3a304f68dbe" class="lightbox-link">
+<a href="#image-470253cffef848d0eeae951e8f27b6e6" class="lightbox-link">
 <img src="../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-12f88fd2afd5c1726bfcc3a304f68dbe">
+<a href="javascript:history.back();" class="lightbox" id="image-470253cffef848d0eeae951e8f27b6e6">
 <img src="../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="static-svg">Static SVG</h3>
 <p>
 		
-<a href="#image-b5005763e527b1edc2dfca3c0c36dd3f" class="lightbox-link">
+<a href="#image-ddca148fcda12a5f3710d3c340440cd8" class="lightbox-link">
 <img src="../../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b5005763e527b1edc2dfca3c0c36dd3f">
+<a href="javascript:history.back();" class="lightbox" id="image-ddca148fcda12a5f3710d3c340440cd8">
 <img src="../../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-fully-qualified">External fully qualified</h3>
 <p>
 		
-<a href="#image-c0680331ab15a840f752ebb31b323c04" class="lightbox-link">
+<a href="#image-d5c18d13c6955de8396866f233f9e32b" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c0680331ab15a840f752ebb31b323c04">
+<a href="javascript:history.back();" class="lightbox" id="image-d5c18d13c6955de8396866f233f9e32b">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme">External without scheme</h3>
 <p>
 		
-<a href="#image-3fd45af1eeed9cb582f45fc81a5ccb23" class="lightbox-link">
+<a href="#image-70b827fe058674e0abc8c178ef74762b" class="lightbox-link">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-3fd45af1eeed9cb582f45fc81a5ccb23">
+<a href="javascript:history.back();" class="lightbox" id="image-70b827fe058674e0abc8c178ef74762b">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme-and-scheme-separator">External without scheme and scheme separator</h3>
 <p>
 		
-<a href="#image-36d775b443083ce0b244928d043104a0" class="lightbox-link">
+<a href="#image-fe01bb757e8c43abe764001902c25a73" class="lightbox-link">
 <img src="octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-36d775b443083ce0b244928d043104a0">
+<a href="javascript:history.back();" class="lightbox" id="image-fe01bb757e8c43abe764001902c25a73">
 <img src="octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="html">HTML</h2>
@@ -278,12 +278,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -403,7 +403,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -439,12 +440,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/images/index.print.html b/tests/images/index.print.html
index 46424c74a7..b1e707e504 100644
--- a/tests/images/index.print.html
+++ b/tests/images/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/images/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/images/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/images/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -79,63 +79,63 @@
 <h2 id="markdown">Markdown</h2>
 <h3 id="resource-svg">Resource SVG</h3>
 <p>
-<a href="#image-1563024c0580cf32311b615ad097bfca" class="lightbox-link">
+<a href="#image-42ab131f2298984bd6cb785c7b1b0d12" class="lightbox-link">
 <img src="../../tests/images/test.svg?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-1563024c0580cf32311b615ad097bfca">
+<a href="javascript:history.back();" class="lightbox" id="image-42ab131f2298984bd6cb785c7b1b0d12">
 <img src="../../tests/images/test.svg?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page">Relative to page</h3>
 <p>
-<a href="#image-20b1162c4ea5324e03261ee3f934dd2b" class="lightbox-link">
+<a href="#image-3d18be397dfc34ad91c069d67ba32ce0" class="lightbox-link">
 <img src="../../tests/images/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-20b1162c4ea5324e03261ee3f934dd2b">
+<a href="javascript:history.back();" class="lightbox" id="image-3d18be397dfc34ad91c069d67ba32ce0">
 <img src="../../tests/images/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page-up-level">Relative to page up level</h3>
 <p>
 		
-<a href="#image-12f88fd2afd5c1726bfcc3a304f68dbe" class="lightbox-link">
+<a href="#image-470253cffef848d0eeae951e8f27b6e6" class="lightbox-link">
 <img src="../../tests/images/../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-12f88fd2afd5c1726bfcc3a304f68dbe">
+<a href="javascript:history.back();" class="lightbox" id="image-470253cffef848d0eeae951e8f27b6e6">
 <img src="../../tests/images/../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="static-svg">Static SVG</h3>
 <p>
 		
-<a href="#image-b5005763e527b1edc2dfca3c0c36dd3f" class="lightbox-link">
+<a href="#image-ddca148fcda12a5f3710d3c340440cd8" class="lightbox-link">
 <img src="../../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b5005763e527b1edc2dfca3c0c36dd3f">
+<a href="javascript:history.back();" class="lightbox" id="image-ddca148fcda12a5f3710d3c340440cd8">
 <img src="../../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-fully-qualified">External fully qualified</h3>
 <p>
 		
-<a href="#image-c0680331ab15a840f752ebb31b323c04" class="lightbox-link">
+<a href="#image-d5c18d13c6955de8396866f233f9e32b" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c0680331ab15a840f752ebb31b323c04">
+<a href="javascript:history.back();" class="lightbox" id="image-d5c18d13c6955de8396866f233f9e32b">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme">External without scheme</h3>
 <p>
 		
-<a href="#image-3fd45af1eeed9cb582f45fc81a5ccb23" class="lightbox-link">
+<a href="#image-70b827fe058674e0abc8c178ef74762b" class="lightbox-link">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-3fd45af1eeed9cb582f45fc81a5ccb23">
+<a href="javascript:history.back();" class="lightbox" id="image-70b827fe058674e0abc8c178ef74762b">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme-and-scheme-separator">External without scheme and scheme separator</h3>
 <p>
 		
-<a href="#image-36d775b443083ce0b244928d043104a0" class="lightbox-link">
+<a href="#image-fe01bb757e8c43abe764001902c25a73" class="lightbox-link">
 <img src="../../tests/images/octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-36d775b443083ce0b244928d043104a0">
+<a href="javascript:history.back();" class="lightbox" id="image-fe01bb757e8c43abe764001902c25a73">
 <img src="../../tests/images/octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="html">HTML</h2>
@@ -160,8 +160,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/index.html b/tests/index.html
index 3c056644e4..a56b94bf30 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/index.html" rel="alternate" hreflang="pir">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../js/url.js?1675526020"></script>
-    <script src="../js/variant.js?1675526020"></script>
+    <link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../js/url.js?1675546459"></script>
+    <script src="../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -180,12 +180,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../js/auto-complete.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../js/search.js?1675526021" defer></script>
+        <script src="../js/auto-complete.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -305,7 +305,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -341,12 +342,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../js/buttons.js?1675526021"></script>
+          <script async src="../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../js/theme.js?1675526021" defer></script>
+    <script src="../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/index.print.html b/tests/index.print.html
index beb6cd0abd..168c09af5c 100644
--- a/tests/index.print.html
+++ b/tests/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/index.html" rel="alternate" hreflang="pir">
-    <link href="../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../js/url.js?1675526022"></script>
-    <script src="../js/variant.js?1675526022"></script>
+    <link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../js/url.js?1675546461"></script>
+    <script src="../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -450,63 +450,63 @@ Some preformatted stuff in HTML elements
 <h2 id="markdown">Markdown</h2>
 <h3 id="resource-svg">Resource SVG</h3>
 <p>
-<a href="#image-1563024c0580cf32311b615ad097bfca" class="lightbox-link">
+<a href="#image-42ab131f2298984bd6cb785c7b1b0d12" class="lightbox-link">
 <img src="../tests/images/test.svg?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-1563024c0580cf32311b615ad097bfca">
+<a href="javascript:history.back();" class="lightbox" id="image-42ab131f2298984bd6cb785c7b1b0d12">
 <img src="../tests/images/test.svg?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page">Relative to page</h3>
 <p>
-<a href="#image-20b1162c4ea5324e03261ee3f934dd2b" class="lightbox-link">
+<a href="#image-3d18be397dfc34ad91c069d67ba32ce0" class="lightbox-link">
 <img src="../tests/images/magic.gif?classes=shadow" alt="Magic" class="shadow" style="height: auto; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-20b1162c4ea5324e03261ee3f934dd2b">
+<a href="javascript:history.back();" class="lightbox" id="image-3d18be397dfc34ad91c069d67ba32ce0">
 <img src="../tests/images/magic.gif?classes=shadow" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="relative-to-page-up-level">Relative to page up level</h3>
 <p>
 		
-<a href="#image-12f88fd2afd5c1726bfcc3a304f68dbe" class="lightbox-link">
+<a href="#image-470253cffef848d0eeae951e8f27b6e6" class="lightbox-link">
 <img src="../tests/images/../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-12f88fd2afd5c1726bfcc3a304f68dbe">
+<a href="javascript:history.back();" class="lightbox" id="image-470253cffef848d0eeae951e8f27b6e6">
 <img src="../tests/images/../images/magic.gif?classes=shadow&amp;height=50px" alt="Magic" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="static-svg">Static SVG</h3>
 <p>
 		
-<a href="#image-b5005763e527b1edc2dfca3c0c36dd3f" class="lightbox-link">
+<a href="#image-ddca148fcda12a5f3710d3c340440cd8" class="lightbox-link">
 <img src="../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-b5005763e527b1edc2dfca3c0c36dd3f">
+<a href="javascript:history.back();" class="lightbox" id="image-ddca148fcda12a5f3710d3c340440cd8">
 <img src="../images/logo.svg?classes=shadow&amp;height=50px" alt="Logo" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-fully-qualified">External fully qualified</h3>
 <p>
 		
-<a href="#image-c0680331ab15a840f752ebb31b323c04" class="lightbox-link">
+<a href="#image-d5c18d13c6955de8396866f233f9e32b" class="lightbox-link">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c0680331ab15a840f752ebb31b323c04">
+<a href="javascript:history.back();" class="lightbox" id="image-d5c18d13c6955de8396866f233f9e32b">
 <img src="https://octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme">External without scheme</h3>
 <p>
 		
-<a href="#image-3fd45af1eeed9cb582f45fc81a5ccb23" class="lightbox-link">
+<a href="#image-70b827fe058674e0abc8c178ef74762b" class="lightbox-link">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-3fd45af1eeed9cb582f45fc81a5ccb23">
+<a href="javascript:history.back();" class="lightbox" id="image-70b827fe058674e0abc8c178ef74762b">
 <img src="//octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h3 id="external-without-scheme-and-scheme-separator">External without scheme and scheme separator</h3>
 <p>
 		
-<a href="#image-36d775b443083ce0b244928d043104a0" class="lightbox-link">
+<a href="#image-fe01bb757e8c43abe764001902c25a73" class="lightbox-link">
 <img src="../tests/images/octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="shadow" style="height: 50px; width: auto;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-36d775b443083ce0b244928d043104a0">
+<a href="javascript:history.back();" class="lightbox" id="image-fe01bb757e8c43abe764001902c25a73">
 <img src="../tests/images/octodex.github.com/images/minion.png?classes=shadow&amp;height=50px" alt="Minion" class="lightbox-image" loading="lazy">
 </a></p>
 <h2 id="html">HTML</h2>
@@ -742,10 +742,10 @@ Some preformatted stuff in HTML elements
 <tr>
 <td>
 		
-<a href="#image-c5926a3e7193a07044ac55284acabe12" class="lightbox-link">
+<a href="#image-8caa556b53b8bbf50317ece28fcdcc2d" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="shadow" style="height: auto; width: 24px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c5926a3e7193a07044ac55284acabe12">
+<a href="javascript:history.back();" class="lightbox" id="image-8caa556b53b8bbf50317ece28fcdcc2d">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="lightbox-image" loading="lazy">
 </a></td>
 </tr>
@@ -828,14 +828,14 @@ Some preformatted stuff in HTML elements
 <tr>
 <td>
 <div class="expand">
-    <input type="checkbox" id="expand-c3ba5f25f0fe5f03d878ec120106483c" aria-controls="expandcontent-c3ba5f25f0fe5f03d878ec120106483c" >
-    <label class="expand-label" for="expand-c3ba5f25f0fe5f03d878ec120106483c" >
+    <input type="checkbox" id="expand-a087babca9517e41b4da078b65b1ec47" aria-controls="expandcontent-a087babca9517e41b4da078b65b1ec47" >
+    <label class="expand-label" for="expand-a087babca9517e41b4da078b65b1ec47" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-c3ba5f25f0fe5f03d878ec120106483c" class="expand-content">
+    <div id="expandcontent-a087babca9517e41b4da078b65b1ec47" class="expand-content">
 Thank you!
     </div>
 </div></td>
@@ -1011,8 +1011,8 @@ graph LR;
           </section>        </div>
       </main>
     </div>
-    <script src="../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../js/perfect-scrollbar.min.js?1675526022" defer></script>
+    <script src="../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../js/perfect-scrollbar.min.js?1675546461" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -1041,20 +1041,20 @@ graph LR;
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1675526022"></script>
-    <script src="../js/d3/d3-color.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-dispatch.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-drag.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-ease.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-interpolate.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-selection.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-timer.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-transition.min.js?1675526022" defer></script>
-    <script src="../js/d3/d3-zoom.min.js?1675526022" defer></script>
-    <script src="../js/mermaid.min.js?1675526022" defer></script>
+    <script id="MathJax-script" async src="../js/mathjax/tex-mml-chtml.js?1675546461"></script>
+    <script src="../js/d3/d3-color.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-dispatch.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-drag.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-ease.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-interpolate.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-selection.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-timer.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-transition.min.js?1675546461" defer></script>
+    <script src="../js/d3/d3-zoom.min.js?1675546461" defer></script>
+    <script src="../js/mermaid.min.js?1675546461" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../js/theme.js?1675526022" defer></script>
+    <script src="../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/tables/index.html b/tests/tables/index.html
index f88e5b0bf6..07b4cf191e 100644
--- a/tests/tables/index.html
+++ b/tests/tables/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/tables/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/tables/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/tables/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -316,10 +316,10 @@
 <tr>
 <td>
 		
-<a href="#image-c5926a3e7193a07044ac55284acabe12" class="lightbox-link">
+<a href="#image-8caa556b53b8bbf50317ece28fcdcc2d" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="shadow" style="height: auto; width: 24px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c5926a3e7193a07044ac55284acabe12">
+<a href="javascript:history.back();" class="lightbox" id="image-8caa556b53b8bbf50317ece28fcdcc2d">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="lightbox-image" loading="lazy">
 </a></td>
 </tr>
@@ -402,14 +402,14 @@
 <tr>
 <td>
 <div class="expand">
-    <input type="checkbox" id="expand-c3ba5f25f0fe5f03d878ec120106483c" aria-controls="expandcontent-c3ba5f25f0fe5f03d878ec120106483c" >
-    <label class="expand-label" for="expand-c3ba5f25f0fe5f03d878ec120106483c" >
+    <input type="checkbox" id="expand-a087babca9517e41b4da078b65b1ec47" aria-controls="expandcontent-a087babca9517e41b4da078b65b1ec47" >
+    <label class="expand-label" for="expand-a087babca9517e41b4da078b65b1ec47" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-c3ba5f25f0fe5f03d878ec120106483c" class="expand-content">
+    <div id="expandcontent-a087babca9517e41b4da078b65b1ec47" class="expand-content">
 Thank you!
     </div>
 </div></td>
@@ -634,12 +634,12 @@ graph LR;
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546461" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546461" defer></script>
+        <script src="../../js/search.js?1675546461" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -759,7 +759,8 @@ graph LR;
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -795,12 +796,12 @@ graph LR;
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546461"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -829,20 +830,20 @@ graph LR;
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1675526021"></script>
-    <script src="../../js/d3/d3-color.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1675526021" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1675526021" defer></script>
-    <script src="../../js/mermaid.min.js?1675526021" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1675546461"></script>
+    <script src="../../js/d3/d3-color.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1675546461" defer></script>
+    <script src="../../js/mermaid.min.js?1675546461" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/tables/index.print.html b/tests/tables/index.print.html
index 0ee88a9b46..44910963fe 100644
--- a/tests/tables/index.print.html
+++ b/tests/tables/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/tables/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/tables/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/tables/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -285,10 +285,10 @@
 <tr>
 <td>
 		
-<a href="#image-c5926a3e7193a07044ac55284acabe12" class="lightbox-link">
+<a href="#image-8caa556b53b8bbf50317ece28fcdcc2d" class="lightbox-link">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="shadow" style="height: auto; width: 24px;" loading="lazy">
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-c5926a3e7193a07044ac55284acabe12">
+<a href="javascript:history.back();" class="lightbox" id="image-8caa556b53b8bbf50317ece28fcdcc2d">
 <img src="https://octodex.github.com/images/spocktocat.png?classes=shadow&amp;width=24px" alt="Spock" class="lightbox-image" loading="lazy">
 </a></td>
 </tr>
@@ -371,14 +371,14 @@
 <tr>
 <td>
 <div class="expand">
-    <input type="checkbox" id="expand-c3ba5f25f0fe5f03d878ec120106483c" aria-controls="expandcontent-c3ba5f25f0fe5f03d878ec120106483c" >
-    <label class="expand-label" for="expand-c3ba5f25f0fe5f03d878ec120106483c" >
+    <input type="checkbox" id="expand-a087babca9517e41b4da078b65b1ec47" aria-controls="expandcontent-a087babca9517e41b4da078b65b1ec47" >
+    <label class="expand-label" for="expand-a087babca9517e41b4da078b65b1ec47" >
         <i class="fas fa-chevron-down"></i>
         <i class="fas fa-chevron-left expand-rtl direction-ltr"></i>
         <i class="fas fa-chevron-right expand-ltr direction-ltr"></i>
         Expand me...
     </label>
-    <div id="expandcontent-c3ba5f25f0fe5f03d878ec120106483c" class="expand-content">
+    <div id="expandcontent-a087babca9517e41b4da078b65b1ec47" class="expand-content">
 Thank you!
     </div>
 </div></td>
@@ -531,8 +531,8 @@ graph LR;
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
     <script>
       function useMathJax( config ){
         if( !Object.assign ){
@@ -561,20 +561,20 @@ graph LR;
       }
       useMathJax( JSON.parse("{}") );
     </script>
-    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1675526022"></script>
-    <script src="../../js/d3/d3-color.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-dispatch.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-drag.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-ease.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-interpolate.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-selection.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-timer.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-transition.min.js?1675526022" defer></script>
-    <script src="../../js/d3/d3-zoom.min.js?1675526022" defer></script>
-    <script src="../../js/mermaid.min.js?1675526022" defer></script>
+    <script id="MathJax-script" async src="../../js/mathjax/tex-mml-chtml.js?1675546461"></script>
+    <script src="../../js/d3/d3-color.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-dispatch.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-drag.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-ease.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-interpolate.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-selection.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-timer.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-transition.min.js?1675546461" defer></script>
+    <script src="../../js/d3/d3-zoom.min.js?1675546461" defer></script>
+    <script src="../../js/mermaid.min.js?1675546461" defer></script>
     <script>
       window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
     </script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>
diff --git a/tests/width/index.html b/tests/width/index.html
index da856f841b..7f1e7110ba 100644
--- a/tests/width/index.html
+++ b/tests/width/index.html
@@ -12,20 +12,20 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/width/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/width/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/width/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526020" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526020" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526020" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526020" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526020" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526020" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526020" rel="stylesheet">
-    <link href="../../css/variant.css?1675526020" rel="stylesheet">
-    <link href="../../css/print.css?1675526020" rel="stylesheet" media="print">
-    <script src="../../js/url.js?1675526020"></script>
-    <script src="../../js/variant.js?1675526020"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546459" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546459" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546459" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546459" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546459" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546459" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546459" rel="stylesheet">
+    <link href="../../css/variant.css?1675546459" rel="stylesheet">
+    <link href="../../css/print.css?1675546459" rel="stylesheet" media="print">
+    <script src="../../js/url.js?1675546459"></script>
+    <script src="../../js/variant.js?1675546459"></script>
     <script>
       // 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
@@ -41,7 +41,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -183,12 +183,12 @@
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="../../js/auto-complete.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.multi.min.js?1675526021" defer></script>
-        <script src="../../js/lunr/lunr.en.min.js?1675526021" defer></script>
-        <script src="../../js/search.js?1675526021" defer></script>
+        <script src="../../js/auto-complete.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.stemmer.support.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.multi.min.js?1675546460" defer></script>
+        <script src="../../js/lunr/lunr.en.min.js?1675546460" defer></script>
+        <script src="../../js/search.js?1675546460" defer></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics collapsible-menu">
@@ -308,7 +308,8 @@
                 <div class="select-style">
                   <label class="a11y-only" for="select-variant">Theme</label>
                   <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
+                    <option id="auto" value="auto" selected>Auto</option>
+                    <option id="relearn-light" value="relearn-light">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>
@@ -344,12 +345,12 @@
           <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" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
-          <script async src="../../js/buttons.js?1675526021"></script>
+          <script async src="../../js/buttons.js?1675546460"></script>
         </div>
       </div>
     </aside>
-    <script src="../../js/clipboard.min.js?1675526021" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526021" defer></script>
-    <script src="../../js/theme.js?1675526021" defer></script>
+    <script src="../../js/clipboard.min.js?1675546460" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546460" defer></script>
+    <script src="../../js/theme.js?1675546460" defer></script>
   </body>
 </html>
diff --git a/tests/width/index.print.html b/tests/width/index.print.html
index 18a4f3c9f8..ba5b30a8d9 100644
--- a/tests/width/index.print.html
+++ b/tests/width/index.print.html
@@ -12,21 +12,21 @@
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/width/index.html" rel="alternate" hreflang="x-default">
     <link href="https://McShelby.github.io/hugo-theme-relearn/tests/width/index.html" rel="alternate" hreflang="en">
     <link href="https://McShelby.github.io/hugo-theme-relearn/pir/tests/width/index.html" rel="alternate" hreflang="pir">
-    <link href="../../images/logo.svg?1675526020" rel="icon" type="image/svg+xml">
+    <link href="../../images/logo.svg?1675546459" rel="icon" type="image/svg+xml">
     <!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
-    <link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/auto-complete.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/perfect-scrollbar.min.css?1675526022" rel="stylesheet">
-    <link href="../../css/nucleus.css?1675526022" rel="stylesheet">
-    <link href="../../css/fonts.css?1675526022" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675526022" rel="stylesheet"></noscript>
-    <link href="../../css/theme.css?1675526022" rel="stylesheet">
-    <link href="../../css/theme-relearn-light.css?1675526022" rel="stylesheet" id="variant-style">
-    <link href="../../css/ie.css?1675526022" rel="stylesheet">
-    <link href="../../css/variant.css?1675526022" rel="stylesheet">
-    <link href="../../css/print.css?1675526022" rel="stylesheet" media="print">
-    <link href="../../css/format-print.css?1675526022" rel="stylesheet">
-    <script src="../../js/url.js?1675526022"></script>
-    <script src="../../js/variant.js?1675526022"></script>
+    <link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/auto-complete.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/perfect-scrollbar.min.css?1675546461" rel="stylesheet">
+    <link href="../../css/nucleus.css?1675546461" rel="stylesheet">
+    <link href="../../css/fonts.css?1675546461" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1675546461" rel="stylesheet"></noscript>
+    <link href="../../css/theme.css?1675546461" rel="stylesheet">
+    <link href="../../css/theme-auto.css?1675546461" rel="stylesheet" id="variant-style">
+    <link href="../../css/ie.css?1675546461" rel="stylesheet">
+    <link href="../../css/variant.css?1675546461" rel="stylesheet">
+    <link href="../../css/print.css?1675546461" rel="stylesheet" media="print">
+    <link href="../../css/format-print.css?1675546461" rel="stylesheet">
+    <script src="../../js/url.js?1675546461"></script>
+    <script src="../../js/variant.js?1675546461"></script>
     <script>
       // 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
@@ -42,7 +42,7 @@
       window.T_N_results_found = '{1} results found for \u0022{0}\u0022';
       // some further base stuff
       var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
-      window.variants && variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
+      window.variants && variants.init( [ 'auto', 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
     </script>
     <style>
       #body img.bg-white {
@@ -96,8 +96,8 @@
         </div>
       </main>
     </div>
-    <script src="../../js/clipboard.min.js?1675526022" defer></script>
-    <script src="../../js/perfect-scrollbar.min.js?1675526022" defer></script>
-    <script src="../../js/theme.js?1675526022" defer></script>
+    <script src="../../js/clipboard.min.js?1675546461" defer></script>
+    <script src="../../js/perfect-scrollbar.min.js?1675546461" defer></script>
+    <script src="../../js/theme.js?1675546461" defer></script>
   </body>
 </html>