1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import { Theme } from "@radix-ui/themes";
import { type FC, type ReactNode, useEffect, useState } from "react";

import { ToastProvider } from "../contexts/Toast.tsx";

export interface ThemeProviderProps {
	className?: string | undefined;

	children: ReactNode;
}

export const ThemeProvider: FC<ThemeProviderProps> = ({ children, className }) => {
	const [isDark] = useState(() => window.matchMedia("(prefers-color-scheme: dark)"));

	// `MediaQueryList.matches` は常に最新の状態を表すため、別に保存してその値を読む
	// 必要はない。この state は単に再レンダリングを引き起こすためだけのもの。
	const [, setUpdater] = useState(() => isDark.matches);

	useEffect(() => {
		const listener = (event: MediaQueryListEvent) => {
			setUpdater(event.matches);
		};

		isDark.addEventListener("change", listener);

		return () => void isDark.removeEventListener("change", listener);
	}, [isDark]);

	return (
		<Theme className={className} appearance={isDark.matches ? "dark" : "light"}>
			<ToastProvider>{children}</ToastProvider>
		</Theme>
	);
};