Merge pull request #140 from Mitrichius/remove-flash-dark-theme/#139

Remove flash for dark theme on loading

layouts/partials/head.html

@@ -16,6 +16,23 @@
 {{ end -}}
 
 {{ partial "favicons.html" . }}
+
+<style>
+  body {
+    visibility: hidden;
+    opacity: 0;
+  }
+</style>
+
+<noscript>
+  <style>
+    body {
+      visibility: visible;
+      opacity: 1;
+    }
+  </style>
+</noscript>
+
 {{ partial "resource.html" (dict "context" . "type" "css" "filename" "css/main.css") }}
 
 {{ if .Site.Params.copyCodeButton | default true }}

layouts/partials/theme-switcher.html

@@ -7,6 +7,7 @@
     <button class="theme-switcher">
         {{ i18n "darkTheme" }}
     </button>
+{{ end }}
 
 <script>
 const STORAGE_KEY = 'user-color-scheme'
@@ -32,8 +33,13 @@
         autoChangeScheme(autoDefinedScheme);
         autoDefinedScheme.addListener(autoChangeScheme);
     }
+
+    if (switchButton) {
         changeButtonText()
         switchButton.addEventListener('click', switchTheme, false)
+    }
+  
+    showContent()
 })
 
 function detectCurrentScheme() {
@@ -52,10 +58,12 @@
     return 'light'
 }
 
-    function changeButtonText()
+function changeButtonText(switchButton)
 {   
+    if (switchButton) {
         switchButton.textContent = currentTheme == 'dark' ?  {{ i18n "lightTheme" }} : {{ i18n "darkTheme" }}
     }
+}
 
 function switchTheme(e) {
     if (currentTheme == 'dark') {
@@ -69,5 +77,9 @@
     }
     changeButtonText()
 }
+
+function showContent() {
+    document.body.style.visibility = 'visible';
+    document.body.style.opacity = 1;
+}
 </script>
-{{ end }}