theme: add a theme selector #178

exampleSite/config.toml

@@ -36,7 +36,7 @@ title = "Hugo Relearn Documentation"
   disableLandingPageButton = true
   disableMermaid = false
   titleSeparator = "::"
-  themeVariant = "relearn-light"
+  themeVariant = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ]
   disableSeoHiddenPages = true
 
 [outputs]

exampleSite/content/basics/configuration/_index.en.md

@@ -60,7 +60,7 @@ Note that some of these parameters are explained in details in other sections of
   # Order sections in menu by "weight" or "title". Default to "weight";
   # this can be overridden in the pages frontmatter
   ordersectionsby = "weight"
-  # Change default color scheme with a variant one. Can be "red", "blue", "green".
+  # Change default color scheme with a variant one. Can be "red", "blue", "green" or an array like [ "blue", "green" ].
   themeVariant = ""
   # Provide a list of custom css files to load relative from the `static/` folder in the site root.
   custom_css = ["css/foo.css", "css/bar.css"]

exampleSite/content/basics/customization/_index.en.md

@@ -53,7 +53,7 @@ The Relearn theme let you choose between some predefined color scheme variants,
 
 ```toml
 [params]
-  # Change default color scheme with a variant one. Can be empty, "red", "blue", "green".
+  # Change default color scheme with a variant one. Can be empty, "red", "blue", "green" or an array like [ "blue", "green" ].
   themeVariant = ""
 ```
 
@@ -63,7 +63,7 @@ The Relearn theme let you choose between some predefined color scheme variants,
 
 ```toml
 [params]
-  # Change default color scheme with a variant one. Can be empty, "red", "blue", "green".
+  # Change default color scheme with a variant one. Can be empty, "red", "blue", "green" or an array like [ "blue", "green" ].
   themeVariant = "red"
 ```
 
@@ -73,7 +73,7 @@ The Relearn theme let you choose between some predefined color scheme variants,
 
 ```toml
 [params]
-  # Change default color scheme with a variant one. Can be empty, "red", "blue", "green".
+  # Change default color scheme with a variant one. Can be empty, "red", "blue", "green" or an array like [ "blue", "green" ].
   themeVariant = "blue"
 ```
 
@@ -83,7 +83,7 @@ The Relearn theme let you choose between some predefined color scheme variants,
 
 ```toml
 [params]
-  # Change default color scheme with a variant one. Can be empty, "red", "blue", "green".
+  # Change default color scheme with a variant one. Can be empty, "red", "blue", "green" or an array like [ "blue", "green" ].
   themeVariant = "green"
 ```
 
@@ -137,6 +137,17 @@ Then, set the `themeVariant` value with the name of your custom theme file. That
 
 ```toml
 [params]
-  # Change default color scheme with a variant one. Can be "red", "blue", "green".
+  # Change default color scheme with a variant one. Can be "red", "blue", "green" or an array like [ "blue", "green" ].
   themeVariant = "mine"
 ```
+
+### Multiple variants
+
+You can also set multiple variants. In this case, the first variant is the default choosen on first view and a theme selector will be shown in the menu footer.
+
+```toml
+[params]
+  # Change default color scheme with a variant one. Can be empty, "red", "blue", "green"  or an array like [ "blue", "green" ].
+  themeVariant = [ "red", "blue ]
+```
+

exampleSite/content/basics/migration/_index.en.md

@@ -20,6 +20,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
   This change was made to allow your own menu footer to be placed right after the so called prefooter that comes with the theme (containing the language switch and *Clear history* functionality).
 
+- **New**: You can also set multiple variants. In this case, the first variant is the default choosen on first view and a theme selector will be shown in the menu footer. See the [documentation]({{%relref "basics/customization/#multiple-variants" %}}) for configuration.
+
 ## 2.9.0
 
 - **Breaking**: This release removes the themes implementation of `ref`/`relref` in favor for Hugos standard implementation. This is because of inconsistencies with the themes implementation. In advantage, your project becomes standard complient and exchanging this theme in your project to some other theme will be effortless.

layouts/404.html

@@ -23,7 +23,7 @@
     {{- partial "custom-header.html" . }}
   </head>
   <body class="" data-url="/">
-    <div id="body" style="margin-left:0px;">
+    <div id="body default-animation" style="margin-left:0px;">
       <div id="overlay"></div>
       <div id="chapter">
         <main id="body-inner">

layouts/partials/footer.html

@@ -8,10 +8,10 @@
   {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
   {{- if $showPrevNext }}
     {{- with ($.Scratch.Get "relearnPrevPage") }}
-        <a class="nav nav-prev" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-left"></i></a>
+        <a class="nav nav-prev default-animation" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-left"></i></a>
     {{- end}}
     {{- with ($.Scratch.Get "relearnNextPage") }}
-        <a class="nav nav-next" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-right"></i></a>
+        <a class="nav nav-next default-animation" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-right"></i></a>
     {{- end }}
   {{- end }}
       </div>

layouts/partials/header.html

@@ -26,7 +26,7 @@
   </head>
   <body class="" data-url="{{ .RelPermalink }}">
     {{- partial "menu.html" . }}
-    <div id="body">
+    <div id="body" class="default-animation">
       <div id="overlay"></div>
       <div class="padding highlightable">
         {{- if not .IsHome }}

layouts/partials/menu.html

@@ -6,7 +6,7 @@
       var root_url="/";
       var baseUri=root_url.replace(/\/$/, '');
     </script>
-    <nav id="sidebar" class="{{ if $.Site.Params.showVisitedLinks }}showVisitedLinks{{ end }}">
+    <nav id="sidebar" class="default-animation {{ if $.Site.Params.showVisitedLinks }}showVisitedLinks{{ end }}">
       {{- $currentNode := . }}
       {{- $showvisitedlinks := .Site.Params.showVisitedLinks }}
       <div id="header-wrapper">
@@ -54,12 +54,14 @@
         {{- end }}
         <div class="footermargin"></div>
         {{- $showlangswitch := and .Site.IsMultiLingual (not .Site.Params.disableLanguageSwitchingButton) }}
+        {{- $themevariants := slice | append .Site.Params.themeVariant }}
+        {{- $showthemeswitch := gt (int (len $themevariants)) 1 }}
         {{- $footer := partial "menu-footer.html" . }}
         {{- $showfooter := not (eq 0 (int (len $footer | plainify))) }}
         {{- if or $showlangswitch $showvisitedlinks $showfooter }}
         <hr/>
         {{- end }}
-        {{- if or $showlangswitch $showvisitedlinks }}
+        {{- if or $showlangswitch $showthemeswitch $showvisitedlinks }}
         <div id="prefooter">
           <ul>
             {{- if $showlangswitch }}
@@ -87,6 +89,28 @@
               </a>
             </li>
             {{- end }}
+            {{- if $showthemeswitch }}
+            <li>
+              <a class="padding select-container">
+                <i class="fas fa-paint-brush fa-fw"></i>
+                <div class="select-style">
+                  <select id="select-theme" onchange="changeTheme( this.value );">
+                    {{- $firsttheme := true }}
+                    {{- range $themevariants }}
+                      {{- $themevariant := . }}
+                      {{- $themename := replaceRE "[-_]+" " " $themevariant }}
+                      {{- if $firsttheme }}
+                        {{- $firsttheme = false }}
+                    <option id="{{ $themevariant }}" value="{{ $themevariant }}" selected>{{ $themename }}</option>
+                      {{- else }}
+                    <option id="{{ $themevariant }}" value="{{ $themevariant }}">{{ $themename }}</option>
+                      {{- end }}
+                    {{- end }}
+                  </select>
+                </div>
+              </a>
+            </li>
+            {{- end }}
             {{- if $showvisitedlinks }}
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> {{ T "Clear-History" }}</a></li>
             {{- end }}

layouts/partials/stylesheet.html

@@ -5,8 +5,9 @@
     <link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    {{- with .Site.Params.themeVariant }}
-    <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    {{- $themevariants := slice | append .Site.Params.themeVariant }}
+    {{- with index $themevariants 0 }}
+    <link id="variant-style" href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     {{- end }}
     <link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print">

static/css/theme.css

@@ -78,12 +78,7 @@ th {
     font-weight: 600;
 }
 
-.default-animation,
-#sidebar,
-#sidebar ul,
-#body,
-#body .padding,
-#body .nav {
+.default-animation{
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     transition: all 0.5s ease;
@@ -1419,6 +1414,10 @@ h6 a {
     cursor: pointer;
 }
 
+.select-style #select-theme {
+    text-transform: capitalize;
+}
+
 @media only all and (max-width: 47.938em) {
   #breadcrumbs .links, #top-github-link-text {
       display: none;

static/js/relearn.js

@@ -1,3 +1,41 @@
+var theme = window.localStorage.getItem( 'theme' );
+changeTheme( theme, true );
+
+function changeTheme( theme, noanimation ){
+    if( !theme ){
+        return;
+    }
+    var link = document.querySelector( '#variant-style' );
+    var old_path = link.getAttribute( 'href' );
+    var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + theme + '$2' );
+    if( old_path != new_path ){
+        var animations = document.querySelectorAll( '.default-animation' );
+        if( noanimation ){
+            animations.forEach( function( e ){
+                e.classList.remove( 'default-animation' );
+            });
+        }
+        window.localStorage.setItem( 'theme', theme );
+        link.setAttribute( 'href', new_path );
+        var select = document.querySelector( '#select-theme' );
+        select.value = theme;
+        // we have to wait to reset the animation style
+        if( noanimation ){
+            setTimeout( function(){
+                animations.forEach( function( e ){
+                    e.classList.add( 'default-animation' );
+                });
+            }, 525 );
+        }
+        // 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();
+        }
+    }
+}
+
 // Scrollbar Width function
 function getScrollBarWidth() {
     var inner = document.createElement('p');