From 78e6ada77749d19cfeb40182f99686896136a910 Mon Sep 17 00:00:00 2001
From: Geoffrey Wu <geoffreywu1000@gmail.com>
Date: Wed, 26 Nov 2025 13:21:58 -0600
Subject: [PATCH 1/2] fix #383: merge `light.css` and `dark.css` into one file

---
 client/404.html                               |   7 +-
 client/about/index.html                       |   7 +-
 client/about/privacy-policy.html              |   7 +-
 client/about/terms-of-service.html            |   7 +-
 client/admin/category-reports/index.html      |   7 +-
 client/admin/geoword/category-stats.html      |   7 +-
 client/admin/geoword/compare.html             |   7 +-
 client/admin/geoword/index.html               |   7 +-
 client/admin/geoword/leaderboard.html         |   7 +-
 client/admin/geoword/manage-payments.html     |   7 +-
 client/admin/geoword/protests.html            |   7 +-
 client/admin/geoword/stats.html               |   7 +-
 client/admin/index.html                       |   7 +-
 client/admin/leaderboard/index.html           |   7 +-
 client/admin/question-management/packet.html  |   7 +-
 client/admin/question-management/set.html     |   7 +-
 client/db/backups.html                        |   7 +-
 client/db/explorer/bonus.html                 |   7 +-
 client/db/explorer/index.html                 |   9 +-
 client/db/explorer/packet.html                |   7 +-
 client/db/explorer/set.html                   |   9 +-
 client/db/explorer/tossup.html                |   7 +-
 client/db/frequency-list/index.html           |   7 +-
 client/db/frequency-list/subcategory.html     |   7 +-
 client/db/index.html                          |   7 +-
 client/geoword/confirmation.html              |   7 +-
 client/geoword/index.html                     |   7 +-
 client/geoword/login.html                     |   7 +-
 client/geoword/paid/play/division.html        |   7 +-
 client/geoword/paid/play/game.html            |   7 +-
 .../geoword/paid/results/category-stats.html  |   7 +-
 client/geoword/paid/results/compare.html      |   7 +-
 client/geoword/paid/results/leaderboard.html  |   7 +-
 client/geoword/paid/results/packet.html       |   7 +-
 client/geoword/paid/results/stats.html        |   7 +-
 client/geoword/payment.html                   |   7 +-
 client/index.html                             |   7 +-
 client/play/bonuses/solo/index.html           |   7 +-
 client/play/index.html                        |   7 +-
 .../tossups/mp/MultiplayerTossupClient.js     |   8 +-
 client/play/tossups/mp/index.html             |   7 +-
 client/play/tossups/mp/room.html              |   7 +-
 client/play/tossups/solo/index.html           |   7 +-
 client/scripts/apply-theme.js                 |  13 +-
 client/settings/index.html                    |   7 +-
 client/settings/index.js                      |   8 +-
 client/tools/api-docs/bonus.html              |   7 +-
 client/tools/api-docs/check-answer.html       |   7 +-
 client/tools/api-docs/frequency-list.html     |   7 +-
 client/tools/api-docs/index.html              |   7 +-
 .../tools/api-docs/multiplayer/room-list.html |   7 +-
 client/tools/api-docs/num-packets.html        |   7 +-
 client/tools/api-docs/packet.html             |   7 +-
 client/tools/api-docs/query.html              |   7 +-
 .../tools/api-docs/question-stats/bonus.html  |   7 +-
 .../tools/api-docs/question-stats/tossup.html |   7 +-
 client/tools/api-docs/random-bonus.html       |   7 +-
 client/tools/api-docs/random-name.html        |   7 +-
 client/tools/api-docs/random-tossup.html      |   7 +-
 client/tools/api-docs/report-question.html    |   7 +-
 client/tools/api-docs/schemas/index.html      |   7 +-
 client/tools/api-docs/set-list.html           |   7 +-
 client/tools/api-docs/tossup.html             |   7 +-
 client/tools/packet-parser/index.html         |   7 +-
 client/user/edit-password.html                |   7 +-
 client/user/edit-profile.html                 |   7 +-
 client/user/forgot-password.html              |   7 +-
 client/user/login.html                        |   7 +-
 client/user/my-profile.html                   |   7 +-
 client/user/reset-password.html               |   7 +-
 client/user/signup.html                       |   7 +-
 client/user/stars/bonuses.html                |   7 +-
 client/user/stars/tossups.html                |   7 +-
 client/user/stats/bonus-graph.html            |   7 +-
 client/user/stats/bonuses.html                |   7 +-
 client/user/stats/tossup-graph.html           |   7 +-
 client/user/stats/tossups.html                |   7 +-
 client/user/verify-failed.html                |   7 +-
 package-lock.json                             |  30 +--
 package.json                                  |   2 +-
 scss/custom.scss                              |  50 ++--
 scss/dark-variables.scss                      | 148 ------------
 scss/dark.scss                                |  31 ---
 scss/dropdown-checklist.scss                  |   6 +-
 scss/dual-slider.scss                         |   4 +-
 scss/light-variables.scss                     |  12 -
 scss/light.scss                               |  23 --
 scss/logo.scss                                |  13 ++
 scss/themes/light.scss                        |  20 ++
 scss/themes/night.scss                        | 217 ++++++++++++++++++
 90 files changed, 546 insertions(+), 568 deletions(-)
 delete mode 100644 scss/dark-variables.scss
 delete mode 100644 scss/dark.scss
 delete mode 100644 scss/light-variables.scss
 delete mode 100644 scss/light.scss
 create mode 100644 scss/logo.scss
 create mode 100644 scss/themes/light.scss
 create mode 100644 scss/themes/night.scss

diff --git a/client/404.html b/client/404.html
index a91a8634c..86a93f89a 100644
--- a/client/404.html
+++ b/client/404.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/about/index.html b/client/about/index.html
index 7beb34209..b6c330056 100644
--- a/client/about/index.html
+++ b/client/about/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/about/privacy-policy.html b/client/about/privacy-policy.html
index ac89e7845..b26d94764 100644
--- a/client/about/privacy-policy.html
+++ b/client/about/privacy-policy.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/about/terms-of-service.html b/client/about/terms-of-service.html
index 92c261722..7e4127103 100644
--- a/client/about/terms-of-service.html
+++ b/client/about/terms-of-service.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/category-reports/index.html b/client/admin/category-reports/index.html
index 7c28b9218..791f9472f 100644
--- a/client/admin/category-reports/index.html
+++ b/client/admin/category-reports/index.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/geoword/category-stats.html b/client/admin/geoword/category-stats.html
index b013fed2f..c152f31ce 100644
--- a/client/admin/geoword/category-stats.html
+++ b/client/admin/geoword/category-stats.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/geoword/compare.html b/client/admin/geoword/compare.html
index ebf96da16..1f8ea0937 100644
--- a/client/admin/geoword/compare.html
+++ b/client/admin/geoword/compare.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link id="custom-css" href="/bootstrap/dark.css" rel="stylesheet">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/geoword/index.html b/client/admin/geoword/index.html
index 0356bae02..a72dd9dc4 100644
--- a/client/admin/geoword/index.html
+++ b/client/admin/geoword/index.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/geoword/leaderboard.html b/client/admin/geoword/leaderboard.html
index a529ba741..812d39975 100644
--- a/client/admin/geoword/leaderboard.html
+++ b/client/admin/geoword/leaderboard.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/geoword/manage-payments.html b/client/admin/geoword/manage-payments.html
index fb506e499..526cf5ad5 100644
--- a/client/admin/geoword/manage-payments.html
+++ b/client/admin/geoword/manage-payments.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/geoword/protests.html b/client/admin/geoword/protests.html
index a60a11734..5d48e5e16 100644
--- a/client/admin/geoword/protests.html
+++ b/client/admin/geoword/protests.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/geoword/stats.html b/client/admin/geoword/stats.html
index a42ed1e45..d1e7efbd3 100644
--- a/client/admin/geoword/stats.html
+++ b/client/admin/geoword/stats.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/index.html b/client/admin/index.html
index 54e5a7b5a..fcf537e8a 100644
--- a/client/admin/index.html
+++ b/client/admin/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/leaderboard/index.html b/client/admin/leaderboard/index.html
index 9f3fac9bb..c2fe87c79 100644
--- a/client/admin/leaderboard/index.html
+++ b/client/admin/leaderboard/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/question-management/packet.html b/client/admin/question-management/packet.html
index 36208dd3e..694be7d0f 100644
--- a/client/admin/question-management/packet.html
+++ b/client/admin/question-management/packet.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/admin/question-management/set.html b/client/admin/question-management/set.html
index 1d97c1b9a..e4834cb2c 100644
--- a/client/admin/question-management/set.html
+++ b/client/admin/question-management/set.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/db/backups.html b/client/db/backups.html
index 6f22e85ad..507833291 100644
--- a/client/db/backups.html
+++ b/client/db/backups.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/db/explorer/bonus.html b/client/db/explorer/bonus.html
index 7a5294250..a213c17f2 100644
--- a/client/db/explorer/bonus.html
+++ b/client/db/explorer/bonus.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/db/explorer/index.html b/client/db/explorer/index.html
index 6b37f97fc..0eafe8a14 100644
--- a/client/db/explorer/index.html
+++ b/client/db/explorer/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
@@ -83,7 +82,7 @@
                     <th scope="col"># of Bonuses</th>
                 </tr>
             </thead>
-            <tbody id="set-metadata-list"></tbody>
+            <tbody class="table-group-divider" id="set-metadata-list"></tbody>
         </table>
         <div class="d-block mx-auto mt-3 spinner-border" id="spinner" role="status"><span class='d-none'>Loading...</span></div>
     </div>
diff --git a/client/db/explorer/packet.html b/client/db/explorer/packet.html
index 7c4091d22..0049145f4 100644
--- a/client/db/explorer/packet.html
+++ b/client/db/explorer/packet.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/db/explorer/set.html b/client/db/explorer/set.html
index 49279511d..78b840172 100644
--- a/client/db/explorer/set.html
+++ b/client/db/explorer/set.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
@@ -81,7 +80,7 @@
                     <th scope="col"># of Bonuses</th>
                 </tr>
             </thead>
-            <tbody id="set-metadata-list"></tbody>
+            <tbody class="table-group-divider" id="set-metadata-list"></tbody>
         </table>
         <div class="d-block mx-auto mt-3 spinner-border" id="spinner" role="status"><span class='d-none'>Loading...</span></div>
     </div>
diff --git a/client/db/explorer/tossup.html b/client/db/explorer/tossup.html
index e0d32ee8c..2cb7f8ea6 100644
--- a/client/db/explorer/tossup.html
+++ b/client/db/explorer/tossup.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/db/frequency-list/index.html b/client/db/frequency-list/index.html
index 41a7501be..5da0406d0 100644
--- a/client/db/frequency-list/index.html
+++ b/client/db/frequency-list/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/db/frequency-list/subcategory.html b/client/db/frequency-list/subcategory.html
index 4e28191ec..f0c5deb8d 100644
--- a/client/db/frequency-list/subcategory.html
+++ b/client/db/frequency-list/subcategory.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/db/index.html b/client/db/index.html
index c57352c38..8c679849b 100644
--- a/client/db/index.html
+++ b/client/db/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/confirmation.html b/client/geoword/confirmation.html
index 363fae12c..c4ad49b34 100644
--- a/client/geoword/confirmation.html
+++ b/client/geoword/confirmation.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/index.html b/client/geoword/index.html
index 8a257f43f..be276ad6d 100644
--- a/client/geoword/index.html
+++ b/client/geoword/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/login.html b/client/geoword/login.html
index a6fa58701..6adda44d8 100644
--- a/client/geoword/login.html
+++ b/client/geoword/login.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/paid/play/division.html b/client/geoword/paid/play/division.html
index c51fbed6f..ee4e961e0 100644
--- a/client/geoword/paid/play/division.html
+++ b/client/geoword/paid/play/division.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/paid/play/game.html b/client/geoword/paid/play/game.html
index 4f45f1d76..8c66bdf28 100644
--- a/client/geoword/paid/play/game.html
+++ b/client/geoword/paid/play/game.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/paid/results/category-stats.html b/client/geoword/paid/results/category-stats.html
index dbd8f30a1..4382bfc40 100644
--- a/client/geoword/paid/results/category-stats.html
+++ b/client/geoword/paid/results/category-stats.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/paid/results/compare.html b/client/geoword/paid/results/compare.html
index c46d450d3..124118d2f 100644
--- a/client/geoword/paid/results/compare.html
+++ b/client/geoword/paid/results/compare.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/paid/results/leaderboard.html b/client/geoword/paid/results/leaderboard.html
index 372a9a1e8..b452dbdac 100644
--- a/client/geoword/paid/results/leaderboard.html
+++ b/client/geoword/paid/results/leaderboard.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/paid/results/packet.html b/client/geoword/paid/results/packet.html
index 8833bf409..49933d65c 100644
--- a/client/geoword/paid/results/packet.html
+++ b/client/geoword/paid/results/packet.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/paid/results/stats.html b/client/geoword/paid/results/stats.html
index 69b715431..778981495 100644
--- a/client/geoword/paid/results/stats.html
+++ b/client/geoword/paid/results/stats.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/geoword/payment.html b/client/geoword/payment.html
index 0a7ae0f07..c675b64ea 100644
--- a/client/geoword/payment.html
+++ b/client/geoword/payment.html
@@ -11,16 +11,15 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 
     <script type="module" src="https://js.stripe.com/v3/"></script>
     <script type="module" src="/geoword/payment.js" defer></script>
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/index.html b/client/index.html
index c0853901d..50d78ac1d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/play/bonuses/solo/index.html b/client/play/bonuses/solo/index.html
index affbbcc2c..c79f47c43 100644
--- a/client/play/bonuses/solo/index.html
+++ b/client/play/bonuses/solo/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/play/index.html b/client/play/index.html
index 75ba21381..35325f5e7 100644
--- a/client/play/index.html
+++ b/client/play/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/play/tossups/mp/MultiplayerTossupClient.js b/client/play/tossups/mp/MultiplayerTossupClient.js
index da1fe0703..ffd1d535a 100644
--- a/client/play/tossups/mp/MultiplayerTossupClient.js
+++ b/client/play/tossups/mp/MultiplayerTossupClient.js
@@ -233,10 +233,10 @@ export default class MultiplayerTossupClient extends TossupClient {
 
     this.setCategories({ categories, subcategories, alternateSubcategories, percentView, categoryPercents });
 
-    $(document).ready(function () {
-      $('#slider').slider('values', 0, minYear);
-      $('#slider').slider('values', 1, maxYear);
-    });
+    // $(document).ready(function () {
+    //   $('#slider').slider('values', 0, minYear);
+    //   $('#slider').slider('values', 1, maxYear);
+    // });
   }
 
   connectionAcknowledgedTossup ({ tossup: currentTossup }) {
diff --git a/client/play/tossups/mp/index.html b/client/play/tossups/mp/index.html
index efc660df6..12ba9561e 100644
--- a/client/play/tossups/mp/index.html
+++ b/client/play/tossups/mp/index.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/play/tossups/mp/room.html b/client/play/tossups/mp/room.html
index e4b10917a..cedf35e31 100644
--- a/client/play/tossups/mp/room.html
+++ b/client/play/tossups/mp/room.html
@@ -10,13 +10,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/play/tossups/solo/index.html b/client/play/tossups/solo/index.html
index 94b2c8a8b..8c98a19ed 100644
--- a/client/play/tossups/solo/index.html
+++ b/client/play/tossups/solo/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link id="custom-css" href="/bootstrap/dark.css" rel="stylesheet">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/scripts/apply-theme.js b/client/scripts/apply-theme.js
index 5e214f465..f50af1012 100644
--- a/client/scripts/apply-theme.js
+++ b/client/scripts/apply-theme.js
@@ -1,10 +1,15 @@
+const htmlTag = document.getElementsByTagName('html')[0];
+
+let colorTheme = 'light';
 if (window.localStorage.getItem('color-theme') === 'dark') {
-  document.querySelector('#custom-css').setAttribute('href', '/bootstrap/dark.css');
+  colorTheme = 'night';
 } else if (window.localStorage.getItem('color-theme') === 'light') {
-  document.querySelector('#custom-css').setAttribute('href', '/bootstrap/light.css');
+  colorTheme = 'light';
 } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
   // Get OS preferred color scheme
-  document.querySelector('#custom-css').setAttribute('href', '/bootstrap/dark.css');
+  colorTheme = 'night';
 } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
-  document.querySelector('#custom-css').setAttribute('href', '/bootstrap/light.css');
+  colorTheme = 'light';
 }
+
+htmlTag.setAttribute('data-bs-theme', colorTheme);
diff --git a/client/settings/index.html b/client/settings/index.html
index 9015c4934..90c441e2e 100644
--- a/client/settings/index.html
+++ b/client/settings/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/settings/index.js b/client/settings/index.js
index 271b4bd3d..eb2f3bafb 100644
--- a/client/settings/index.js
+++ b/client/settings/index.js
@@ -15,13 +15,13 @@ if (window.localStorage.getItem('sound-effects') === 'true') {
   document.getElementById('toggle-sound-effects').checked = true;
 }
 
-const stylesheet = document.querySelector('#custom-css');
+const htmlTag = document.getElementsByTagName('html')[0];
 document.getElementById('toggle-color-theme').addEventListener('click', function () {
-  if (stylesheet.getAttribute('href') === '/bootstrap/light.css') {
-    stylesheet.setAttribute('href', '/bootstrap/dark.css');
+  if (htmlTag.getAttribute('data-bs-theme') === 'light') {
+    htmlTag.setAttribute('data-bs-theme', 'night');
     window.localStorage.setItem('color-theme', 'dark');
   } else {
-    stylesheet.setAttribute('href', '/bootstrap/light.css');
+    htmlTag.setAttribute('data-bs-theme', 'light');
     window.localStorage.setItem('color-theme', 'light');
   }
 });
diff --git a/client/tools/api-docs/bonus.html b/client/tools/api-docs/bonus.html
index 658f07665..134597227 100644
--- a/client/tools/api-docs/bonus.html
+++ b/client/tools/api-docs/bonus.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/check-answer.html b/client/tools/api-docs/check-answer.html
index e3f1c3a32..f1a4d1fb6 100644
--- a/client/tools/api-docs/check-answer.html
+++ b/client/tools/api-docs/check-answer.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/frequency-list.html b/client/tools/api-docs/frequency-list.html
index 1872b0e81..b56888bff 100644
--- a/client/tools/api-docs/frequency-list.html
+++ b/client/tools/api-docs/frequency-list.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/index.html b/client/tools/api-docs/index.html
index ed1ced540..b9042445a 100644
--- a/client/tools/api-docs/index.html
+++ b/client/tools/api-docs/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/multiplayer/room-list.html b/client/tools/api-docs/multiplayer/room-list.html
index e6c2a60bb..c051253e6 100644
--- a/client/tools/api-docs/multiplayer/room-list.html
+++ b/client/tools/api-docs/multiplayer/room-list.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/num-packets.html b/client/tools/api-docs/num-packets.html
index e6c24da55..4eca5efce 100644
--- a/client/tools/api-docs/num-packets.html
+++ b/client/tools/api-docs/num-packets.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/packet.html b/client/tools/api-docs/packet.html
index 542168fb5..25e55402e 100644
--- a/client/tools/api-docs/packet.html
+++ b/client/tools/api-docs/packet.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/query.html b/client/tools/api-docs/query.html
index 6a59cbabc..e7f5ddbae 100644
--- a/client/tools/api-docs/query.html
+++ b/client/tools/api-docs/query.html
@@ -10,12 +10,13 @@
     <link href="/apple-touch-icon.png" rel="apple-touch-icon">
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
-    <link href="/bootstrap/dark.css" rel="stylesheet">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/question-stats/bonus.html b/client/tools/api-docs/question-stats/bonus.html
index 8ca57ef60..10d07d48b 100644
--- a/client/tools/api-docs/question-stats/bonus.html
+++ b/client/tools/api-docs/question-stats/bonus.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/question-stats/tossup.html b/client/tools/api-docs/question-stats/tossup.html
index c23b663a1..e108d68b3 100644
--- a/client/tools/api-docs/question-stats/tossup.html
+++ b/client/tools/api-docs/question-stats/tossup.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/random-bonus.html b/client/tools/api-docs/random-bonus.html
index fd5fd62d2..fc7f5dced 100644
--- a/client/tools/api-docs/random-bonus.html
+++ b/client/tools/api-docs/random-bonus.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/random-name.html b/client/tools/api-docs/random-name.html
index 767f1b678..8f80c6e0e 100644
--- a/client/tools/api-docs/random-name.html
+++ b/client/tools/api-docs/random-name.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/random-tossup.html b/client/tools/api-docs/random-tossup.html
index 380cee12d..7041d0ff4 100644
--- a/client/tools/api-docs/random-tossup.html
+++ b/client/tools/api-docs/random-tossup.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/report-question.html b/client/tools/api-docs/report-question.html
index 04b2a10a7..27fee4b0b 100644
--- a/client/tools/api-docs/report-question.html
+++ b/client/tools/api-docs/report-question.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/schemas/index.html b/client/tools/api-docs/schemas/index.html
index 9de5ade4b..b60c60cc1 100644
--- a/client/tools/api-docs/schemas/index.html
+++ b/client/tools/api-docs/schemas/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/set-list.html b/client/tools/api-docs/set-list.html
index e3f60e3b4..e844973be 100644
--- a/client/tools/api-docs/set-list.html
+++ b/client/tools/api-docs/set-list.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/api-docs/tossup.html b/client/tools/api-docs/tossup.html
index 1f8a1fb84..219935de8 100644
--- a/client/tools/api-docs/tossup.html
+++ b/client/tools/api-docs/tossup.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/tools/packet-parser/index.html b/client/tools/packet-parser/index.html
index 188539a60..79f6b7183 100644
--- a/client/tools/packet-parser/index.html
+++ b/client/tools/packet-parser/index.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/edit-password.html b/client/user/edit-password.html
index aa085d811..5afe3ab61 100644
--- a/client/user/edit-password.html
+++ b/client/user/edit-password.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/edit-profile.html b/client/user/edit-profile.html
index 0112c2ecb..acf9063fc 100644
--- a/client/user/edit-profile.html
+++ b/client/user/edit-profile.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/forgot-password.html b/client/user/forgot-password.html
index 38fafe760..752e55373 100644
--- a/client/user/forgot-password.html
+++ b/client/user/forgot-password.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/login.html b/client/user/login.html
index a9078a91c..59dc41059 100644
--- a/client/user/login.html
+++ b/client/user/login.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/my-profile.html b/client/user/my-profile.html
index 1225f3ae4..45215e93a 100644
--- a/client/user/my-profile.html
+++ b/client/user/my-profile.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link id="custom-css" href="/bootstrap/dark.css" rel="stylesheet">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/reset-password.html b/client/user/reset-password.html
index b7ff617ef..5bb639183 100644
--- a/client/user/reset-password.html
+++ b/client/user/reset-password.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/signup.html b/client/user/signup.html
index 1b807028d..980901341 100644
--- a/client/user/signup.html
+++ b/client/user/signup.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/stars/bonuses.html b/client/user/stars/bonuses.html
index f9ccecb14..762e18be8 100644
--- a/client/user/stars/bonuses.html
+++ b/client/user/stars/bonuses.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/stars/tossups.html b/client/user/stars/tossups.html
index aec2e0f83..9f6a8e9e4 100644
--- a/client/user/stars/tossups.html
+++ b/client/user/stars/tossups.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/stats/bonus-graph.html b/client/user/stats/bonus-graph.html
index e2c77194d..f8c4476d7 100644
--- a/client/user/stats/bonus-graph.html
+++ b/client/user/stats/bonus-graph.html
@@ -11,9 +11,8 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link id="custom-css" href="/bootstrap/dark.css" rel="stylesheet">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 
     <script type="module" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script type="module"
@@ -21,7 +20,7 @@
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/stats/bonuses.html b/client/user/stats/bonuses.html
index b0c926acf..9c6af1d3b 100644
--- a/client/user/stats/bonuses.html
+++ b/client/user/stats/bonuses.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link id="custom-css" href="/bootstrap/dark.css" rel="stylesheet">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/stats/tossup-graph.html b/client/user/stats/tossup-graph.html
index caa5913ed..ffa5c3d9a 100644
--- a/client/user/stats/tossup-graph.html
+++ b/client/user/stats/tossup-graph.html
@@ -11,9 +11,8 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link id="custom-css" href="/bootstrap/dark.css" rel="stylesheet">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 
     <script type="module" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script type="module"
@@ -21,7 +20,7 @@
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/stats/tossups.html b/client/user/stats/tossups.html
index e1f153caf..a9fc56f1b 100644
--- a/client/user/stats/tossups.html
+++ b/client/user/stats/tossups.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link id="custom-css" href="/bootstrap/dark.css" rel="stylesheet">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/client/user/verify-failed.html b/client/user/verify-failed.html
index 9c8ff3872..1b48e5332 100644
--- a/client/user/verify-failed.html
+++ b/client/user/verify-failed.html
@@ -11,13 +11,12 @@
     <link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
     <link type="image/x-icon" href="/favicon.ico" rel="icon">
 
-    <link href="/bootstrap/light.css" rel="stylesheet">
-    <link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
-    <script type="module" src="/scripts/apply-theme.js"></script>
+    <script src="/scripts/apply-theme.js"></script>
+    <link href="/style.css" rel="stylesheet">
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-lg bg-custom" id="navbar" style="z-index: 10">
+    <nav class="navbar navbar-expand-lg" id="navbar" style="z-index: 10">
         <div class="container-fluid">
             <a class="navbar-brand ms-1 py-0" id="logo" href="/">
                 <span class="logo-prefix">QB</span><span class="logo-suffix">Reader</span>
diff --git a/package-lock.json b/package-lock.json
index ca8661fb9..16272c0f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
             "name": "qbreader",
             "version": "7.6.5",
             "dependencies": {
-                "bootstrap": "5.2.3",
+                "bootstrap": "^5.3.8",
                 "bootstrap-icons": "^1.13.1",
                 "cookie-session": "^2.0.0",
                 "cors": "^2.8.5",
@@ -897,9 +897,10 @@
             }
         },
         "node_modules/@popperjs/core": {
-            "version": "2.11.6",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-            "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "license": "MIT",
             "peer": true,
             "funding": {
                 "type": "opencollective",
@@ -1657,9 +1658,9 @@
             }
         },
         "node_modules/bootstrap": {
-            "version": "5.2.3",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-            "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+            "version": "5.3.8",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+            "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
             "funding": [
                 {
                     "type": "github",
@@ -1670,8 +1671,9 @@
                     "url": "https://opencollective.com/bootstrap"
                 }
             ],
+            "license": "MIT",
             "peerDependencies": {
-                "@popperjs/core": "^2.11.6"
+                "@popperjs/core": "^2.11.8"
             }
         },
         "node_modules/bootstrap-icons": {
@@ -8126,9 +8128,9 @@
             "optional": true
         },
         "@popperjs/core": {
-            "version": "2.11.6",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-            "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
             "peer": true
         },
         "@tootallnate/once": {
@@ -8708,9 +8710,9 @@
             }
         },
         "bootstrap": {
-            "version": "5.2.3",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-            "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+            "version": "5.3.8",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+            "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
             "requires": {}
         },
         "bootstrap-icons": {
diff --git a/package.json b/package.json
index 79876d89c..ac689fbfc 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
         "webpack-watch": "webpack --config webpack.config.js --watch"
     },
     "dependencies": {
-        "bootstrap": "5.2.3",
+        "bootstrap": "^5.3.8",
         "bootstrap-icons": "^1.13.1",
         "cookie-session": "^2.0.0",
         "cors": "^2.8.5",
diff --git a/scss/custom.scss b/scss/custom.scss
index c184a17b8..7c683340d 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -1,15 +1,29 @@
 // Custom.scss
 // Option B: Include parts of Bootstrap
 
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "../node_modules/bootstrap/scss/functions";
+
 // 2. Include any default variable overrides here
 
-$font-family-sans-serif: Helvetica, sans-serif;
+// $font-family-sans-serif: Helvetica, sans-serif;
 $link-decoration: none;
 
 $popover-body-padding-y: 0;
 $popover-body-padding-x: 0;
 $popover-max-width: 100%;
 
+// 3. Include remainder of required Bootstrap stylesheets
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
+
+// 4. Include any default map overrides here
+
+// 5. Include remainder of required parts
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/root";
+
 // 6. Optionally include any other parts as needed
 @import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css); // Fira Code font
 
@@ -49,6 +63,13 @@ $bootstrap-icons-font-dir: "/bootstrap-icons/font/fonts";
 
 // 8. Add additional custom code here
 
+@import "./themes/light.scss";
+@import "./themes/night.scss";
+
+@import "./dual-slider";
+@import "./dropdown-checklist";
+@import "./logo";
+
 code {
     font-family: 'Fira Code', monospace;
 }
@@ -59,10 +80,6 @@ code {
     }
 }
 
-.bg-custom {
-    background-color: $custom;
-}
-
 .buttons {
     background-color: $body-bg;
     border-bottom: .5px solid lightgray;
@@ -89,14 +106,6 @@ code {
     font-size: 20px;
 }
 
-.logo-prefix {
-    color: $logo-prefix-color;
-}
-
-.logo-suffix {
-    color: $logo-suffix-color;
-}
-
 .room-history {
     border-top: .5px solid lightgray;
 }
@@ -110,12 +119,16 @@ code {
     color: $dark;
 }
 
+.timer {
+    font-size: 250%;
+}
+
 .timer .fraction {
     font-size: 50%;
 }
 
 .user-score {
-    background-color: $user-score-background;
+    background-color: var(--user-score-background);
 }
 
 a.list-group-item:hover {
@@ -126,12 +139,6 @@ a.list-group-item:hover {
     min-height: 90px;
 }
 
-#logo {
-    font-family: Inter, 'Source Sans Pro', sans-serif;
-    font-size: 1.5rem;
-    font-weight: bold;
-}
-
 #multiplayer-name {
     margin-top: 3px
 }
@@ -139,6 +146,3 @@ a.list-group-item:hover {
 #set-settings {
     min-height: 90px;
 }
-
-@import "./dual-slider";
-@import "./dropdown-checklist";
diff --git a/scss/dark-variables.scss b/scss/dark-variables.scss
deleted file mode 100644
index c7529a1b3..000000000
--- a/scss/dark-variables.scss
+++ /dev/null
@@ -1,148 +0,0 @@
-// Variable values taken from https://vinorodrigues.github.io/bootstrap-dark-5/
-// And code structure taken from https://github.com/ForEvolve/bootstrap-dark/blob/master/scss/_dark-variables.scss
-
-// $body-bg:     #21262c;
-$body-bg:     #222222;
-$body-color:  #e0e0e0;
-
-$custom: #dfebfb;
-
-$link-color: #6699ff;
-$logo-prefix-color: #0080ff;
-$logo-suffix-color: #000000;
-
-/* ##### */
-
-$white:    #fff;
-$gray-100: #f8f9fa;
-$gray-200: #e9ecef;
-$gray-300: #dee2e6;
-$gray-400: #ced4da;
-$gray-500: #adb5bd;
-$gray-600: #6c757d;
-$gray-700: #495057;
-$gray-800: #343a40;
-$gray-900: #212529;
-$black:    #000;
-
-/* redefine theme colors for dark theme */
-$color-darker-percent-full: 20%;
-$color-darker-percent-half: calc($color-darker-percent-full / 2);
-$color-darker-percent-quarter: calc($color-darker-percent-half / 2);
-$color-darker-percent-none: 0;
-
-$blue:    #375a7f;
-$indigo:  #673ab7;
-$purple:  #654ea3;
-$pink:    #e83e8c;
-$red:     #e74c3c;
-$orange:  #fd7e14;
-$yellow:  #f39c12;
-$green:   #00bc8c;
-$teal:    #45b5aa;
-$cyan:    #17a2b8;
-
-$primary:       $blue;
-$secondary:     $gray-600;
-$success:       $green;
-$info:          $cyan;
-$warning:       $orange;
-$danger:        $red;
-$light:         $gray-300;
-$dark:          $gray-800;
-
-$theme-colors: (
-    "primary": $primary,
-    "secondary": $secondary,
-    "success": $success,
-    "info": $info,
-    "warning": $warning,
-    "danger": $danger,
-    "light": $light,
-    "dark": $dark,
-);
-
-$btn-close-color: $gray-300;
-
-// Cards:
-$card-border-color:         rgba($white, .125);
-$card-cap-bg:               rgba($white, .03);
-$card-bg:                   $body-bg;
-
-$nav-tabs-border-color:             rgba($white, .125);
-$nav-tabs-link-hover-border-color:  $gray-700 $gray-700 $nav-tabs-border-color;
-$nav-tabs-link-active-color:        $gray-100;
-$nav-tabs-link-active-bg:           $body-bg;
-$nav-tabs-link-active-border-color: $gray-700 $gray-700 $nav-tabs-link-active-bg;
-
-$component-active-color:      $black;
-$component-active-bg:         $primary;
-
-// Modals
-$modal-content-bg:              $body-bg;
-$modal-content-border-color:    rgba($white, .2);
-$modal-header-border-color:     $gray-800;
-$modal-footer-border-color:     $modal-header-border-color;
-
-$close-color:                   $white;
-$close-text-shadow:             0 1px 0 $black;
-
-// List Groups
-$list-group-bg:                     rgba($body-bg, .05);
-$list-group-border-color:           rgba($white, .125);
-$list-group-color:                  $body-color;
-
-$list-group-hover-bg:               $gray-900;
-$list-group-active-color:           $component-active-color;
-$list-group-active-bg:              $component-active-bg;
-$list-group-active-border-color:    $list-group-active-bg;
-
-$list-group-disabled-color:         $gray-400;
-$list-group-disabled-bg:            $list-group-bg;
-
-$list-group-action-color:           $gray-300;
-$list-group-action-hover-color:     $list-group-action-color;
-
-$list-group-action-active-color:    $body-color;
-$list-group-action-active-bg:       $gray-800;
-
-// Forms
-$input-bg:                              $body-bg;
-$input-disabled-bg:                     $gray-800;
-
-$input-color:                           $body-color;
-$input-border-color:                    $gray-600;
-$input-box-shadow:                      inset 0 1px 1px rgba($white, .075);
-
-$input-focus-bg:                        $body-bg;
-$input-focus-border-color:              lighten($component-active-bg, 25%);
-$input-focus-color:                     $input-color;
-
-$input-group-addon-color:               $input-color;
-$input-group-addon-bg:                  $gray-800;
-$input-group-addon-border-color:        $input-border-color;
-
-$form-select-color:               $input-color;
-$form-select-disabled-color:      $gray-400;
-$form-select-bg:                  $input-bg;
-$form-select-disabled-bg:         $gray-800;
-$form-select-indicator-color:     $gray-200;
-$form-select-box-shadow:          inset 0 1px 2px rgba($white, .075);
-$form-select-border-color:        $input-border-color;
-
-$form-range-track-bg:               $gray-600;
-$form-check-input-bg:               $input-bg;
-$form-check-input-border:           1px solid rgba($white, .25);
-
-// Popovers
-$popover-bg:                        $body-bg;
-$popover-header-bg:                 tint-color($popover-bg, 6%);
-
-// $component-active-color:            $primary;
-// $component-active-bg:               $primary;
-
-$slider-background: $gray-600;
-
-$dropdown-checklist-border-color: var(--bs-gray-600);
-
-$user-score-background: #4A90E2;
diff --git a/scss/dark.scss b/scss/dark.scss
deleted file mode 100644
index ea83089b0..000000000
--- a/scss/dark.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
-@import "../node_modules/bootstrap/scss/functions";
-
-// 2. Include any default variable overrides here
-@import "./dark-variables.scss";
-
-kbd {
-    background-color: $gray-600 !important;
-}
-
-.form-switch .form-check-input {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28108, 117, 125, 1%29'/%3e%3c/svg%3e") !important;
-}
-
-.timer {
-    background: linear-gradient(#444, #333);
-    font-size: 250%;
-}
-
-// 3. Include remainder of required Bootstrap stylesheets
-@import "../node_modules/bootstrap/scss/variables";
-
-// 4. Include any default map overrides here
-
-// 5. Include remainder of required parts
-@import "../node_modules/bootstrap/scss/maps";
-@import "../node_modules/bootstrap/scss/mixins";
-@import "../node_modules/bootstrap/scss/root";
-
-// 6. Optionally include any other parts as needed
-@import "./custom.scss";
diff --git a/scss/dropdown-checklist.scss b/scss/dropdown-checklist.scss
index 0fc4f19a4..a17f01eb4 100644
--- a/scss/dropdown-checklist.scss
+++ b/scss/dropdown-checklist.scss
@@ -1,8 +1,12 @@
 .dropdown-checklist button {
-    border-color: $dropdown-checklist-border-color;
+    border-color: var(--dropdown-checklist-border-color);
     --bs-btn-hover-border-color: $dropdown-checklist-border-color;
 }
 
+.checkbox-menu {
+    background-color: #fff !important;
+}
+
 .checkbox-menu li label {
     display: block;
     padding: 3px 10px;
diff --git a/scss/dual-slider.scss b/scss/dual-slider.scss
index 32e638bb7..70be57bcb 100644
--- a/scss/dual-slider.scss
+++ b/scss/dual-slider.scss
@@ -3,7 +3,7 @@
 .ui-slider {
     position: relative;
     text-align: left;
-    background-color: $slider-background;
+    background-color: $form-range-track-bg;
     height: 8px;
     border-radius: 8px;
     margin-top: 8px;
@@ -14,9 +14,9 @@
 .ui-slider-handle {
     border-radius: 100%;
     font-size: 13px;
-    background-color: $primary;
     border-color: $primary;
     outline-color: $primary;
+    @include gradient-bg(var(--form-range-thumb-bg));
 }
 
 .ui-slider .ui-slider-handle {
diff --git a/scss/light-variables.scss b/scss/light-variables.scss
deleted file mode 100644
index 1b456246a..000000000
--- a/scss/light-variables.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-$custom: #fbefdf;
-
-$dropdown-checklist-border-color: var(--bs-gray-400);
-
-$logo-prefix-color: #0080ff;
-$logo-suffix-color: #000000;
-
-$link-color: #003399;
-
-$slider-background: #dee2e6; // gray-300
-
-$user-score-background: #FFF9C4;
diff --git a/scss/light.scss b/scss/light.scss
deleted file mode 100644
index debe48ac6..000000000
--- a/scss/light.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
-@import "../node_modules/bootstrap/scss/functions";
-
-// 2. Include any default variable overrides here
-@import "./light-variables.scss";
-
-.timer {
-    background: linear-gradient(#ddd, #eee);
-    font-size: 250%;
-}
-
-// 3. Include remainder of required Bootstrap stylesheets
-@import "../node_modules/bootstrap/scss/variables";
-
-// 4. Include any default map overrides here
-
-// 5. Include remainder of required parts
-@import "../node_modules/bootstrap/scss/maps";
-@import "../node_modules/bootstrap/scss/mixins";
-@import "../node_modules/bootstrap/scss/root";
-
-// 6. Optionally include any other parts as needed
-@import "./custom.scss";
diff --git a/scss/logo.scss b/scss/logo.scss
new file mode 100644
index 000000000..74b9e7741
--- /dev/null
+++ b/scss/logo.scss
@@ -0,0 +1,13 @@
+.logo-prefix {
+    color: var(--logo-prefix-color);
+}
+
+.logo-suffix {
+    color: var(--logo-suffix-color);
+}
+
+#logo {
+    font-family: Inter, 'Source Sans Pro', sans-serif;
+    font-size: 1.5rem;
+    font-weight: bold;
+}
diff --git a/scss/themes/light.scss b/scss/themes/light.scss
new file mode 100644
index 000000000..be2f6ffcc
--- /dev/null
+++ b/scss/themes/light.scss
@@ -0,0 +1,20 @@
+$link-color: #003399;
+
+@include color-mode(light, true) {
+    --form-range-thumb-bg: #{$component-active-bg};
+    --logo-prefix-color: #0080ff;
+    --logo-suffix-color: #000000;
+    --user-score-background: #FFF9C4;
+
+    .dropdown-checklist button {
+        --dropdown-checklist-border-color: #{$gray-400};
+    }
+
+    .navbar {
+        background-color: #fbefdf;
+    }
+
+    .timer {
+        background: linear-gradient(#ddd, #eee);
+    }
+}
diff --git a/scss/themes/night.scss b/scss/themes/night.scss
new file mode 100644
index 000000000..81b829c7e
--- /dev/null
+++ b/scss/themes/night.scss
@@ -0,0 +1,217 @@
+// Variable values taken from https://vinorodrigues.github.io/bootstrap-dark-5/
+// And code structure taken from https://github.com/ForEvolve/bootstrap-dark/blob/master/scss/_dark-variables.scss
+
+// $body-bg-night:     #21262c;
+$body-bg-night: #222222;
+$body-color-night: #e0e0e0;
+$body-secondary-color-night: $gray-600;
+$body-secondary-bg-night: $gray-600;
+$body-tertiary-color-night: rgba($body-color-night, .5);
+$body-tertiary-bg-night: mix($gray-800, $gray-900, 50%);
+
+$link-color-night: #6699ff;
+$link-hover-color-night: shift-color($link-color-night, $link-shade-percentage);
+
+$border-color-night: $gray-600;
+
+/* redefine theme colors for dark theme */
+$blue-night: #375a7f;
+$green-night: #00bc8c;
+$cyan-night: #17a2b8;
+$orange-night: #fd7e14;
+$red-night: #e74c3c;
+
+$primary-night: $blue-night;
+
+$theme-colors-night: (
+    "primary": $blue-night,
+    "secondary": $gray-600,
+    "success": $green-night,
+    "info": $cyan-night,
+    "warning": $orange-night,
+    "danger": $red-night,
+    "light": $gray-300,
+    "dark": $gray-800,
+);
+
+$btn-close-color-night: $gray-300;
+$btn-close-bg-night: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color-night}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>");
+
+$component-active-color-night: $black;
+$component-active-bg-night: $primary-night;
+
+$form-select-indicator-color-night: $gray-200;
+$form-select-indicator-night: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-night}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
+
+$form-switch-color-night: $gray-600;
+$form-switch-bg-image-night: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-night}'/></svg>");
+$form-switch-checked-color-night: $gray-600;
+$form-switch-checked-bg-image-night: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color-night}'/></svg>");
+
+@include color-mode(night, true) {
+    color-scheme: night;
+
+    // custom classes
+
+    --form-range-thumb-bg: #{$component-active-bg-night};
+    --logo-prefix-color: #0080ff;
+    --logo-suffix-color: #000000;
+    --user-score-background: #4A90E2;
+
+    .dropdown-checklist button {
+        --dropdown-checklist-border-color: #{$border-color-night};
+    }
+
+    .navbar {
+        background-color: #dfebfb;
+    }
+
+    .timer {
+        background: linear-gradient(#444, #333);
+    }
+
+    // bootstrap
+
+    @each $color, $value in $theme-colors-night {
+        --#{$prefix}#{$color}: #{$value};
+
+        .btn-#{$color} {
+            @include button-variant($value, $value);
+        }
+
+        .btn-outline-#{$color} {
+            @include button-outline-variant($value);
+        }
+    }
+
+    // scss-docs-start root-night-mode-vars
+    --#{$prefix}body-color: #{$body-color-night};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-night)};
+    --#{$prefix}body-bg: #{$body-bg-night};
+    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-night)};
+
+    --#{$prefix}emphasis-color: #{$body-color-night};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-color-night)};
+
+    --#{$prefix}secondary-color: #{$body-secondary-color-night};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-night)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg-night};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-night)};
+
+    --#{$prefix}tertiary-color: #{$body-tertiary-color-night};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-night)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-night};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-night)};
+
+    --#{$prefix}link-color: #{$link-color-night};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-night)};
+    --#{$prefix}link-hover-color: #{$link-hover-color-night};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-night)};
+
+    --#{$prefix}border-color: #{$border-color-night};
+    --#{$prefix}border-color-rgb: #{to-rgb($border-color-night)};
+
+    .navbar {
+        --#{$prefix}navbar-color: #{rgba($black, .55)};
+        --#{$prefix}navbar-hover-color: #{rgba($black, .8)};
+        --#{$prefix}navbar-active-color: #{rgba($black, 1)};
+        --#{$prefix}navbar-disabled-color: #{rgba($black, .3)};
+    }
+
+    .btn-close {
+        --#{$prefix}btn-close-color: #{$btn-close-color-night};
+        --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg-night) };
+    }
+
+    .card {
+        --#{$prefix}card-border-color: #{rgba($white, .125)};
+        --#{$prefix}card-cap-bg: #{rgba($white, .03)};
+        --#{$prefix}card-bg: #{$body-bg-night};
+    }
+
+    // Nav tabs
+    .nav-tabs {
+        --#{$prefix}nav-tabs-border-color: #{rgba($white, .125)};
+        --#{$prefix}nav-tabs-link-hover-border-color: #{$gray-700} #{$gray-700} #{rgba($white, .125)};
+        --#{$prefix}nav-tabs-link-active-color: #{$gray-100};
+        --#{$prefix}nav-tabs-link-active-bg: #{$body-bg-night};
+        --#{$prefix}nav-tabs-link-active-border-color: #{$gray-700} #{$gray-700} #{$body-bg-night};
+    }
+
+    // Modals
+    .modal {
+        --#{$prefix}modal-bg: #{$body-bg-night};
+        --#{$prefix}modal-border-color: #{rgba($white, .2)};
+    }
+
+    .input-group-text {
+        background-color: #{$gray-800};
+    }
+
+    // List groups
+    .list-group {
+        --#{$prefix}list-group-bg: #{rgba($body-bg-night, .05)};
+        --#{$prefix}list-group-border-color: #{rgba($white, .125)};
+        --#{$prefix}list-group-color: #{$body-color-night};
+        --#{$prefix}list-group-hover-bg: #{$gray-900};
+        --#{$prefix}list-group-active-color: #{$black};
+        --#{$prefix}list-group-active-bg: #{$blue-night};
+        --#{$prefix}list-group-active-border-color: #{$blue-night};
+        --#{$prefix}list-group-disabled-color: #{$gray-400};
+        --#{$prefix}list-group-disabled-bg: #{rgba($body-bg-night, .05)};
+        --#{$prefix}list-group-action-color: #{$gray-300};
+        --#{$prefix}list-group-action-hover-color: #{$gray-300};
+        --#{$prefix}list-group-action-active-color: #{$body-color-night};
+        --#{$prefix}list-group-action-active-bg: #{$gray-800};
+    }
+
+    .form-control {
+        &:focus {
+            border-color: #{lighten($blue-night, 25%)};
+        }
+
+        &:disabled {
+            background-color: #{$gray-800};
+        }
+    }
+
+    .form-range {
+        &::-moz-range-thumb {
+            @include gradient-bg(var(--form-range-thumb-bg));
+        }
+
+        &::-webkit-slider-thumb {
+            @include gradient-bg(var(--form-range-thumb-bg));
+        }
+    }
+
+    .form-switch .form-check-input {
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-night)};
+
+        &:checked {
+            background-color: #{$component-active-bg-night};
+            border-color: #{$component-active-bg-night};
+
+            @if $enable-gradients {
+                --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image-night)},
+                var(--#{$prefix}gradient);
+            }
+
+            @else {
+                --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image-night)};
+            }
+        }
+    }
+
+    .pagination {
+        --#{$prefix}pagination-active-color: #{$component-active-color-night};
+        --#{$prefix}pagination-active-bg: #{$component-active-bg-night};
+        --#{$prefix}pagination-active-border-color: #{$component-active-color-night};
+    }
+
+    // Popovers
+    .popover {
+        --#{$prefix}popover-bg: #{$body-bg-night};
+        --#{$prefix}popover-header-bg: #{tint-color($body-bg-night, 6%)};
+    }
+}

From f1556f8af45de5f3db5c6b590ea603b27dd82478 Mon Sep 17 00:00:00 2001
From: Geoffrey Wu <geoffreywu1000@gmail.com>
Date: Wed, 26 Nov 2025 16:15:38 -0600
Subject: [PATCH 2/2] add theme toggle element

---
 client/404.html                               | 21 ++++++
 client/about/index.html                       | 21 ++++++
 client/about/privacy-policy.html              | 21 ++++++
 client/about/terms-of-service.html            | 21 ++++++
 client/admin/category-reports/index.html      | 21 ++++++
 client/admin/geoword/category-stats.html      | 21 ++++++
 client/admin/geoword/compare.html             | 23 ++++++-
 client/admin/geoword/index.html               | 21 ++++++
 client/admin/geoword/leaderboard.html         | 21 ++++++
 client/admin/geoword/manage-payments.html     | 21 ++++++
 client/admin/geoword/protests.html            | 21 ++++++
 client/admin/geoword/stats.html               | 21 ++++++
 client/admin/index.html                       | 21 ++++++
 client/admin/leaderboard/index.html           | 21 ++++++
 client/admin/question-management/packet.html  | 21 ++++++
 client/admin/question-management/set.html     | 21 ++++++
 client/db/backups.html                        | 21 ++++++
 client/db/explorer/bonus.html                 | 21 ++++++
 client/db/explorer/index.html                 | 21 ++++++
 client/db/explorer/packet.html                | 21 ++++++
 client/db/explorer/set.html                   | 21 ++++++
 client/db/explorer/tossup.html                | 21 ++++++
 client/db/frequency-list/index.html           | 21 ++++++
 client/db/frequency-list/subcategory.html     | 21 ++++++
 client/db/index.html                          | 21 ++++++
 client/geoword/confirmation.html              | 21 ++++++
 client/geoword/index.html                     | 21 ++++++
 client/geoword/login.html                     | 21 ++++++
 client/geoword/paid/play/division.html        | 21 ++++++
 client/geoword/paid/play/game.html            | 21 ++++++
 .../geoword/paid/results/category-stats.html  | 21 ++++++
 client/geoword/paid/results/compare.html      | 21 ++++++
 client/geoword/paid/results/leaderboard.html  | 21 ++++++
 client/geoword/paid/results/packet.html       | 21 ++++++
 client/geoword/paid/results/stats.html        | 21 ++++++
 client/geoword/payment.html                   | 21 ++++++
 client/index.html                             | 21 ++++++
 client/play/bonuses/solo/index.html           | 21 ++++++
 client/play/index.html                        | 21 ++++++
 client/play/tossups/mp/index.html             | 21 ++++++
 client/play/tossups/mp/room.html              | 21 ++++++
 client/play/tossups/solo/index.html           | 21 ++++++
 client/scripts/apply-theme.js                 | 69 +++++++++++++++----
 client/settings/index.html                    | 34 ++++++---
 client/settings/index.js                      | 21 ------
 client/tools/api-docs/bonus.html              | 21 ++++++
 client/tools/api-docs/check-answer.html       | 21 ++++++
 client/tools/api-docs/frequency-list.html     | 21 ++++++
 client/tools/api-docs/index.html              | 21 ++++++
 .../tools/api-docs/multiplayer/room-list.html | 21 ++++++
 client/tools/api-docs/num-packets.html        | 21 ++++++
 client/tools/api-docs/packet.html             | 21 ++++++
 client/tools/api-docs/query.html              | 21 ++++++
 .../tools/api-docs/question-stats/bonus.html  | 21 ++++++
 .../tools/api-docs/question-stats/tossup.html | 21 ++++++
 client/tools/api-docs/random-bonus.html       | 21 ++++++
 client/tools/api-docs/random-name.html        | 21 ++++++
 client/tools/api-docs/random-tossup.html      | 21 ++++++
 client/tools/api-docs/report-question.html    | 21 ++++++
 client/tools/api-docs/schemas/index.html      | 21 ++++++
 client/tools/api-docs/set-list.html           | 21 ++++++
 client/tools/api-docs/tossup.html             | 21 ++++++
 client/tools/packet-parser/index.html         | 21 ++++++
 client/user/edit-password.html                | 21 ++++++
 client/user/edit-profile.html                 | 21 ++++++
 client/user/forgot-password.html              | 21 ++++++
 client/user/login.html                        | 21 ++++++
 client/user/my-profile.html                   | 21 ++++++
 client/user/reset-password.html               | 21 ++++++
 client/user/signup.html                       | 21 ++++++
 client/user/stars/bonuses.html                | 21 ++++++
 client/user/stars/tossups.html                | 21 ++++++
 client/user/stats/bonus-graph.html            | 21 ++++++
 client/user/stats/bonuses.html                | 21 ++++++
 client/user/stats/tossup-graph.html           | 21 ++++++
 client/user/stats/tossups.html                | 21 ++++++
 client/user/verify-failed.html                | 21 ++++++
 scss/custom.scss                              |  2 +
 scss/themes/night.scss                        |  4 ++
 79 files changed, 1639 insertions(+), 47 deletions(-)

diff --git a/client/404.html b/client/404.html
index 86a93f89a..5f1493a7d 100644
--- a/client/404.html
+++ b/client/404.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/about/index.html b/client/about/index.html
index b6c330056..c11c99347 100644
--- a/client/about/index.html
+++ b/client/about/index.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/about/privacy-policy.html b/client/about/privacy-policy.html
index b26d94764..d88a46e3b 100644
--- a/client/about/privacy-policy.html
+++ b/client/about/privacy-policy.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/about/terms-of-service.html b/client/about/terms-of-service.html
index 7e4127103..7280bb3e1 100644
--- a/client/about/terms-of-service.html
+++ b/client/about/terms-of-service.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/category-reports/index.html b/client/admin/category-reports/index.html
index 791f9472f..596af9db7 100644
--- a/client/admin/category-reports/index.html
+++ b/client/admin/category-reports/index.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/geoword/category-stats.html b/client/admin/geoword/category-stats.html
index c152f31ce..fa6f68d7a 100644
--- a/client/admin/geoword/category-stats.html
+++ b/client/admin/geoword/category-stats.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/geoword/compare.html b/client/admin/geoword/compare.html
index 1f8ea0937..0ce07c4aa 100644
--- a/client/admin/geoword/compare.html
+++ b/client/admin/geoword/compare.html
@@ -58,7 +58,28 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
-                        <a class="nav-link" id="login-link" href="/user/login">Log in</a>
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
+                        <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
             </div>
diff --git a/client/admin/geoword/index.html b/client/admin/geoword/index.html
index a72dd9dc4..6c247d688 100644
--- a/client/admin/geoword/index.html
+++ b/client/admin/geoword/index.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/geoword/leaderboard.html b/client/admin/geoword/leaderboard.html
index 812d39975..c880df24b 100644
--- a/client/admin/geoword/leaderboard.html
+++ b/client/admin/geoword/leaderboard.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/geoword/manage-payments.html b/client/admin/geoword/manage-payments.html
index 526cf5ad5..e5f0a3c36 100644
--- a/client/admin/geoword/manage-payments.html
+++ b/client/admin/geoword/manage-payments.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/geoword/protests.html b/client/admin/geoword/protests.html
index 5d48e5e16..bad4ba5f5 100644
--- a/client/admin/geoword/protests.html
+++ b/client/admin/geoword/protests.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/geoword/stats.html b/client/admin/geoword/stats.html
index d1e7efbd3..9edb69d88 100644
--- a/client/admin/geoword/stats.html
+++ b/client/admin/geoword/stats.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/index.html b/client/admin/index.html
index fcf537e8a..bb00d1082 100644
--- a/client/admin/index.html
+++ b/client/admin/index.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/leaderboard/index.html b/client/admin/leaderboard/index.html
index c2fe87c79..97fd72b89 100644
--- a/client/admin/leaderboard/index.html
+++ b/client/admin/leaderboard/index.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/question-management/packet.html b/client/admin/question-management/packet.html
index 694be7d0f..8f6f892e7 100644
--- a/client/admin/question-management/packet.html
+++ b/client/admin/question-management/packet.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/admin/question-management/set.html b/client/admin/question-management/set.html
index e4834cb2c..d1aa3f42c 100644
--- a/client/admin/question-management/set.html
+++ b/client/admin/question-management/set.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/db/backups.html b/client/db/backups.html
index 507833291..fe40c57d4 100644
--- a/client/db/backups.html
+++ b/client/db/backups.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/db/explorer/bonus.html b/client/db/explorer/bonus.html
index a213c17f2..6d1753fc2 100644
--- a/client/db/explorer/bonus.html
+++ b/client/db/explorer/bonus.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/db/explorer/index.html b/client/db/explorer/index.html
index 0eafe8a14..74d71e965 100644
--- a/client/db/explorer/index.html
+++ b/client/db/explorer/index.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/db/explorer/packet.html b/client/db/explorer/packet.html
index 0049145f4..fa8b76d3f 100644
--- a/client/db/explorer/packet.html
+++ b/client/db/explorer/packet.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/db/explorer/set.html b/client/db/explorer/set.html
index 78b840172..feff67481 100644
--- a/client/db/explorer/set.html
+++ b/client/db/explorer/set.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/db/explorer/tossup.html b/client/db/explorer/tossup.html
index 2cb7f8ea6..fea974dd4 100644
--- a/client/db/explorer/tossup.html
+++ b/client/db/explorer/tossup.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/db/frequency-list/index.html b/client/db/frequency-list/index.html
index 5da0406d0..7a4536afc 100644
--- a/client/db/frequency-list/index.html
+++ b/client/db/frequency-list/index.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/db/frequency-list/subcategory.html b/client/db/frequency-list/subcategory.html
index f0c5deb8d..ad2ce65ff 100644
--- a/client/db/frequency-list/subcategory.html
+++ b/client/db/frequency-list/subcategory.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/db/index.html b/client/db/index.html
index 8c679849b..f3c31b912 100644
--- a/client/db/index.html
+++ b/client/db/index.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/confirmation.html b/client/geoword/confirmation.html
index c4ad49b34..077da83ff 100644
--- a/client/geoword/confirmation.html
+++ b/client/geoword/confirmation.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/index.html b/client/geoword/index.html
index be276ad6d..5abb73876 100644
--- a/client/geoword/index.html
+++ b/client/geoword/index.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/login.html b/client/geoword/login.html
index 6adda44d8..46999b5f1 100644
--- a/client/geoword/login.html
+++ b/client/geoword/login.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/paid/play/division.html b/client/geoword/paid/play/division.html
index ee4e961e0..0913363ad 100644
--- a/client/geoword/paid/play/division.html
+++ b/client/geoword/paid/play/division.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/paid/play/game.html b/client/geoword/paid/play/game.html
index 8c66bdf28..9cef276f4 100644
--- a/client/geoword/paid/play/game.html
+++ b/client/geoword/paid/play/game.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/paid/results/category-stats.html b/client/geoword/paid/results/category-stats.html
index 4382bfc40..e0db9d1e8 100644
--- a/client/geoword/paid/results/category-stats.html
+++ b/client/geoword/paid/results/category-stats.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/paid/results/compare.html b/client/geoword/paid/results/compare.html
index 124118d2f..0e674a140 100644
--- a/client/geoword/paid/results/compare.html
+++ b/client/geoword/paid/results/compare.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/paid/results/leaderboard.html b/client/geoword/paid/results/leaderboard.html
index b452dbdac..ceac18797 100644
--- a/client/geoword/paid/results/leaderboard.html
+++ b/client/geoword/paid/results/leaderboard.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/paid/results/packet.html b/client/geoword/paid/results/packet.html
index 49933d65c..b0676dcbb 100644
--- a/client/geoword/paid/results/packet.html
+++ b/client/geoword/paid/results/packet.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/paid/results/stats.html b/client/geoword/paid/results/stats.html
index 778981495..d564dcc3c 100644
--- a/client/geoword/paid/results/stats.html
+++ b/client/geoword/paid/results/stats.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/geoword/payment.html b/client/geoword/payment.html
index c675b64ea..a145a8a37 100644
--- a/client/geoword/payment.html
+++ b/client/geoword/payment.html
@@ -61,6 +61,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/index.html b/client/index.html
index 50d78ac1d..e0af1fff5 100644
--- a/client/index.html
+++ b/client/index.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/play/bonuses/solo/index.html b/client/play/bonuses/solo/index.html
index c79f47c43..6e6708ee2 100644
--- a/client/play/bonuses/solo/index.html
+++ b/client/play/bonuses/solo/index.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/play/index.html b/client/play/index.html
index 35325f5e7..186909bae 100644
--- a/client/play/index.html
+++ b/client/play/index.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/play/tossups/mp/index.html b/client/play/tossups/mp/index.html
index 12ba9561e..78386daf2 100644
--- a/client/play/tossups/mp/index.html
+++ b/client/play/tossups/mp/index.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/play/tossups/mp/room.html b/client/play/tossups/mp/room.html
index cedf35e31..89b52c8b9 100644
--- a/client/play/tossups/mp/room.html
+++ b/client/play/tossups/mp/room.html
@@ -57,6 +57,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/play/tossups/solo/index.html b/client/play/tossups/solo/index.html
index 8c98a19ed..ca5753933 100644
--- a/client/play/tossups/solo/index.html
+++ b/client/play/tossups/solo/index.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/scripts/apply-theme.js b/client/scripts/apply-theme.js
index f50af1012..27dd86731 100644
--- a/client/scripts/apply-theme.js
+++ b/client/scripts/apply-theme.js
@@ -1,15 +1,54 @@
-const htmlTag = document.getElementsByTagName('html')[0];
-
-let colorTheme = 'light';
-if (window.localStorage.getItem('color-theme') === 'dark') {
-  colorTheme = 'night';
-} else if (window.localStorage.getItem('color-theme') === 'light') {
-  colorTheme = 'light';
-} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-  // Get OS preferred color scheme
-  colorTheme = 'night';
-} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
-  colorTheme = 'light';
-}
-
-htmlTag.setAttribute('data-bs-theme', colorTheme);
+// mostly copied from https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript
+
+const getStoredTheme = () => window.localStorage.getItem('color-theme');
+const setStoredTheme = theme => window.localStorage.setItem('color-theme', theme);
+const getPreferredTheme = () => {
+  const storedTheme = getStoredTheme();
+  if (storedTheme === 'dark') { return 'night'; }
+  if (storedTheme) { return storedTheme; }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'night' : 'light';
+};
+
+const setTheme = theme => {
+  const htmlTag = document.documentElement;
+  if (theme === 'auto') {
+    htmlTag.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'night' : 'light'));
+  } else {
+    htmlTag.setAttribute('data-bs-theme', theme);
+  }
+};
+
+setTheme(getPreferredTheme());
+
+const showActiveTheme = (theme, focus = false) => {
+  const activeThemeIcon = document.querySelector('.theme-icon-active i');
+  const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+  const svgClassOfActiveBtn = Array.from(btnToActive.querySelector('i').classList).filter(cls => cls.startsWith('bi-'))[0];
+
+  document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+    element.classList.remove('active');
+    element.querySelector('.bi-check2').classList.add('d-none');
+  });
+
+  btnToActive.classList.add('active');
+  btnToActive.querySelector('.bi-check2').classList.remove('d-none');
+  activeThemeIcon.className = 'bi ' + svgClassOfActiveBtn;
+
+  if (focus) {
+    document.querySelector('#bd-theme').focus();
+  }
+};
+
+window.addEventListener('DOMContentLoaded', () => {
+  showActiveTheme(getPreferredTheme());
+
+  document.querySelectorAll('[data-bs-theme-value]')
+    .forEach(toggle => {
+      toggle.addEventListener('click', () => {
+        const theme = toggle.getAttribute('data-bs-theme-value');
+        setStoredTheme(theme);
+        setTheme(theme);
+        showActiveTheme(theme, true);
+      });
+    });
+});
diff --git a/client/settings/index.html b/client/settings/index.html
index 90c441e2e..3edd68709 100644
--- a/client/settings/index.html
+++ b/client/settings/index.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
@@ -67,16 +88,9 @@
 
     <div class="container-xl mt-3 mb-5 pb-5">
         <p class="lead">Adjust site-wide settings here.</p>
-        <div>
-            <p>
-                <a id="toggle-color-theme" href="#">Toggle light/dark mode</a>.
-                (It should default to your system setting.)
-            </p>
-            <p>
-                Alternatively, <a id="reset-color-theme" href="#">click here</a> to clear your selection to allow the website to
-                automatically adjust to your system setting.
-            </p>
-        </div>
+        <p>
+            Change the color theme in the top-right corner of the navbar.
+        </p>
         <div>
             <label for="font-size">Font size: <span id="font-size-display">16</span>px</label>
             <input class="form-range" id="font-size" type="range" value="16" min="10" max="30" step="1">
diff --git a/client/settings/index.js b/client/settings/index.js
index eb2f3bafb..1ce6e18fd 100644
--- a/client/settings/index.js
+++ b/client/settings/index.js
@@ -15,27 +15,6 @@ if (window.localStorage.getItem('sound-effects') === 'true') {
   document.getElementById('toggle-sound-effects').checked = true;
 }
 
-const htmlTag = document.getElementsByTagName('html')[0];
-document.getElementById('toggle-color-theme').addEventListener('click', function () {
-  if (htmlTag.getAttribute('data-bs-theme') === 'light') {
-    htmlTag.setAttribute('data-bs-theme', 'night');
-    window.localStorage.setItem('color-theme', 'dark');
-  } else {
-    htmlTag.setAttribute('data-bs-theme', 'light');
-    window.localStorage.setItem('color-theme', 'light');
-  }
-});
-
-document.getElementById('reset-color-theme').addEventListener('click', function () {
-  window.localStorage.removeItem('color-theme');
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    // Get OS preferred color scheme
-    document.querySelector('#custom-css').setAttribute('href', '/bootstrap/dark.css');
-  } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
-    document.querySelector('#custom-css').setAttribute('href', '/bootstrap/light.css');
-  }
-});
-
 document.getElementById('font-size').addEventListener('input', function () {
   window.localStorage.setItem('font-size', this.value);
   document.getElementById('font-size-display').textContent = this.value;
diff --git a/client/tools/api-docs/bonus.html b/client/tools/api-docs/bonus.html
index 134597227..345c25642 100644
--- a/client/tools/api-docs/bonus.html
+++ b/client/tools/api-docs/bonus.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/check-answer.html b/client/tools/api-docs/check-answer.html
index f1a4d1fb6..780dcca3a 100644
--- a/client/tools/api-docs/check-answer.html
+++ b/client/tools/api-docs/check-answer.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/frequency-list.html b/client/tools/api-docs/frequency-list.html
index b56888bff..edb7a49bb 100644
--- a/client/tools/api-docs/frequency-list.html
+++ b/client/tools/api-docs/frequency-list.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/index.html b/client/tools/api-docs/index.html
index b9042445a..0ab2ded96 100644
--- a/client/tools/api-docs/index.html
+++ b/client/tools/api-docs/index.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/multiplayer/room-list.html b/client/tools/api-docs/multiplayer/room-list.html
index c051253e6..d3227e5ba 100644
--- a/client/tools/api-docs/multiplayer/room-list.html
+++ b/client/tools/api-docs/multiplayer/room-list.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/num-packets.html b/client/tools/api-docs/num-packets.html
index 4eca5efce..fe2b686f3 100644
--- a/client/tools/api-docs/num-packets.html
+++ b/client/tools/api-docs/num-packets.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/packet.html b/client/tools/api-docs/packet.html
index 25e55402e..a8aa03f81 100644
--- a/client/tools/api-docs/packet.html
+++ b/client/tools/api-docs/packet.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/query.html b/client/tools/api-docs/query.html
index e7f5ddbae..97a8c1484 100644
--- a/client/tools/api-docs/query.html
+++ b/client/tools/api-docs/query.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/question-stats/bonus.html b/client/tools/api-docs/question-stats/bonus.html
index 10d07d48b..b19bd01e2 100644
--- a/client/tools/api-docs/question-stats/bonus.html
+++ b/client/tools/api-docs/question-stats/bonus.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/question-stats/tossup.html b/client/tools/api-docs/question-stats/tossup.html
index e108d68b3..de7ff8963 100644
--- a/client/tools/api-docs/question-stats/tossup.html
+++ b/client/tools/api-docs/question-stats/tossup.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/random-bonus.html b/client/tools/api-docs/random-bonus.html
index fc7f5dced..110d1c719 100644
--- a/client/tools/api-docs/random-bonus.html
+++ b/client/tools/api-docs/random-bonus.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/random-name.html b/client/tools/api-docs/random-name.html
index 8f80c6e0e..85e1ae82b 100644
--- a/client/tools/api-docs/random-name.html
+++ b/client/tools/api-docs/random-name.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/random-tossup.html b/client/tools/api-docs/random-tossup.html
index 7041d0ff4..ef7f079a8 100644
--- a/client/tools/api-docs/random-tossup.html
+++ b/client/tools/api-docs/random-tossup.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/report-question.html b/client/tools/api-docs/report-question.html
index 27fee4b0b..412602da5 100644
--- a/client/tools/api-docs/report-question.html
+++ b/client/tools/api-docs/report-question.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/schemas/index.html b/client/tools/api-docs/schemas/index.html
index b60c60cc1..00b0057c7 100644
--- a/client/tools/api-docs/schemas/index.html
+++ b/client/tools/api-docs/schemas/index.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/set-list.html b/client/tools/api-docs/set-list.html
index e844973be..875d31f9e 100644
--- a/client/tools/api-docs/set-list.html
+++ b/client/tools/api-docs/set-list.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/api-docs/tossup.html b/client/tools/api-docs/tossup.html
index 219935de8..bd05d2f88 100644
--- a/client/tools/api-docs/tossup.html
+++ b/client/tools/api-docs/tossup.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/tools/packet-parser/index.html b/client/tools/packet-parser/index.html
index 79f6b7183..71112f456 100644
--- a/client/tools/packet-parser/index.html
+++ b/client/tools/packet-parser/index.html
@@ -59,6 +59,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/edit-password.html b/client/user/edit-password.html
index 5afe3ab61..f432e9f0a 100644
--- a/client/user/edit-password.html
+++ b/client/user/edit-password.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/edit-profile.html b/client/user/edit-profile.html
index acf9063fc..af200299e 100644
--- a/client/user/edit-profile.html
+++ b/client/user/edit-profile.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/forgot-password.html b/client/user/forgot-password.html
index 752e55373..5b68e21c4 100644
--- a/client/user/forgot-password.html
+++ b/client/user/forgot-password.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/login.html b/client/user/login.html
index 59dc41059..d3fa21eb6 100644
--- a/client/user/login.html
+++ b/client/user/login.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/my-profile.html b/client/user/my-profile.html
index 45215e93a..3719a76d2 100644
--- a/client/user/my-profile.html
+++ b/client/user/my-profile.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/reset-password.html b/client/user/reset-password.html
index 5bb639183..38697d0de 100644
--- a/client/user/reset-password.html
+++ b/client/user/reset-password.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/signup.html b/client/user/signup.html
index 980901341..598dd0da1 100644
--- a/client/user/signup.html
+++ b/client/user/signup.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/stars/bonuses.html b/client/user/stars/bonuses.html
index 762e18be8..d4b484306 100644
--- a/client/user/stars/bonuses.html
+++ b/client/user/stars/bonuses.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/stars/tossups.html b/client/user/stars/tossups.html
index 9f6a8e9e4..c69aad921 100644
--- a/client/user/stars/tossups.html
+++ b/client/user/stars/tossups.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/stats/bonus-graph.html b/client/user/stats/bonus-graph.html
index f8c4476d7..d8f0b5cfb 100644
--- a/client/user/stats/bonus-graph.html
+++ b/client/user/stats/bonus-graph.html
@@ -62,6 +62,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/stats/bonuses.html b/client/user/stats/bonuses.html
index 9c6af1d3b..019d063f9 100644
--- a/client/user/stats/bonuses.html
+++ b/client/user/stats/bonuses.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/stats/tossup-graph.html b/client/user/stats/tossup-graph.html
index ffa5c3d9a..8a45863af 100644
--- a/client/user/stats/tossup-graph.html
+++ b/client/user/stats/tossup-graph.html
@@ -62,6 +62,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/stats/tossups.html b/client/user/stats/tossups.html
index a9fc56f1b..94e917e14 100644
--- a/client/user/stats/tossups.html
+++ b/client/user/stats/tossups.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/client/user/verify-failed.html b/client/user/verify-failed.html
index 1b48e5332..7f91cb152 100644
--- a/client/user/verify-failed.html
+++ b/client/user/verify-failed.html
@@ -58,6 +58,27 @@
                 </div>
                 <div class="d-flex">
                     <ul class="navbar-nav mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <button id="bd-theme" class="btn btn-link nav-link dropdown-toggle d-flex align-items-center"
+                                data-bs-toggle="dropdown">
+                                <span class="theme-icon-active"><i class="bi bi-moon-stars-fill"></i></span>
+                                <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item d-flex" data-bs-theme-value="light">
+                                    <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex" data-bs-theme-value="night">
+                                    <i class="bi bi-moon-stars-fill me-2"></i>Night<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                                <a class="dropdown-item d-flex active" data-bs-theme-value="auto">
+                                    <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check2 ms-auto d-none"></i>
+                                </a>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                        </li>
                         <a class="nav-link" href="/user/login" id="login-link">Log in</a>
                     </ul>
                 </div>
diff --git a/scss/custom.scss b/scss/custom.scss
index 7c683340d..e55696f8f 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -57,6 +57,8 @@ $bootstrap-icons-font-dir: "/bootstrap-icons/font/fonts";
 @import "../node_modules/bootstrap/scss/transitions";
 @import "../node_modules/bootstrap/scss/type";
 
+@import "../node_modules/bootstrap/scss/helpers/vr";
+
 // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 @import "../node_modules/bootstrap/scss/utilities";
 @import "../node_modules/bootstrap/scss/utilities/api";
diff --git a/scss/themes/night.scss b/scss/themes/night.scss
index 81b829c7e..e725c1235 100644
--- a/scss/themes/night.scss
+++ b/scss/themes/night.scss
@@ -118,6 +118,10 @@ $form-switch-checked-bg-image-night: url("data:image/svg+xml,<svg xmlns='http://
         --#{$prefix}navbar-disabled-color: #{rgba($black, .3)};
     }
 
+    .vr {
+        background-color: #{rgba($black, .55)};
+    }
+
     .btn-close {
         --#{$prefix}btn-close-color: #{$btn-close-color-night};
         --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg-night) };