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.
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { useEffect } from "react";
|
|
import { type ThemePreference } from "~/utils/themePreference";
|
|
|
|
/**
|
|
* Keeps `data-theme` on <html> in sync with the preference. For `system` it
|
|
* follows the OS color scheme live; for pinned themes it writes the attribute
|
|
* explicitly - React can skip the write when its virtual DOM already matched
|
|
* the SSR fallback while the inline script had changed the real attribute.
|
|
* The single resolution rule (dark vs light) lives here and in the blocking
|
|
* inline script in root.tsx; downstream consumers react to the `data-theme`
|
|
* mutation (see useThemeColor).
|
|
*/
|
|
export function useSystemThemeSync(preference: ThemePreference) {
|
|
useEffect(() => {
|
|
if (preference !== "system") {
|
|
document.documentElement.setAttribute("data-theme", preference);
|
|
return;
|
|
}
|
|
|
|
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
|
const apply = () => {
|
|
document.documentElement.setAttribute("data-theme", media.matches ? "dark" : "light");
|
|
};
|
|
|
|
apply();
|
|
media.addEventListener("change", apply);
|
|
return () => media.removeEventListener("change", apply);
|
|
}, [preference]);
|
|
}
|