Katia Bulatova
fbd6df33b4
Adds System Preferences, Dark and Light themes, gated by the `hasThemeSwitcher` feature flag (off by default — dark stays the default theme for everyone). Old theme is now "Classic"and set as default. "System preferences" theme has both Light and Dark modes and uses your laptop settings to use a correct one. It has less color accents (specifically less colored text), and they are the same for both modes, only grayscale values change between them. And Light/Dark themes can be used separately. New Contrast setting is available for System Preferences, Dark and Light themes - it changes the contrast for the whole app. All new visual Settings live in Account.
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { parseDashboardPreferences } from "~/utils/dashboardPreferences";
|
|
import { normalizeThemePreference, type ThemePreference } from "~/utils/themePreference";
|
|
|
|
const VALID_THEMES: ThemePreference[] = ["classic", "system", "dark", "light"];
|
|
|
|
describe("normalizeThemePreference", () => {
|
|
it("returns each valid value unchanged", () => {
|
|
for (const theme of VALID_THEMES) {
|
|
expect(normalizeThemePreference(theme)).toBe(theme);
|
|
}
|
|
});
|
|
|
|
it("falls back to dark for legacy/unknown values", () => {
|
|
expect(normalizeThemePreference("solarized")).toBe("dark");
|
|
expect(normalizeThemePreference("")).toBe("dark");
|
|
expect(normalizeThemePreference(42)).toBe("dark");
|
|
expect(normalizeThemePreference(null)).toBe("dark");
|
|
});
|
|
|
|
it("falls back to dark for undefined", () => {
|
|
expect(normalizeThemePreference(undefined)).toBe("dark");
|
|
});
|
|
});
|
|
|
|
describe("DashboardPreferences theme schema", () => {
|
|
it("accepts all four theme values", () => {
|
|
for (const theme of VALID_THEMES) {
|
|
const result = parseDashboardPreferences({ version: "1", projects: {}, theme });
|
|
expect(result.theme).toBe(theme);
|
|
}
|
|
});
|
|
|
|
it("accepts preferences without a theme", () => {
|
|
const result = parseDashboardPreferences({ version: "1", projects: {} });
|
|
expect(result.theme).toBeUndefined();
|
|
});
|
|
|
|
it("drops an invalid theme without erasing the rest of the preferences", () => {
|
|
const result = parseDashboardPreferences({
|
|
version: "1",
|
|
projects: {},
|
|
theme: "neon",
|
|
contrast: 999,
|
|
currentProjectId: "proj_123",
|
|
sideMenu: { isCollapsed: true },
|
|
});
|
|
expect(result.theme).toBeUndefined();
|
|
expect(result.contrast).toBeUndefined();
|
|
expect(result.currentProjectId).toBe("proj_123");
|
|
expect(result.sideMenu?.isCollapsed).toBe(true);
|
|
});
|
|
});
|