diff --git a/packages/share-theme/src/scripts/modules/theme.ts b/packages/share-theme/src/scripts/modules/theme.ts
index 39f34341f..27aa51737 100644
--- a/packages/share-theme/src/scripts/modules/theme.ts
+++ b/packages/share-theme/src/scripts/modules/theme.ts
@@ -1,5 +1,5 @@
-const prefersDark = localStorage.getItem("theme") === "dark" || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
-if (prefersDark) {
+const themeToLoad = getThemeToLoad();
+if (themeToLoad === "dark") {
     document.body.classList.add("theme-dark");
     document.body.classList.remove("theme-light");
 } else {
@@ -12,7 +12,7 @@ export default function setupThemeSelector() {
 
     const themeSelection: HTMLDivElement = document.querySelector(".theme-selection")!;
     themeSelection.classList.add("no-transition");
-    themeSwitch.checked = prefersDark;
+    themeSwitch.checked = (themeToLoad === "dark");
     setTimeout(() => themeSelection.classList.remove("no-transition"), 400);
 
     themeSwitch?.addEventListener("change", () => {
@@ -27,3 +27,14 @@ export default function setupThemeSelector() {
         }
     });
 }
+
+function getThemeToLoad() {
+    const storedTheme = localStorage.getItem("theme");
+    if (storedTheme) {
+        // Respect user's choice if one has already been made.
+        return storedTheme;
+    } else if (window.matchMedia) {
+        // Fallback to browser's color preference otherwise.
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+}