From ec053c7c5ed1097cd158e4e2cb828e95eb814c72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sun, 13 Feb 2022 02:30:05 +0100
Subject: [PATCH] theme: set theme selector correctly on load #178

---
 layouts/partials/menu.html       |  1 +
 layouts/partials/stylesheet.html | 30 ++++++++++++------------------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index 0943c4c760..a89f5aaa5e 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -107,6 +107,7 @@
                       {{- end }}
                     {{- end }}
                   </select>
+                  <script>markTheme( getTheme() );</script>
                 </div>
               </a>
             </li>
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
index b75c479679..aa9bc06e24 100644
--- a/layouts/partials/stylesheet.html
+++ b/layouts/partials/stylesheet.html
@@ -18,8 +18,17 @@
       // we need to define this script in the head to avoid flickering an
       // page load if the user has selected a non default variant
       var theme = window.localStorage.getItem( 'theme' );
-      changeTheme( theme, true );
-
+      changeTheme( theme );
+      function getTheme(){
+        var link = document.querySelector( '#variant-style' );
+        var path = link.getAttribute( 'href' );
+        var theme = path.match(/^.*\/theme-(.*?)\.css.*$/)[ 1 ];
+        return theme;
+      }
+      function markTheme( theme ){
+        var select = document.querySelector( '#select-theme' );
+        select.value = theme;
+      }
       function changeTheme( theme, noanimation ){
         if( !theme ){
           return;
@@ -28,24 +37,9 @@
         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 );
-          }
+          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