? ????? ???? ???? ???? React ?? ????? ?? ?? ?? ??? ??? ??? ?????. ???? ???? ??, ?? ??? ?? ??, ?? ?? ??, ??? ??? ?? ?? ?? ?? ? ???? ???? ? ???? ???? ?? ?????. ???? ???? ?? ???? ?????.

?? ? ???? ?? ??? ??? ???? ???? ????? ? ??? ????. ? ????? ???? ????? ??? ?? ??? ???? React ?? ?? ?? ?? ??? ????? ?????.

???? ??

create-react-app ???? ??? React ????? ???? ??????.

 NPX Create-React-App My-App
CD My-App
?? ??

???? ???? ?? :

 ??? ???? ?? ??? ?????

?? ??? ?? theme.js ????.

 // ?? .js
???? const lighttheme = {
  ?? : '#e2e2e2',
  ??? : '#363537',
  ?? ?? : '#fff',
  ????? : '?? ?? ( #39598a, #79d7ed)',
};

???? const darktheme = {
  ?? : '#363537',
  ??? : '#fafafa',
  ?? ?? : '#6B8096',
  ????? : '?? ???? ( #091236, #1e215d)',
};

?? ?????? global.js :

 // global.js
'Styled-Components'?? {createglobalstyle} ?? ??;

Const GlobalStyles = CreateGlobalstyle`? ??????
  *, *:: After, *:: ?? {Box-Sizing : Border-Box; }
  ? {
    ?? ?? : ??;
    ?? : $ {({??}) => ??};
    ?? : $ {({??}) => ?? .text};
    ????? : Flex;
    ??? ?? : ?;
    ??? ??? : ??;
    ?? : 100VH;
    ?? : 0;
    ?? : 0;
    Font-Family : BlinkMacsystemFont, -Apple-System, 'Segoe UI', Roboto, Helvetica, Arial, Sans-Serif;
    ?? : ?? 0.25S ??;
  }
`;;

App.js ??? :

 // app.js
'React'?? React React;
'Styled-Components'?? {themeprovider} ?? ??;
'./theme'?? {lighttheme} ?? ??;
'./global'?? {globalstyles} ?? ??;

?? ? () {
  ?? (
    <themeprovider theme="{lightTheme}">
      <globalstyles></globalstyles>
      <h1>??? ?????!</h1>
    </themeprovider>
  );
}

?? ? ????;

?? ??

useState ?? ?? ? ?? ??? ?? ?? :

 // app.js
import React, {usestate} 'react';
// ... ?? ??

?? ? () {
  const [??, setTheme] = usestate ( 'light');
  const toggletheme = () => setTheme (?? === 'light'? 'dark': 'light');

  const thememode = ?? === 'light'? Lighttheme : Darktheme;

  ?? (
    <themeprovider theme="{themeMode}">
      <globalstyles></globalstyles>
      <button onclick="{toggleTheme}">?? ??</button>
      <h1>{?? === 'light'???? 'Light': 'Dark'} ??!</h1>
    </themeprovider>
  );
}

GlobalStyles ?? ??? ???? ?????.

??? ??? ?? ?? ?? ??

Toggle.js ???? (????? ?? ????? Toggle.styled.js ) :

 // toggle.js
'React'?? React React;
'prop-types'?? proptypes ?? ??;
'???? ???'?? ???? ? ??;
'./icons/moon.svg'?? {reactComponent as Moonicon} import import; // SVG? ?????
'./icons/sun.svg'?? {ReactComponent as Sunicon} import import;


const togglecontainer = Styled.button`
  / * ... ?? ??? ??? ... */
`;;

const toggle = ({??, toggletheme}) => {
  const islight = ?? === '?';
  ?? (
    <togglecontainer lighttheme="{isLight}" onclick="{toggleTheme}">
      <sunicon></sunicon>
      <moonicon></moonicon>
    </togglecontainer>
  );
};

toggle.proptypes = {
  ?? : proptypes.string.isrequired,
  TOGGLETHEME : proptypes.func.isrequired,
};

???? ?? ??;

Toggle ?? ??? ????? App.js ???????.

 // app.js
'./toggle'?? ?? ?? ??; // ?? ?? ??? ?????

// ... ?? ? ?? ...
<toggle theme="{theme}" toggletheme="{toggleTheme}"></toggle>

?? ???? ?? SVG ??? ??? ???????.

useDarkMode ????? ???? ?? ??

useDarkMode.js ??????.

 // usedarkMode.js
'react'?? {useeffect, usestate} import;

const usedarkMode = () => {????
  const [??, setTheme] = usestate (localStorage.getItem ( '??') || 'light');
  const [componentMounted, setComponentMounted] = usestate (false);

  const setMode = (??) => {
    localStorage.setItem ( '??', ??);
    setTheme (??);
  };

  const toggletheme = () => setMode (?? === 'light'? 'dark': 'light');

  useeffect (() => {
    setComponentMounted (true);
  }, []);

  return [??, ?? ? ??, ?? ??];
};

??? ????? App.js ????????.

 // app.js
'./usedarkmode'?? {usedarkmode} import;

// ... ?? ? ?? ...
const [??, toggletheme, componentmounted] = usedarkMode ();
const thememode = ?? === 'light'? Lighttheme : Darktheme;

if (! componentMounted) reto<div></div> ; // ??? ??? ???? ?????

// ... ??? ?? ??? ...

?? ?? ??? ???? ?????.

???? ???? ? ??? ?? (?? ??)

???? OS ?? ??? ????? useDarkMode.js ??????.

 // usedarkMode.js
// ... ?? ?? ...

useeffect (() => {
  const localtheme = localstorage.getItem ( '??');
  const userprefersdark = window.matchmedia && wind

  if (localtheme) {
    setTheme (localtheme);
  } else if (userPrefersDark) {
    setMode ( 'Dark');
  } ? ?? {
    setMode ( 'light');
  }
  setComponentMounted (true);
}, []);

// ... ??? ?? ...

?? ?? ???? ??? ?? ?? ??? ??? prefers-color-scheme ??? ??? ?? ??? ?????. ?? ? ???? ?? ???? ???????. ? ?? ? ??? Dark Mode ??? ???????? ????? ???? ?? ??? ?????.

? ??? Dark Mode? React ? Temprovider? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!