diff --git a/index.html b/index.html
index 3f6060d6..4a4cc3c6 100644
--- a/index.html
+++ b/index.html
@@ -397,5 +397,24 @@ <h2>Credits</h2>
   <script src="bundle.js"></script>
   <!-- Google analytics -->
   <script src="analytics.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
+  <script>
+    const options = {
+      bottom: '64px', // default: '32px'
+      right: 'unset', // default: '32px'
+      left: '32px', // default: 'unset'
+      time: '0.5s', // default: '0.3s'
+      mixColor: '#fff', // default: '#fff'
+      backgroundColor: '#fff',  // default: '#fff'
+      buttonColorDark: '#100f2c',  // default: '#100f2c'
+      buttonColorLight: '#fff', // default: '#fff'
+      saveInCookies: false, // default: true,
+      label: '🌓', // default: ''
+      autoMatchOsTheme: true // default: true
+    }
+
+    const darkmode = new Darkmode(options);
+    darkmode.showWidget();
+  </script>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 80d87e6e..5a151271 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4326,6 +4326,11 @@
       "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
       "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g="
     },
+    "darkmode-js": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/darkmode-js/-/darkmode-js-1.5.7.tgz",
+      "integrity": "sha512-gM1KhV/yy/84ZUpES9/oeOn0CVtuOi2HBd+Kccr4CJz+rFccQo2gUuPbjfyPXUx7t800Zf408G6kZb5rkTgjFA=="
+    },
     "dash-ast": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dash-ast/-/dash-ast-1.0.0.tgz",
diff --git a/package.json b/package.json
index c127686c..4b216d92 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "d3": "^3.5.16",
+    "darkmode-js": "^1.5.7",
     "material-design-lite": "^1.3.0",
     "seedrandom": "^2.4.3"
   }