Add night mode red overlay for dark-adapted vision

- NightModeProvider context (localStorage persisted) in contexts/NightMode.tsx
- Full-screen fixed red overlay (rgba 160,0,0 @ 55%, mix-blend-mode: multiply) fades in over the entire UI; multiply blend keeps dark backgrounds black while turning all white/bright content deep red
- Desktop: toggle button at the bottom of the sidebar, glows red when active
- Mobile: floating red circle button fixed just above the bottom nav bar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-17 07:38:37 +02:00
parent 561de4f13b
commit 4fbc578413
4 changed files with 110 additions and 15 deletions
+18
View File
@@ -0,0 +1,18 @@
import { createContext, useContext, useState, type ReactNode } from 'react';
interface NightModeCtx { on: boolean; toggle: () => void; }
const Ctx = createContext<NightModeCtx>({ on: false, toggle: () => {} });
export function NightModeProvider({ children }: { children: ReactNode }) {
const [on, setOn] = useState(() => localStorage.getItem('astronome_night') === '1');
const toggle = () => setOn(v => {
const next = !v;
localStorage.setItem('astronome_night', next ? '1' : '0');
return next;
});
return <Ctx.Provider value={{ on, toggle }}>{children}</Ctx.Provider>;
}
export const useNightMode = () => useContext(Ctx);