React Native Academy · Lektion

En temakontext med växlare för mörkt läge

Bygg en ThemeContext som lagrar det aktuella färgschemat, exponera en växlingsfunktion och använd temafärger på komponenter i hela appen.

Lektion 3 av 413 steg

En temakontext med växlare för mörkt läge är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.

Varför en theme context?

Ett temakontext samlar färg- och typografivärden på ett ställe, så att alla komponenter i appen hämtar dem från en enda källa. När användaren växlar mellan ljust och mörkt läge utlöser en uppdatering av kontextvärdet en omrendering av alla komponenter som använder kontexten, med de nya färgerna – utan prop drilling eller manuella uppdateringar.

Definiera objekt för ljust och mörkt tema

Börja med att definiera två temaobjekt med samma nycklar. När båda teman använder identiska nycklar kan varje komponent tillämpa en färg utan att känna till vilket läge som är aktivt – den läser bara från det aktuella temaobjektet, så hanterar objekten 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',
};

Skapa ThemeContext

Skapa en ThemeContext som innehåller det aktuella temaobjektet och en växlingsfunktion. Standardvärdet speglar strukturen på det som Providern kommer att tillhandahålla, vilket gör det säkert att destrukturera värdet i konsumenter även om Providern saknas av misstag i tester.

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

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

Bygg ThemeProvider

ThemeProvider hanterar ett booleskt tillstånd i isDark och härleder det aktiva temaobjektet från det. Funktionen toggleTheme växlar det booleska värdet. Memorera kontextvärdet med useMemo så att en ny objektreferens bara skapas när isDark faktiskt ändras.

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 anpassad useTheme-hook

Exportera en useTheme-hook som kapslar in useContext(ThemeContext). Komponenter anropar useTheme() för en tydlig och beskrivande import i stället för att behöva komma ihåg att skicka med kontextobjektet. Hooken kastar också ett informativt fel om den anropas utanför en ThemeProvider.

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

Tillämpa temafärger på en komponent

Alla komponenter som läser från useTheme visar automatiskt rätt färger för det aktuella läget. Skicka in temafärgerna i inline-stilar eller StyleSheet-stilar. När temat växlas omrenderas alla komponenter som använder det med de nya värdena.

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 växlingsknapp på inställningsskärmen

Lägg till en växlingsknapp för mörkt läge på inställningsskärmen. Värdet för komponenten Switch är isDark från temakontexten, och onValueChange anropar toggleTheme. Inget lokalt tillstånd behövs – växlingsknappen styr det globala temats tillstånd direkt.

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>
  );
}

Spara temainställningen

Spara användarens temainställning i AsyncStorage så att den finns kvar när appen startas om. I ThemeProvider läser du in den sparade inställningen i en useEffect vid montering och initierar tillståndet utifrån den. Spara det nya värdet i toggleTheme varje gång användaren växlar läge.

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');
  };

  // ...
}

Följ systemets tema

React Natives hook useColorScheme returnerar enhetens aktuella färgschema ('light' eller 'dark'). Du kan använda detta som standardtema i stället för att alltid börja i ljust läge. Om användaren inte uttryckligen har valt en inställning ger det bästa möjliga upplevelse direkt att följa systemets inställning.

import { useColorScheme } from 'react-native';

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

Tillämpa temat på navigeringshuvudet

Navigeringshuvudet kan också reagera på temaförändringar. Skicka en funktion till screenOptions på navigatorn. Funktionen läser från temakontexten och returnerar alternativ för huvudets stil. När temat ändras utvärderar navigatorn alternativen igen och uppdaterar huvudets färger därefter.

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

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

Förhindra flimrande när temat läses in

När det sparade temat läses in från AsyncStorage vid uppstart uppstår ett kort ögonblick innan inställningen har återställts. Förhindra att fel tema visas tillfälligt genom att visa en startskärm eller fördröja navigeringen tills temat har lästs in. Använd ett isThemeReady-tillstånd i Providern och rendera null tills värdet är 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

Snabb kontroll

Testa dina kunskaper om temakontext och mörkt läge från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen lärde du dig att definiera separata objekt för ljust och mörkt tema med matchande nycklar, tillhandahålla både det aktiva temat och en toggleTheme-funktion via kontext samt spara temainställningen i AsyncStorage och återställa den när appen startar. Härnäst utforskar vi hur du undviker prestandaproblem med kontext.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”En temakontext med växlare för mörkt läge” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”En temakontext med växlare för mörkt läge”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”En temakontext med växlare för mörkt läge”?

Bygg en ThemeContext som lagrar det aktuella färgschemat, exponera en växlingsfunktion och använd temafärger på komponenter i hela appen. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Native Academy?

Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”En temakontext med växlare för mörkt läge”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Native Academy-lektionen?

Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Skapa och tillhandahålla en kontext
Använda kontext med useContext
En temakontext med växlare för mörkt läge
Undvika prestandaproblem med kontext

← Tillbaka till React Native Academy