diff --git a/_includes/main.liquid b/_includes/main.liquid
index 2c46cea8489..a55ef0ec229 100644
--- a/_includes/main.liquid
+++ b/_includes/main.liquid
@@ -35,6 +35,7 @@
         <noscript><link rel="stylesheet" href="/prism.css"></noscript>
         <script src="/index.js" defer></script>
         <link href="/docs.css" rel="stylesheet" type="text/css">
+        <script src="/dark.js"></script>
 
         <link href="https://assets-global.website-files.com/5f6b7190899f41fb70882d08/5fa97474da20bc75f63bfdc4_Chainlink-favicon-32.png" rel="shortcut icon" type="image/x-icon">
         <link href="https://assets-global.website-files.com/5f6b7190899f41fb70882d08/5fa973e31adbc3414aa8f77d_Chainlink-webclip.png" rel="apple-touch-icon">
@@ -193,6 +194,7 @@
                                     class="footer-list-item-link">Contract reference</a></li>
                             <li class="footer-list-item"><a href="/chainlink-nodes/"
                                     class="footer-list-item-link">Node operators</a></li>
+                            <li class="footer-list-item"><a href="#" id="dark-toggle" class="footer-list-item-link">Dark Mode</a></li>
                         </ul>
                     </nav>
                     <nav class="footer-col">
diff --git a/_src/dark.js b/_src/dark.js
new file mode 100644
index 00000000000..1a47f14d17a
--- /dev/null
+++ b/_src/dark.js
@@ -0,0 +1,27 @@
+(() => {
+  const render = (dark, toggle) => {
+    if (dark) {
+      document.body.classList.add('dark-theme');
+      toggle.innerHTML = 'Light Mode';
+    } else {
+      document.body.classList.remove('dark-theme');
+      toggle.innerHTML = 'Dark Mode';
+    }
+  };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.getElementById('dark-toggle');
+    let prefersDarkScheme =
+      JSON.parse(localStorage['darkMode'] || 'null') ||
+      window.matchMedia('(prefers-color-scheme: dark)').matches;
+      render(prefersDarkScheme, toggle);
+
+    toggle.addEventListener('click', (event) => {
+      console.log('toggling');
+      event.preventDefault();
+      prefersDarkScheme = !prefersDarkScheme;
+      localStorage['darkMode'] = prefersDarkScheme;
+      render(prefersDarkScheme, toggle);
+    });
+  });
+})();
diff --git a/_src/docs.css b/_src/docs.css
index d6c5664dbde..ea3faeb9052 100644
--- a/_src/docs.css
+++ b/_src/docs.css
@@ -1046,6 +1046,12 @@ input[type='reset'] {
   max-width: 120px;
 }
 
+/** Dark Theme */
+.dark-theme, .dark-theme * {
+  background:black;
+  color:white;
+}
+
 /** Mobile */
 @media screen and (max-width: 900px) {
   navigation:not(.open) {
diff --git a/_src/docsat.js b/_src/docsat.js
index e6544f059f4..adec00a9440 100644
--- a/_src/docsat.js
+++ b/_src/docsat.js
@@ -1,58 +1,71 @@
-const sat = document.getElementById('docsat');
-let rating = 0;
-let submitted = false;
+(() => {
+  const sat = document.getElementById('docsat');
+  let rating = 0;
+  let submitted = false;
 
-const star = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+  const star = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
 <path fill="currentColor" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
-</svg>`
-const starOutline = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+</svg>`;
+  const starOutline = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
 <path fill="currentColor" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />
-</svg>`
+</svg>`;
 
-select = (n) => (event) => {
-  console.log('event', event)
-  if (n + 1 === rating) {
-    rating = 0
-  } else {
-    rating = n + 1
-  }
-  submitted = false;
-  render();
-  const path = 'https://docs2-cl-default-rtdb.firebaseio.com/allratings.json';
-  const data = {rating,time:Date.now(),url:window.location.href};
-  SULX.post(path, JSON.stringify(data));
-}
-render = () => {
-  sat.innerHTML = `
+  let render;
+  let select = (n) => (event) => {
+    console.log('event', event);
+    if (n + 1 === rating) {
+      rating = 0;
+    } else {
+      rating = n + 1;
+    }
+    submitted = false;
+    render();
+    const path = 'https://docs2-cl-default-rtdb.firebaseio.com/allratings.json';
+    const data = { rating, time: Date.now(), url: window.location.href };
+    SULX.post(path, JSON.stringify(data));
+  };
+  render = () => {
+    sat.innerHTML = `
   <div id="starBox">
   </div>
-    <div id="docsatFeedback" style="display:${rating && !submitted ? 'block' : 'none'};position:absolute;right:0;background-color:white;border:1px solid #CCC;padding:8px;">
+    <div id="docsatFeedback" style="display:${
+      rating && !submitted ? 'block' : 'none'
+    };position:absolute;right:0;background-color:white;border:1px solid #CCC;padding:8px;">
         Tell us more about your experience.
         <form id="docsatForm">
             <textarea name="feedback" style="width:100%;"></textarea><br/>
             <button type="submit">Submit</button>
         </form>
     </div>`;
-  let stars = ''
-  for (let i = 0; i < 5; i++) {
-    let child = document.createElement('span')
-    if (rating > i) {
-      child.innerHTML = star;
-    } else {
-      child.innerHTML = starOutline;
+    let stars = '';
+    for (let i = 0; i < 5; i++) {
+      let child = document.createElement('span');
+      if (rating > i) {
+        child.innerHTML = star;
+      } else {
+        child.innerHTML = starOutline;
+      }
+      child.addEventListener('click', select(i));
+      document.getElementById('starBox').appendChild(child);
     }
-    child.addEventListener('click', select(i))
-    document.getElementById('starBox').appendChild(child);
-  }
 
-  document.getElementById('docsatForm').addEventListener('submit',(event) => {
-    event.preventDefault();
-    
-    submitted = true;
-    const path = 'https://docs2-cl-default-rtdb.firebaseio.com/feedback.json';
-    const data = {rating,time:Date.now(),msg:event.target[0].value,url:window.location.href};
-    SULX.post(path, JSON.stringify(data));
-    render();
-  });
-}
-render()
+    document
+      .getElementById('docsatForm')
+      .addEventListener('submit', (event) => {
+        event.preventDefault();
+
+        submitted = true;
+        const path =
+          'https://docs2-cl-default-rtdb.firebaseio.com/feedback.json';
+        const data = {
+          rating,
+          time: Date.now(),
+          msg: event.target[0].value,
+          url: window.location.href,
+        };
+        SULX.post(path, JSON.stringify(data));
+        render();
+      });
+  };
+  render();
+})();