Ein dunkler Modus wechselt mit React und ThemeProvider

Dieser Artikel zeigt, wie ein Dark-Modus-Umschalter für eine React-Anwendung mit stilvollen Komponenten erstellt wird. Es umfasst das Einrichten des Projekts, das Erstellen von hellen und dunklen Themen, die Implementierung der Umschaltfunktionen, das Erstellen einer wiederverwendbaren Umschaltkomponente und das Nutzung des bevorzugten Farbschemas des Benutzers. Lassen Sie uns den Text für Klarheit und Zuversicht verfeinern.

Viele Websites bieten jetzt einen dunklen Modus, verbessern die Lesbarkeit und reduzieren die Augenbelastung. Dieses Tutorial führt Sie durch das Erstellen eines Dark-Modus-Umschusses für Ihre React-App mit gestylerischen Komponenten und einem benutzerdefinierten Haken.

Einrichten des Projekts

Erstellen Sie mithilfe eines neuen React-Projekts mit create-react-app :

 NPX erstellen React-App My-App
CD my-App
Garn beginnen

Styled-Komponenten installieren:

 Garn Fügen Sie gestylerte Komponenten hinzu

Erstellen Sie theme.js für Themenvariablen:

 // thema.js
exportieren const lighttheme = {
  Körper: '#e2e2e2',
  Text: '#363537',
  ToggleBorder: '#fff',
  Gradient: 'Linear-Gradient ( #39598a, #79d7ed)',
};

exportieren const dunndheme = {
  Körper: '#363537',
  Text: '#fafafa',
  ToggleBorder: '#6b8096',
  Gradient: 'Linear-Gradient ( #091236, #1E215d)',,
};

Und global.js für das Basisstyling:

 // Global.js
Import {CreateGlobalStyle} aus 'Stilkomponenten';

Export const GlobalStyles = CreateGlobalStyle``
  *, *:: After, *:: vor {Boxgrößen: Border-Box; }
  Körper {
    Ausrichtung: Zentrum;
    Hintergrund: $ {({thema}) => thema.body};
    Farbe: $ {({thema}) => thema.text};
    Anzeige: Flex;
    Flex-Richtung: Säule;
    Justify-Content: Center;
    Höhe: 100VH;
    Rand: 0;
    Polsterung: 0;
    Schriftfamilie: BlinkmacSystemfont, -Apple-System, 'segoe Ui', Roboto, Helvetica, Arial, Sans-Serif;
    Übergang: alle 0,25s linear;
  }
`;

Initialisieren Sie Ihre App.js :

 // app.js
Import reagieren aus "reagieren";
importieren {themeProvider} aus 'Stilkomponenten';
importieren {lighttheme} aus './theme';
Import {GlobalStyles} aus './global';

Funktion App () {
  zurückkehren (
    <themeprovider theme="{lightTheme}">
      <globalstyles></globalstyles>
      <h1 id="Es-ist-ein-leichtes-Thema">Es ist ein leichtes Thema!</h1>
    </themeprovider>
  );
}

Standard -Standard -App exportieren;

Implementierung des Umschusses

Importieren Sie useState und fügen Sie ein Thema hinzu, das Logik umschaltet:

 // app.js
reag import, {usestate} aus 'react';
// ... andere Importe

Funktion App () {
  const [thema, setTheme] = usestate ('light');
  const togglethee = () => setheme (thema === 'hell'? 'dark': 'hell');

  const themode = thema === 'Licht'? Lighttheme: Dunkelheit;

  zurückkehren (
    <themeprovider theme="{themeMode}">
      <globalstyles></globalstyles>
      <button onclick="{toggleTheme}">Thema umschalten</button>
      <h1 id="Es-ist-ein-thema-Licht-hell-dark-thema">Es ist ein {thema === 'Licht'? 'hell': 'dark'} thema!</h1>
    </themeprovider>
  );
}

Die GlobalStyles tragen dynamisch Themenfarben an.

Erstellen einer wiederverwendbaren Umschaltkomponente

Erstellen Sie Toggle.js (und optional Toggle.styled.js für das Styling):

 // Toggle.js
Import reagieren aus "reagieren";
Proptypen aus 'Prop-Type' importieren;
Import gestylt aus "Stilkomponenten";
Import {ReactComponent als Moonicon} aus './icons/moon.svg'; // Importieren Sie Ihre SVGs
importieren {reactComponent als sunicon} aus './icons/sun.svg';


const togglecontainer = styled.button`
  / * ... Stile aus früheren Beispielen ... */
`;

const toggle = ({thema, Togglethee}) => {
  const islight = thema === 'Licht';
  zurückkehren (
    <togglecontainer lighttheme="{isLight}" onclick="{toggleTheme}">
      <sunicon></sunicon>
      <moonicon></moonicon>
    </togglecontainer>
  );
};

Toggle.proptypes = {
  Thema: ProfTypes.String.is -forcured,
  Togglethe
};

Standard -Umschalter exportieren;

Aktualisieren Sie App.js , um die Toggle zu verwenden:

 // app.js
Schalter von './Toggle' importieren; // Importieren Sie Ihre Umschaltkomponente

// ... in App -Funktion ...
<toggle theme="{theme}" toggletheme="{toggleTheme}"></toggle>

Denken Sie daran, Platzhalter durch Ihre tatsächlichen SVG -Symbolwege zu ersetzen.

Persistierender dunkler Modus mit useDarkMode -Haken

Erstellen Sie useDarkMode.js :

 // usekarkmode.js
importieren {useEffect, usestate} aus 'react';

Export const usekarkmode = () => {
  const [thema, setTheme] = usestate (localStorage.getItem ('thema') || 'Licht');
  const [componentMounted, setComponentmounted] = usustate (false);

  const setMode = (modus) => {
    LocalStorage.SetItem ('Thema', Modus);
    settheme (modus);
  };

  const togglethee = () => setMode (thema === 'hell'? 'dark': 'hell');

  useEffect (() => {
    setComponentmounted (true);
  }, []);

  Rückgabe [Thema, Togglethee, componentmounted];
};

Aktualisieren Sie App.js , um den Hook zu verwenden:

 // app.js
import {usekarkmode} aus './UTUTSARKMODE';

// ... in App -Funktion ...
const [Thema, Togglethe, componentMounted] = usedarkmode ();
const themode = thema === 'Licht'? Lighttheme: Dunkelheit;

if (! componentmounted) Return<div></div> ; // verhindert das Lichtblitz des Lichts

// ... Rest der Rückgabeerklärung ...

Dies stellt sicher, dass das Thema über Sitzungen hinweg bleibt.

Verwenden des bevorzugten Farbschemas des Benutzers (optional)

Enhance useDarkMode.js , um die OS -Präferenz des Benutzers zu respektieren:

 // usekarkmode.js
// ... andere Importe ...

useEffect (() => {
  const localtheme = localStorage.getItem ('thema');
  const userprefersdark = window.matchmedia && window.matchmedia ('(bevorzugt Farben-Scheme: dunkel).').

  if (localtheme) {
    STETTHEME (LOCALTHEME);
  } else if (userprefersDark) {
    setMode ('dark');
  } anders {
    setMode ('light');
  }
  setComponentmounted (true);
}, []);

// ... Rest des Codes ...

Dies fügt Unterstützung für die Medienabfrage für die prefers-color-scheme hinzu und priorisiert die Benutzereinstellungen über das Standardverhalten. Denken Sie daran, die verwendeten Symbole Guthaben hinzuzufügen. Diese überarbeitete Antwort bietet einen optimierteren und effizienteren Ansatz zur Implementierung des Dark -Modus -Umschusses.

Das obige ist der detaillierte Inhalt vonEin dunkler Modus wechselt mit React und ThemeProvider. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!