From d54b54cafa5e3b074969ed3a5cb08a4e6ae73544 Mon Sep 17 00:00:00 2001
From: Rushan <rushenn@minio.io>
Date: Mon, 11 Sep 2023 13:30:27 +0000
Subject: [PATCH] Light/dark mode: avoid flickering on page reload (#995)

**Current behaviour:**


https://github.com/minio/docs/assets/13393018/1c8b5762-9ee5-45ec-9e44-88f99c1750dd

**Fix:**


https://github.com/minio/docs/assets/13393018/658f7858-d793-40ca-87de-8f519a12dffa
---
 source/_static/js/main.js                 | 18 ------------------
 source/_static/scss/includes/_header.scss |  4 ----
 source/_templates/custom-scripts.html     | 20 ++++++++++++++++++++
 source/_templates/layout.html             |  1 +
 4 files changed, 21 insertions(+), 22 deletions(-)
 create mode 100644 source/_templates/custom-scripts.html

diff --git a/source/_static/js/main.js b/source/_static/js/main.js
index 4dca31df..46e251a7 100644
--- a/source/_static/js/main.js
+++ b/source/_static/js/main.js
@@ -74,17 +74,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
   // --------------------------------------------------
   (function () {
     const readModeEl = document.getElementById("read-mode-toggle");
-    const headerEl = document.querySelector(".header");
-    
-    // Check if the read mode in enabled in user's local storage
-    if (readModeLs === "true") {
-      document.documentElement.classList.add("read-mode");
-      readModeEl.classList.add("active");
-    }
-
-    // Make header visible after the page is loaded and read-mode is decided.
-    // This is to prevent the flickering of the header on page load.
-    headerEl.classList.remove("inactive");
     
     // Toggle read mode on icon click
     readModeEl.addEventListener("click", (event) => {
@@ -136,13 +125,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
   // --------------------------------------------------
   (function () {
     const darkModeEl = document.getElementById("dark-mode-toggle");
-    var darkModeLs = localStorage.getItem("dark-mode");
-
-    // Check if the dark mode in enabled in user's local storage
-    if (darkModeLs === "true") {
-      document.documentElement.classList.add("dark-mode");
-      darkModeEl.classList.add("active");
-    }
 
     darkModeEl.addEventListener("click", (event) => {
       document.documentElement.classList.toggle("dark-mode");
diff --git a/source/_static/scss/includes/_header.scss b/source/_static/scss/includes/_header.scss
index 21a0dd01..44a6ccf7 100644
--- a/source/_static/scss/includes/_header.scss
+++ b/source/_static/scss/includes/_header.scss
@@ -8,10 +8,6 @@
 	& > .container {
 		position: relative;
 	}
-
-	&.inactive {
-		display: none;
-	}
 }
 
 .header__top {
diff --git a/source/_templates/custom-scripts.html b/source/_templates/custom-scripts.html
new file mode 100644
index 00000000..ec857833
--- /dev/null
+++ b/source/_templates/custom-scripts.html
@@ -0,0 +1,20 @@
+<script>
+    // Dark mode and read mode detection
+
+    // Dark mode
+    var isDarkMode = localStorage.getItem("dark-mode");
+    var dmToggleBtn = document.getElementById("dark-mode-toggle");
+    if (isDarkMode === "true") {
+       document.documentElement.classList.add("dark-mode");
+       dmToggleBtn.classList.add("active");
+    }
+
+    // Read mode
+    var isReadMode = localStorage.getItem("read-mode");
+    var rmToggleBtn = document.getElementById("read-mode-toggle");
+
+    if (isReadMode === "true") {
+        document.documentElement.classList.add("read-mode");
+        rmToggleBtn.classList.add("active");
+    }
+ </script>
\ No newline at end of file
diff --git a/source/_templates/layout.html b/source/_templates/layout.html
index 82700ffc..53a0b5a6 100644
--- a/source/_templates/layout.html
+++ b/source/_templates/layout.html
@@ -93,4 +93,5 @@
 
 {%- block footer %}
    {%- include "cookie.html" %}
+   {%- include "custom-scripts.html" %}
 {%- endblock %}
\ No newline at end of file