diff --git a/static/js/base.js b/static/js/base.js
index d3ce09e..7bedc2e 100644
--- a/static/js/base.js
+++ b/static/js/base.js
@@ -13,18 +13,27 @@ const $$ = selector => Array.from(document.querySelector(selector));
   function initThemeToggle() {
     const themeToggleButton = document.getElementById("theme-toggle-btn");
     if (!themeToggleButton) return;
+    themeToggleButton.classList.toggle("btn-ghost", !("theme" in localStorage));
     themeToggleButton.addEventListener("click", () => {
       const documentRoot = document.documentElement;
+      const isSystemTheme = themeToggleButton.classList.contains("btn-ghost");
       const isDarkTheme = documentRoot.classList.contains("dark");
-      const newTheme = isDarkTheme ? "light" : "dark";
+      const newTheme = isSystemTheme ? "dark" : (isDarkTheme ? "light" : "system");
 
-      if (newTheme === "light") {
-        documentRoot.classList.remove("dark");
+      if (newTheme === "system") {
+        documentRoot.classList.toggle("dark", window.matchMedia("(prefers-color-scheme: dark)").matches);
+        documentRoot.setAttribute("data-theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+        localStorage.removeItem("theme");
       } else {
-        documentRoot.classList.add("dark");
+        if (newTheme === "light") {
+          documentRoot.classList.remove("dark");
+        } else if (newTheme === "dark") {
+          documentRoot.classList.add("dark");
+        }
+        documentRoot.setAttribute("data-theme", newTheme);
+        localStorage.setItem("theme", newTheme);
       }
-      documentRoot.setAttribute("data-theme", newTheme);
-      localStorage.setItem("theme", newTheme);
+      themeToggleButton.classList.toggle("btn-ghost", newTheme === "system");
     });
   }
 
diff --git a/theme/templates/base.html b/theme/templates/base.html
index 1dcca97..59ddeea 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -5,7 +5,7 @@
 {% url 'settings' as settings_url %}
 
 <!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,13 +14,16 @@
   <!-- Inline script to set the theme before rendering -->
   <script>
     (function () {
-      const savedTheme = localStorage.getItem('theme');
-      if (savedTheme === 'dark') {
-        document.documentElement.classList.add('dark');
-        document.documentElement.setAttribute('data-theme', 'dark');
+      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+      document.documentElement.classList.toggle(
+        "dark",
+        localStorage.getItem("theme") === "dark" ||
+          (!(localStorage.getItem("theme")) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+      );
+      if (localStorage.getItem("theme")) {
+        document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
       } else {
-        document.documentElement.classList.remove('dark');
-        document.documentElement.setAttribute('data-theme', 'light');
+        document.documentElement.setAttribute("data-theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
       }
     })();
   </script>
