diff --git a/404.html b/404.html
index 5c52b5d7f2..142f8b003c 100644
--- a/404.html
+++ b/404.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>404 Page not found :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
     <style>
       p, li, ul {
         text-align: center
diff --git a/basics/changelog/index.html b/basics/changelog/index.html
index 59be91084b..e6d39e22b2 100644
--- a/basics/changelog/index.html
+++ b/basics/changelog/index.html
@@ -9,76 +9,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title> :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/changelog/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -179,7 +127,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -734,13 +682,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -752,6 +700,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/basics/configuration/index.html b/basics/configuration/index.html
index 1efe6e8f42..c02485e512 100644
--- a/basics/configuration/index.html
+++ b/basics/configuration/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Configuration :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/configuration/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/configuration/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -396,13 +344,13 @@ default values:</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -414,6 +362,6 @@ default values:</p>
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/basics/customization/index.html b/basics/customization/index.html
index 7f0d8640a2..44e55d13ac 100644
--- a/basics/customization/index.html
+++ b/basics/customization/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Customization :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/customization/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/customization/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -431,13 +379,13 @@ You could use an <code>img</code> HTML tag and reference an image created under
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -449,6 +397,6 @@ You could use an <code>img</code> HTML tag and reference an image created under
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/basics/generator/index.html b/basics/generator/index.html
index 87c70ccfbc..6b1b397f79 100644
--- a/basics/generator/index.html
+++ b/basics/generator/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Stylesheet generator :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/generator/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/generator/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -179,7 +127,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -192,12 +140,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -209,7 +157,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -289,293 +237,9 @@
 <p>This is best seen in the <code>neon</code> variant with the differnet headings colors. There, colors for the heading <code>h1</code>, <code>h2</code>, <code>h3</code> and <code>h4</code> are explicitly set. <code>h5</code> is not set and inherits its value from <code>h4</code>. <code>h6</code> is also not set and inherits its value from <code>h5</code>.</p>
 <h2 id="variant-generator">Variant generator</h2>
 <div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div>
-<p><a id="vardownload" class="btn btn-default">Download color variant</a></p>
+<p><a class="vardownload btn btn-default">Download color variant</a></p>
 <script>
-function initGraph(){
-  var graphDefinition = generateGraph();
-  var element = document.querySelector( '#vargenerator' );
-  element.innerHTML = graphDefinition;
-
-  var interval_id = setInterval( function(){
-    if( document.querySelectorAll( '#vargenerator.mermaid > svg' ).length ){
-      clearInterval( interval_id );
-      generateGraphStyles();
-    }
-  }, 100 );
-
-  var btn = document.querySelector( '#vardownload' );
-  btn.addEventListener('click', getStylesheet);
-};
-
-function download(data, mimetype, filename){
-    var blob = new Blob([data], { type: mimetype });
-    var url = window.URL.createObjectURL(blob);
-    var a = document.createElement('a');
-    a.setAttribute('href', url);
-    a.setAttribute('download', filename);
-    a.click();
-}
-
-function getStylesheet(){
-  download( generateStylesheet(), 'text/css', 'theme-' + themename + '.css' );
-}
-
-function adjustCSSRules(selector, props, sheets){
-  // get stylesheet(s)
-  if (!sheets) sheets = [...document.styleSheets];
-  else if (sheets.sup){    // sheets is a string
-    let absoluteURL = new URL(sheets, document.baseURI).href;
-    sheets = [...document.styleSheets].filter(i => i.href == absoluteURL);
-  }
-  else sheets = [sheets];  // sheets is a stylesheet
-
-  // CSS (& HTML) reduce spaces in selector to one.
-  selector = selector.replace(/\s+/g, ' ');
-  const findRule = s => [...s.cssRules].reverse().find(i => i.selectorText == selector)
-  let rule = sheets.map(findRule).filter(i=>i).pop()
-
-  const propsArr = props.sup
-    ? props.split(/\s*;\s*/).map(i => i.split(/\s*:\s*/)) // from string
-    : Object.entries(props);                              // from Object
-
-  if (rule) for (let [prop, val] of propsArr){
-    // rule.style[prop] = val; is against the spec, and does not support !important.
-    rule.style.setProperty(prop, ...val.split(/ *!(?=important)/));
-  }
-  else {
-    sheet = sheets.pop();
-    if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, '');
-    sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length);
-  }
-}
-
-function normalizeColor( c ){
-  c = c.trim();
-  c = c.replace( /\s*\(\s*/, "( " );
-  c = c.replace( /\s*\)\s*/, " )" );
-  c = c.replace( /\s*,\s*/, ", " );
-  c = c.replace( /0*\./, "." );
-  c = c.replace( / +/, " " );
-  return c;
-}
-function getColorValue( c ){
-  return normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) );
-}
-
-function changeColor( c ){
-  var style = null;
-  var theme = getTheme();
-  for( var n = 0; n < document.styleSheets.length; ++n ){
-    if( theme = parseTheme( document.styleSheets[n].href ) ){
-      var s = document.styleSheets[n];
-      for( var m = 0; m < s.rules.length; ++m ){
-        if( s.rules[m].selectorText == ':root' ){
-          style = s.rules[m].style;
-          break;
-        }
-      }
-      break;
-    }
-  }
-  if( !style ){
-    alert( 'Theme stylesheet for theme "' + theme + '" not set or found' );
-    return;
-  }
-
-  var r = document.querySelector( ':root' );
-  var v = getColorValue( c );
-  var n = prompt( '--'+c, v ).trim();
-  if( n ){
-    r = style.quer
-    style.setProperty( '--'+c, n );
-  }
-  else{
-    style.removeProperty( '--'+c );
-  }
-}
-
-function generateColorVariable( e ){
-  var v = '';
-  var gen = true;
-  if( e.fallback ){
-    f = variables.find( function( x ){
-      return x.name == e.fallback;
-    });
-    gen = getColorValue(f.name) != getColorValue(e.name);
-  }
-  else if( e.default ){
-    gen = e.default != getColorValue(e.name);
-  }
-  if( gen ){
-    v += '  --' + e.name + ': ' + getColorValue(e.name) + ';\n';
-  }
-  return v;
-}
-
-function generateStylesheet(){
-  var style =
-    '/* ' + themename + ' */\n' +
-    ':root {\n' +
-      variables.reduce( function( a, e ){ return a + generateColorVariable( e ); }, '' ) +
-    '}\n';
-  return style;
-}
-
-function styleGroup( selector, colorvar ){
-  adjustCSSRules( '#body svg '+selector+' > rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
-  adjustCSSRules( '#body svg '+selector+' > .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
-  adjustCSSRules( '#body svg '+selector+' > .cluster-label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
-//  adjustCSSRules( '#body svg '+selector+' rect', 'stroke: #80808080;' );
-  adjustCSSRules( '#body svg '+selector+' .nodeLabel', 'filter: grayscale(1) invert(1) contrast(10000);' );
-}
-
-function generateGraphStyles(){
-  variables.forEach( function( e ){
-    styleGroup( '.'+e.name, e.name );
-  });
-  styleGroup( '#maincontent', 'MAIN-BG-color' )
-  styleGroup( '#mainheadings', 'MAIN-BG-color' )
-  styleGroup( '#inlinecode', 'CODE-INLINE-BG-color' )
-  styleGroup( '#blockcode', 'CODE-BLOCK-BG-color' )
-  styleGroup( '#coloredboxes', 'BOX-BG-color' );
-  styleGroup( '#menu', 'MENU-SECTIONS-BG-color' )
-  styleGroup( '#menuheader', 'MENU-HEADER-BG-color' )
-  styleGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' )
-}
-
-function generateEdge( e ){
-  var edge = '';
-  if( e.fallback ){
-    edge += e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name;
-  }
-  else{
-    edge += e.name+':::'+e.name;
-  }
-  return edge;
-}
-
-function generateGraph(){
-  var g_groups = {};
-  var g_handler = '';
-
-  variables.forEach( function( e ){
-    var group = e.group || ' ';
-    g_groups[ group ] = ( g_groups[ group ] || [] ).concat( e );
-    g_handler += '  click '+e.name+' changeColor\n';
-  });
-
-  var graph =
-    'flowchart LR\n' +
-    '  subgraph menu["menu"]\n' +
-    '    direction TB\n' +
-    '    subgraph menuheader["header"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'header' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph menusections["sections"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'sections' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '  end\n' +
-    '  subgraph maincontent["content"]\n' +
-    '    direction TB\n' +
-         g_groups[ 'content' ].reduce( function( a, e ){ return a + '    ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    subgraph mainheadings["headings"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'headings' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph inlinecode["inline code"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'inline code' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph blockcode["code blocks"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph coloredboxes["colored boxes"]\n' +
-    '      direction LR\n' +
-           g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '  end\n' +
-       g_handler;
-
-  console.log( graph );
-  return graph;
-}
-
-var themename = 'my-variant';
-var variables = [
-  { name: 'MAIN-TEXT-color',       group: 'content',  default: '#101010' },
-  { name: 'MAIN-LINK-color',       group: 'content',  default: '#486ac9' },
-  { name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color' },
-  { name: 'MAIN-ANCHOR-color',     group: 'content', fallback: 'MAIN-LINK-color' },
-  { name: 'MAIN-BG-color',         group: 'content',  default: '#ffffff' },
-  { name: 'TAG-BG-color',          group: 'content', fallback: 'MENU-HEADER-BG-color' },
-
-  { name: 'MAIN-TITLES-TEXT-color',  group: 'headings',  default: '#444753' },
-  { name: 'MAIN-TITLES-H1-color',    group: 'headings', fallback: 'MAIN-TEXT-color' },
-  { name: 'MAIN-TITLES-H2-color',    group: 'headings', fallback: 'MAIN-TITLES-TEXT-color' },
-  { name: 'MAIN-TITLES-H3-color',    group: 'headings', fallback: 'MAIN-TITLES-H2-color' },
-  { name: 'MAIN-TITLES-H4-color',    group: 'headings', fallback: 'MAIN-TITLES-H3-color' },
-  { name: 'MAIN-TITLES-H5-color',    group: 'headings', fallback: 'MAIN-TITLES-H4-color' },
-  { name: 'MAIN-TITLES-H6-color',    group: 'headings', fallback: 'MAIN-TITLES-H5-color' },
-
-  { name: 'CODE-BLOCK-color',        group: 'code blocks',  default: '#000000' },
-  { name: 'CODE-BLOCK-BG-color',     group: 'code blocks',  default: '#f8f8f8' },
-  { name: 'CODE-BLOCK-BORDER-color', group: 'code blocks', fallback: 'CODE-BLOCK-BG-color' },
-
-  { name: 'CODE-INLINE-color',        group: 'inline code',  default: '#5e5e5e' },
-  { name: 'CODE-INLINE-BG-color',     group: 'inline code',  default: '#fffae9' },
-  { name: 'CODE-INLINE-BORDER-color', group: 'inline code', fallback: 'CODE-INLINE-BG-color' },
-
-  { name: 'MENU-HEADER-BG-color',       group: 'header',  default: '#7dc903' },
-  { name: 'MENU-HEADER-BORDER-color',   group: 'header', fallback: 'MENU-HEADER-BG-color' },
-  { name: 'MENU-HOME-LINK-color',       group: 'header',  default: '#323232' },
-  { name: 'MENU-HOME-LINK-HOVER-color', group: 'header',  default: '#808080' },
-  { name: 'MENU-SEARCH-color',          group: 'header',  default: '#e0e0e0' },
-  { name: 'MENU-SEARCH-BG-color',       group: 'header',  default: '#323232' },
-  { name: 'MENU-SEARCH-BOX-color',      group: 'header', fallback: 'MENU-SEARCH-BG-color' },
-
-  { name: 'MENU-SECTIONS-BG-color',                group: 'sections',  default: '#282830' },
-  { name: 'MENU-SECTIONS-ACTIVE-BG-color',         group: 'sections',  default: '#202028' },
-  { name: 'MENU-SECTION-ACTIVE-CATEGORY-color',    group: 'sections',  default: '#444444' },
-  { name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections', fallback: 'MAIN-BG-color' },
-  { name: 'MENU-SECTIONS-LINK-color',              group: 'sections',  default: '#bababa' },
-  { name: 'MENU-SECTIONS-LINK-HOVER-color',        group: 'sections', fallback: 'MENU-SECTIONS-LINK-color' },
-  { name: 'MENU-VISITED-color',                    group: 'sections',  default: '#506397' },
-  { name: 'MENU-SECTION-HR-color',                 group: 'sections',  default: '#606060' },
-
-  { name: 'BOX-CAPTION-color',                 group: 'colored boxes',  default: 'rgba( 255, 255, 255, 1 )' },
-  { name: 'BOX-BG-color',                      group: 'colored boxes',  default: 'rgba( 255, 255, 255, .833 )' },
-  { name: 'BOX-TEXT-color',                    group: 'colored boxes',  default: 'rgba( 16, 16, 16, 1 )' },
-
-  { name: 'BOX-BLUE-color',                    group: 'colored boxes',  default: 'rgba( 48, 117, 229, 1 )' },
-  { name: 'BOX-INFO-color',                    group: 'colored boxes', fallback: 'BOX-BLUE-color' },
-  { name: 'BOX-BLUE-TEXT-color',               group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-INFO-TEXT-color',               group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color' },
-
-  { name: 'BOX-GREEN-color',                   group: 'colored boxes',  default: 'rgba( 42, 178, 24, 1 )' },
-  { name: 'BOX-TIP-color',                     group: 'colored boxes', fallback: 'BOX-GREEN-color' },
-  { name: 'BOX-GREEN-TEXT-color',              group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-TIP-TEXT-color',                group: 'colored boxes', fallback: 'BOX-GREEN-TEXT-color' },
-
-  { name: 'BOX-GREY-color',                    group: 'colored boxes',  default: 'rgba( 128, 128, 128, 1 )' },
-  { name: 'BOX-NEUTRAL-color',                 group: 'colored boxes', fallback: 'BOX-GREY-color' },
-  { name: 'BOX-GREY-TEXT-color',               group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-NEUTRAL-TEXT-color',            group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color' },
-
-  { name: 'BOX-ORANGE-color',                  group: 'colored boxes',  default: 'rgba( 237, 153, 9, 1 )' },
-  { name: 'BOX-NOTE-color',                    group: 'colored boxes', fallback: 'BOX-ORANGE-color' },
-  { name: 'BOX-ORANGE-TEXT-color',             group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-NOTE-TEXT-color',               group: 'colored boxes', fallback: 'BOX-ORANGE-TEXT-color' },
-
-  { name: 'BOX-RED-color',                     group: 'colored boxes',  default: 'rgba( 224, 62, 62, 1 )' },
-  { name: 'BOX-WARNING-color',                 group: 'colored boxes', fallback: 'BOX-RED-color' },
-  { name: 'BOX-RED-TEXT-color',                group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-WARNING-TEXT-color',            group: 'colored boxes', fallback: 'BOX-RED-TEXT-color' },
-];
-
-initGraph();
+variants.generator( '#vargenerator', '.vardownload' );
 </script>
 
           <footer class=" footline">
@@ -586,13 +250,13 @@ initGraph();
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -604,6 +268,6 @@ initGraph();
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/basics/history/index.html b/basics/history/index.html
index 9915939a4b..5115eefef1 100644
--- a/basics/history/index.html
+++ b/basics/history/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>History :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/history/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/history/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -736,13 +684,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -754,6 +702,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/basics/index.html b/basics/index.html
index 02d5583277..dd0288e11b 100644
--- a/basics/index.html
+++ b/basics/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Basics :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -283,13 +231,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -301,6 +249,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/basics/installation/index.html b/basics/installation/index.html
index ec35496614..976501ff0f 100644
--- a/basics/installation/index.html
+++ b/basics/installation/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Installation :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/installation/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/installation/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -352,13 +300,13 @@ hugo new basics/second-content/_index.md
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -370,6 +318,6 @@ hugo new basics/second-content/_index.md
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/basics/migration/index.html b/basics/migration/index.html
index 5773fcedd1..ae627a744c 100644
--- a/basics/migration/index.html
+++ b/basics/migration/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>What&#39;s new :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/migration/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/migration/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -514,13 +462,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -532,6 +480,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/basics/requirements/index.html b/basics/requirements/index.html
index d6643451ce..8597514a58 100644
--- a/basics/requirements/index.html
+++ b/basics/requirements/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Requirements :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/basics/requirements/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/basics/requirements/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -283,13 +231,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -301,6 +249,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/categories/index.html b/categories/index.html
index 70959ed1e3..4b1907abae 100644
--- a/categories/index.html
+++ b/categories/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Categories :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/categories/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/categories/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -274,13 +222,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -292,6 +240,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/cont/archetypes/index.html b/cont/archetypes/index.html
index e492186214..fd6b804137 100644
--- a/cont/archetypes/index.html
+++ b/cont/archetypes/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Archetypes :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/archetypes/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -320,13 +268,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -338,6 +286,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/cont/i18n/index.html b/cont/i18n/index.html
index ed441ec302..eb9d7fca93 100644
--- a/cont/i18n/index.html
+++ b/cont/i18n/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Multilingual and i18n :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/cont/i18n/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/i18n/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -356,13 +304,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -374,6 +322,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/cont/icons/index.html b/cont/icons/index.html
index 4cd4d370e4..a4fcebfbba 100644
--- a/cont/icons/index.html
+++ b/cont/icons/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Icons and logos :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/icons/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -311,13 +259,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -329,6 +277,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/cont/index.html b/cont/index.html
index ce591b4ec4..b1a028e1e2 100644
--- a/cont/index.html
+++ b/cont/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Content :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/cont/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -283,13 +231,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -301,6 +249,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/cont/markdown/index.html b/cont/markdown/index.html
index 428def84b0..e77b186c4c 100644
--- a/cont/markdown/index.html
+++ b/cont/markdown/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Markdown syntax :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/markdown/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -836,13 +784,13 @@ grunt.initConfig({
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -854,6 +802,6 @@ grunt.initConfig({
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/cont/menushortcuts/index.html b/cont/menushortcuts/index.html
index a0e85c397d..b951727210 100644
--- a/cont/menushortcuts/index.html
+++ b/cont/menushortcuts/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Menu extra shortcuts :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/menushortcuts/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -398,13 +346,13 @@ However, if you want to keep the title but change its value, it can be overriden
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -416,6 +364,6 @@ However, if you want to keep the title but change its value, it can be overriden
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/cont/pages/index.html b/cont/pages/index.html
index 2026e42bf3..a186fb3719 100644
--- a/cont/pages/index.html
+++ b/cont/pages/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Pages organization :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/cont/pages/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/pages/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -432,13 +380,13 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -450,6 +398,6 @@ We&rsquo;ve added the <code>menuTitle</code> parameter for that purpose:</p>
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/cont/syntaxhighlight/index.html b/cont/syntaxhighlight/index.html
index d8a095a857..89e98afad1 100644
--- a/cont/syntaxhighlight/index.html
+++ b/cont/syntaxhighlight/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Code highlighting :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/syntaxhighlight/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -336,13 +284,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -354,6 +302,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/cont/tags/index.html b/cont/tags/index.html
index 30d50fed19..bf37531c12 100644
--- a/cont/tags/index.html
+++ b/cont/tags/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Tags :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/cont/tags/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -312,13 +260,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -330,6 +278,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/css/theme-neon.css b/css/theme-neon.css
index 532a0b2cec..d428436798 100644
--- a/css/theme-neon.css
+++ b/css/theme-neon.css
@@ -15,7 +15,7 @@
 
     --MAIN-LINK-color: #1c90f3; /* Color of links */
     --MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */
+    --MAIN-ANCHOR-color: #4cabff; /* color of anchors on titles */
     --MAIN-BG-color: #202020; /* color for code background */
 
     /* adjusted to neon chroma style */
diff --git a/css/theme-relearn-dark.css b/css/theme-relearn-dark.css
index 440d9c70ea..832f56f086 100644
--- a/css/theme-relearn-dark.css
+++ b/css/theme-relearn-dark.css
@@ -10,7 +10,7 @@
     --MAIN-TITLES-TEXT-color: #ffffff; /* Color of titles h2-h3-h4-h5-h6 */
     --MAIN-LINK-color: #1c90f3; /* Color of links */
     --MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */
+    --MAIN-ANCHOR-color: #4cabff; /* color of anchors on titles */
     --MAIN-BG-color: #202020; /* color for code background */
 
     /* adjusted to relearn-dark chroma style */
diff --git a/css/theme-relearn-light.css b/css/theme-relearn-light.css
index 1aa0096b4c..3b38078b8d 100644
--- a/css/theme-relearn-light.css
+++ b/css/theme-relearn-light.css
@@ -10,7 +10,7 @@
     --MAIN-TITLES-TEXT-color: #4a4a4a; /* Color of titles h2-h3-h4-h5-h6 */
     --MAIN-LINK-color: #486ac9; /* Color of links */
     --MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */
+    --MAIN-ANCHOR-color: #134fbf; /* color of anchors on titles */
     --MAIN-BG-color: #ffffff; /* color of text by default */
 
     /* adjusted to relearn-light chroma style */
diff --git a/css/theme.css b/css/theme.css
index 497e966561..efbe52364c 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -1133,7 +1133,7 @@ option {
     display: none;
 }
 
-/* expander expand collapsed marked, must override logic of expand.html, controlled by relearn.js */
+/* expander expand collapsed marked, must override logic of expand.html, controlled by theme.js */
 .expand:not(.expand-expanded).expand-marked > .expand-label > .fa-chevron-down {
     display: inline-block;
 }
@@ -1307,7 +1307,7 @@ option {
 
 /* anchors */
 .anchor {
-  color: #486ac9; /* var(--MAIN-ANCHOR-color) */
+  color: #134fbf; /* var(--MAIN-ANCHOR-color) */
   cursor: pointer;
   font-size: .5em;
   margin-left: .66em;
@@ -1441,10 +1441,14 @@ h6 a {
   }
 }
 
-/* turn off animiation in IE because this causes the menu
-to move in from the left on every page load */
 @media all and (-ms-high-contrast:none) {
+    /* turn off animiation in IE because this causes the menu
+    to move in from the left on every page load */
     .default-animation{
         transition: none;
     }
+    /* turn off variant selector as it uses modern stuff */
+    #select-variant-container{
+        display: none;
+    }
 }
diff --git a/css/variant.css b/css/variant.css
index 47c954bbc7..a32f154e58 100644
--- a/css/variant.css
+++ b/css/variant.css
@@ -1,9 +1,9 @@
 :root {
     --INTERNAL-MAIN-TEXT-color: var(--MAIN-TEXT-color, #101010);
-    --INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, #444753);
+    --INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, #4a4a4a);
     --INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, #486ac9);
     --INTERNAL-MAIN-LINK-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color));
-    --INTERNAL-MAIN-ANCHOR-color: var(--MAIN-ANCHOR-color, var(--INTERNAL-MAIN-LINK-color));
+    --INTERNAL-MAIN-ANCHOR-color: var(--MAIN-ANCHOR-color, var(--INTERNAL-MAIN-LINK-HOVER-color));
     --INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, #ffffff);
 
     --INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color));
@@ -34,7 +34,7 @@
     --INTERNAL-MENU-SEARCH-BOX-color: var(--MENU-SEARCH-BOX-color, var(--INTERNAL-MENU-SEARCH-BG-color));
 
     --INTERNAL-MENU-SECTIONS-ACTIVE-BG-color: var(--MENU-SECTIONS-ACTIVE-BG-color, rgba( 0, 0, 0, .166 ));
-    --INTERNAL-MENU-SECTIONS-BG-color: var(--MENU-SECTIONS-BG-color, #282830);
+    --INTERNAL-MENU-SECTIONS-BG-color: var(--MENU-SECTIONS-BG-color, #282828);
     --INTERNAL-MENU-SECTIONS-LINK-color: var(--MENU-SECTIONS-LINK-color, #bababa);
     --INTERNAL-MENU-SECTIONS-LINK-HOVER-color: var(--MENU-SECTIONS-LINK-HOVER-color, var(--INTERNAL-MENU-SECTIONS-LINK-color));
     --INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color: var(--MENU-SECTION-ACTIVE-CATEGORY-color, #444444);
diff --git a/index.html b/index.html
index 3dec09485e..7e3fc2bc71 100644
--- a/index.html
+++ b/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Relearn Theme for Hugo :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -335,13 +283,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -353,6 +301,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/index.json b/index.json
index adfd041a51..f61b97546b 100644
--- a/index.json
+++ b/index.json
@@ -132,7 +132,7 @@
     "uri": "/hugo-theme-relearn/cont/menushortcuts/"
   },
   {
-    "content": "This interactive tool may help you to generate your own color variant stylesheet.\nTo get started, first select a color variant from the theme selector that fits you best as a starting point.\nThe graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph and the page will update accordingly.\nThe arrowed lines reflect how colors are inherited thru different parts of the theme if the descendent isn’t overwritten. If you want to delete a color and let it inherit from its parent, just delete the value from the input field.\nThis is best seen in the neon variant with the differnet headings colors. There, colors for the heading h1, h2, h3 and h4 are explicitly set. h5 is not set and inherits its value from h4. h6 is also not set and inherits its value from h5.\nVariant generator Graph Download color variant\n function initGraph(){ var graphDefinition = generateGraph(); var element = document.querySelector( '#vargenerator' ); element.innerHTML = graphDefinition; var interval_id = setInterval( function(){ if( document.querySelectorAll( '#vargenerator.mermaid  svg' ).length ){ clearInterval( interval_id ); generateGraphStyles(); } }, 100 ); var btn = document.querySelector( '#vardownload' ); btn.addEventListener('click', getStylesheet); }; function download(data, mimetype, filename){ var blob = new Blob([data], { type: mimetype }); var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.setAttribute('href', url); a.setAttribute('download', filename); a.click(); } function getStylesheet(){ download( generateStylesheet(), 'text/css', 'theme-' + themename + '.css' ); } function adjustCSSRules(selector, props, sheets){ // get stylesheet(s) if (!sheets) sheets = [...document.styleSheets]; else if (sheets.sup){ // sheets is a string let absoluteURL = new URL(sheets, document.baseURI).href; sheets = [...document.styleSheets].filter(i = i.href == absoluteURL); } else sheets = [sheets]; // sheets is a stylesheet // CSS (\u0026 HTML) reduce spaces in selector to one. selector = selector.replace(/\\s+/g, ' '); const findRule = s = [...s.cssRules].reverse().find(i = i.selectorText == selector) let rule = sheets.map(findRule).filter(i=i).pop() const propsArr = props.sup ? props.split(/\\s*;\\s*/).map(i = i.split(/\\s*:\\s*/)) // from string : Object.entries(props); // from Object if (rule) for (let [prop, val] of propsArr){ // rule.style[prop] = val; is against the spec, and does not support !important. rule.style.setProperty(prop, ...val.split(/ *!(?=important)/)); } else { sheet = sheets.pop(); if (!props.sup) props = propsArr.reduce((str, [k, v]) = `${str}; ${k}: ${v}`, ''); sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length); } } function normalizeColor( c ){ c = c.trim(); c = c.replace( /\\s*\\(\\s*/, \"( \" ); c = c.replace( /\\s*\\)\\s*/, \" )\" ); c = c.replace( /\\s*,\\s*/, \", \" ); c = c.replace( /0*\\./, \".\" ); c = c.replace( / +/, \" \" ); return c; } function getColorValue( c ){ return normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) ); } function changeColor( c ){ var style = null; var theme = getTheme(); for( var n = 0; n rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' ); adjustCSSRules( '#body svg '+selector+'  .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' ); adjustCSSRules( '#body svg '+selector+'  .cluster-label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' ); // adjustCSSRules( '#body svg '+selector+' rect', 'stroke: #80808080;' ); adjustCSSRules( '#body svg '+selector+' .nodeLabel', 'filter: grayscale(1) invert(1) contrast(10000);' ); } function generateGraphStyles(){ variables.forEach( function( e ){ styleGroup( '.'+e.name, e.name ); }); styleGroup( '#maincontent', 'MAIN-BG-color' ) styleGroup( '#mainheadings', 'MAIN-BG-color' ) styleGroup( '#inlinecode', 'CODE-INLINE-BG-color' ) styleGroup( '#blockcode', 'CODE-BLOCK-BG-color' ) styleGroup( '#coloredboxes', 'BOX-BG-color' ); styleGroup( '#menu', 'MENU-SECTIONS-BG-color' ) styleGroup( '#menuheader', 'MENU-HEADER-BG-color' ) styleGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' ) } function generateEdge( e ){ var edge = ''; if( e.fallback ){ edge += e.fallback+':::'+e.fallback+' -- '+e.name+':::'+e.name; } else{ edge += e.name+':::'+e.name; } return edge; } function generateGraph(){ var g_groups = {}; var g_handler = ''; variables.forEach( function( e ){ var group = e.group || ' '; g_groups[ group ] = ( g_groups[ group ] || [] ).concat( e ); g_handler += ' click '+e.name+' changeColor\\n'; }); var graph = 'flowchart LR\\n' + ' subgraph menu[\"menu\"]\\n' + ' direction TB\\n' + ' subgraph menuheader[\"header\"]\\n' + ' direction LR\\n' + g_groups[ 'header' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' subgraph menusections[\"sections\"]\\n' + ' direction LR\\n' + g_groups[ 'sections' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' end\\n' + ' subgraph maincontent[\"content\"]\\n' + ' direction TB\\n' + g_groups[ 'content' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' subgraph mainheadings[\"headings\"]\\n' + ' direction LR\\n' + g_groups[ 'headings' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' subgraph inlinecode[\"inline code\"]\\n' + ' direction LR\\n' + g_groups[ 'inline code' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' subgraph blockcode[\"code blocks\"]\\n' + ' direction LR\\n' + g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' subgraph coloredboxes[\"colored boxes\"]\\n' + ' direction LR\\n' + g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' end\\n' + g_handler; console.log( graph ); return graph; } var themename = 'my-variant'; var variables = [ { name: 'MAIN-TEXT-color', group: 'content', default: '#101010' }, { name: 'MAIN-LINK-color', group: 'content', default: '#486ac9' }, { name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color' }, { name: 'MAIN-ANCHOR-color', group: 'content', fallback: 'MAIN-LINK-color' }, { name: 'MAIN-BG-color', group: 'content', default: '#ffffff' }, { name: 'TAG-BG-color', group: 'content', fallback: 'MENU-HEADER-BG-color' }, { name: 'MAIN-TITLES-TEXT-color', group: 'headings', default: '#444753' }, { name: 'MAIN-TITLES-H1-color', group: 'headings', fallback: 'MAIN-TEXT-color' }, { name: 'MAIN-TITLES-H2-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color' }, { name: 'MAIN-TITLES-H3-color', group: 'headings', fallback: 'MAIN-TITLES-H2-color' }, { name: 'MAIN-TITLES-H4-color', group: 'headings', fallback: 'MAIN-TITLES-H3-color' }, { name: 'MAIN-TITLES-H5-color', group: 'headings', fallback: 'MAIN-TITLES-H4-color' }, { name: 'MAIN-TITLES-H6-color', group: 'headings', fallback: 'MAIN-TITLES-H5-color' }, { name: 'CODE-BLOCK-color', group: 'code blocks', default: '#000000' }, { name: 'CODE-BLOCK-BG-color', group: 'code blocks', default: '#f8f8f8' }, { name: 'CODE-BLOCK-BORDER-color', group: 'code blocks', fallback: 'CODE-BLOCK-BG-color' }, { name: 'CODE-INLINE-color', group: 'inline code', default: '#5e5e5e' }, { name: 'CODE-INLINE-BG-color', group: 'inline code', default: '#fffae9' }, { name: 'CODE-INLINE-BORDER-color', group: 'inline code', fallback: 'CODE-INLINE-BG-color' }, { name: 'MENU-HEADER-BG-color', group: 'header', default: '#7dc903' }, { name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color' }, { name: 'MENU-HOME-LINK-color', group: 'header', default: '#323232' }, { name: 'MENU-HOME-LINK-HOVER-color', group: 'header', default: '#808080' }, { name: 'MENU-SEARCH-color', group: 'header', default: '#e0e0e0' }, { name: 'MENU-SEARCH-BG-color', group: 'header', default: '#323232' }, { name: 'MENU-SEARCH-BOX-color', group: 'header', fallback: 'MENU-SEARCH-BG-color' }, { name: 'MENU-SECTIONS-BG-color', group: 'sections', default: '#282830' }, { name: 'MENU-SECTIONS-ACTIVE-BG-color', group: 'sections', default: '#202028' }, { name: 'MENU-SECTION-ACTIVE-CATEGORY-color', group: 'sections', default: '#444444' }, { name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections', fallback: 'MAIN-BG-color' }, { name: 'MENU-SECTIONS-LINK-color', group: 'sections', default: '#bababa' }, { name: 'MENU-SECTIONS-LINK-HOVER-color', group: 'sections', fallback: 'MENU-SECTIONS-LINK-color' }, { name: 'MENU-VISITED-color', group: 'sections', default: '#506397' }, { name: 'MENU-SECTION-HR-color', group: 'sections', default: '#606060' }, { name: 'BOX-CAPTION-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, 1 )' }, { name: 'BOX-BG-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, .833 )' }, { name: 'BOX-TEXT-color', group: 'colored boxes', default: 'rgba( 16, 16, 16, 1 )' }, { name: 'BOX-BLUE-color', group: 'colored boxes', default: 'rgba( 48, 117, 229, 1 )' }, { name: 'BOX-INFO-color', group: 'colored boxes', fallback: 'BOX-BLUE-color' }, { name: 'BOX-BLUE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' }, { name: 'BOX-INFO-TEXT-color', group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color' }, { name: 'BOX-GREEN-color', group: 'colored boxes', default: 'rgba( 42, 178, 24, 1 )' }, { name: 'BOX-TIP-color', group: 'colored boxes', fallback: 'BOX-GREEN-color' }, { name: 'BOX-GREEN-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' }, { name: 'BOX-TIP-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREEN-TEXT-color' }, { name: 'BOX-GREY-color', group: 'colored boxes', default: 'rgba( 128, 128, 128, 1 )' }, { name: 'BOX-NEUTRAL-color', group: 'colored boxes', fallback: 'BOX-GREY-color' }, { name: 'BOX-GREY-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' }, { name: 'BOX-NEUTRAL-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color' }, { name: 'BOX-ORANGE-color', group: 'colored boxes', default: 'rgba( 237, 153, 9, 1 )' }, { name: 'BOX-NOTE-color', group: 'colored boxes', fallback: 'BOX-ORANGE-color' }, { name: 'BOX-ORANGE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' }, { name: 'BOX-NOTE-TEXT-color', group: 'colored boxes', fallback: 'BOX-ORANGE-TEXT-color' }, { name: 'BOX-RED-color', group: 'colored boxes', default: 'rgba( 224, 62, 62, 1 )' }, { name: 'BOX-WARNING-color', group: 'colored boxes', fallback: 'BOX-RED-color' }, { name: 'BOX-RED-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' }, { name: 'BOX-WARNING-TEXT-color', group: 'colored boxes', fallback: 'BOX-RED-TEXT-color' }, ]; initGraph();  ",
+    "content": "This interactive tool may help you to generate your own color variant stylesheet.\nTo get started, first select a color variant from the theme selector that fits you best as a starting point.\nThe graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph and the page will update accordingly.\nThe arrowed lines reflect how colors are inherited thru different parts of the theme if the descendent isn’t overwritten. If you want to delete a color and let it inherit from its parent, just delete the value from the input field.\nThis is best seen in the neon variant with the differnet headings colors. There, colors for the heading h1, h2, h3 and h4 are explicitly set. h5 is not set and inherits its value from h4. h6 is also not set and inherits its value from h5.\nVariant generator Graph Download color variant\n variants.generator( '#vargenerator', '.vardownload' );  ",
     "description": "",
     "tags": null,
     "title": "Stylesheet generator",
diff --git a/js/relearn.js b/js/theme.js
similarity index 100%
rename from js/relearn.js
rename to js/theme.js
diff --git a/js/variant.js b/js/variant.js
new file mode 100644
index 0000000000..59d94ad525
--- /dev/null
+++ b/js/variant.js
@@ -0,0 +1,381 @@
+// we need to load this script in the html head to avoid flickering
+// on page load if the user has selected a non default variant
+var variants = {
+	variant: '',
+	variants: [],
+	customvariant: 'my-variant',
+
+	init: function( variants ){
+		this.variants = variants;
+		var variant = window.localStorage.getItem( 'variant' ) || ( this.variants.length ? this.variants[0] : '' );
+		this.changeVariant( variant );
+		document.addEventListener( 'readystatechange', function(){
+			if( document.readyState == 'interactive' ){
+				this.markSelectedVariant( this.getVariant() );
+			}
+		}.bind( this ) );
+	},
+
+	parseVariantnameFromFilename: function ( s ){
+		if( !s || !s.match ){
+			return '';
+		}
+		var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
+		var variant = matches && matches.length == 2 ? matches[ 1 ] : '';
+		return variant;
+	},
+
+	getVariant: function(){
+		return this.variant;
+	},
+
+	setVariant: function( variant ){
+		this.variant = variant;
+		window.localStorage.setItem( 'variant', variant );
+	},
+
+	markSelectedVariant: function( variant ){
+		var select = document.querySelector( '#select-variant' );
+		if( !select ){
+			return;
+		}
+		if( select.value != variant ){
+			select.value = variant;
+		}
+	},
+
+	changeVariant: function( variant ){
+		if( this.variants.indexOf( variant ) < 0 ){
+			variant = this.variants.length ? this.variants[ 0 ] : '';
+		}
+		this.setVariant( variant );
+		if( !variant ){
+			return;
+		}
+		var link = document.querySelector( '#variant-style' );
+		if( !link ){
+			return;
+		}
+		var old_path = link.getAttribute( 'href' );
+		var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + variant + '$2' );
+		if( old_path != new_path ){
+			link.setAttribute( 'href', new_path );
+			this.markSelectedVariant( variant );
+			// remove selection, because if some uses an arrow navigation"
+			// by pressing the left or right cursor key, we will automatically
+			// select a different style
+			if( document.activeElement ){
+				document.activeElement.blur();
+			}
+		}
+	},
+
+	generator: function( vargenerator, vardownload ){
+		var graphDefinition = this.generateGraph();
+		var element = document.querySelector( vargenerator );
+		element.innerHTML = graphDefinition;
+
+		var interval_id = setInterval( function(){
+			if( document.querySelectorAll( vargenerator + '.mermaid > svg' ).length ){
+				clearInterval( interval_id );
+				this.styleGraph();
+			}
+		}.bind( this ), 100 );
+
+		var btn = document.querySelector( vardownload );
+		btn.addEventListener('click', this.getStylesheet.bind( this ) );
+	},
+
+	download: function(data, mimetype, filename){
+		var blob = new Blob([data], { type: mimetype });
+		var url = window.URL.createObjectURL(blob);
+		var a = document.createElement('a');
+		a.setAttribute('href', url);
+		a.setAttribute('download', filename);
+		a.click();
+	},
+
+	getStylesheet: function(){
+		this.download( this.generateStylesheet(), 'text/css', 'theme-' + this.customvariant + '.css' );
+	},
+
+	adjustCSSRules: function(selector, props, sheets){
+		// get stylesheet(s)
+		if (!sheets) sheets = [...document.styleSheets];
+		else if (sheets.sup){    // sheets is a string
+			let absoluteURL = new URL(sheets, document.baseURI).href;
+			sheets = [...document.styleSheets].filter(i => i.href == absoluteURL);
+		}
+		else sheets = [sheets];  // sheets is a stylesheet
+
+		// CSS (& HTML) reduce spaces in selector to one.
+		selector = selector.replace(/\s+/g, ' ');
+		const findRule = s => [...s.cssRules].reverse().find(i => i.selectorText == selector)
+		let rule = sheets.map(findRule).filter(i=>i).pop()
+
+		const propsArr = props.sup
+			? props.split(/\s*;\s*/).map(i => i.split(/\s*:\s*/)) // from string
+			: Object.entries(props);                              // from Object
+
+		if (rule) for (let [prop, val] of propsArr){
+			// rule.style[prop] = val; is against the spec, and does not support !important.
+			rule.style.setProperty(prop, ...val.split(/ *!(?=important)/));
+		}
+		else {
+			sheet = sheets.pop();
+			if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, '');
+			sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length);
+		}
+	},
+
+	normalizeColor: function( c ){
+		if( !c || !c.trim ){
+			return c;
+		}
+		c = c.trim();
+		c = c.replace( /\s*\(\s*/, "( " );
+		c = c.replace( /\s*\)\s*/, " )" );
+		c = c.replace( /\s*,\s*/, ", " );
+		c = c.replace( /0*\./, "." );
+		c = c.replace( / +/, " " );
+		return c;
+	},
+
+	getColorValue: function( c ){
+		return this.normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) );
+	},
+
+	changeColor: function( c ){
+		var style = null;
+		var variant = this.variant;
+		for( var n = 0; n < document.styleSheets.length; ++n ){
+			if( variant = this.parseVariantnameFromFilename( document.styleSheets[n].href ) ){
+			var s = document.styleSheets[n];
+			for( var m = 0; m < s.rules.length; ++m ){
+				if( s.rules[m].selectorText == ':root' ){
+					style = s.rules[m].style;
+					break;
+				}
+			}
+			break;
+			}
+		}
+		if( !style ){
+			alert( 'Theme stylesheet for variant "' + variant + '" not set or found' );
+			return;
+		}
+
+		var e = this.findColor( c );
+		var p = this.normalizeColor( style.getPropertyValue( '--'+c ) ).replace( '--INTERNAL-', '--' );
+		var f = this.getColorValue( e.fallback );
+
+		var v = this.getColorValue( e.name );
+		if( v == f || v == this.normalizeColor(e.default) ){
+			v = '';
+		}
+		if( p ){
+			v = p;
+		}
+
+		var t = c + '\n\n' + e.tooltip + '\n';
+		if( e.fallback ){
+			t += '\nInherits value "' + f + '" from ' + e.fallback + ' if not set\n';
+		}
+		if( e.default ){
+			t += '\nDefaults to value "' + this.normalizeColor(e.default) + '" if not set\n';
+		}
+
+		var n = prompt( t, v );
+		if( n ){
+			n = this.normalizeColor( n ).replace( '--INTERNAL-', '--' ).replace( '--', '--INTERNAL-' );
+			style.setProperty( '--'+c, n );
+		}
+		else if( n !== null){
+			style.removeProperty( '--'+c );
+		}
+	},
+
+	findColor: function( name ){
+		var f = this.variantvariables.find( function( x ){
+			return x.name == name;
+		});
+		return f;
+	},
+
+	generateColorVariable: function( e ){
+		var v = '';
+		var gen = true;
+		if( e.fallback ){
+			f = this.findColor( e.fallback );
+			gen = this.getColorValue(f.name) != this.getColorValue(e.name);
+		}
+		else if( e.default ){
+			gen = this.normalizeColor(e.default) != this.getColorValue(e.name);
+		}
+		if( gen ){
+			v += '  --' + e.name + ': ' + this.getColorValue(e.name) + '; /* ' + e.tooltip + ' */\n';
+		}
+		return v;
+	},
+
+	generateStylesheet: function(){
+		var style =
+			'/* ' + this.customvariant + ' */\n' +
+			':root {\n' +
+			this.variantvariables.sort( function( l, r ){ return l.name.localeCompare(r.name); } ).reduce( function( a, e ){ return a + this.generateColorVariable( e ); }.bind( this ), '' ) +
+			'}\n';
+		return style;
+	},
+
+	styleGraphGroup: function( selector, colorvar ){
+		this.adjustCSSRules( '#body svg '+selector+' > rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
+		this.adjustCSSRules( '#body svg '+selector+' > .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
+		this.adjustCSSRules( '#body svg '+selector+' > .cluster-label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
+		this.adjustCSSRules( '#body svg '+selector+' .nodeLabel', 'filter: grayscale(1) invert(1) contrast(10000);' );
+	},
+
+	styleGraph: function(){
+		this.variantvariables.forEach( function( e ){
+			this.styleGraphGroup( '.'+e.name, e.name );
+		}.bind( this ) );
+		this.styleGraphGroup( '#maincontent', 'MAIN-BG-color' )
+		this.styleGraphGroup( '#mainheadings', 'MAIN-BG-color' )
+		this.styleGraphGroup( '#inlinecode', 'CODE-INLINE-BG-color' )
+		this.styleGraphGroup( '#blockcode', 'CODE-BLOCK-BG-color' )
+		this.styleGraphGroup( '#coloredboxes', 'BOX-BG-color' );
+		this.styleGraphGroup( '#menu', 'MENU-SECTIONS-BG-color' )
+		this.styleGraphGroup( '#menuheader', 'MENU-HEADER-BG-color' )
+		this.styleGraphGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' )
+	},
+
+	generateGraphEdge: function( e ){
+		var edge = '';
+		if( e.fallback ){
+			edge += e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name;
+		}
+		else{
+			edge += e.name+':::'+e.name;
+		}
+		return edge;
+	},
+
+	generateGraph: function(){
+		var g_groups = {};
+		var g_handler = '';
+
+		this.variantvariables.forEach( function( e ){
+			var group = e.group || ' ';
+			g_groups[ group ] = ( g_groups[ group ] || [] ).concat( e );
+			g_handler += '  click '+e.name+' variants.changeColor\n';
+		});
+
+		var graph =
+			'flowchart LR\n' +
+			'  subgraph menu["menu"]\n' +
+			'    direction TB\n' +
+			'    subgraph menuheader["header"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'header' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'    subgraph menusections["sections"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'sections' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'  end\n' +
+			'  subgraph maincontent["content"]\n' +
+			'    direction TB\n' +
+					g_groups[ 'content' ].reduce( function( a, e ){ return a + '    ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    subgraph mainheadings["headings"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'headings' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'    subgraph inlinecode["inline code"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'inline code' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'    subgraph blockcode["code blocks"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'    subgraph coloredboxes["colored boxes"]\n' +
+			'      direction LR\n' +
+					g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+			'    end\n' +
+			'  end\n' +
+			g_handler;
+
+		console.log( graph );
+		return graph;
+	},
+
+	variantvariables: [
+		{ name: 'MAIN-TEXT-color',                       group: 'content',        default: '#101010',                     tooltip: 'text color of content and h1 titles', },
+		{ name: 'MAIN-LINK-color',                       group: 'content',        default: '#486ac9',                     tooltip: 'link color of content', },
+		{ name: 'MAIN-LINK-HOVER-color',                 group: 'content',       fallback: 'MAIN-LINK-color',             tooltip: 'hoverd link color of content', },
+		{ name: 'MAIN-ANCHOR-color',                     group: 'content',       fallback: 'MAIN-LINK-HOVER-color',       tooltip: 'anchor color of titles', },
+		{ name: 'MAIN-BG-color',                         group: 'content',        default: '#ffffff',                     tooltip: 'background color of content', },
+		{ name: 'TAG-BG-color',                          group: 'content',       fallback: 'MENU-HEADER-BG-color',        tooltip: 'tag color', },
+
+		{ name: 'MAIN-TITLES-TEXT-color',                group: 'headings',       default: '#444753',                     tooltip: 'text color of h2-h6 titles and transparent box titles', },
+		{ name: 'MAIN-TITLES-H1-color',                  group: 'headings',      fallback: 'MAIN-TEXT-color',             tooltip: 'text color of h1 titles', },
+		{ name: 'MAIN-TITLES-H2-color',                  group: 'headings',      fallback: 'MAIN-TITLES-TEXT-color',      tooltip: 'text color of h2-h6 titles', },
+		{ name: 'MAIN-TITLES-H3-color',                  group: 'headings',      fallback: 'MAIN-TITLES-H2-color',        tooltip: 'text color of h3-h6 titles', },
+		{ name: 'MAIN-TITLES-H4-color',                  group: 'headings',      fallback: 'MAIN-TITLES-H3-color',        tooltip: 'text color of h4-h6 titles', },
+		{ name: 'MAIN-TITLES-H5-color',                  group: 'headings',      fallback: 'MAIN-TITLES-H4-color',        tooltip: 'text color of h5-h6 titles', },
+		{ name: 'MAIN-TITLES-H6-color',                  group: 'headings',      fallback: 'MAIN-TITLES-H5-color',        tooltip: 'text color of h6 titles', },
+
+		{ name: 'CODE-BLOCK-color',                      group: 'code blocks',    default: '#000000',                     tooltip: 'fallback text color of block code; should be adjusted to your selected chroma style', },
+		{ name: 'CODE-BLOCK-BG-color',                   group: 'code blocks',    default: '#f8f8f8',                     tooltip: 'fallback background color of block code; should be adjusted to your selected chroma style', },
+		{ name: 'CODE-BLOCK-BORDER-color',               group: 'code blocks',   fallback: 'CODE-BLOCK-BG-color',         tooltip: 'border color of block code', },
+
+		{ name: 'CODE-INLINE-color',                     group: 'inline code',    default: '#5e5e5e',                     tooltip: 'text color of inline code', },
+		{ name: 'CODE-INLINE-BG-color',                  group: 'inline code',    default: '#fffae9',                     tooltip: 'background color of inline code', },
+		{ name: 'CODE-INLINE-BORDER-color',              group: 'inline code',   fallback: 'CODE-INLINE-BG-color',        tooltip: 'border color of inline code', },
+
+		{ name: 'MENU-HEADER-BG-color',                  group: 'header',         default: '#7dc903',                     tooltip: 'background color of menu header', },
+		{ name: 'MENU-HEADER-BORDER-color',              group: 'header',        fallback: 'MENU-HEADER-BG-color',        tooltip: 'separator color of menu header', },
+		{ name: 'MENU-HOME-LINK-color',                  group: 'header',         default: '#323232',                     tooltip: 'home button color if configured', },
+		{ name: 'MENU-HOME-LINK-HOVER-color',            group: 'header',         default: '#808080',                     tooltip: 'hoverd home button color if configured', },
+		{ name: 'MENU-SEARCH-color',                     group: 'header',         default: '#e0e0e0',                     tooltip: 'text and icon color of search box', },
+		{ name: 'MENU-SEARCH-BG-color',                  group: 'header',         default: '#323232',                     tooltip: 'background color of search box', },
+		{ name: 'MENU-SEARCH-BOX-color',                 group: 'header',        fallback: 'MENU-SEARCH-BG-color',        tooltip: 'border color of search box', },
+
+		{ name: 'MENU-SECTIONS-BG-color',                group: 'sections',       default: '#282828',                     tooltip: 'background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc.', },
+		{ name: 'MENU-SECTIONS-ACTIVE-BG-color',         group: 'sections',       default: 'rgba( 0, 0, 0, .166 )',       tooltip: 'background color of the active menu section', },
+		{ name: 'MENU-SECTION-ACTIVE-CATEGORY-color',    group: 'sections',       default: '#444444',                     tooltip: 'text color of the displayed menu topic', },
+		{ name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections',      fallback: 'MAIN-BG-color',               tooltip: 'background color of the displayed menu topic', },
+		{ name: 'MENU-SECTIONS-LINK-color',              group: 'sections',       default: '#bababa',                     tooltip: 'link color of menu topics', },
+		{ name: 'MENU-SECTIONS-LINK-HOVER-color',        group: 'sections',      fallback: 'MENU-SECTIONS-LINK-color',    tooltip: 'hoverd link color of menu topics', },
+		{ name: 'MENU-VISITED-color',                    group: 'sections',       default: '#506397',                     tooltip: 'icon color of visited menu topics if configured', },
+		{ name: 'MENU-SECTION-HR-color',                 group: 'sections',       default: '#606060',                     tooltip: 'separator color of menu footer', },
+
+		{ name: 'BOX-CAPTION-color',                     group: 'colored boxes',  default: 'rgba( 255, 255, 255, 1 )',    tooltip: 'text color of colored box titles', },
+		{ name: 'BOX-BG-color',                          group: 'colored boxes',  default: 'rgba( 255, 255, 255, .833 )', tooltip: 'background color of colored boxes', },
+		{ name: 'BOX-TEXT-color',                        group: 'colored boxes',  default: 'rgba( 16, 16, 16, 1 )',       tooltip: 'text color of colored box content', },
+
+		{ name: 'BOX-BLUE-color',                        group: 'colored boxes',  default: 'rgba( 48, 117, 229, 1 )',     tooltip: 'background color of blue boxes', },
+		{ name: 'BOX-INFO-color',                        group: 'colored boxes', fallback: 'BOX-BLUE-color',              tooltip: 'background color of info boxes', },
+		{ name: 'BOX-BLUE-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of blue boxes', },
+		{ name: 'BOX-INFO-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color',         tooltip: 'text color of info boxes', },
+
+		{ name: 'BOX-GREEN-color',                       group: 'colored boxes',  default: 'rgba( 42, 178, 24, 1 )',      tooltip: 'background color of green boxes', },
+		{ name: 'BOX-TIP-color',                         group: 'colored boxes', fallback: 'BOX-GREEN-color',             tooltip: 'background color of tip boxes', },
+		{ name: 'BOX-GREEN-TEXT-color',                  group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of green boxes', },
+		{ name: 'BOX-TIP-TEXT-color',                    group: 'colored boxes', fallback: 'BOX-GREEN-TEXT-color',        tooltip: 'text color of tip boxes', },
+
+		{ name: 'BOX-GREY-color',                        group: 'colored boxes',  default: 'rgba( 128, 128, 128, 1 )',    tooltip: 'background color of grey boxes', },
+		{ name: 'BOX-NEUTRAL-color',                     group: 'colored boxes', fallback: 'BOX-GREY-color',              tooltip: 'background color of neutral boxes', },
+		{ name: 'BOX-GREY-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of grey boxes', },
+		{ name: 'BOX-NEUTRAL-TEXT-color',                group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color',         tooltip: 'text color of neutral boxes', },
+
+		{ name: 'BOX-ORANGE-color',                      group: 'colored boxes',  default: 'rgba( 237, 153, 9, 1 )',      tooltip: 'background color of orange boxes', },
+		{ name: 'BOX-NOTE-color',                        group: 'colored boxes', fallback: 'BOX-ORANGE-color',            tooltip: 'background color of note boxes', },
+		{ name: 'BOX-ORANGE-TEXT-color',                 group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of orange boxes', },
+		{ name: 'BOX-NOTE-TEXT-color',                   group: 'colored boxes', fallback: 'BOX-ORANGE-TEXT-color',       tooltip: 'text color of note boxes', },
+
+		{ name: 'BOX-RED-color',                         group: 'colored boxes',  default: 'rgba( 224, 62, 62, 1 )',      tooltip: 'background color of red boxes', },
+		{ name: 'BOX-WARNING-color',                     group: 'colored boxes', fallback: 'BOX-RED-color',               tooltip: 'background color of warning boxes', },
+		{ name: 'BOX-RED-TEXT-color',                    group: 'colored boxes', fallback: 'BOX-TEXT-color',              tooltip: 'text color of red boxes', },
+		{ name: 'BOX-WARNING-TEXT-color',                group: 'colored boxes', fallback: 'BOX-RED-TEXT-color',          tooltip: 'text color of warning boxes', },
+		],
+};
diff --git a/more/credits/index.html b/more/credits/index.html
index d8e4f51f7c..fbf47cf9fe 100644
--- a/more/credits/index.html
+++ b/more/credits/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Credits :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/more/credits/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/more/credits/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -298,13 +246,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -316,6 +264,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/more/showcase/index.html b/more/showcase/index.html
index 4dff0d2a31..ce7ac22826 100644
--- a/more/showcase/index.html
+++ b/more/showcase/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Showcase :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/more/showcase/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/more/showcase/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -283,13 +231,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -301,6 +249,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/pir/404.html b/pir/404.html
index e29994ad67..7c3a88e528 100644
--- a/pir/404.html
+++ b/pir/404.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>404 Page not found :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
     <style>
       p, li, ul {
         text-align: center
diff --git a/pir/basics/configuration/index.html b/pir/basics/configuration/index.html
index a848e158c6..41fad2e4bb 100644
--- a/pir/basics/configuration/index.html
+++ b/pir/basics/configuration/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Configurrrat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/configuration/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/configuration/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -391,13 +339,13 @@ default values:</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -409,6 +357,6 @@ default values:</p>
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/basics/customization/index.html b/pir/basics/customization/index.html
index 56a01a24df..ce0366eaa7 100644
--- a/pir/basics/customization/index.html
+++ b/pir/basics/customization/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Customizat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/customization/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/customization/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -417,13 +365,13 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -435,6 +383,6 @@ Ye could use an <code>img</code> HTML tag an' reference an image created under t
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/basics/generator/index.html b/pir/basics/generator/index.html
index ea6ceb975a..22f3053f99 100644
--- a/pir/basics/generator/index.html
+++ b/pir/basics/generator/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Stylesheet generrrat&#39;r :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/generator/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/generator/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -179,7 +127,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -192,12 +140,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -209,7 +157,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -287,293 +235,9 @@
 <p>This be best seen 'n th' <code>neon</code> variant wit' th' differnet head'ns colors. There, colors fer th' head'n <code>h1</code>, <code>h2</code>, <code>h3</code> an' <code>h4</code> be explicitly set. <code>h5</code> be not set an' inherits its value from <code>h4</code>. <code>h6</code> be also not set an' inherits its value from <code>h5</code>.</p>
 <h2 id="variant-generator">Variant generator</h2>
 <div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div>
-<p><a id="vardownload" class="btn btn-default">Download color variant</a></p>
+<p><a class="vardownload btn btn-default">Download color variant</a></p>
 <script>
-funct'n initGraph(){
-  var graphDefinit'n = generateGraph();
-  var element = document.querySelector( '#vargenerator' );
-  element.innerHTML = graphDefinit'n;
-
-  var interval_id = setInterval( function(){
-    if( document.querySelectorAll( '#vargenerator.mermaid > svg' ).length ){
-      clearInterval( interval_id );
-      generateGraphStyles();
-    }
-  }, 100 );
-
-  var btn = document.querySelector( '#vardownload' );
-  btn.addEventListener('click', getStylesheet);
-};
-
-funct'n download(data, mimetype, filename){
-    var blob = new Blob([data], { type: mimetype });
-    var url = window.URL.createObjectURL(blob);
-    var a = document.createElement('a');
-    a.setAttribute('href', url);
-    a.setAttribute('download', filename);
-    a.click();
-}
-
-funct'n getStylesheet(){
-  download( generateStylesheet(), 'text/css', 'theme-' + themename + '.css' );
-}
-
-funct'n adjustCSSRules(selector, props, sheets){
-  // get stylesheet(s)
-  if (!sheets) sheets = [...document.styleSheets];
-  else if (sheets.sup){    // sheets be a str'n
-    let absoluteURL = new URL(sheets, document.baseURI).href;
-    sheets = [...document.styleSheets].filter(i => i.href == absoluteURL);
-  }
-  else sheets = [sheets];  // sheets be a stylesheet
-
-  // CSS (& HTML) reduce spaces 'n selector t' one.
-  selector = selector.replace(/\s+/g, ' ');
-  const findRule = s => [...s.cssRules].reverse().find(i => i.selectorText == selector)
-  let rule = sheets.map(findRule).filter(i=>i).pop()
-
-  const propsArr = props.sup
-    ? props.split(/\s*;\s*/).map(i => i.split(/\s*:\s*/)) // from str'n
-    : Object.entries(props);                              // from Object
-
-  if (rule) fer (let [prop, val] o' propsArr){
-    // rule.style[prop] = val; be against th' spec, an' does not support !important.
-    rule.style.setProperty(prop, ...val.split(/ *!(?=important)/));
-  }
-  else {
-    sheet = sheets.pop();
-    if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, '');
-    sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length);
-  }
-}
-
-funct'n normalizeColor( c ){
-  c = c.trim();
-  c = c.replace( /\s*\(\s*/, "( " );
-  c = c.replace( /\s*\)\s*/, " )" );
-  c = c.replace( /\s*,\s*/, ", " );
-  c = c.replace( /0*\./, "." );
-  c = c.replace( / +/, " " );
-  return c;
-}
-funct'n getColorValue( c ){
-  return normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) );
-}
-
-funct'n changeColor( c ){
-  var style = null;
-  var theme = getTheme();
-  for( var n = 0; n < document.styleSheets.length; ++n ){
-    if( theme = parseTheme( document.styleSheets[n].href ) ){
-      var s = document.styleSheets[n];
-      for( var m = 0; m < s.rules.length; ++m ){
-        if( s.rules[m].selectorText == ':root' ){
-          style = s.rules[m].style;
-          break;
-        }
-      }
-      break;
-    }
-  }
-  if( !style ){
-    alert( 'Theme stylesheet fer theme "' + theme + '" not set or found' );
-    return;
-  }
-
-  var r = document.querySelector( ':root' );
-  var v = getColorValue( c );
-  var n = prompt( '--'+c, v ).trim();
-  if( n ){
-    r = style.quer
-    style.setProperty( '--'+c, n );
-  }
-  else{
-    style.removeProperty( '--'+c );
-  }
-}
-
-funct'n generateColorVariable( e ){
-  var v = '';
-  var gen = true;
-  if( e.fallback ){
-    f = variables.find( function( x ){
-      return x.name == e.fallback;
-    });
-    gen = getColorValue(f.name) != getColorValue(e.name);
-  }
-  else if( e.default ){
-    gen = e.default != getColorValue(e.name);
-  }
-  if( gen ){
-    v += '  --' + e.name + ': ' + getColorValue(e.name) + ';\n';
-  }
-  return v;
-}
-
-funct'n generateStylesheet(){
-  var style =
-    '/* ' + themename + ' */\n' +
-    ':root {\n' +
-      variables.reduce( function( a, e ){ return a + generateColorVariable( e ); }, '' ) +
-    '}\n';
-  return style;
-}
-
-funct'n styleGroup( selector, colorvar ){
-  adjustCSSRules( '#body svg '+selector+' > rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
-  adjustCSSRules( '#body svg '+selector+' > .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
-  adjustCSSRules( '#body svg '+selector+' > .cluster-label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
-//  adjustCSSRules( '#body svg '+selector+' rect', 'stroke: #80808080;' );
-  adjustCSSRules( '#body svg '+selector+' .nodeLabel', 'filter: grayscale(1) invert(1) contrast(10000);' );
-}
-
-funct'n generateGraphStyles(){
-  variables.forEach( function( e ){
-    styleGroup( '.'+e.name, e.name );
-  });
-  styleGroup( '#maincontent', 'MAIN-BG-color' )
-  styleGroup( '#mainheadings', 'MAIN-BG-color' )
-  styleGroup( '#inlinecode', 'CODE-INLINE-BG-color' )
-  styleGroup( '#blockcode', 'CODE-BLOCK-BG-color' )
-  styleGroup( '#coloredboxes', 'BOX-BG-color' );
-  styleGroup( '#menu', 'MENU-SECTIONS-BG-color' )
-  styleGroup( '#menuheader', 'MENU-HEADER-BG-color' )
-  styleGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' )
-}
-
-funct'n generateEdge( e ){
-  var edge = '';
-  if( e.fallback ){
-    edge += e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name;
-  }
-  else{
-    edge += e.name+':::'+e.name;
-  }
-  return edge;
-}
-
-funct'n generateGraph(){
-  var g_groups = {};
-  var g_handler = '';
-
-  variables.forEach( function( e ){
-    var group = e.group || ' ';
-    g_groups[ group ] = ( g_groups[ group ] || [] ).concat( e );
-    g_handler += '  click '+e.name+' changeColor\n';
-  });
-
-  var graph =
-    'flowchart LR\n' +
-    '  subgraph menu["menu"]\n' +
-    '    direct'n TB\n' +
-    '    subgraph menuheader["header"]\n' +
-    '      direct'n LR\n' +
-           g_groups[ 'header' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph menusections["sections"]\n' +
-    '      direct'n LR\n' +
-           g_groups[ 'sections' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '  end\n' +
-    '  subgraph maincontent["content"]\n' +
-    '    direct'n TB\n' +
-         g_groups[ 'content' ].reduce( function( a, e ){ return a + '    ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    subgraph mainheadings["headings"]\n' +
-    '      direct'n LR\n' +
-           g_groups[ 'headings' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph inlinecode["inline code"]\n' +
-    '      direct'n LR\n' +
-           g_groups[ 'inline code' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph blockcode["code blocks"]\n' +
-    '      direct'n LR\n' +
-           g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '    subgraph coloredboxes["colored boxes"]\n' +
-    '      direct'n LR\n' +
-           g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + '      ' + generateEdge( e ) + '\n'; }, '' ) +
-    '    end\n' +
-    '  end\n' +
-       g_handler;
-
-  console.log( graph );
-  return graph;
-}
-
-var themename = 'my-variant';
-var variables = [
-  { name: 'MAIN-TEXT-color',       group: 'content',  default: '#101010' },
-  { name: 'MAIN-LINK-color',       group: 'content',  default: '#486ac9' },
-  { name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color' },
-  { name: 'MAIN-ANCHOR-color',     group: 'content', fallback: 'MAIN-LINK-color' },
-  { name: 'MAIN-BG-color',         group: 'content',  default: '#ffffff' },
-  { name: 'TAG-BG-color',          group: 'content', fallback: 'MENU-HEADER-BG-color' },
-
-  { name: 'MAIN-TITLES-TEXT-color',  group: 'headings',  default: '#444753' },
-  { name: 'MAIN-TITLES-H1-color',    group: 'headings', fallback: 'MAIN-TEXT-color' },
-  { name: 'MAIN-TITLES-H2-color',    group: 'headings', fallback: 'MAIN-TITLES-TEXT-color' },
-  { name: 'MAIN-TITLES-H3-color',    group: 'headings', fallback: 'MAIN-TITLES-H2-color' },
-  { name: 'MAIN-TITLES-H4-color',    group: 'headings', fallback: 'MAIN-TITLES-H3-color' },
-  { name: 'MAIN-TITLES-H5-color',    group: 'headings', fallback: 'MAIN-TITLES-H4-color' },
-  { name: 'MAIN-TITLES-H6-color',    group: 'headings', fallback: 'MAIN-TITLES-H5-color' },
-
-  { name: 'CODE-BLOCK-color',        group: 'code blocks',  default: '#000000' },
-  { name: 'CODE-BLOCK-BG-color',     group: 'code blocks',  default: '#f8f8f8' },
-  { name: 'CODE-BLOCK-BORDER-color', group: 'code blocks', fallback: 'CODE-BLOCK-BG-color' },
-
-  { name: 'CODE-INLINE-color',        group: 'inline code',  default: '#5e5e5e' },
-  { name: 'CODE-INLINE-BG-color',     group: 'inline code',  default: '#fffae9' },
-  { name: 'CODE-INLINE-BORDER-color', group: 'inline code', fallback: 'CODE-INLINE-BG-color' },
-
-  { name: 'MENU-HEADER-BG-color',       group: 'header',  default: '#7dc903' },
-  { name: 'MENU-HEADER-BORDER-color',   group: 'header', fallback: 'MENU-HEADER-BG-color' },
-  { name: 'MENU-HOME-LINK-color',       group: 'header',  default: '#323232' },
-  { name: 'MENU-HOME-LINK-HOVER-color', group: 'header',  default: '#808080' },
-  { name: 'MENU-SEARCH-color',          group: 'header',  default: '#e0e0e0' },
-  { name: 'MENU-SEARCH-BG-color',       group: 'header',  default: '#323232' },
-  { name: 'MENU-SEARCH-BOX-color',      group: 'header', fallback: 'MENU-SEARCH-BG-color' },
-
-  { name: 'MENU-SECTIONS-BG-color',                group: 'sections',  default: '#282830' },
-  { name: 'MENU-SECTIONS-ACTIVE-BG-color',         group: 'sections',  default: '#202028' },
-  { name: 'MENU-SECTION-ACTIVE-CATEGORY-color',    group: 'sections',  default: '#444444' },
-  { name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections', fallback: 'MAIN-BG-color' },
-  { name: 'MENU-SECTIONS-LINK-color',              group: 'sections',  default: '#bababa' },
-  { name: 'MENU-SECTIONS-LINK-HOVER-color',        group: 'sections', fallback: 'MENU-SECTIONS-LINK-color' },
-  { name: 'MENU-VISITED-color',                    group: 'sections',  default: '#506397' },
-  { name: 'MENU-SECTION-HR-color',                 group: 'sections',  default: '#606060' },
-
-  { name: 'BOX-CAPTION-color',                 group: 'colored boxes',  default: 'rgba( 255, 255, 255, 1 )' },
-  { name: 'BOX-BG-color',                      group: 'colored boxes',  default: 'rgba( 255, 255, 255, .833 )' },
-  { name: 'BOX-TEXT-color',                    group: 'colored boxes',  default: 'rgba( 16, 16, 16, 1 )' },
-
-  { name: 'BOX-BLUE-color',                    group: 'colored boxes',  default: 'rgba( 48, 117, 229, 1 )' },
-  { name: 'BOX-INFO-color',                    group: 'colored boxes', fallback: 'BOX-BLUE-color' },
-  { name: 'BOX-BLUE-TEXT-color',               group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-INFO-TEXT-color',               group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color' },
-
-  { name: 'BOX-GREEN-color',                   group: 'colored boxes',  default: 'rgba( 42, 178, 24, 1 )' },
-  { name: 'BOX-TIP-color',                     group: 'colored boxes', fallback: 'BOX-GREEN-color' },
-  { name: 'BOX-GREEN-TEXT-color',              group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-TIP-TEXT-color',                group: 'colored boxes', fallback: 'BOX-GREEN-TEXT-color' },
-
-  { name: 'BOX-GREY-color',                    group: 'colored boxes',  default: 'rgba( 128, 128, 128, 1 )' },
-  { name: 'BOX-NEUTRAL-color',                 group: 'colored boxes', fallback: 'BOX-GREY-color' },
-  { name: 'BOX-GREY-TEXT-color',               group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-NEUTRAL-TEXT-color',            group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color' },
-
-  { name: 'BOX-ORANGE-color',                  group: 'colored boxes',  default: 'rgba( 237, 153, 9, 1 )' },
-  { name: 'BOX-NOTE-color',                    group: 'colored boxes', fallback: 'BOX-ORANGE-color' },
-  { name: 'BOX-ORANGE-TEXT-color',             group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-NOTE-TEXT-color',               group: 'colored boxes', fallback: 'BOX-ORANGE-TEXT-color' },
-
-  { name: 'BOX-RED-color',                     group: 'colored boxes',  default: 'rgba( 224, 62, 62, 1 )' },
-  { name: 'BOX-WARNING-color',                 group: 'colored boxes', fallback: 'BOX-RED-color' },
-  { name: 'BOX-RED-TEXT-color',                group: 'colored boxes', fallback: 'BOX-TEXT-color' },
-  { name: 'BOX-WARNING-TEXT-color',            group: 'colored boxes', fallback: 'BOX-RED-TEXT-color' },
-];
-
-initGraph();
+variants.generator( '#vargenerator', '.vardownload' );
 </script>
 
 
@@ -585,13 +249,13 @@ initGraph();
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -603,6 +267,6 @@ initGraph();
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/basics/history/index.html b/pir/basics/history/index.html
index f7dfd656ec..0eb20883e7 100644
--- a/pir/basics/history/index.html
+++ b/pir/basics/history/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Historrry :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/history/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/history/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -581,13 +529,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -599,6 +547,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/basics/index.html b/pir/basics/index.html
index 3e463eac73..4a018ea18a 100644
--- a/pir/basics/index.html
+++ b/pir/basics/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Basics :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -292,13 +240,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -310,6 +258,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/basics/installation/index.html b/pir/basics/installation/index.html
index 787e857113..c84155a209 100644
--- a/pir/basics/installation/index.html
+++ b/pir/basics/installation/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Installat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/installation/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/installation/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -345,13 +293,13 @@ hugo new basics/second-content/_index.md
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -363,6 +311,6 @@ hugo new basics/second-content/_index.md
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/basics/migration/index.html b/pir/basics/migration/index.html
index cec69ca12a..9c4b5c4f5e 100644
--- a/pir/basics/migration/index.html
+++ b/pir/basics/migration/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Migrrrat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/migration/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/migration/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -502,13 +450,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -520,6 +468,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/basics/requirements/index.html b/pir/basics/requirements/index.html
index d1774125e5..0533ee5c1e 100644
--- a/pir/basics/requirements/index.html
+++ b/pir/basics/requirements/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Requirrrements :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/basics/requirements/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/basics/requirements/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -292,13 +240,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -310,6 +258,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/categories/index.html b/pir/categories/index.html
index 1a64df73d2..97441a0b5f 100644
--- a/pir/categories/index.html
+++ b/pir/categories/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Categories :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/categories/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/categories/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -274,13 +222,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -292,6 +240,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/cont/archetypes/index.html b/pir/cont/archetypes/index.html
index 1673903026..934268242e 100644
--- a/pir/cont/archetypes/index.html
+++ b/pir/cont/archetypes/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Arrrchetypes :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/archetypes/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -318,13 +266,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -336,6 +284,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/cont/i18n/index.html b/pir/cont/i18n/index.html
index 43c747c353..b634daea49 100644
--- a/pir/cont/i18n/index.html
+++ b/pir/cont/i18n/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Multilingual an&#39; i18n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/cont/i18n/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/i18n/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -353,13 +301,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -371,6 +319,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/cont/icons/index.html b/pir/cont/icons/index.html
index 7f458de25b..81a93134bd 100644
--- a/pir/cont/icons/index.html
+++ b/pir/cont/icons/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Ay&#39;cons an&#39; logos :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/icons/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -308,13 +256,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -326,6 +274,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/cont/index.html b/pir/cont/index.html
index 155d6f26af..bde7ff4281 100644
--- a/pir/cont/index.html
+++ b/pir/cont/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Rambl&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/cont/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -292,13 +240,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -310,6 +258,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/cont/markdown/index.html b/pir/cont/markdown/index.html
index c8926d4bb5..74f29df959 100644
--- a/pir/cont/markdown/index.html
+++ b/pir/cont/markdown/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Marrrkdown rules :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/markdown/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -783,13 +731,13 @@ grunt.initConfig({
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -801,6 +749,6 @@ grunt.initConfig({
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/cont/menushortcuts/index.html b/pir/cont/menushortcuts/index.html
index 7d13e30913..13c831fd00 100644
--- a/pir/cont/menushortcuts/index.html
+++ b/pir/cont/menushortcuts/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Menu extrrra shorrrtcuts :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/menushortcuts/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -396,13 +344,13 @@ However, if ye want t' keep th' title but change its value, it can be overriden
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -414,6 +362,6 @@ However, if ye want t' keep th' title but change its value, it can be overriden
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/cont/pages/index.html b/pir/cont/pages/index.html
index 36dd3fb1e0..15ccd29a48 100644
--- a/pir/cont/pages/index.html
+++ b/pir/cont/pages/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Planks orrrganizat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/cont/pages/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/pages/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -420,13 +368,13 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -438,6 +386,6 @@ We&rsquo;ve added th' <code>menuTitle</code> parameter fer that purpose:</p>
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/cont/syntaxhighlight/index.html b/pir/cont/syntaxhighlight/index.html
index 6002dba655..5dcd52c05e 100644
--- a/pir/cont/syntaxhighlight/index.html
+++ b/pir/cont/syntaxhighlight/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Code highlight&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/syntaxhighlight/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -333,13 +281,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -351,6 +299,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/cont/tags/index.html b/pir/cont/tags/index.html
index c3cc5550a0..5ef2e2dfd8 100644
--- a/pir/cont/tags/index.html
+++ b/pir/cont/tags/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Tags :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/cont/tags/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/index.html b/pir/index.html
index 356d07c52e..bc0881cb3d 100644
--- a/pir/index.html
+++ b/pir/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Relearrrn Theme fer Cap&#39;n Hugo :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -330,13 +278,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -348,6 +296,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/index.json b/pir/index.json
index 2c57721bfd..20daea91ce 100644
--- a/pir/index.json
+++ b/pir/index.json
@@ -132,7 +132,7 @@
     "uri": "/hugo-theme-relearn/pir/cont/menushortcuts/"
   },
   {
-    "content": " Arrr! ☠ Pirrrates ☠ Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.\n  This interactive tool may help ye t' generate yer own color variant stylesheet.\nT' get started, first select a color variant from th' theme selector that fits ye best as a start'n point.\nTh' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph an' th' plank will update accordingly.\nTh' arrowed lines reflect how colors be inherited thru different parts o' th' theme if th' descendent isn’t overwritten. If ye want t' delete a color an' let it inherit from its parent, just delete th' value from th' input field.\nThis be best seen 'n th' neon variant wit' th' differnet head'ns colors. There, colors fer th' head'n h1, h2, h3 an' h4 be explicitly set. h5 be not set an' inherits its value from h4. h6 be also not set an' inherits its value from h5.\nVariant generator Graph Download color variant\n funct'n initGraph(){ var graphDefinit'n = generateGraph(); var element = document.querySelector( '#vargenerator' ); element.innerHTML = graphDefinit'n; var interval_id = setInterval( function(){ if( document.querySelectorAll( '#vargenerator.mermaid  svg' ).length ){ clearInterval( interval_id ); generateGraphStyles(); } }, 100 ); var btn = document.querySelector( '#vardownload' ); btn.addEventListener('click', getStylesheet); }; funct'n download(data, mimetype, filename){ var blob = new Blob([data], { type: mimetype }); var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.setAttribute('href', url); a.setAttribute('download', filename); a.click(); } funct'n getStylesheet(){ download( generateStylesheet(), 'text/css', 'theme-' + themename + '.css' ); } funct'n adjustCSSRules(selector, props, sheets){ // get stylesheet(s) if (!sheets) sheets = [...document.styleSheets]; else if (sheets.sup){ // sheets be a str'n let absoluteURL = new URL(sheets, document.baseURI).href; sheets = [...document.styleSheets].filter(i = i.href == absoluteURL); } else sheets = [sheets]; // sheets be a stylesheet // CSS (\u0026 HTML) reduce spaces 'n selector t' one. selector = selector.replace(/\\s+/g, ' '); const findRule = s = [...s.cssRules].reverse().find(i = i.selectorText == selector) let rule = sheets.map(findRule).filter(i=i).pop() const propsArr = props.sup ? props.split(/\\s*;\\s*/).map(i = i.split(/\\s*:\\s*/)) // from str'n : Object.entries(props); // from Object if (rule) fer (let [prop, val] o' propsArr){ // rule.style[prop] = val; be against th' spec, an' does not support !important. rule.style.setProperty(prop, ...val.split(/ *!(?=important)/)); } else { sheet = sheets.pop(); if (!props.sup) props = propsArr.reduce((str, [k, v]) = `${str}; ${k}: ${v}`, ''); sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length); } } funct'n normalizeColor( c ){ c = c.trim(); c = c.replace( /\\s*\\(\\s*/, \"( \" ); c = c.replace( /\\s*\\)\\s*/, \" )\" ); c = c.replace( /\\s*,\\s*/, \", \" ); c = c.replace( /0*\\./, \".\" ); c = c.replace( / +/, \" \" ); return c; } funct'n getColorValue( c ){ return normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) ); } funct'n changeColor( c ){ var style = null; var theme = getTheme(); for( var n = 0; n rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' ); adjustCSSRules( '#body svg '+selector+'  .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' ); adjustCSSRules( '#body svg '+selector+'  .cluster-label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' ); // adjustCSSRules( '#body svg '+selector+' rect', 'stroke: #80808080;' ); adjustCSSRules( '#body svg '+selector+' .nodeLabel', 'filter: grayscale(1) invert(1) contrast(10000);' ); } funct'n generateGraphStyles(){ variables.forEach( function( e ){ styleGroup( '.'+e.name, e.name ); }); styleGroup( '#maincontent', 'MAIN-BG-color' ) styleGroup( '#mainheadings', 'MAIN-BG-color' ) styleGroup( '#inlinecode', 'CODE-INLINE-BG-color' ) styleGroup( '#blockcode', 'CODE-BLOCK-BG-color' ) styleGroup( '#coloredboxes', 'BOX-BG-color' ); styleGroup( '#menu', 'MENU-SECTIONS-BG-color' ) styleGroup( '#menuheader', 'MENU-HEADER-BG-color' ) styleGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' ) } funct'n generateEdge( e ){ var edge = ''; if( e.fallback ){ edge += e.fallback+':::'+e.fallback+' -- '+e.name+':::'+e.name; } else{ edge += e.name+':::'+e.name; } return edge; } funct'n generateGraph(){ var g_groups = {}; var g_handler = ''; variables.forEach( function( e ){ var group = e.group || ' '; g_groups[ group ] = ( g_groups[ group ] || [] ).concat( e ); g_handler += ' click '+e.name+' changeColor\\n'; }); var graph = 'flowchart LR\\n' + ' subgraph menu[\"menu\"]\\n' + ' direct'n TB\\n' + ' subgraph menuheader[\"header\"]\\n' + ' direct'n LR\\n' + g_groups[ 'header' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' subgraph menusections[\"sections\"]\\n' + ' direct'n LR\\n' + g_groups[ 'sections' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' end\\n' + ' subgraph maincontent[\"content\"]\\n' + ' direct'n TB\\n' + g_groups[ 'content' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' subgraph mainheadings[\"headings\"]\\n' + ' direct'n LR\\n' + g_groups[ 'headings' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' subgraph inlinecode[\"inline code\"]\\n' + ' direct'n LR\\n' + g_groups[ 'inline code' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' subgraph blockcode[\"code blocks\"]\\n' + ' direct'n LR\\n' + g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' subgraph coloredboxes[\"colored boxes\"]\\n' + ' direct'n LR\\n' + g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + ' ' + generateEdge( e ) + '\\n'; }, '' ) + ' end\\n' + ' end\\n' + g_handler; console.log( graph ); return graph; } var themename = 'my-variant'; var variables = [ { name: 'MAIN-TEXT-color', group: 'content', default: '#101010' }, { name: 'MAIN-LINK-color', group: 'content', default: '#486ac9' }, { name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color' }, { name: 'MAIN-ANCHOR-color', group: 'content', fallback: 'MAIN-LINK-color' }, { name: 'MAIN-BG-color', group: 'content', default: '#ffffff' }, { name: 'TAG-BG-color', group: 'content', fallback: 'MENU-HEADER-BG-color' }, { name: 'MAIN-TITLES-TEXT-color', group: 'headings', default: '#444753' }, { name: 'MAIN-TITLES-H1-color', group: 'headings', fallback: 'MAIN-TEXT-color' }, { name: 'MAIN-TITLES-H2-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color' }, { name: 'MAIN-TITLES-H3-color', group: 'headings', fallback: 'MAIN-TITLES-H2-color' }, { name: 'MAIN-TITLES-H4-color', group: 'headings', fallback: 'MAIN-TITLES-H3-color' }, { name: 'MAIN-TITLES-H5-color', group: 'headings', fallback: 'MAIN-TITLES-H4-color' }, { name: 'MAIN-TITLES-H6-color', group: 'headings', fallback: 'MAIN-TITLES-H5-color' }, { name: 'CODE-BLOCK-color', group: 'code blocks', default: '#000000' }, { name: 'CODE-BLOCK-BG-color', group: 'code blocks', default: '#f8f8f8' }, { name: 'CODE-BLOCK-BORDER-color', group: 'code blocks', fallback: 'CODE-BLOCK-BG-color' }, { name: 'CODE-INLINE-color', group: 'inline code', default: '#5e5e5e' }, { name: 'CODE-INLINE-BG-color', group: 'inline code', default: '#fffae9' }, { name: 'CODE-INLINE-BORDER-color', group: 'inline code', fallback: 'CODE-INLINE-BG-color' }, { name: 'MENU-HEADER-BG-color', group: 'header', default: '#7dc903' }, { name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color' }, { name: 'MENU-HOME-LINK-color', group: 'header', default: '#323232' }, { name: 'MENU-HOME-LINK-HOVER-color', group: 'header', default: '#808080' }, { name: 'MENU-SEARCH-color', group: 'header', default: '#e0e0e0' }, { name: 'MENU-SEARCH-BG-color', group: 'header', default: '#323232' }, { name: 'MENU-SEARCH-BOX-color', group: 'header', fallback: 'MENU-SEARCH-BG-color' }, { name: 'MENU-SECTIONS-BG-color', group: 'sections', default: '#282830' }, { name: 'MENU-SECTIONS-ACTIVE-BG-color', group: 'sections', default: '#202028' }, { name: 'MENU-SECTION-ACTIVE-CATEGORY-color', group: 'sections', default: '#444444' }, { name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections', fallback: 'MAIN-BG-color' }, { name: 'MENU-SECTIONS-LINK-color', group: 'sections', default: '#bababa' }, { name: 'MENU-SECTIONS-LINK-HOVER-color', group: 'sections', fallback: 'MENU-SECTIONS-LINK-color' }, { name: 'MENU-VISITED-color', group: 'sections', default: '#506397' }, { name: 'MENU-SECTION-HR-color', group: 'sections', default: '#606060' }, { name: 'BOX-CAPTION-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, 1 )' }, { name: 'BOX-BG-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, .833 )' }, { name: 'BOX-TEXT-color', group: 'colored boxes', default: 'rgba( 16, 16, 16, 1 )' }, { name: 'BOX-BLUE-color', group: 'colored boxes', default: 'rgba( 48, 117, 229, 1 )' }, { name: 'BOX-INFO-color', group: 'colored boxes', fallback: 'BOX-BLUE-color' }, { name: 'BOX-BLUE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' }, { name: 'BOX-INFO-TEXT-color', group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color' }, { name: 'BOX-GREEN-color', group: 'colored boxes', default: 'rgba( 42, 178, 24, 1 )' }, { name: 'BOX-TIP-color', group: 'colored boxes', fallback: 'BOX-GREEN-color' }, { name: 'BOX-GREEN-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' }, { name: 'BOX-TIP-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREEN-TEXT-color' }, { name: 'BOX-GREY-color', group: 'colored boxes', default: 'rgba( 128, 128, 128, 1 )' }, { name: 'BOX-NEUTRAL-color', group: 'colored boxes', fallback: 'BOX-GREY-color' }, { name: 'BOX-GREY-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' }, { name: 'BOX-NEUTRAL-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color' }, { name: 'BOX-ORANGE-color', group: 'colored boxes', default: 'rgba( 237, 153, 9, 1 )' }, { name: 'BOX-NOTE-color', group: 'colored boxes', fallback: 'BOX-ORANGE-color' }, { name: 'BOX-ORANGE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' }, { name: 'BOX-NOTE-TEXT-color', group: 'colored boxes', fallback: 'BOX-ORANGE-TEXT-color' }, { name: 'BOX-RED-color', group: 'colored boxes', default: 'rgba( 224, 62, 62, 1 )' }, { name: 'BOX-WARNING-color', group: 'colored boxes', fallback: 'BOX-RED-color' }, { name: 'BOX-RED-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' }, { name: 'BOX-WARNING-TEXT-color', group: 'colored boxes', fallback: 'BOX-RED-TEXT-color' }, ]; initGraph();  ",
+    "content": " Arrr! ☠ Pirrrates ☠ Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.\n  This interactive tool may help ye t' generate yer own color variant stylesheet.\nT' get started, first select a color variant from th' theme selector that fits ye best as a start'n point.\nTh' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph an' th' plank will update accordingly.\nTh' arrowed lines reflect how colors be inherited thru different parts o' th' theme if th' descendent isn’t overwritten. If ye want t' delete a color an' let it inherit from its parent, just delete th' value from th' input field.\nThis be best seen 'n th' neon variant wit' th' differnet head'ns colors. There, colors fer th' head'n h1, h2, h3 an' h4 be explicitly set. h5 be not set an' inherits its value from h4. h6 be also not set an' inherits its value from h5.\nVariant generator Graph Download color variant\n variants.generator( '#vargenerator', '.vardownload' );  ",
     "description": "",
     "tags": null,
     "title": "Stylesheet generrrat'r",
diff --git a/pir/more/credits/index.html b/pir/more/credits/index.html
index 6fc360b11b..57a4e2abbf 100644
--- a/pir/more/credits/index.html
+++ b/pir/more/credits/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Crrredits :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/more/credits/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/more/credits/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -307,13 +255,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -325,6 +273,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/more/showcase/index.html b/pir/more/showcase/index.html
index 58dfc5a40c..edc5bea8cf 100644
--- a/pir/more/showcase/index.html
+++ b/pir/more/showcase/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Showcase :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/more/showcase/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/more/showcase/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -292,13 +240,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -310,6 +258,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/attachments/index.html b/pir/shortcodes/attachments/index.html
index aed3e2718c..65323bbaab 100644
--- a/pir/shortcodes/attachments/index.html
+++ b/pir/shortcodes/attachments/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Attachments :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/attachments/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -469,13 +417,13 @@ Currently, it support two implementat'ns fer planks</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -487,6 +435,6 @@ Currently, it support two implementat'ns fer planks</p>
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/button/index.html b/pir/shortcodes/button/index.html
index cff9d1be70..d48ba2b4df 100644
--- a/pir/shortcodes/button/index.html
+++ b/pir/shortcodes/button/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Button :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/button/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></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 78023f2512..e4482644a0 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-1-1-1-1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/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.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/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/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -182,7 +130,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -195,12 +143,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -212,7 +160,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -304,13 +252,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -322,6 +270,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></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 087470160a..1039b58b83 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-1-1-1 (hidden) :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/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.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/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/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -182,7 +130,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -195,12 +143,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -212,7 +160,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></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 7d02b91816..6535f06405 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-1-1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -180,7 +128,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -193,12 +141,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -210,7 +158,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -306,13 +254,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -324,6 +272,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></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 1661dee0c9..bdcdbfd49b 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-1 (hidden) :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -180,7 +128,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -193,12 +141,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -210,7 +158,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -305,13 +253,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -323,6 +271,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></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 5b1546bf97..05b7da0f66 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-2-1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -298,13 +246,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -316,6 +264,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></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 dd754e43ca..d97a181cfd 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-2-2 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -298,13 +246,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -316,6 +264,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></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 c405d8f8f8..dc4788987a 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-2 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -304,13 +252,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -322,6 +270,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></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 404a824691..685cc8d51d 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1-3 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -297,13 +245,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -315,6 +263,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></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 fd5f61390c..af4ea3f45b 100644
--- a/pir/shortcodes/children/children-1/children-1-1/index.html
+++ b/pir/shortcodes/children/children-1/children-1-1/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1-1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -304,13 +252,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -322,6 +270,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-1/index.html b/pir/shortcodes/children/children-1/index.html
index bea8133bb5..cb24c049ec 100644
--- a/pir/shortcodes/children/children-1/index.html
+++ b/pir/shortcodes/children/children-1/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -301,13 +249,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -319,6 +267,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-2/index.html b/pir/shortcodes/children/children-2/index.html
index f90b9d2a85..2904a5444b 100644
--- a/pir/shortcodes/children/children-2/index.html
+++ b/pir/shortcodes/children/children-2/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 2 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -296,13 +244,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -314,6 +262,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/index.html b/pir/shortcodes/children/children-3/index.html
index 4cb3cae20b..7e50e92add 100644
--- a/pir/shortcodes/children/children-3/index.html
+++ b/pir/shortcodes/children/children-3/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 3 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -301,13 +249,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -319,6 +267,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-3/test3/index.html b/pir/shortcodes/children/children-3/test3/index.html
index a9ed7a8620..3bb1d81bdf 100644
--- a/pir/shortcodes/children/children-3/test3/index.html
+++ b/pir/shortcodes/children/children-3/test3/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Plank 3-1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -295,13 +243,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -313,6 +261,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/children-4/index.html b/pir/shortcodes/children/children-4/index.html
index 82a100c57b..ea45308972 100644
--- a/pir/shortcodes/children/children-4/index.html
+++ b/pir/shortcodes/children/children-4/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Plank 4 (hidden) :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/children-4/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/children-4/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -179,7 +127,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -192,12 +140,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -209,7 +157,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -296,13 +244,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -314,6 +262,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/index.html b/pir/shortcodes/children/index.html
index 3d71686a39..8be2fc7a93 100644
--- a/pir/shortcodes/children/index.html
+++ b/pir/shortcodes/children/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Children :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/children/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -438,13 +386,13 @@ So its rrrambl'n be used as descript'n.</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -456,6 +404,6 @@ So its rrrambl'n be used as descript'n.</p>
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/children/test/index.html b/pir/shortcodes/children/test/index.html
index 3fe76a5b1a..15d5fae290 100644
--- a/pir/shortcodes/children/test/index.html
+++ b/pir/shortcodes/children/test/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Plank X :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/children/test/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/expand/index.html b/pir/shortcodes/expand/index.html
index 55646dd083..7aff38df29 100644
--- a/pir/shortcodes/expand/index.html
+++ b/pir/shortcodes/expand/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Expand :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/expand/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -417,13 +365,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -435,6 +383,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/include/index.html b/pir/shortcodes/include/index.html
index 68b517eb5c..09e1331226 100644
--- a/pir/shortcodes/include/index.html
+++ b/pir/shortcodes/include/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Include :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/include/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -320,13 +268,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -338,6 +286,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/index.html b/pir/shortcodes/index.html
index 57e52cb968..b5d82eeaa5 100644
--- a/pir/shortcodes/index.html
+++ b/pir/shortcodes/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Shorrrtcodes :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/shortcodes/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -335,13 +283,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -353,6 +301,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/mermaid/index.html b/pir/shortcodes/mermaid/index.html
index 17ac02cd2c..81b99fe8bf 100644
--- a/pir/shortcodes/mermaid/index.html
+++ b/pir/shortcodes/mermaid/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Merrrmaid :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/mermaid/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -522,13 +470,13 @@ classDiagram
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -540,6 +488,6 @@ classDiagram
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/notice/index.html b/pir/shortcodes/notice/index.html
index bd9270b114..7173e14b41 100644
--- a/pir/shortcodes/notice/index.html
+++ b/pir/shortcodes/notice/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Notice :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/notice/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -524,13 +472,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -542,6 +490,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/siteparam/index.html b/pir/shortcodes/siteparam/index.html
index c55830e587..13fbe224ef 100644
--- a/pir/shortcodes/siteparam/index.html
+++ b/pir/shortcodes/siteparam/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Ship param :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/siteparam/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -300,13 +248,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -318,6 +266,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/shortcodes/tabs/index.html b/pir/shortcodes/tabs/index.html
index 93c9f6463b..c328d0febd 100644
--- a/pir/shortcodes/tabs/index.html
+++ b/pir/shortcodes/tabs/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>Tabbed views :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/shortcodes/tabs/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -459,13 +407,13 @@ from th' <code>'default'</code> group on a different plank then all tabs will be
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -477,6 +425,6 @@ from th' <code>'default'</code> group on a different plank then all tabs will be
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/tags/children/index.html b/pir/tags/children/index.html
index 8e8b138e23..b1974c5dd2 100644
--- a/pir/tags/children/index.html
+++ b/pir/tags/children/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>children :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/children/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/children/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -289,13 +237,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -307,6 +255,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/tags/documentatn/index.html b/pir/tags/documentatn/index.html
index 977110d031..82a6701983 100644
--- a/pir/tags/documentatn/index.html
+++ b/pir/tags/documentatn/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>documentat&#39;n :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/documentatn/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/documentatn/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -275,13 +223,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -293,6 +241,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/tags/hidden/index.html b/pir/tags/hidden/index.html
index 1e2d93c880..ac80aca8b2 100644
--- a/pir/tags/hidden/index.html
+++ b/pir/tags/hidden/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>hidden :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/hidden/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/hidden/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -280,13 +228,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -298,6 +246,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/tags/index.html b/pir/tags/index.html
index 0c71cfb73f..d8bd091bbd 100644
--- a/pir/tags/index.html
+++ b/pir/tags/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Tags :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -279,13 +227,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -297,6 +245,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/tags/non-hidden/index.html b/pir/tags/non-hidden/index.html
index 33fab4b4db..73931b6e23 100644
--- a/pir/tags/non-hidden/index.html
+++ b/pir/tags/non-hidden/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>non-hidden :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/non-hidden/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/non-hidden/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -284,13 +232,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -302,6 +250,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/tags/tutorrrial/index.html b/pir/tags/tutorrrial/index.html
index 998fd3cb20..7a333443b3 100644
--- a/pir/tags/tutorrrial/index.html
+++ b/pir/tags/tutorrrial/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>tutorrrial :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tags/tutorrrial/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tags/tutorrrial/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -275,13 +223,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -293,6 +241,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/tests/code/index.html b/pir/tests/code/index.html
index 6dc9dbf2d5..c85f03fe59 100644
--- a/pir/tests/code/index.html
+++ b/pir/tests/code/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Code :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tests/code/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tests/code/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -180,7 +128,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -193,12 +141,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -210,7 +158,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -314,13 +262,13 @@ Some preformatted stuff 'n HTML elements
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -332,6 +280,6 @@ Some preformatted stuff 'n HTML elements
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/tests/index.html b/pir/tests/index.html
index 4cc82383e0..dbc8f6b59c 100644
--- a/pir/tests/index.html
+++ b/pir/tests/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Tests :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/tests/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/tests/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -180,7 +128,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -193,12 +141,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -210,7 +158,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -306,13 +254,13 @@ What about wrapp'n long inline code if multiple sections be written side567/by34
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -324,6 +272,6 @@ What about wrapp'n long inline code if multiple sections be written side567/by34
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/yours/1/index.html b/pir/yours/1/index.html
index e9d746ac05..a16478aaeb 100644
--- a/pir/yours/1/index.html
+++ b/pir/yours/1/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>1 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -188,7 +136,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -201,12 +149,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -218,7 +166,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/yours/10/index.html b/pir/yours/10/index.html
index bb2fe8bd9a..158346c9d4 100644
--- a/pir/yours/10/index.html
+++ b/pir/yours/10/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>11 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/10/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -188,7 +136,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -201,12 +149,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -218,7 +166,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/yours/2/index.html b/pir/yours/2/index.html
index cbd4d23a3f..2dd9a48719 100644
--- a/pir/yours/2/index.html
+++ b/pir/yours/2/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>2 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -188,7 +136,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -201,12 +149,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -218,7 +166,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/yours/3/index.html b/pir/yours/3/index.html
index 256fb21ca5..7fc8ce0f1d 100644
--- a/pir/yours/3/index.html
+++ b/pir/yours/3/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>3 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -188,7 +136,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -201,12 +149,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -218,7 +166,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/yours/4/index.html b/pir/yours/4/index.html
index 70a1364e42..e64679017d 100644
--- a/pir/yours/4/index.html
+++ b/pir/yours/4/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>4 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/4/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -188,7 +136,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -201,12 +149,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -218,7 +166,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/yours/5/index.html b/pir/yours/5/index.html
index 6539d8e621..94568a7b27 100644
--- a/pir/yours/5/index.html
+++ b/pir/yours/5/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>5 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/5/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -188,7 +136,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -201,12 +149,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -218,7 +166,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/yours/6/index.html b/pir/yours/6/index.html
index c6c7794816..1cabb753d8 100644
--- a/pir/yours/6/index.html
+++ b/pir/yours/6/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>6 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/6/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -188,7 +136,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -201,12 +149,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -218,7 +166,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/yours/7/index.html b/pir/yours/7/index.html
index f9cfd307d8..e0d640096a 100644
--- a/pir/yours/7/index.html
+++ b/pir/yours/7/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>7 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/7/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -188,7 +136,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -201,12 +149,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -218,7 +166,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/yours/8/index.html b/pir/yours/8/index.html
index 21db094cb5..25343d8e82 100644
--- a/pir/yours/8/index.html
+++ b/pir/yours/8/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>8 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/8/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -188,7 +136,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -201,12 +149,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -218,7 +166,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/yours/9/index.html b/pir/yours/9/index.html
index a76bf36f18..f02474ffbb 100644
--- a/pir/yours/9/index.html
+++ b/pir/yours/9/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>9 :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/9/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -188,7 +136,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -201,12 +149,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -218,7 +166,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -290,13 +238,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -308,6 +256,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/pir/yours/children-1/index.html b/pir/yours/children-1/index.html
index 67c7f87d4c..c59c9c7643 100644
--- a/pir/yours/children-1/index.html
+++ b/pir/yours/children-1/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Th&#39; one an&#39; only hidden child :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/yours/children-1/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/children-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -190,7 +138,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -203,12 +151,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -220,7 +168,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -302,13 +250,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -320,6 +268,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/pir/yours/index.html b/pir/yours/index.html
index db18288e26..59515eec07 100644
--- a/pir/yours/index.html
+++ b/pir/yours/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>This could be yers :: Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/pir/yours/index.xml" title="Documentat&#39;n fer Cap&#39;n Hugo Relearrrn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374821" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374821" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374821" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374821" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374821" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397929" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397929" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397929" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397929" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397929" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397929"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397929"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/pir/yours/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Searrrch...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374821"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374821"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397929"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397929"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -189,7 +137,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -202,12 +150,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -219,7 +167,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear Historrry</a></li>
           </ul>
@@ -303,13 +251,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374821"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397929"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397929"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -321,6 +269,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374821"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397929"></script>
   </body>
 </html>
diff --git a/shortcodes/attachments/index.html b/shortcodes/attachments/index.html
index ea53f1908e..8b66e1c483 100644
--- a/shortcodes/attachments/index.html
+++ b/shortcodes/attachments/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="The Attachments shortcode displays a list of files attached to a page">
     <meta name="author" content="Sören Weber">
     <title>Attachments :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/attachments/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -467,13 +415,13 @@ Currently, it support two implementations for pages</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -485,6 +433,6 @@ Currently, it support two implementations for pages</p>
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/button/index.html b/shortcodes/button/index.html
index 4533cc4371..ad69cdb91f 100644
--- a/shortcodes/button/index.html
+++ b/shortcodes/button/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Nice buttons on your page">
     <meta name="author" content="Sören Weber">
     <title>Button :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/button/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -300,13 +248,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -318,6 +266,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></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 0f162d9067..780b0a2eb1 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-1-1-1-1 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/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.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/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/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -182,7 +130,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -195,12 +143,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -212,7 +160,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -295,13 +243,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -313,6 +261,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></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 0047026f23..5b34e26352 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-1-1-1 (hidden) :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/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.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/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/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -182,7 +130,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -195,12 +143,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -212,7 +160,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></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 6a51d91d04..e8ec0d9859 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-1-1 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -180,7 +128,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -193,12 +141,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -210,7 +158,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -307,13 +255,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -325,6 +273,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></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 b560a47d5b..59138af3ac 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-1 (hidden) :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -180,7 +128,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -193,12 +141,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -210,7 +158,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -306,13 +254,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -324,6 +272,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></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 6403fa33b9..250d6b6647 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-2-1 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -289,13 +237,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -307,6 +255,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></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 2d562ba092..ee933345bf 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-2-2 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -289,13 +237,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -307,6 +255,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></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 e1640c8370..ccc30aaf1a 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-2 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -305,13 +253,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -323,6 +271,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></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 d91abcd7c9..0b263d8841 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
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1-3 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -288,13 +236,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -306,6 +254,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></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 37f33a2d84..992da4b0e2 100644
--- a/shortcodes/children/children-1/children-1-1/index.html
+++ b/shortcodes/children/children-1/children-1-1/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 1-1 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -305,13 +253,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -323,6 +271,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-1/index.html b/shortcodes/children/children-1/index.html
index 707701bee2..3a074db894 100644
--- a/shortcodes/children/children-1/index.html
+++ b/shortcodes/children/children-1/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 1 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -302,13 +250,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -320,6 +268,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-2/index.html b/shortcodes/children/children-2/index.html
index 8feb7803f6..ca0ff8b726 100644
--- a/shortcodes/children/children-2/index.html
+++ b/shortcodes/children/children-2/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 2 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-2/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -287,13 +235,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -305,6 +253,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/index.html b/shortcodes/children/children-3/index.html
index 1887d2fc97..a9b6f49c3c 100644
--- a/shortcodes/children/children-3/index.html
+++ b/shortcodes/children/children-3/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 3 :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-3/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -302,13 +250,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -320,6 +268,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-3/test3/index.html b/shortcodes/children/children-3/test3/index.html
index 5c512b060e..7f42629606 100644
--- a/shortcodes/children/children-3/test3/index.html
+++ b/shortcodes/children/children-3/test3/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="This is a plain page test nested in a parent">
     <meta name="author" content="Sören Weber">
     <title>page 3-1 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-3/test3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -286,13 +234,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -304,6 +252,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/children/children-4/index.html b/shortcodes/children/children-4/index.html
index 1d0e3e84bf..83a60db72d 100644
--- a/shortcodes/children/children-4/index.html
+++ b/shortcodes/children/children-4/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>page 4 (hidden) :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/children-4/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/children-4/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -179,7 +127,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -192,12 +140,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -209,7 +157,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -287,13 +235,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -305,6 +253,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/shortcodes/children/index.html b/shortcodes/children/index.html
index 88c9027855..1ef8c3ccb8 100644
--- a/shortcodes/children/index.html
+++ b/shortcodes/children/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Children :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/children/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -440,13 +388,13 @@ So its content is used as description.</p>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -458,6 +406,6 @@ So its content is used as description.</p>
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/children/test/index.html b/shortcodes/children/test/index.html
index 806a9f4b31..ad7ac049c4 100644
--- a/shortcodes/children/test/index.html
+++ b/shortcodes/children/test/index.html
@@ -9,76 +9,24 @@
 ">
     <meta name="author" content="Sören Weber">
     <title>page X :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/children/test/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -282,13 +230,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -300,6 +248,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/expand/index.html b/shortcodes/expand/index.html
index 756a139120..6b9c495d0e 100644
--- a/shortcodes/expand/index.html
+++ b/shortcodes/expand/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Displays an expandable/collapsible section of text on your page">
     <meta name="author" content="Sören Weber">
     <title>Expand :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/expand/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -425,13 +373,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -443,6 +391,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/include/index.html b/shortcodes/include/index.html
index 37ec77fd96..f7b2e1f3a6 100644
--- a/shortcodes/include/index.html
+++ b/shortcodes/include/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Displays content from other Markdown files">
     <meta name="author" content="Sören Weber">
     <title>Include :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/include/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -326,13 +274,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -344,6 +292,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/include_me/index.html b/shortcodes/include_me/index.html
index 27c5efb455..44c4268f70 100644
--- a/shortcodes/include_me/index.html
+++ b/shortcodes/include_me/index.html
@@ -9,76 +9,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title> :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/include_me/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -179,7 +127,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -293,13 +241,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -311,6 +259,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/index.html b/shortcodes/index.html
index 3cdd600057..fc80ad684a 100644
--- a/shortcodes/index.html
+++ b/shortcodes/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Shortcodes :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -326,13 +274,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -344,6 +292,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/mermaid/index.html b/shortcodes/mermaid/index.html
index 0aa73ecd3b..d629c3ea0d 100644
--- a/shortcodes/mermaid/index.html
+++ b/shortcodes/mermaid/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Generation of diagram and flowchart from text in a similar manner as Markdown">
     <meta name="author" content="Sören Weber">
     <title>Mermaid :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/mermaid/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -537,13 +485,13 @@ classDiagram
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -555,6 +503,6 @@ classDiagram
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/notice/index.html b/shortcodes/notice/index.html
index 23d76a2cc1..276099eca5 100644
--- a/shortcodes/notice/index.html
+++ b/shortcodes/notice/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Disclaimers to help you structure your page">
     <meta name="author" content="Sören Weber">
     <title>Notice :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/notice/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -534,13 +482,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -552,6 +500,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/siteparam/index.html b/shortcodes/siteparam/index.html
index 1148d27d8b..5fee087c64 100644
--- a/shortcodes/siteparam/index.html
+++ b/shortcodes/siteparam/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Get value of site params variables in your page">
     <meta name="author" content="Sören Weber">
     <title>Site param :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/siteparam/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -302,13 +250,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -320,6 +268,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/shortcodes/tabs/index.html b/shortcodes/tabs/index.html
index 0446c48098..b38ededc10 100644
--- a/shortcodes/tabs/index.html
+++ b/shortcodes/tabs/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Synchronize selection of content in different tabbed views">
     <meta name="author" content="Sören Weber">
     <title>Tabbed views :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/shortcodes/tabs/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -177,7 +125,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -461,13 +409,13 @@ from the <code>'default'</code> group on a different page then all tabs will be
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -479,6 +427,6 @@ from the <code>'default'</code> group on a different page then all tabs will be
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/tags/children/index.html b/tags/children/index.html
index a9c48768aa..cc064b09e4 100644
--- a/tags/children/index.html
+++ b/tags/children/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>children :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/children/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/children/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -289,13 +237,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -307,6 +255,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/tags/documentation/index.html b/tags/documentation/index.html
index 27767adf18..bdb687b5a2 100644
--- a/tags/documentation/index.html
+++ b/tags/documentation/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>documentation :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/documentation/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/documentation/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -275,13 +223,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -293,6 +241,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/tags/hidden/index.html b/tags/hidden/index.html
index f6b78b2eea..d7fb96a2df 100644
--- a/tags/hidden/index.html
+++ b/tags/hidden/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>hidden :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/hidden/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/hidden/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -280,13 +228,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -298,6 +246,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/tags/index.html b/tags/index.html
index 34049f3710..75ec2c435f 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Tags :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -279,13 +227,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -297,6 +245,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/tags/non-hidden/index.html b/tags/non-hidden/index.html
index 022d101e6a..339d105c73 100644
--- a/tags/non-hidden/index.html
+++ b/tags/non-hidden/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>non-hidden :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/non-hidden/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/non-hidden/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -191,12 +139,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -208,7 +156,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -284,13 +232,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -302,6 +250,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/tags/tutorial/index.html b/tags/tutorial/index.html
index b4005cb8a0..ff84fe9c2a 100644
--- a/tags/tutorial/index.html
+++ b/tags/tutorial/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>tutorial :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tags/tutorial/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tags/tutorial/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -178,7 +126,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -190,12 +138,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -207,7 +155,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -275,13 +223,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -293,6 +241,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/tests/code/index.html b/tests/code/index.html
index 91c1df39ef..31139f37a1 100644
--- a/tests/code/index.html
+++ b/tests/code/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Code :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tests/code/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tests/code/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -180,7 +128,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -193,12 +141,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -210,7 +158,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -317,13 +265,13 @@ Some preformatted stuff in HTML elements
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -335,6 +283,6 @@ Some preformatted stuff in HTML elements
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/tests/index.html b/tests/index.html
index b8a5838e79..ebbe361880 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>Tests :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/tests/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/tests/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -180,7 +128,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -193,12 +141,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -210,7 +158,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -297,13 +245,13 @@ What about wrapping long inline code if multiple sections are written side567/by
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -315,6 +263,6 @@ What about wrapping long inline code if multiple sections are written side567/by
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/yours/1/index.html b/yours/1/index.html
index 31d4e7dd2c..b82499c30f 100644
--- a/yours/1/index.html
+++ b/yours/1/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>1 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -221,12 +169,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -238,7 +186,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/10/index.html b/yours/10/index.html
index c99f6a9dd7..f35d0d7f0a 100644
--- a/yours/10/index.html
+++ b/yours/10/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>10 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/10/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -221,12 +169,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -238,7 +186,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/11.de/index.html b/yours/11.de/index.html
index 6c069f986f..8d6c02cee3 100644
--- a/yours/11.de/index.html
+++ b/yours/11.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>11 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/11.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/12.de/index.html b/yours/12.de/index.html
index 7cff9eb02b..44397e7927 100644
--- a/yours/12.de/index.html
+++ b/yours/12.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>12 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/12.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/13.de/index.html b/yours/13.de/index.html
index dd36107efb..e17996f2af 100644
--- a/yours/13.de/index.html
+++ b/yours/13.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>13 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/13.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/14.de/index.html b/yours/14.de/index.html
index ee1bccf40c..4e51614fc7 100644
--- a/yours/14.de/index.html
+++ b/yours/14.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>14 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/14.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/15.de/index.html b/yours/15.de/index.html
index 4babbb7e73..47fd154362 100644
--- a/yours/15.de/index.html
+++ b/yours/15.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>15 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/15.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/16.de/index.html b/yours/16.de/index.html
index f8a1e0a676..fe232c189d 100644
--- a/yours/16.de/index.html
+++ b/yours/16.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>16 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/16.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/17.de/index.html b/yours/17.de/index.html
index cdb0d926b7..7536006c09 100644
--- a/yours/17.de/index.html
+++ b/yours/17.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>17 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/17.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/18.de/index.html b/yours/18.de/index.html
index 1c0bf1a488..ba4eb34548 100644
--- a/yours/18.de/index.html
+++ b/yours/18.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>18 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/18.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/19.de/index.html b/yours/19.de/index.html
index ad537c1c4a..0a0134cb98 100644
--- a/yours/19.de/index.html
+++ b/yours/19.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>19 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/19.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/2/index.html b/yours/2/index.html
index 9c7d2ad0db..c30f05a27a 100644
--- a/yours/2/index.html
+++ b/yours/2/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>2 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/2/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -221,12 +169,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -238,7 +186,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/20.de/index.html b/yours/20.de/index.html
index df4bebe0e5..2d20039147 100644
--- a/yours/20.de/index.html
+++ b/yours/20.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>20 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/20.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/21.de/index.html b/yours/21.de/index.html
index c59a381fd9..543bd41c40 100644
--- a/yours/21.de/index.html
+++ b/yours/21.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>21 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/21.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/22.de/index.html b/yours/22.de/index.html
index 9415744c0c..8ffd8060f5 100644
--- a/yours/22.de/index.html
+++ b/yours/22.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>22 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/22.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/23.de/index.html b/yours/23.de/index.html
index 692cb6cfa2..0219be7762 100644
--- a/yours/23.de/index.html
+++ b/yours/23.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>23 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/23.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/24.de/index.html b/yours/24.de/index.html
index 3128d10be6..06f73a0551 100644
--- a/yours/24.de/index.html
+++ b/yours/24.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>24 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/24.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/25.de/index.html b/yours/25.de/index.html
index 771be6fbe4..51e6c544b9 100644
--- a/yours/25.de/index.html
+++ b/yours/25.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>25 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/25.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/26.de/index.html b/yours/26.de/index.html
index 6a71182c86..68f2aebb7d 100644
--- a/yours/26.de/index.html
+++ b/yours/26.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>26 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/26.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/27.de/index.html b/yours/27.de/index.html
index 9f36afaf2e..067ddd210b 100644
--- a/yours/27.de/index.html
+++ b/yours/27.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>27 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/27.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/28.de/index.html b/yours/28.de/index.html
index 3e3c137186..083f241ade 100644
--- a/yours/28.de/index.html
+++ b/yours/28.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>28 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/28.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/29.de/index.html b/yours/29.de/index.html
index 3403cb41bc..e9b24ce591 100644
--- a/yours/29.de/index.html
+++ b/yours/29.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>29 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/29.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/3/index.html b/yours/3/index.html
index 589c8139c6..a9974930ec 100644
--- a/yours/3/index.html
+++ b/yours/3/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>3 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/3/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -221,12 +169,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -238,7 +186,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/30.de/index.html b/yours/30.de/index.html
index 8db42753ec..0a53e88de8 100644
--- a/yours/30.de/index.html
+++ b/yours/30.de/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>30 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/30.de/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -220,12 +168,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -237,7 +185,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -309,13 +257,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -327,6 +275,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/4/index.html b/yours/4/index.html
index 99db0d0d28..61c93dfcbf 100644
--- a/yours/4/index.html
+++ b/yours/4/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>4 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/4/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -221,12 +169,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -238,7 +186,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/5/index.html b/yours/5/index.html
index 12edf78b7d..76a54767a4 100644
--- a/yours/5/index.html
+++ b/yours/5/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>5 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/5/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -221,12 +169,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -238,7 +186,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/6/index.html b/yours/6/index.html
index 2fddb69af5..a82e0506fb 100644
--- a/yours/6/index.html
+++ b/yours/6/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>6 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/6/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -221,12 +169,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -238,7 +186,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/7/index.html b/yours/7/index.html
index 9e5d068cf8..5ab7d1faac 100644
--- a/yours/7/index.html
+++ b/yours/7/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>7 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/7/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -221,12 +169,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -238,7 +186,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/8/index.html b/yours/8/index.html
index 04abac7a6a..0e1eada0c1 100644
--- a/yours/8/index.html
+++ b/yours/8/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>8 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/8/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -221,12 +169,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -238,7 +186,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/9/index.html b/yours/9/index.html
index 6f03fb55b5..52c32568b5 100644
--- a/yours/9/index.html
+++ b/yours/9/index.html
@@ -8,76 +8,24 @@
     <meta name="description" content="Documentation for Hugo Relearn Theme">
     <meta name="author" content="Sören Weber">
     <title>9 :: Documentation for Hugo Relearn Theme</title>
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374819" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374819" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374819" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374819" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374819" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397927" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397927" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397927" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397927" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397927" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397927"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397927"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/9/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -120,9 +68,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374819"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374819"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397927"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397927"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -208,7 +156,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -221,12 +169,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -238,7 +186,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -310,13 +258,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374819"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397927"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397927"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -328,6 +276,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374819"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397927"></script>
   </body>
 </html>
diff --git a/yours/children-1/index.html b/yours/children-1/index.html
index 3baabdfa4a..60c70cc2da 100644
--- a/yours/children-1/index.html
+++ b/yours/children-1/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>The one and only hidden child :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/yours/children-1/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/children-1/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -210,7 +158,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -223,12 +171,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -240,7 +188,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -313,13 +261,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -331,6 +279,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>
diff --git a/yours/index.html b/yours/index.html
index 8412a88f12..11126a493f 100644
--- a/yours/index.html
+++ b/yours/index.html
@@ -9,76 +9,24 @@
     <meta name="author" content="Sören Weber">
     <title>This could be yours :: Documentation for Hugo Relearn Theme</title>
     <link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/yours/index.xml" title="Documentation for Hugo Relearn Theme" />
-    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645374820" type="image/svg+xml">
-    <link href="/hugo-theme-relearn/css/nucleus.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/auto-complete.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme.css?1645374820" rel="stylesheet">
-    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/variant.css?1645374820" rel="stylesheet">
-    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645374820" rel="stylesheet" media="print">
-    <link href="/hugo-theme-relearn/css/print.css?1645374820" rel="stylesheet" media="print">
+    <link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1645397928" type="image/svg+xml">
+    <link href="/hugo-theme-relearn/css/nucleus.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/featherlight.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/auto-complete.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme.css?1645397928" rel="stylesheet">
+    <link id="variant-style" href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/variant.css?1645397928" rel="stylesheet">
+    <link href="/hugo-theme-relearn/css/theme-relearn-light.css?1645397928" rel="stylesheet" media="print">
+    <link href="/hugo-theme-relearn/css/print.css?1645397928" rel="stylesheet" media="print">
     <style>
     </style>
+    <script src="/hugo-theme-relearn/js/variant.js?1645397928"></script>
     <script>
-      // we need to define this script in the head to avoid flickering
-      // on page load if the user has selected a non default variant
-      var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme );
-      function parseTheme( s ){
-        if( !s || !s.match ){
-          return '';
-        }
-        var matches = s.match(/^.*\/?theme-([^\/]*?)\.css.*$/);
-        var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
-        return theme;
-      }
-      function getTheme(){
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var path = link.getAttribute( 'href' );
-        var theme = parseTheme( path );
-        return theme;
-      }
-      function markTheme( theme ){
-        var select = document.querySelector( '#select-theme' );
-        if( !select ){
-          return;
-        }
-        select.value = theme;
-      }
-      function changeTheme( theme ){
-        var themes = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ];
-        if( themes.indexOf( theme ) < 0 ){
-          theme = themes.length ? themes[ 0 ] : null;
-        }
-        if( !theme ){
-          return;
-        }
-        var link = document.querySelector( '#variant-style' );
-        if( !link ){
-          return;
-        }
-        var old_path = link.getAttribute( 'href' );
-        var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
-        if( old_path != new_path ){
-          window.localStorage.setItem( 'theme', theme );
-          link.setAttribute( 'href', new_path );
-          markTheme( theme );
-          // remove selection, because if some uses an arrow navigation
-          // by pressing the left or right cursor key, we will automatically
-          // select a different style
-          if( document.activeElement ){
-            document.activeElement.blur();
-          }
-        }
-      }
+      variants.init( [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] );
     </script>
-    <script src="/hugo-theme-relearn/js/jquery.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/jquery.min.js?1645397928"></script>
   </head>
   <body class="default-animation" data-url="/hugo-theme-relearn/yours/">
     <!-- hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic: -->
@@ -121,9 +69,9 @@
           <input data-search-input id="search-by" type="search" placeholder="Search...">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
-        <script src="/hugo-theme-relearn/js/lunr.min.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/auto-complete.js?1645374820"></script>
-        <script src="/hugo-theme-relearn/js/search.js?1645374820"></script>
+        <script src="/hugo-theme-relearn/js/lunr.min.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/auto-complete.js?1645397928"></script>
+        <script src="/hugo-theme-relearn/js/search.js?1645397928"></script>
       </div>
       <div id="content-wrapper" class="highlightable">
         <ul class="topics">
@@ -209,7 +157,7 @@
         <hr class="default-animation"/>
         <div id="prefooter">
           <ul>
-            <li>
+            <li id="select-language-container">
               <a class="padding select-container">
                 <i class="fas fa-language fa-fw"></i>
                 <span>&nbsp;</span>
@@ -222,12 +170,12 @@
                 <div class="select-clear"></div>
               </a>
             </li>
-            <li>
+            <li id="select-variant-container">
               <a class="padding select-container">
                 <i class="fas fa-paint-brush fa-fw"></i>
                 <span>&nbsp;</span>
                 <div class="select-style">
-                  <select id="select-theme" onchange="changeTheme( this.value );">
+                  <select id="select-variant" onchange="variants.changeVariant( this.value );">
                     <option id="relearn-light" value="relearn-light" selected>Relearn Light</option>
                     <option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
                     <option id="learn" value="learn">Learn</option>
@@ -239,7 +187,7 @@
                 </div>
                 <div class="select-clear"></div>
               </a>
-              <script>markTheme( getTheme() );</script>
+              <script>variants.markSelectedVariant( variants.getVariant() );</script>
             </li>
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> Clear History</a></li>
           </ul>
@@ -314,13 +262,13 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645374820"></script>
-    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/clipboard.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/perfect-scrollbar.jquery.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/jquery.svg.pan.zoom.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/featherlight.min.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/modernizr.custom-3.6.0.js?1645397928"></script>
+    <script src="/hugo-theme-relearn/js/mermaid.min.js?1645397928"></script>
     <script>
       if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
         mermaid.mermaidAPI.initialize( Object.assign( { "securityLevel": "antiscript" }, JSON.parse("{ \"securityLevel\": \"loose\"}"), { startOnLoad: false } ) );
@@ -332,6 +280,6 @@
       window.T_Copy_link_to_clipboard = 'Copy link to clipboard';
       window.T_Link_copied_to_clipboard = 'Copied link to clipboard!';
     </script>
-    <script src="/hugo-theme-relearn/js/relearn.js?1645374820"></script>
+    <script src="/hugo-theme-relearn/js/theme.js?1645397928"></script>
   </body>
 </html>