diff --git a/layouts/partials/footer_custom.html b/layouts/partials/footer_custom.html
index 78a9225..c3ef23b 100644
--- a/layouts/partials/footer_custom.html
+++ b/layouts/partials/footer_custom.html
@@ -10,6 +10,10 @@
     theme: 'light'
   };
 
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      remark_config.theme = "dark";
+  }
+
   (function(c) {
     for(var i = 0; i < c.length; i++){
       var d = document, s = d.createElement('script');
@@ -18,6 +22,11 @@
       (d.head || d.body).appendChild(s);
     }
   })(remark_config.components || ['embed']);
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+    const newColorScheme = event.matches ? "dark" : "light";
+    window.REMARK42.changeTheme(newColorScheme);
+  });
 </script>
 {{ end }}
 {{ end }}