feat(midsummer): theme state provider + data-midsummer attribute

frontend/src/hooks/useMidsummer.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+
+const KEY = 'mo-midsummer';
+const SOUND_KEY = 'mo-midsummer-sound';
+
+interface MidsummerCtx {
+  enabled: boolean;
+  toggle: () => void;
+  soundOn: boolean;
+  toggleSound: () => void;
+}
+
+const Ctx = createContext<MidsummerCtx | null>(null);
+
+export const MidsummerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  // Default ON: only the literal "off" disables it.
+  const [enabled, setEnabled] = useState<boolean>(() => localStorage.getItem(KEY) !== 'off');
+  const [soundOn, setSoundOn] = useState<boolean>(() => localStorage.getItem(SOUND_KEY) !== 'off');
+
+  useEffect(() => {
+    const el = document.documentElement;
+    if (enabled) el.setAttribute('data-midsummer', '');
+    else el.removeAttribute('data-midsummer');
+    localStorage.setItem(KEY, enabled ? 'on' : 'off');
+  }, [enabled]);
+
+  useEffect(() => {
+    localStorage.setItem(SOUND_KEY, soundOn ? 'on' : 'off');
+  }, [soundOn]);
+
+  const toggle = useCallback(() => setEnabled(e => !e), []);
+  const toggleSound = useCallback(() => setSoundOn(s => !s), []);
+
+  return (
+    <Ctx.Provider value={{ enabled, toggle, soundOn, toggleSound }}>
+      {children}
+    </Ctx.Provider>
+  );
+};
+
+export function useMidsummer(): MidsummerCtx {
+  const c = useContext(Ctx);
+  if (!c) throw new Error('useMidsummer must be used within MidsummerProvider');
+  return c;
+}