如何有效地为网页编码暗模式开关

Question

我试图为网页设计一个暗模式开关，但我不确定我是否以最有效的方式实现了它。我基本上为网页的每个部分的每个文件创建了一个额外的副本(以"2"结尾的文件(，并更改了这些副本的功能中的颜色属性。然后，如果黑暗模式状态没有被触发，我会返回原始功能，或者如果被触发，则返回稍微修改过的功能。我想知道是否有比我使用的暴力方法更好的方法来创建暗模式开关。Landing((函数的灵感来自https://medium.com/heuristics/react-dark-mode-switch-in-material-ui-dashboard-82fcf1cded66.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Switch from '@material-ui/core/Switch';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import Header from '../Landing Page/components/Header/Header';
import Header2 from '../Landing Page/components/Header/Header2';
import StickyHeader from '../Landing Page/components/Header/StickyHeader';
import ProductSection from '../Landing Page/components/Product/ProductSection';
import ProductSection2 from '../Landing Page/components/Product/ProductSection2';
import HardwareSection from '../Landing Page/components/HardwareSection/HardwareSection';
import HardwareSection2 from '../Landing Page/components/HardwareSection/HardwareSection2';
import DashboardSection from '../Landing Page/components/DashboardSection/DashboardSection';
import DashboardSection2 from '../Landing Page/components/DashboardSection/DashboardSection2';
import MarketplaceSection from '../Landing Page/components/MarketplaceSection/MarketplaceSection';
import MarketplaceSection2 from '../Landing Page/components/MarketplaceSection/MarketplaceSection2';
import CustomModelSection from '../Landing Page/components/CustomModelSection/CustomModelSection';
import CustomModelSection2 from '../Landing Page/components/CustomModelSection/CustomModelSection2';
import CommunicationSection from '../Landing Page/components/CommunicationSection/CommunicationSection';
import CommunicationSection2 from '../Landing Page/components/CommunicationSection/CommunicationSection2';
import TableSection from '../Landing Page/components/TableSection/TableSection';
import TableSection2 from '../Landing Page/components/TableSection/TableSection2';
import PartnerSection from '../Landing Page/components/PartnerSection/PartnerSection';
import PartnerSection2 from '../Landing Page/components/PartnerSection/PartnerSection2';
import GetStarted from '../Landing Page/components/Bottom/GetStarted';
import GetStarted2 from '../Landing Page/components/Bottom/GetStarted2';
import Footer from '../Landing Page/components/Bottom/Footer';
import Footer2 from '../Landing Page/components/Bottom/Footer2';
const useStyles = makeStyles((theme) => ({
root: {
minHeight: '100vh',
backgroundImage: "url('https://wallpaperaccess.com/full/2180654.jpg')",
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain',
},
dark: {
minHeight: '100vh',
backgroundImage: "url('https://wallpaperaccess.com/full/1685406.jpg')",
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain',
},
}));
export default function Landing() {
const [darkPage, setDarkPage] = React.useState(false);
const scheme = darkPage ? 'dark' : 'light';
const darkScheme = createMuiTheme({
palette: {
type: scheme,
},
});
const handleChange = () => {
setDarkPage(!darkPage);
};
const classes = useStyles();
if (!darkPage) {
return (
<ThemeProvider theme={darkScheme}>
<div className={classes.root}>
<CssBaseline />
<Header />
<Switch checked={darkPage} onChange={handleChange} />
<StickyHeader />
<ProductSection />
<HardwareSection />
<DashboardSection />
<MarketplaceSection />
<CustomModelSection />
<CommunicationSection />
<TableSection />
<PartnerSection />
<GetStarted />
<Footer />
</div>
</ThemeProvider>
);
} else if (darkPage) {
return (
<ThemeProvider theme={darkScheme}>
<div className={classes.dark}>
<CssBaseline />
<Header2 />
<Switch checked={darkPage} onChange={handleChange} />
<StickyHeader />
<ProductSection2 />
<HardwareSection2 />
<DashboardSection2 />
<MarketplaceSection2 />
<CustomModelSection2 />
<CommunicationSection2 />
<TableSection2 />
<PartnerSection2 />
<GetStarted2 />
<Footer2 />
</div>
</ThemeProvider>
);
}
}

Answer 1

实际上你已经非常接近了。更好的方法是依赖您创建的ThemeProvider。该提供商可以将活动主题(在您的情况下为"暗"或"亮"(传播到应用程序中的其他组件。然后，这些组件可以相应地调整其样式。React Context文档实际上有一个完美的例子(https://reactjs.org/docs/context.html#examples)。它将向您展示如何创建主题按钮。您可以将同样的策略应用于其他应用程序组件。