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:
@@ -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);
|
||||
Reference in New Issue
Block a user