feat(ui): default theme to system (follow OS light/dark)
Light has been signed off, so the theme store's default choice is now `system` (it was `dark` during the incremental migration). This matches the app.html pre-paint guard, which already resolved an unset choice via prefers-color-scheme — removing the brief boot-time mismatch where the store re-pinned dark. Users still pin light/dark via the account-menu picker. Updates the store default + its test and the design-system / finalize-plan docs. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -24,11 +24,11 @@ export const THEME_STORAGE_KEY = "galaxy-theme";
|
||||
const SYSTEM_LIGHT_QUERY = "(prefers-color-scheme: light)";
|
||||
|
||||
function readStoredChoice(): ThemeChoice {
|
||||
if (typeof localStorage === "undefined") return "dark";
|
||||
if (typeof localStorage === "undefined") return "system";
|
||||
const value = localStorage.getItem(THEME_STORAGE_KEY);
|
||||
return value === "light" || value === "dark" || value === "system"
|
||||
? value
|
||||
: "dark";
|
||||
: "system";
|
||||
}
|
||||
|
||||
function systemTheme(): ResolvedTheme {
|
||||
|
||||
@@ -42,9 +42,10 @@ describe("theme store", () => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it("defaults to dark and applies it to the document", async () => {
|
||||
it("defaults to system and applies the resolved theme", async () => {
|
||||
const { theme } = await freshStore();
|
||||
expect(theme.choice).toBe("dark");
|
||||
expect(theme.choice).toBe("system");
|
||||
// freshStore() leaves the OS at dark (prefersLight = false).
|
||||
expect(theme.resolved).toBe("dark");
|
||||
expect(document.documentElement.dataset.theme).toBe("dark");
|
||||
});
|
||||
@@ -80,9 +81,9 @@ describe("theme store", () => {
|
||||
expect(document.documentElement.dataset.theme).toBe("light");
|
||||
});
|
||||
|
||||
it("falls back to dark for an unrecognised stored value", async () => {
|
||||
it("falls back to system for an unrecognised stored value", async () => {
|
||||
localStorage.setItem(STORAGE_KEY, "neon");
|
||||
const { theme } = await freshStore();
|
||||
expect(theme.choice).toBe("dark");
|
||||
expect(theme.choice).toBe("system");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user