diff --git a/src/views/index.erb b/src/views/index.erb
index 29fdc41..0b4814a 100644
--- a/src/views/index.erb
+++ b/src/views/index.erb
@@ -9,9 +9,17 @@
     <link rel="icon" type="image/x-icon" href="https://brew.sh/assets/img/favicon.ico" sizes="16x16">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
+    <script>
+      const darkSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
+      function updateTheme(mediaQuery) {
+        document.documentElement.dataset.bsTheme = mediaQuery.matches ? "dark" : "light";
+      }
+      updateTheme(darkSchemeMedia);
+      darkSchemeMedia.addEventListener("change", updateTheme);
+    </script>
   </head>
   <body>
-    <nav class="navbar navbar-expand navbar-light bg-light">
+    <nav class="navbar navbar-expand bg-body-tertiary">
       <div class="container-xxl flex-wrap">
         <div class="navbar-brand">
           <img src="https://brew.sh/assets/img/brewtestbot.svg" alt="" width="48" height="48" class="d-inline-block me-1">
