);}Remix涓婚鍒囨崲鍒囨崲涓婚鎺ュ彛/api/themeimport{typeLoaderFunction,redirect,typeActionFunction,json}from'@remix-杩愯/鑺傜偣'锛涗粠'~/components/atom/use-theme'瀵煎叆{涓婚}锛涗粠'~/services/session.server'瀵煎叆{getSession}锛涘鍑哄父閲忔搷浣滐細ActionFunction=寮傛锛坽璇锋眰}锛?>{寮€鍏砲(request.method){case'PUT':case'POST':{constsession=awaitgetSession(request.headers.get('Cookie'));constdata:{theme:string}=awaitrequest.json();consttheme=themes.map((x)=>x.id).includes(data.theme)锛焏ata.theme:'澶嶅彜';session.set('涓婚',涓婚);returnjson({success:true},{headers:{'Set-Cookie':awaitsessionStore.commitSession(session)}});}榛樿鍊硷細{returnjson({success:false},{status:403});}}};exportconstloader:LoaderFunction=()=>{throwredirect('/');};ThemeProviderimport{createContext}from'react';exportconstthemes=[{name:'馃対銆噇ight',id:'light'},{name:'馃寶dark',id:'dark'},{name:'馃cupcake',id:'cupcake'},{name:'馃悵bumblebee',id:'bumblebee'},{name锛?鉁筹笍Emerald'锛宨d锛?emerald'}锛寋name锛?馃彚Corporate'锛宨d锛?corporate'}锛寋name锛?馃寖synthwave'锛宨d锛?synthwave'}锛寋name锛?馃懘retro',id:'retro'},{name:'馃銆嘽yberpunk',id:'cyberpunk'},{name:'馃尭銆噕alentine',id:'valentine'},{name:'馃巸銆噃alloween',id:'涓囧湥鑺?},{name:'馃尫garden',id:'鑺卞洯'},{name:'馃尣forest',id:'forest'},{name:'馃悷aqua',id:'aqua'},{name:'馃憮銆噇ofi',id:'lofi'},{name:'馃枍銆噋astel',id:'pastel'},{name:'馃鈥嶏笍銆噁antasy',id:'fantasy'},{name:'馃摑Wireframe',id:'wireframe'},{name:'馃彺black',id:'black'},{name:'馃拵luxury',id:'luxury'},{name:'馃鈥嶁檪锔廳racula',id:'寰峰彜鎷?},{name:'馃枿銆嘋MYK',id:'cmyk'},{name:'馃崄銆嘇utumn',id:'绉嬪ぉ'},{name:'馃捈銆嘊usiness',id:'business'},{鍚嶇О:'馃拪銆囬吀',鎴慸:'acid'},{name:'馃崑銆嘗emonade',id:'lemonade'},{name:'馃寵銆嘚ight',id:'night'},{name:'鈽曪笍銆嘋offee',id:'鍜栧暋'},{name:'鉂勶笍銆嘩inter',id:'winter'}];typeThemeContextType=[string|绌猴紝React.Dispatch>];constThemeContext=createContext(undefined);ThemeContext.displayName='ThemeContext';constprefersLightMQ='(prefers-color-scheme:light)';瀵煎嚭鍑芥暟ThemeProvider({children,themeAction='/api/theme',specifiedTheme}:{children:ReactNode;themeAction:string;specifiedTheme:string|null;}){const[theme,setTheme]=useState(()=>{if(specifiedTheme){returnTHEMES.includes(specifiedTheme)?specifiedTheme:null;}if(typeofwindow!=='object')returnnull;returnwindow.matchMedia(prefersLightMQ).matches锛熲€滄儏浜鸿妭鈥濓細鈥滃鍙も€濓紱}锛夛紱甯告暟mountRun=React.useRef(false);useEffect(()=>{if(!mountRun.current){mountRun.current=true;return;}if(!theme)return;//eslint-disable-next-line@typescript-eslint/no-floating-promisesfetch(`${themeAction}`,{method:'POST',body:JSON.stringify({theme})});},[theme]);useEffect(()=>{constmediaQuery=window.matchMedia(prefersLightMQ);consthandleChange=()=>{setTheme(mediaQuery.matches?'valentine':'retro');};mediaQuery.addEventListener('change',handleChange);return()=>mediaQuery.removeEventListener('change',handleChange);},[]);return({children});}瀵煎嚭鍑芥暟useTheme(){constcontext=useContext(ThemeContext);if(context===undefined){thrownewError('useTheme蹇呴』鍦═hemeProvider涓娇鐢?);}杩斿洖缁璭xt;}浣跨敤Themeexportconstloader:LoaderFunction=async({request})=>{constsession=awaitgetSession(request.headers.get('Cookie'));consttheme=(session.get('theme')asstring)||'澶嶅彜鐨?;returnjson({theme});};瀵煎嚭榛樿鍑芥暟App(){const{theme}=useLoaderData();return();}鍒囨崲涓婚缁刬mport{useI18n}from'remix-i18n';import{themes}from'./use-theme';exportfunctionToggleTheme(){const{t}=useI18n();杩斿洖({/*{$t('change-theme-btn')}*/}