jyapayne/Nim
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Docs auto dark mode (#20188)

Browse source 
* 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>
This commit is contained in:
Amjad Ben Hedhili 2022-08-21 21:56:12 +01:00 • committed by GitHub
commit 70a8e0d65c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 136 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

40
tools/dochack/dochack.nim
View file

@ -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)
proc textContent(e: Element): cstring {.importcpp: "#.textContent", nodecl.}
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: 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)
window.addEventListener("DOMContentLoaded", onDOMLoaded)