diff --git a/docs/index.html b/docs/index.html
index 9710379..487450d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -100,7 +100,7 @@
         target="_blank"
       >
         <img
-          id="js-producthunt"
+          id="product-hunt"
           src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily"
           alt="Water.css - Make your tiny website just a little nicer | Product Hunt Embed"
           style="width: 250px; height: 54px;"
diff --git a/docs/script.js b/docs/script.js
index 063684d..f9f7dd1 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -11,6 +11,7 @@ const themeForm = document.getElementById('theme-form')
 const linkSnippet = document.getElementById('link-snippet')
 const stylesheet = document.getElementById('js-stylesheet')
 const startupStylesheet = document.getElementById('js-startup-stylesheet')
+const productHunt = document.getElementById('product-hunt')
 
 const table = {
   fileName: document.getElementById('table-file-name'),
@@ -19,6 +20,10 @@ const table = {
   browserSupport: document.getElementById('table-browser-support')
 }
 
+const updateProductHunt = (theme) => {
+  productHunt.src = `https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=${theme}&period=daily`
+}
+
 const updateTheme = () => {
   const theme = themeForm.theme.value
   const fileName = `${theme === 'auto' ? 'water' : theme}.min.css`
@@ -40,11 +45,19 @@ const updateTheme = () => {
   } else {
     table.theme.innerText = `Theme is forced to ${theme}`
     table.browserSupport.innerText = 'All browsers (including Internet Explorer)'
+    updateProductHunt(theme)
   }
 }
 
 themeForm.addEventListener('input', updateTheme)
 
+const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
+updateProductHunt(prefersColorScheme.matches ? 'light' : 'dark')
+prefersColorScheme.addEventListener('change', () => {
+  if (themeForm.theme.value !== 'auto') return
+  updateProductHunt(prefersColorScheme.matches ? 'light' : 'dark')
+})
+
 updateTheme()
 startupStylesheet.remove()
 
@@ -129,7 +142,7 @@ startupStylesheet.remove()
 // /** Handles elements external to the version picker that still need to be kept
 //  *  up to date with the current version, e.g. switching images from dark to light. */
 // const externalElements = {
-//   _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#js-producthunt')),
+//   _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#product-hunt')),
 //   _stylesheet: /** @type {HTMLLinkElement} */ (document.querySelector('#js-stylesheet')),
 //   _removeStartupStylesheet: () => {
 //     const startupStylesheet = document.head.querySelector('#js-startup-stylesheet')
diff --git a/docs/style.css b/docs/style.css
index 0e652bc..34b20f8 100755
--- a/docs/style.css
+++ b/docs/style.css
@@ -2,7 +2,7 @@ html {
   scroll-behavior: smooth;
 }
 
-#js-producthunt {
+#product-hunt {
   margin-top: 1rem;
 }