diff --git a/src/context/darkMode.tsx b/src/context/darkMode.tsx
index 08c31bd..eb25c32 100644
--- a/src/context/darkMode.tsx
+++ b/src/context/darkMode.tsx
@@ -26,16 +26,39 @@ export function useDarkMode() {
return context;
}
+const STORAGE_KEY = "theme-override";
+
+const getSystemPreference = () => {
+ if (typeof window !== "undefined") {
+ return window.matchMedia("(prefers-color-scheme: dark)").matches;
+ }
+ return false;
+};
+
+const getInitialTheme = () => {
+ if (typeof window === "undefined") return false;
+
+ const storedOverride = localStorage.getItem(STORAGE_KEY);
+ if (storedOverride !== null) {
+ return storedOverride === "dark";
+ }
+ return getSystemPreference();
+};
+
export const DarkModeProvider: ParentComponent = (props) => {
- const [isDark, setIsDark] = createSignal(false);
+ // Initialize with correct theme synchronously
+ const [isDark, setIsDark] = createSignal(getInitialTheme());
onMount(() => {
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
- setIsDark(mediaQuery.matches);
// Listen for system theme changes
const handleChange = (e: MediaQueryListEvent) => {
- setIsDark(e.matches);
+ // Only update if there's no explicit override
+ const storedOverride = localStorage.getItem(STORAGE_KEY);
+ if (storedOverride === null) {
+ setIsDark(e.matches);
+ }
};
mediaQuery.addEventListener("change", handleChange);
@@ -57,11 +80,30 @@ export const DarkModeProvider: ParentComponent = (props) => {
});
const toggleDarkMode = () => {
- setIsDark(!isDark());
+ const newValue = !isDark();
+ setIsDark(newValue);
+
+ // Only persist if different from system preference
+ const systemPreference = getSystemPreference();
+ if (newValue !== systemPreference) {
+ localStorage.setItem(STORAGE_KEY, newValue ? "dark" : "light");
+ } else {
+ // If matching system preference, remove override
+ localStorage.removeItem(STORAGE_KEY);
+ }
};
const setDarkMode = (dark: boolean) => {
setIsDark(dark);
+
+ // Only persist if different from system preference
+ const systemPreference = getSystemPreference();
+ if (dark !== systemPreference) {
+ localStorage.setItem(STORAGE_KEY, dark ? "dark" : "light");
+ } else {
+ // If matching system preference, remove override
+ localStorage.removeItem(STORAGE_KEY);
+ }
};
return (
diff --git a/src/entry-server.tsx b/src/entry-server.tsx
index 9fa74f6..c46d032 100644
--- a/src/entry-server.tsx
+++ b/src/entry-server.tsx
@@ -12,6 +12,17 @@ export default createHandler(() => (
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
+
{assets}