diff --git a/assets/js/dark-mode-preview.js b/assets/js/dark-mode-preview.js
new file mode 100644
index 0000000000000000000000000000000000000000..addfb27ccf9c02b52934d24d2f6ea8a8180eda53
--- /dev/null
+++ b/assets/js/dark-mode-preview.js
@@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", function(){
+
+  const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
+  const cssFile = document.querySelector('[rel="stylesheet"]')
+  const originalCssRef = cssFile.getAttribute('href')
+  const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
+  const buttonCopy = ['Return to the light side', 'Preview dark color scheme']
+  const updateButtonText = function(toggleDarkMode) {
+    toggleDarkMode.textContent === buttonCopy[0] ?
+      toggleDarkMode.textContent = buttonCopy[1] :
+      toggleDarkMode.textContent = buttonCopy[0]
+  }
+
+  addEvent(toggleDarkMode, 'click', function(){
+    if (cssFile.getAttribute('href') === originalCssRef) {
+      cssFile.setAttribute('href', darkModeCssRef)
+      updateButtonText(toggleDarkMode)
+    } else {
+      cssFile.setAttribute('href', originalCssRef)
+      updateButtonText(toggleDarkMode)
+    }
+  })
+})
\ No newline at end of file
diff --git a/docs/configuration.md b/docs/configuration.md
index 872e1701f5d7b2d46bddfefef24346b8edc24f4c..eb43a086f9572ed1fb249ab1fc483eeb0929dba3 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -75,20 +75,7 @@ color_scheme: "dark"
 ```
 <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
 
-<script>
-const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
-const cssFile = document.querySelector('[rel="stylesheet"]');
-const originalCssRef = cssFile.getAttribute('href');
-const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css');
-
-jtd.addEvent(toggleDarkMode, 'click', function(){
-  if (cssFile.getAttribute('href') === originalCssRef) {
-    cssFile.setAttribute('href', darkModeCssRef);
-  } else {
-    cssFile.setAttribute('href', originalCssRef);
-  }
-})
-</script>
+<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
 
 See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
 
diff --git a/docs/customization.md b/docs/customization.md
index a3d5b6ff19e774dd244b2a2a1cad289e33d6f896..8411b6914c2e9afd88f4db74a71069e4ac2a0a99 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -34,20 +34,7 @@ color_scheme: "dark"
 ```
 <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
 
-<script>
-const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
-const cssFile = document.querySelector('[rel="stylesheet"]');
-const originalCssRef = cssFile.getAttribute('href');
-const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css');
-
-jtd.addEvent(toggleDarkMode, 'click', function(){
-  if (cssFile.getAttribute('href') === originalCssRef) {
-    cssFile.setAttribute('href', darkModeCssRef);
-  } else {
-    cssFile.setAttribute('href', originalCssRef);
-  }
-})
-</script>
+<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
 
 ## Specific visual customization