React Native Academy · leksjon

En temakontekst med bryter for mørk modus

Bygg en ThemeContext som lagrer det gjeldende fargeskjemaet, eksponer en toggle-funksjon og bruk temafarger på komponenter i hele appen.

Leksjon 3 av 413 trinn

En temakontekst med bryter for mørk modus er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hvorfor en temakontekst?

En temakontekst samler farge- og typografiverdier på ett sted, slik at alle komponentene i appen leser fra én felles kilde. Når brukeren bytter mellom lys og mørk modus, utløser oppdateringen av kontekstverdien en ny gjengivelse av alle komponentene som bruker konteksten, med de nye fargene – uten behov for prop drilling eller manuelle oppdateringer.

Definere objekter for lyst og mørkt tema

Start med å definere to temaobjekter med de samme nøklene. Når begge temaene bruker identiske nøkler, kan alle komponenter bruke en farge uten å vite hvilken modus som er aktiv – de leser bare fra det gjeldende temaobjektet, og temaene håndterer resten.

export const lightTheme = {
  background: '#ffffff',
  text: '#1a1a2e',
  card: '#f5f5f5',
  primary: '#6200ee',
  border: '#e0e0e0',
};

export const darkTheme = {
  background: '#1a1a2e',
  text: '#e8e8f0',
  card: '#16213e',
  primary: '#bb86fc',
  border: '#333355',
};

Opprette ThemeContext

Opprett en ThemeContext som inneholder det gjeldende temaobjektet og en funksjon for å bytte tema. Standardverdien gjenspeiler strukturen til det Provider vil levere, slik at det er trygt å destrukturere verdien i komponenter som bruker konteksten, selv om Provider ved et uhell mangler i tester.

import { createContext, useContext, useState } from 'react';
import { lightTheme, darkTheme } from './themes';

export const ThemeContext = createContext({
  theme: lightTheme,
  isDark: false,
  toggleTheme: () => {},
});

Bygge ThemeProvider

ThemeProvider håndterer en boolsk isDark-tilstand og utleder det aktive temaobjektet fra den. Funksjonen toggleTheme bytter den boolske verdien. Memoiser kontekstverdien med useMemo, slik at en ny objektreferanse bare opprettes når isDark faktisk endres.

export function ThemeProvider({ children }) {
  const [isDark, setIsDark] = useState(false);

  const value = useMemo(() => ({
    theme: isDark ? darkTheme : lightTheme,
    isDark,
    toggleTheme: () => setIsDark((d) => !d),
  }), [isDark]);

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

En egendefinert useTheme-hook

Eksporter en useTheme-hook som pakker inn useContext(ThemeContext). Komponenter kan kalle useTheme() for å få en ren og beskrivende import, i stedet for å måtte huske å sende inn kontekstobjektet. Hooken kaster også en nyttig feilmelding hvis den kalles utenfor en ThemeProvider.

export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be inside ThemeProvider');
  return ctx;
}

Bruke temafarger i en komponent

Alle komponenter som leser fra useTheme, viser automatisk riktige farger for den gjeldende modusen. Send temafargene inn i innebygde stiler eller StyleSheet-stiler. Når temaet byttes, gjengis alle komponentene som bruker det, på nytt med de nye verdiene.

function Card({ title, body }) {
  const { theme } = useTheme();

  return (
    <View style={{
      backgroundColor: theme.card,
      borderColor: theme.border,
      borderWidth: 1,
      borderRadius: 8,
      padding: 16,
    }}>
      <Text style={{ color: theme.text, fontWeight: 'bold' }}>{title}</Text>
      <Text style={{ color: theme.text }}>{body}</Text>
    </View>
  );
}

En bryter på innstillingsskjermen

Legg til en bryter for mørk modus på innstillingsskjermen. Verdien til Switch-komponenten er isDark fra temakonteksten, og onValueChange kaller toggleTheme. Det er ikke nødvendig med lokal tilstand – bryteren styrer den globale tematilstanden direkte.

function SettingsScreen() {
  const { isDark, toggleTheme, theme } = useTheme();

  return (
    <View style={{ backgroundColor: theme.background, flex: 1, padding: 24 }}>
      <Text style={{ color: theme.text }}>Dark Mode</Text>
      <Switch
        value={isDark}
        onValueChange={toggleTheme}
        trackColor={{ true: theme.primary }}
      />
    </View>
  );
}

Lagre temainnstillingen

Lagre brukerens temainnstilling i AsyncStorage, slik at den bevares når appen startes på nytt. I ThemeProvider laster du den lagrede innstillingen i en useEffect ved montering og initialiserer tilstanden tilsvarende. Lagre den nye verdien i toggleTheme hver gang brukeren bytter modus.

export function ThemeProvider({ children }) {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    AsyncStorage.getItem('theme').then((saved) => {
      if (saved === 'dark') setIsDark(true);
    });
  }, []);

  const toggleTheme = () => {
    const next = !isDark;
    setIsDark(next);
    AsyncStorage.setItem('theme', next ? 'dark' : 'light');
  };

  // ...
}

Respektere systemtemaet

React Native-hooken useColorScheme returnerer enhetens gjeldende fargeskjema («light» eller «dark»). Du kan bruke dette som standardtema i stedet for alltid å starte i lys modus. Hvis brukeren ikke uttrykkelig har valgt en innstilling, gir det den beste opplevelsen fra start å følge systeminnstillingen.

import { useColorScheme } from 'react-native';

function ThemeProvider({ children }) {
  const systemScheme = useColorScheme();
  const [isDark, setIsDark] = useState(systemScheme === 'dark');
  // ...
}

Bruke temaet i navigasjonsoverskriften

Navigasjonsoverskriften kan også reagere på temaforandringer. Send en funksjon til screenOptions på navigatoren. Funksjonen leser fra temakonteksten og returnerer alternativer for overskriftsstilen. Når temaet endres, evaluerer navigatoren alternativene på nytt og oppdaterer overskriftsfargene tilsvarende.

function AppStack() {
  const { theme } = useTheme();

  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: theme.card },
        headerTintColor: theme.text,
      }}
    >
      <Stack.Screen name='Home' component={HomeScreen} />
    </Stack.Navigator>
  );
}

Hindre flimring når temaet lastes inn

Når det lagrede temaet lastes inn fra AsyncStorage ved oppstart, går det et kort øyeblikk før innstillingen er gjenopprettet. Hindre at feil tema vises et øyeblikk ved å vise en splash-skjerm eller utsette navigeringen til temaet er lastet inn. Bruk en isThemeReady-tilstand i provideren, og gjengi null frem til den er true.

const [isDark, setIsDark] = useState(false);
const [ready, setReady] = useState(false);

useEffect(() => {
  AsyncStorage.getItem('theme').then((saved) => {
    if (saved === 'dark') setIsDark(true);
    setReady(true);
  });
}, []);

if (!ready) return null; // prevent flash

Hurtigsjekk

Test forståelsen Deres av temakontekst og mørk modus fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen har De lært å: definere separate temaobjekter for lyst og mørkt tema med samsvarende nøkler, tilby både det aktive temaet og en toggleTheme-funksjon gjennom kontekst og lagre temainnstillingen i AsyncStorage og gjenopprette den når appen starter. Deretter skal vi se på hvordan man unngår ytelsesproblemer med kontekst.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «En temakontekst med bryter for mørk modus» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «En temakontekst med bryter for mørk modus», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «En temakontekst med bryter for mørk modus»?

Bygg en ThemeContext som lagrer det gjeldende fargeskjemaet, eksponer en toggle-funksjon og bruk temafarger på komponenter i hele appen. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Native Academy?

Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «En temakontekst med bryter for mørk modus»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?

Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Opprette og tilby en kontekst
Bruke kontekst med useContext
En temakontekst med bryter for mørk modus
Unngå ytelsesproblemer med Context

← Tilbake til React Native Academy