summary refs log tree commit diff stats
path: root/config
diff options
context:
space:
mode:
authorAmjad Ben Hedhili <amjadhedhili@outlook.com>2022-08-21 21:56:12 +0100
committerGitHub <noreply@github.com>2022-08-21 16:56:12 -0400
commit70a8e0d65c6ada01dac22b77873a0b6a9ea846b7 (patch)
tree72a3ca334c716555f9f24de7046b0db0d985cd03 /config
parentd8d86e07c39be1d41f2d26eabc8cbdf87b799d8e (diff)
downloadNim-70a8e0d65c6ada01dac22b77873a0b6a9ea846b7.tar.gz
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>
Diffstat (limited to 'config')
-rw-r--r--config/nimdoc.cfg26
1 files changed, 14 insertions, 12 deletions
diff --git a/config/nimdoc.cfg b/config/nimdoc.cfg
index 7aee50d8c..d10c2f318 100644
--- a/config/nimdoc.cfg
+++ b/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">
-      <label class="theme-switch" for="checkbox">
-        <input type="checkbox" id="checkbox" />
-        <div class="slider round"></div>
-      </label>
-      &nbsp;&nbsp;&nbsp; <em>Dark Mode</em>
+    <div class="theme-select-wrapper">
+      <label for="theme-select">Theme:&nbsp;</label>
+      <select id="theme-select" onchange="setTheme(this.value)">
+        <option value="auto">🌗 Match OS</option>
+        <option value="dark">🌑 Dark</option>
+        <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">
-      <label class="theme-switch" for="checkbox">
-        <input type="checkbox" id="checkbox" />
-        <div class="slider round"></div>
-      </label>
-      &nbsp;&nbsp;&nbsp; <em>Dark Mode</em>
+    <div class="theme-select-wrapper">
+      <label for="theme-select">Theme:&nbsp;</label>
+      <select id="theme-select" onchange="setTheme(this.value)">
+        <option value="auto">🌗 Match OS</option>
+        <option value="dark">🌑 Dark</option>
+        <option value="light">🌕 Light</option>
+      </select>
     </div>
     <div id="global-links">
       <ul class="simple">