docs: wait for GitHub button coloring until CSS transitions are finis…

…hed #615
McShelby · Aug 12, 2023 · beb284e · beb284e
1 parent a52aee2
commit beb284e
Showing 1 changed file with 18 additions and 7 deletions.
diff --git a/exampleSite/layouts/partials/menu-footer.html b/exampleSite/layouts/partials/menu-footer.html
@@ -18,26 +18,37 @@
           </span>
           <p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
           <script>
-            document.addEventListener( 'themeVariantLoaded', function( e ){
-              console.log( e );
+            function githubButtonsScheme(){
               var scheme = 'light';
               var colorPropertyValue = window.getComputedStyle( document.querySelector( '#sidebar' ) ).getPropertyValue( 'background-color' );
               var colorValues = colorPropertyValue.match( /\d+/g ).map( function( e ){ return parseInt(e,10); });
               if( colorValues.length === 3 && ((0.2126 * colorValues[0]) + (0.7152 * colorValues[1]) + (0.0722 * colorValues[2]) < 165) ){
                 // Luma, https://en.wikipedia.org/wiki/Luma_%28video%29, SMPTE C, Rec. 709 weightings
                 scheme = 'dark';
               }
+              return scheme;
+            }
+            document.addEventListener( 'themeVariantLoaded', function( e ){
+              // we get the scheme for initial loading
+              var scheme = githubButtonsScheme();
               var githubButtonsHTML = `
                 <a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme="${scheme}" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
                 <a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-color-scheme="${scheme}" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
                 <a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme="${scheme}" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
                `;
               document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
-              document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
-                window.githubButtons.render( anchor, function( el ){
-                  anchor.parentNode.replaceChild( el, anchor );
-                });
-              });
+              if( window.githubButtons ){
+                setTimeout( function(){
+                  // we have to wait until the CSS class .default-animation has settled and recalculate the scheme again
+                  var scheme = githubButtonsScheme();
+                  document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
+                    anchor.dataset.colorScheme = scheme;
+                    window.githubButtons.render( anchor, function( el ){
+                      anchor.parentNode.replaceChild( el, anchor );
+                    });
+                  });
+                }, 400 );
+              }
             });
           </script>
           <script async src="{{"js/github-buttons.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>