diff --git a/exampleSite/layouts/partials/menu-footer.html b/exampleSite/layouts/partials/menu-footer.html
index 4ffbe01022..5e180bc42a 100644
--- a/exampleSite/layouts/partials/menu-footer.html
+++ b/exampleSite/layouts/partials/menu-footer.html
@@ -36,5 +36,8 @@
               // we have to wait until the CSS class .default-animation has settled and and the buttons have loaded to recalculate the scheme again
               setTimeout( githubButtonsInit, 400 );
             });
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+              setTimeout( githubButtonsInit, 400 );
+            });
           </script>
           <script async src="{{"js/github-buttons.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
\ No newline at end of file
diff --git a/static/js/theme.js b/static/js/theme.js
index 70eac20a29..e868406832 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -1665,3 +1665,9 @@ ready( function(){
     moveTopbarButtons();
     adjustEmptyTopbarContents();
 })();
+
+(function(){
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        initOpenapi( true );
+    });
+})();