diff --git a/scripts/templates/base.html b/scripts/templates/base.html
index 7b5a0257..a2a83587 100644
--- a/scripts/templates/base.html
+++ b/scripts/templates/base.html
@@ -7,8 +7,89 @@
 
 <!doctype html>
 <html class="h-100">
+<script>
+    // Set data-theme before first paint to avoid a flash of the wrong theme.
+    (function () {
+        var storedTheme = localStorage.getItem('theme');
+        var theme = storedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+        document.documentElement.setAttribute('data-theme', theme);
+    })();
+</script>
 
 <style>
+:root {
+    --bg-color: #ffffff;
+    --text-color: #212529;
+    --card-bg: #ffffff;
+    --border-color: #dee2e6;
+    --link-color: #007bff;
+    --muted-color: #6c757d;
+    color-scheme: light;
+}
+html[data-theme="dark"] {
+    --bg-color: #121212;
+    --text-color: #e0e0e0;
+    --card-bg: #1e1e1e;
+    --border-color: #444444;
+    --link-color: #8ab4f8;
+    --muted-color: #aaaaaa;
+    color-scheme: dark;
+}
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+html[data-theme="dark"] a {
+    color: var(--link-color);
+}
+html[data-theme="dark"] .text-dark {
+    color: var(--text-color) !important;
+}
+html[data-theme="dark"] .text-muted {
+    color: var(--muted-color) !important;
+}
+html[data-theme="dark"] .table {
+    color: var(--text-color);
+}
+html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+html[data-theme="dark"] .form-control,
+html[data-theme="dark"] .custom-select,
+html[data-theme="dark"] .dropdown-menu,
+html[data-theme="dark"] .modal-content {
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    border-color: var(--border-color);
+}
+html[data-theme="dark"] .dropdown-item {
+    color: var(--text-color);
+}
+html[data-theme="dark"] .dropdown-item:hover,
+html[data-theme="dark"] .dropdown-item:focus {
+    background-color: #333333;
+    color: #ffffff;
+}
+html[data-theme="dark"] .list-group-item {
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    border-color: var(--border-color);
+}
+html[data-theme="dark"] .page-link {
+    background-color: var(--card-bg);
+    color: var(--link-color);
+    border-color: var(--border-color);
+}
+html[data-theme="dark"] .page-item.disabled .page-link {
+    background-color: var(--bg-color);
+    color: var(--muted-color);
+    border-color: var(--border-color);
+}
+html[data-theme="dark"] .page-item.active .page-link {
+    background-color: var(--link-color);
+    border-color: var(--link-color);
+    color: #121212;
+}
 .badge-purple {
    color: #ffffff;
    background-color: #694c8f;
@@ -37,6 +118,47 @@
 <body class="d-flex flex-column h-100">
     {% include 'navbar.html' %}
 
+    <script>
+        function setTheme(theme, persist) {
+            document.documentElement.setAttribute('data-theme', theme);
+            if (persist) {
+                localStorage.setItem('theme', theme);
+            }
+            var toggle = document.getElementById('themeToggle');
+            var moonIcon = document.getElementById('themeToggleMoon');
+            var sunIcon = document.getElementById('themeToggleSun');
+            if (toggle) {
+                var nextThemeLabel = theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
+                toggle.setAttribute('aria-label', nextThemeLabel);
+                toggle.setAttribute('title', nextThemeLabel);
+            }
+            if (moonIcon && sunIcon) {
+                moonIcon.classList.toggle('d-none', theme === 'dark');
+                sunIcon.classList.toggle('d-none', theme !== 'dark');
+            }
+        }
+
+        (function () {
+            var toggle = document.getElementById('themeToggle');
+            var currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+            setTheme(currentTheme, false);
+
+            if (toggle) {
+                toggle.addEventListener('click', function () {
+                    var activeTheme = document.documentElement.getAttribute('data-theme') || 'light';
+                    setTheme(activeTheme === 'dark' ? 'light' : 'dark', true);
+                });
+            }
+
+            // Follow OS changes only when the user has not manually chosen a theme.
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (event) {
+                if (!localStorage.getItem('theme')) {
+                    setTheme(event.matches ? 'dark' : 'light', false);
+                }
+            });
+        })();
+    </script>
+
     {% if BANNER %}
         <div class="alert alert-danger">
             {{ BANNER }}
diff --git a/scripts/templates/navbar.html b/scripts/templates/navbar.html
index 9863e22b..ff218fdb 100644
--- a/scripts/templates/navbar.html
+++ b/scripts/templates/navbar.html
@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load i18n bootstrap_icons %}
 
 <nav class="navbar sticky-top navbar-expand-sm navbar-dark bg-dark">
     <a class="navbar-brand">BotC Scripts</a>
@@ -50,6 +50,12 @@
             </li>
         </ul>
         <ul class="navbar-nav ml-auto">
+            <li class="nav-item align-self-center mr-2">
+                <button id="themeToggle" class="btn btn-outline-light btn-sm px-2 py-1" type="button" aria-label="Toggle theme" title="Toggle theme">
+                    <span id="themeToggleMoon" aria-hidden="true">{% bs_icon 'moon-stars-fill' %}</span>
+                    <span id="themeToggleSun" class="d-none" aria-hidden="true">{% bs_icon 'sun-fill' %}</span>
+                </button>
+            </li>
             {% if not user.is_authenticated %}
             <li class="nav-item">
                 <a class="nav-link" href="{% url 'account_login' %}">Log In/Sign Up</a>
diff --git a/scripts/templates/script.html b/scripts/templates/script.html
index 659f58b5..18a57acc 100644
--- a/scripts/templates/script.html
+++ b/scripts/templates/script.html
@@ -35,6 +35,10 @@
     .bg-loric {
        background-color: rgba(141, 199, 0, 0.6);
     }
+
+    html[data-theme="dark"] #characters span[style="color:#0000ff"] {
+        color: #66b3ff !important;
+    }
 </style>
 
 <script>
@@ -139,21 +143,19 @@ <h4><span class="badge badge-pill badge-dark">You</span></h4>
         <a class="btn btn-primary" href="{{ script_tool_link }}" target="_blank">Open in Script Tool</a>
     </div>
     <div class="col-md-auto pl-1 p-0">
-        <form class="form-inline mb-0" method="get" action="{% url 'download_json' script.pk script_version.version %}">
-            <div class="col-md-auto p-1 pt-0">
-                <div class="btn-group">
-                    <button type="submit" class="btn btn-primary">Download JSON</button>
-                    <button type="submit" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="downloadJsonButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        <span class="sr-only">Toggle Dropdown</span>
-                    </button>
-                    <div class="dropdown-menu" aria-labelledby="downloadJsonButton">
-                        {% for language in languages %}
-                            <button type="submit" class="dropdown-item" name="language_select" value={{ language }}>{% get_language_name language %}</a>
-                        {% endfor %}
-                    </div>
+        <div class="col-md-auto p-1 pt-0">
+            <div class="btn-group">
+                <a class="btn btn-primary" href="{% url 'download_json' script.pk script_version.version %}">Download JSON</a>
+                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="downloadJsonButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <span class="sr-only">Toggle Dropdown</span>
+                </button>
+                <div class="dropdown-menu" aria-labelledby="downloadJsonButton">
+                    {% for language in languages %}
+                        <a class="dropdown-item" href="{% url 'download_json' script.pk script_version.version %}?language_select={{ language }}">{% get_language_name language %}</a>
+                    {% endfor %}
                 </div>
             </div>
-        </form>
+        </div>
     </div>  
     {% if script_version.pdf %}
         <div class="col-md-auto p-1">
@@ -166,7 +168,7 @@ <h4><span class="badge badge-pill badge-dark">You</span></h4>
         </div>
     {% endif %}
     <div class="col-md-auto p-1">
-        <button class="btn btn-primary" onclick="CopyLink()">JSON</button>
+        <a class="btn btn-primary" href="#" role="button" onclick="CopyLink(); return false;">JSON</a>
     </div>
     {% if script_version.edition > 2 %}
         {% if perms.scripts.download_unsupported_json %}
diff --git a/scripts/templates/scriptlist.html b/scripts/templates/scriptlist.html
index 24656bb3..6457666a 100644
--- a/scripts/templates/scriptlist.html
+++ b/scripts/templates/scriptlist.html
@@ -13,8 +13,8 @@
     <div class="form-group row mb-0">
         <div class="container">
             <div class="row p-1">
-                {% bootstrap_button 'Filter' extra_classes="mr-1" %}
-                {% bootstrap_button 'Clear' href="/" %}
+                <a class="btn btn-primary mr-1" href="#" role="button" onclick="this.closest('form').submit(); return false;">Filter</a>
+                {% bootstrap_button 'Clear' button_class='btn-primary' href="/" %}
                 <div class="col">
                     <p class="font-weight-bold text-right">
                         Results: {{ table.rows|length }}
diff --git a/scripts/templates/statistics.html b/scripts/templates/statistics.html
index 8a8de48e..2b24c2da 100644
--- a/scripts/templates/statistics.html
+++ b/scripts/templates/statistics.html
@@ -47,6 +47,18 @@
     .table-striped-loric>tbody>tr:nth-child(even)>td {
         background-color: rgba(189, 205, 81, 0.4);
     }
+
+    /* These tables keep fixed pastel backgrounds, so text should stay black regardless of theme. */
+    html[data-theme="dark"] .table-striped-good td,
+    html[data-theme="dark"] .table-striped-evil td,
+    html[data-theme="dark"] .table-striped-traveller td,
+    html[data-theme="dark"] .table-striped-fabled td,
+    html[data-theme="dark"] .table-striped-good .text-dark,
+    html[data-theme="dark"] .table-striped-evil .text-dark,
+    html[data-theme="dark"] .table-striped-traveller .text-dark,
+    html[data-theme="dark"] .table-striped-fabled .text-dark {
+        color: #212529 !important;
+    }
 </style>
 
 <div class="container">
diff --git a/scripts/templates/worldcup/fixturetable.html b/scripts/templates/worldcup/fixturetable.html
index 2a1fccc7..d1a38ee0 100644
--- a/scripts/templates/worldcup/fixturetable.html
+++ b/scripts/templates/worldcup/fixturetable.html
@@ -1,4 +1,10 @@
 <div class="container w-100 p-0">
+    <style>
+        .table-success {
+            background-color: #1e5631;
+            color: #ffffff !important;
+        }
+    </style>
     <div class="row p-0">
         <div class="table-striped w-100 p-0">
             <table class="table">
diff --git a/scripts/templates/worldcup/statistics.html b/scripts/templates/worldcup/statistics.html
index 8e2db3cb..4ad899af 100644
--- a/scripts/templates/worldcup/statistics.html
+++ b/scripts/templates/worldcup/statistics.html
@@ -35,6 +35,15 @@
         background-color: #fff0cc;
     }
 
+    /* These tables keep fixed pastel backgrounds, so text should stay black regardless of theme. */
+    html[data-theme="dark"] .table-striped-good td,
+    html[data-theme="dark"] .table-striped-evil td,
+    html[data-theme="dark"] .table-striped-fabled td,
+    html[data-theme="dark"] .table-striped-good .text-dark,
+    html[data-theme="dark"] .table-striped-evil .text-dark,
+    html[data-theme="dark"] .table-striped-fabled .text-dark {
+        color: #212529 !important;
+    }
 </style>
 
 <div class="container">
