views/index: respond to system colour scheme

Homebrew · Sep 18, 2023 · cc44202 · cc44202
1 parent 7d2ab61
commit cc44202
Showing 1 changed file with 9 additions and 1 deletion.
diff --git 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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">