Merge pull request #88 from bitkarrot/master

add dark mode toggle
chaincodelabs · Jan 10, 2025 · c10c10e · c10c10e
2 parents f7c1c4e + 03473b2
commit c10c10e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/_config.yml b/_config.yml
@@ -29,6 +29,8 @@ github_username:  chaincodelabs
 
 # Build settings
 theme: just-the-docs
+# Color scheme supports "light" and "dark"
+color_scheme: dark
 plugins:
   - asciidoctor-diagram
   - jekyll-feed

diff --git a/_includes/head_custom.html b/_includes/head_custom.html
@@ -1,2 +1,19 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="/css/asciidoc.css">
+
+<button class="btn js-toggle-dark-mode"><i class="fa fa-sun-o"></i></button>
+
+<script>
+const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
+const toggleIcon = toggleDarkMode.querySelector('i');
+
+jtd.addEvent(toggleDarkMode, 'click', function() {
+  if (jtd.getTheme() === 'dark') {
+    jtd.setTheme('light');
+    toggleIcon.className = 'fa fa-moon-o';
+  } else {
+    jtd.setTheme('dark');
+    toggleIcon.className = 'fa fa-sun-o';
+  }
+});
+</script>