浣跨敤CSS鍙橀噺鍒囨崲娣辫壊妯″紡鏈枃浠eact涓轰緥銆備娇鐢╟ss鍙橀噺鍒囨崲娣辫壊妯″紡锛屼究浜庣淮鎶ゅ拰鎵╁睍銆俢ss鍙橀噺鐨勪娇鐢細.selector{--black-color:#282c34;}:root{--black-color:#282c34;}閫夐」1璁剧疆涓婚瀵瑰簲鐨凜SS鍙橀噺锛屽垏鎹富棰樺彧闇€瑕佸垏鎹ss灞炴€х殑鍙橀噺鍊笺€備緥濡傦細鍒囨崲APP鍏冪礌鐨勪富棰橈紝鍙渶瑕佸垏鎹pp鐨刢olor鍜宐ackground-color瀵瑰簲鐨凜SS鍙橀噺鐨勫彉閲忓€煎嵆鍙€?root{/*妯″紡寮€鍏冲彉閲忥紝榛樿鐏厜妯″紡*/--current-background-color:var(--light-background-color);--current-primary-color:var(--light-primary-color);/*娴呰壊涓婚*/--light-primary-color:#666;--light-background-color:#fff;/*娣辫壊涓婚*/--dark-primary-color:#fff;--dark-background-color:#282c34;}.App{color:var(--current-primary-color);鑳屾櫙鑹诧細var(--current-background-color);鏈€灏忛珮搴︼細100vh锛涙樉绀猴細寮规€э紱寮规€ф柟鍚戯細鍒楋紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱瀛椾綋澶у皬锛歝alc(10px+2vmin)锛泃ransition:background-color0.3s;}閭ｄ箞濡備綍鍒囨崲锛歳oot涓?-current-background-color鐨勫€煎憿锛?.鎵惧埌瀹?.鏇挎崲瀹冩鏌ュ畠//鎵惧埌锛歳oot涓嬬殑鎵€鏈夊畾涔夐兘浠?-currentvariableconstcurrentCssVar=Array.from(document.styleSheets).reduce((acc,sheet)=>(acc=[...acc,...Array.from(sheet.cssRules).reduce((def,rule)=>(def=rule.selectorText===":root"?[...def,...Array.鏉ヨ嚜锛堣鍒欍€傛牱寮忥級.filter锛堬紙鍚嶇О锛?>name.startsWith("--current")),]:def),[]),]),[]);灏嗗叾鏇存敼涓篶urrentCssVar.forEach((item)=>{document.documentElement.style.setProperty(item,`var(--${themeName}${item.substring(9)})`);});瀹屾暣鐨凧S浠ｇ爜锛歩mportReact,{useEffect,useState}from"react";浠庘€淍bit/toringo.comp.product-list鈥濆鍏ラ」鐩紱浠庘€淍bit/campgladiator.cgui.components.atoms.switch鈥濆鍏ュ紑鍏筹紱瀵煎叆鈥?/App.css鈥濓紱浠庘€?/util鈥濆鍏etTheme";//榛樿涓婚鍙互閫氳繃鏈嶅姟鍣ㄣ€佸瓨鍌ㄧ瓑鑾峰彇銆俢onstdefaultTheme='light';functionApp(){const[mode,setMode]=useState(defaultTheme);useEffect(()=>{setTheme(妯″紡);},[妯″紡]);return(
