move theme related data from blog to theme

apps/blog/src/theme.tsx

@@ -0,0 +1,55 @@
+// import "./DarkMode.css"
+import { ChangeEventHandler } from "react"
+
+/* NEW (START) */
+const setDark = () => {
+	localStorage.setItem("theme", "dark")
+	document.documentElement.setAttribute("data-theme", "dark")
+}
+
+const setLight = () => {
+	localStorage.setItem("theme", "light")
+	document.documentElement.setAttribute("data-theme", "light")
+}
+
+const storedTheme = localStorage.getItem("theme")
+
+const prefersDark =
+	window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+
+const defaultDark =
+	storedTheme === "dark" || (storedTheme === null && prefersDark)
+
+if (defaultDark) {
+	setDark()
+}
+
+const toggleTheme: ChangeEventHandler<HTMLInputElement> = (e) => {
+	if (e.target.checked) {
+		setDark()
+	} else {
+		setLight()
+	}
+}
+/* NEW (END) */
+
+const DarkMode = () => {
+	return (
+		<div className="toggle-theme-wrapper">
+			<span>☀️</span>
+			<label className="toggle-theme" htmlFor="checkbox">
+				<input
+					type="checkbox"
+					id="checkbox"
+					// NEW
+					onChange={toggleTheme}
+					defaultChecked={defaultDark}
+				/>
+				<div className="slider round"></div>
+			</label>
+			<span>🌒</span>
+		</div>
+	)
+}
+
+export default DarkMode