diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 389a012..516c47f 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,4 +1,5 @@
 <head>
+    <script>document.documentElement.setAttribute('data-bs-theme',window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light')</script>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 29c0da1..e1e935f 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,6 +1,9 @@
 <script src="/js/bootstrap.bundle.min.js"></script>
 <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
 <script>
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+        document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light');
+    });
     window.addEventListener("scroll", function () {
         if (window.scrollY > 100) {
             document.getElementById("mainnav").classList.add("scrolled");
