Блог

Я пытался разработать переключатель темного режима для веб-страницы, и я не уверен, что реализовал его наиболее эффективным способом. Я в основном создал дополнительную копию (файлы, заканчивающиеся на «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>
    );
  }
}
 

На самом деле вы очень близки. Лучший способ сделать это-полагаться на созданный вами поставщик тем. Этот поставщик может распространять активную тему (в вашем случае «темную» или «светлую») на другие компоненты приложения. Затем эти компоненты могут соответствующим образом изменить свои стили. Документация по контексту React на самом деле имеет идеальный пример для этого (https://reactjs.org/docs/context.html#examples). Он покажет вам, как создать тематическую кнопку. Вы можете применить ту же стратегию к другим компонентам приложения.