Implementace nočního režimu v React Hooks

Mnoho aplikací nyní poskytuje noční/tmavý režim, protože je pro oči příjemnější a zlepšuje viditelnost, takže jsem chtěl vytvořit jednoduchou aplikaci pro reakci a implementovat noční režim. Níže je ukázáno, co jsem udělal, abych toho dosáhl.

Nejprve jsem vytvořil tlačítko pro zapínání/vypínání nočního režimu.

   <button
      className="theme-btn"
      onClick={() => {}}
   />

a stylizoval to takto

.theme-btn {
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border-width: 1px;
  background: pink;
  border-color: pink;
  margin-right: 10px;
  cursor: pointer;
}

Pak jsem přidal nějaký text a dal mu styly, moje komponenta aplikace vypadala takto

return (
    <div>
      <div className="nav">
        <button
          className="theme-btn"
          onClick={() => {}}
        />
      </div>
     <h1>
        Dark Theme
     </h1>
     <h2>
        Dark theme is so cool!
     </h2>
    </div>
 );

.nav {
  display: flex;
  flex: 1;
  flex-direction: "row";
  align-items: center;
  width: "100%";
  height: 40px;
}

Poté jsem inicializoval stav pomocí React Hooks s jeho počáteční hodnotou jako false a přepnul jeho hodnotu mezi true a false po kliknutí na tlačítko tmavého režimu.

 const [isDarkTheme, setIsSetDarkTheme] = useState(false);

metoda onClick vypadá takto

   onClick={() => {
      setIsSetDarkTheme(!isDarkTheme);
   }}

Nyní jsem na text, jako je tento, použil podmíněný styl

   style = {isDarkTheme ? { color: "white" } : { color: "black" }}

Také jsem inicializoval další stav, který bude zobrazovat text tlačítka podle zvoleného režimu.
Celá součástka vypadala takto

export default function App() {
  const [isDarkTheme, setIsSetDarkTheme] = useState(false);
  const [themeText, setThemeText] = useState("Go Dark");
  return (
    <div
      style={
        isDarkTheme
          ? { backgroundColor: "black" }
          : { backgroundColor: "white" }
      }
    >
      <div className="nav">
        <button
          className="theme-btn"
          onClick={() => {
            isDarkTheme ? setThemeText("Go Dark") : setThemeText("Go Light");
            setIsSetDarkTheme(!isDarkTheme);
          }}
        />
        <p style={isDarkTheme ? { color: "white" } : { color: "black" }}>
          {themeText}
        </p>
      </div>
      <h1 style={isDarkTheme ? { color: "white" } : { color: "black" }}>
        Dark Theme
      </h1>
      <h2 style={isDarkTheme ? { color: "white" } : { color: "black" }}>
        Dark theme is so cool!
      </h2>
    </div>
  );
}

Můžete si ponechat isDarkTheme stav v redux, chcete-li jej použít ve více komponentách napříč aplikací, můžete také vytvořit dark-theme a light-theme třídy stylů a používat je v celé aplikaci.

Zkuste zde spustit demo nočního režimu