Docs auto dark mode (#20188)

* Implement auto dark mode

* Rename class

* Fix borders cutout

* Apply suggestions from code review

* Apply suggestions from code review

Co-authored-by: ringabout <43030857+ringabout@users.noreply.github.com>

1 files changed, 14 insertions, 26 deletions

diff --git a/tools/dochack/dochack.nim b/tools/dochack/dochack.nim
index c7b8232ef..5ba42e9c1 100644
--- a/tools/dochack/dochack.nim
+++ b/tools/dochack/dochack.nim
@@ -2,16 +2,19 @@ import dom
 import fuzzysearch
 
 
-proc switchTheme(event: Event) =
-  if event.target.checked:
-    document.documentElement.setAttribute("data-theme", "dark")
-    window.localStorage.setItem("theme", "dark")
-  else:
-    document.documentElement.setAttribute("data-theme", "light")
-    window.localStorage.setItem("theme", "light")
+proc setTheme(theme: cstring) {.exportc.} =
+  document.documentElement.setAttribute("data-theme", theme)
+  window.localStorage.setItem("theme", theme)
+
+# set `data-theme` attribute early to prevent white flash
+setTheme:
+  let t = window.localStorage.getItem("theme")
+  if t.isNil: cstring"auto" else: t
 
+proc onDOMLoaded(e: Event) {.exportc.} =
+  # set theme select value
+  document.getElementById("theme-select").value = window.localStorage.getItem("theme")
 
-proc nimThemeSwitch(event: Event) {.exportC.} =
   var pragmaDots = document.getElementsByClassName("pragmadots")
   for i in 0..<pragmaDots.len:
     pragmaDots[i].onclick = proc (event: Event) =
@@ -20,25 +23,10 @@ proc nimThemeSwitch(event: Event) {.exportC.} =
       # Show actual
       event.target.parentNode.nextSibling.style.display = "inline"
 
-  let toggleSwitch = document.querySelector(".theme-switch input[type=\"checkbox\"]")
-
-  if toggleSwitch != nil:
-    toggleSwitch.addEventListener("change", switchTheme, false)
-
-  var currentTheme = window.localStorage.getItem("theme")
-  if currentTheme.len == 0 and window.matchMedia("(prefers-color-scheme: dark)").matches:
-    currentTheme = "dark"
-  if currentTheme.len > 0:
-    document.documentElement.setAttribute("data-theme", currentTheme);
-
-    if currentTheme == "dark" and toggleSwitch != nil:
-      toggleSwitch.checked = true
 
-proc textContent(e: Element): cstring {.
-  importcpp: "#.textContent", nodecl.}
+proc textContent(e: Element): cstring {.importcpp: "#.textContent", nodecl.}
 
-proc textContent(e: Node): cstring {.
-  importcpp: "#.textContent", nodecl.}
+proc textContent(e: Node): cstring {.importcpp: "#.textContent", nodecl.}
 
 proc tree(tag: string; kids: varargs[Element]): Element =
   result = document.createElement tag
@@ -431,4 +419,4 @@ proc copyToClipboard*() {.exportc.} =
     .}
 
 copyToClipboard()
-window.addEventListener("DOMContentLoaded", nimThemeSwitch)
\ No newline at end of file
+window.addEventListener("DOMContentLoaded", onDOMLoaded)