diff --git a/src/style.css b/src/style.css
index 14bd515f5..e6e674811 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,22 +1,65 @@
 /* ---------------------------- Global Styles ------------------------------- */
 
 :root {
-  --bg-color: rgb(245, 245, 245);
+  /* general */
+  --bg-color: 245, 245, 245;
   --text-color: #15141A;
+
+  /* navbar */
+  --navbar-hover-bg: #eacb4d;
+  --navbar-link-color: #0d0d0d;
+  --navbar-border: #999;
+  --navbar-title-color: #4a4a4a;
+
+  /* cards */
+  --card-link-color: #1178cc;
+  --card-title-hover-bg: #f5e9a8;
+  --card-hash-color: #7ec3ff;
+
+  /* build details table */
+  --table-border: #ddd;
+  --table-header-bg: #d6d6d6;
+  --table-mobile-row-border: #ccc;
+  --table-mobile-cell-border: #eee;
 }
 
+html.dark {
+  /* general */
+  --bg-color: 26, 26, 26;
+  --text-color: #e0e0e0;
+
+  /* navbar */
+  --navbar-hover-bg: #5c4d0a;
+  --navbar-link-color: #e0e0e0;
+  --navbar-border: #444;
+  --navbar-title-color: #d0d0d0;
+
+  /* cards */
+  --card-link-color: #6cb4ee;
+  --card-title-hover-bg: #3a3520;
+  --card-hash-color: #6cb4ee;
+
+  /* build details table */
+  --table-border: #444;
+  --table-header-bg: #2a2a2a;
+  --table-mobile-row-border: #444;
+  --table-mobile-cell-border: #333;
+}
+
+/* --------------------------------- body ----------------------------------- */
+
 body {
   padding: 4.5rem 1rem 3rem;
   color: var(--text-color);
-  background-color: var(--bg-color);
+  background-color: rgb(var(--bg-color));
 }
 
 /* -------------------------------- navbar ---------------------------------- */
 
 .navbar {
-  background-color: rgb(var(--bg-color), 0.6);
+  background-color: rgba(var(--bg-color), 0.6);
   backdrop-filter: blur(10px);
-  border-bottom: 0.25px solid #999;
+  border-bottom: 0.25px solid var(--navbar-border);
   -webkit-backdrop-filter: blur(10px);
 }
 
@@ -30,11 +73,11 @@ body {
 }
 
 .navbar li:hover {
-  background-color: #eacb4d;
+  background-color: var(--navbar-hover-bg);
 }
 
 .navbar li .nav-link {
-  color: #0d0d0d;
+  color: var(--navbar-link-color);
 }
 
 .navbar-brand a {
@@ -42,11 +85,40 @@ body {
   outline-offset: 8px;
 }
 
+.navbar-title-text {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--navbar-title-color);
+}
+
 .nav-link svg {
   vertical-align: middle;
   margin-top: -4.5px;
 }
 
+.theme-toggle-btn {
+  border: none;
+  color: var(--navbar-link-color);
+  padding: 0.25rem 0.5rem;
+  line-height: 1;
+}
+
+.theme-toggle-btn:hover {
+  background-color: var(--navbar-hover-bg);
+}
+
+.theme-icon-dark {
+  display: none;
+}
+
+html.dark .theme-icon-light {
+  display: none;
+}
+
+html.dark .theme-icon-dark {
+  display: inline-block;
+}
+
 
 /* ----------------------- Cards and card columns --------------------------- */
 
@@ -83,11 +155,11 @@ body {
 .card-title a::after {
   content: " #";
   font-size: 0.8em;
-  color: #7ec3ff;
+  color: var(--card-hash-color);
 }
 
 .card-title a:focus, .card-title a:hover {
-  background-color: #f5e9a8;
+  background-color: var(--card-title-hover-bg);
 }
 
 ul.links-row {
@@ -95,6 +167,10 @@ ul.links-row {
   padding-left: 0;
   list-style: none;
 }
+
+ul.links-row a {
+  color: var(--card-link-color);
+}
 ul.links-row li:not(:first-child) {
   padding-left: 1ch;
 }
@@ -126,22 +202,19 @@ ul.links-row li:not(:first-child)::before {
   display: flex;
 }
 
-/* ------------------------------ Metadata ---------------------------------- */
+/* ----------------------------- Build Details ------------------------------ */
 
 table {
   border-collapse: collapse;
 }
 th, td {
-  border: 1px solid #ddd;
+  border: 1px solid var(--table-border);
   padding: 8px 12px;
   text-align: left;
   white-space: nowrap;
 }
 th {
-  background-color: #d6d6d6;
-}
-hr {
-  color: #f4f4f4;
+  background-color: var(--table-header-bg);
 }
 td[data-label="warnings"], td[data-label="lint"] {
   text-align: right;
@@ -157,13 +230,13 @@ td[data-label="warnings"], td[data-label="lint"] {
     left: -9999px;
   }
   tr {
-    border: 1px solid #ccc;
+    border: 1px solid var(--table-mobile-row-border);
     margin-bottom: 5px;
     overflow-x: auto;
   }
   td {
     border: none;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--table-mobile-cell-border);
     padding-left: 50%;
     position: relative;
   }
diff --git a/templates/base.html.jinja b/templates/base.html.jinja
index e90f7b19e..40b2865b9 100644
--- a/templates/base.html.jinja
+++ b/templates/base.html.jinja
@@ -15,17 +15,24 @@
 </head>
 
 <body>
+  <script>
+    function applyTheme(t) {
+      document.documentElement.setAttribute('data-bs-theme', t);
+      document.documentElement.classList.toggle('dark', t === 'dark');
+    }
+    applyTheme(localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
+  </script>
   <header>
     <nav class="navbar navbar-expand-md fixed-top">
       <div class="container-fluid">
       <div class="navbar-brand">
         <a href="./">
           <img src="logo.png" style="height: 2rem;" alt="Python logo">
-          <span style="font-size: 1.25rem; font-weight: 700; color: #4a4a4a">Translation Dashboard</span>
+          <span class="navbar-title-text">Translation Dashboard</span>
         </a>
       </div>
 
-      <div class="navbar-light bg-light">
+      <div>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
@@ -52,6 +59,14 @@
             </a>
           </li>
         </ul>
+        <button id="theme-toggle" class="btn btn-sm theme-toggle-btn ms-auto" type="button" aria-label="Toggle dark mode">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brightness-high theme-icon-light" viewBox="0 0 16 16">
+            <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
+          </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-fill theme-icon-dark" viewBox="0 0 16 16">
+            <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/>
+          </svg>
+        </button>
       </div>
       </div>
     </nav>
@@ -73,6 +88,12 @@
   }
   window.addEventListener('load', padnavbar);
   window.addEventListener('resize', padnavbar);
+
+  document.getElementById('theme-toggle').addEventListener('click', function() {
+    var next = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
+    localStorage.setItem('theme', next);
+    applyTheme(next);
+  });
 </script>
 
 <script src="https://code.jquery.com/jquery-4.0.0.slim.min.js"
diff --git a/templates/index.html.jinja b/templates/index.html.jinja
index 790318006..2e8cc8ec1 100644
--- a/templates/index.html.jinja
+++ b/templates/index.html.jinja
@@ -13,12 +13,11 @@
             <ul class="links-row">
               {% if project.built %}
               <li>
-                <a href="https://docs.python.org/{{ project.language.code }}/3/" aria-label="View {{ project.language.name }} documentation"
-                   style="color: #1178cc;">View</a>
+                <a href="https://docs.python.org/{{ project.language.code }}/3/" aria-label="View {{ project.language.name }} documentation">View</a>
               </li>
               {% endif %}
               <li>
-                <a href="{{ project.contribution_link }}" style="color: #1178cc;" aria-label="Contribute to {{ project.language.name }} translation">
+                <a href="{{ project.contribution_link }}" aria-label="Contribute to {{ project.language.name }} translation">
                   Contribute
                 </a>
               </li>