mirror of
https://github.com/block/buzz.git
synced 2026-11-13 12:51:34 +00:00
Refresh invite and repository web pages (#1808)
Signed-off-by: Fizz <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co> Co-authored-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
This commit is contained in:
@@ -15,33 +15,35 @@ type ThemeContextValue = {
|
||||
setTheme: (theme: Theme) => void;
|
||||
};
|
||||
|
||||
const STORAGE_KEY = "buzz-web-theme";
|
||||
|
||||
const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
|
||||
|
||||
function getSystemDark(): boolean {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
}
|
||||
|
||||
function getInitialTheme(): Theme {
|
||||
if (!import.meta.env.DEV) return "system";
|
||||
|
||||
const previewTheme = new URLSearchParams(window.location.search).get(
|
||||
"previewTheme",
|
||||
);
|
||||
return previewTheme === "light" || previewTheme === "dark"
|
||||
? previewTheme
|
||||
: "system";
|
||||
}
|
||||
|
||||
function applyClass(isDark: boolean) {
|
||||
const root = document.documentElement;
|
||||
root.classList.remove("light", "dark");
|
||||
root.classList.add(isDark ? "dark" : "light");
|
||||
}
|
||||
|
||||
function readStoredTheme(): Theme {
|
||||
const stored = window.localStorage.getItem(STORAGE_KEY);
|
||||
if (stored === "light" || stored === "dark" || stored === "system") {
|
||||
return stored;
|
||||
}
|
||||
return "system";
|
||||
}
|
||||
|
||||
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [theme, setThemeState] = useState<Theme>(readStoredTheme);
|
||||
const [theme, setThemeState] = useState<Theme>(getInitialTheme);
|
||||
const [isDark, setIsDark] = useState<boolean>(() => {
|
||||
const t = readStoredTheme();
|
||||
const dark = t === "system" ? getSystemDark() : t === "dark";
|
||||
const initialTheme = getInitialTheme();
|
||||
const dark =
|
||||
initialTheme === "system" ? getSystemDark() : initialTheme === "dark";
|
||||
applyClass(dark);
|
||||
return dark;
|
||||
});
|
||||
@@ -65,7 +67,6 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
}, [theme]);
|
||||
|
||||
const setTheme = useCallback((t: Theme) => {
|
||||
window.localStorage.setItem(STORAGE_KEY, t);
|
||||
setThemeState(t);
|
||||
}, []);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user