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>

config/nimdoc.cfg

@@ -135,12 +135,13 @@ doc.body_toc_groupsection = """
 doc.body_toc_group = """
 <div class="row">
   <div class="three columns">
-    <div class="theme-switch-wrapper">
+    <div class="theme-select-wrapper">
-      <label class="theme-switch" for="checkbox">
+      <label for="theme-select">Theme:&nbsp;</label>
-        <input type="checkbox" id="checkbox" />
+      <select id="theme-select" onchange="setTheme(this.value)">
-        <div class="slider round"></div>
+        <option value="auto">🌗 Match OS</option>
-      </label>
+        <option value="dark">🌑 Dark</option>
-      &nbsp;&nbsp;&nbsp; <em>Dark Mode</em>
+        <option value="light">🌕 Light</option>
+      </select>
     </div>
     <div id="global-links">
       <ul class="simple-boot">
@@ -174,12 +175,13 @@ doc.body_toc_group = """
 doc.body_toc_group = """
 <div class="row">
   <div class="three columns">
-    <div class="theme-switch-wrapper">
+    <div class="theme-select-wrapper">
-      <label class="theme-switch" for="checkbox">
+      <label for="theme-select">Theme:&nbsp;</label>
-        <input type="checkbox" id="checkbox" />
+      <select id="theme-select" onchange="setTheme(this.value)">
-        <div class="slider round"></div>
+        <option value="auto">🌗 Match OS</option>
-      </label>
+        <option value="dark">🌑 Dark</option>
-      &nbsp;&nbsp;&nbsp; <em>Dark Mode</em>
+        <option value="light">🌕 Light</option>
+      </select>
     </div>
     <div id="global-links">
       <ul class="simple">

nimdoc/rst2html/expected/rst_examples.html

@@ -27,12 +27,13 @@
       <h1 class="title">Not a Nim Manual</h1>
       <div class="row">
   <div class="three columns">
-    <div class="theme-switch-wrapper">
+    <div class="theme-select-wrapper">
-      <label class="theme-switch" for="checkbox">
+      <label for="theme-select">Theme:&nbsp;</label>
-        <input type="checkbox" id="checkbox" />
+      <select id="theme-select" onchange="setTheme(this.value)">
-        <div class="slider round"></div>
+        <option value="auto">🌗 Match OS</option>
-      </label>
+        <option value="dark">🌑 Dark</option>
-      &nbsp;&nbsp;&nbsp; <em>Dark Mode</em>
+        <option value="light">🌕 Light</option>
+      </select>
     </div>
     <div id="global-links">
       <ul class="simple">

nimdoc/test_out_index_dot_html/expected/index.html

@@ -27,12 +27,13 @@
       <h1 class="title">nimdoc/test_out_index_dot_html/foo</h1>
       <div class="row">
   <div class="three columns">
-    <div class="theme-switch-wrapper">
+    <div class="theme-select-wrapper">
-      <label class="theme-switch" for="checkbox">
+      <label for="theme-select">Theme:&nbsp;</label>
-        <input type="checkbox" id="checkbox" />
+      <select id="theme-select" onchange="setTheme(this.value)">
-        <div class="slider round"></div>
+        <option value="auto">🌗 Match OS</option>
-      </label>
+        <option value="dark">🌑 Dark</option>
-      &nbsp;&nbsp;&nbsp; <em>Dark Mode</em>
+        <option value="light">🌕 Light</option>
+      </select>
     </div>
     <div id="global-links">
       <ul class="simple">

nimdoc/testproject/expected/subdir/subdir_b/utils.html

@@ -27,12 +27,13 @@
       <h1 class="title">subdir/subdir_b/utils</h1>
       <div class="row">
   <div class="three columns">
-    <div class="theme-switch-wrapper">
+    <div class="theme-select-wrapper">
-      <label class="theme-switch" for="checkbox">
+      <label for="theme-select">Theme:&nbsp;</label>
-        <input type="checkbox" id="checkbox" />
+      <select id="theme-select" onchange="setTheme(this.value)">
-        <div class="slider round"></div>
+        <option value="auto">🌗 Match OS</option>
-      </label>
+        <option value="dark">🌑 Dark</option>
-      &nbsp;&nbsp;&nbsp; <em>Dark Mode</em>
+        <option value="light">🌕 Light</option>
+      </select>
     </div>
     <div id="global-links">
       <ul class="simple">

nimdoc/testproject/expected/testproject.html

@@ -27,12 +27,13 @@
       <h1 class="title">testproject</h1>
       <div class="row">
   <div class="three columns">
-    <div class="theme-switch-wrapper">
+    <div class="theme-select-wrapper">
-      <label class="theme-switch" for="checkbox">
+      <label for="theme-select">Theme:&nbsp;</label>
-        <input type="checkbox" id="checkbox" />
+      <select id="theme-select" onchange="setTheme(this.value)">
-        <div class="slider round"></div>
+        <option value="auto">🌗 Match OS</option>
-      </label>
+        <option value="dark">🌑 Dark</option>
-      &nbsp;&nbsp;&nbsp; <em>Dark Mode</em>
+        <option value="light">🌕 Light</option>
+      </select>
     </div>
     <div id="global-links">
       <ul class="simple">

tools/dochack/dochack.nim

@@ -2,16 +2,19 @@ import dom
 import fuzzysearch
 
 
-proc switchTheme(event: Event) =
+proc setTheme(theme: cstring) {.exportc.} =
-  if event.target.checked:
+  document.documentElement.setAttribute("data-theme", theme)
-    document.documentElement.setAttribute("data-theme", "dark")
+  window.localStorage.setItem("theme", theme)
-    window.localStorage.setItem("theme", "dark")
-  else:
-    document.documentElement.setAttribute("data-theme", "light")
-    window.localStorage.setItem("theme", "light")
 
+# 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:
+proc textContent(e: Element): cstring {.importcpp: "#.textContent", nodecl.}
-    toggleSwitch.addEventListener("change", switchTheme, false)
 
-  var currentTheme = window.localStorage.getItem("theme")
+proc textContent(e: Node): cstring {.importcpp: "#.textContent", nodecl.}
-  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: 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)
+window.addEventListener("DOMContentLoaded", onDOMLoaded)