Een ThemeContext met een darkmode-schakelaar
Bouw een ThemeContext die het huidige kleurenschema opslaat, stel een togglefunctie beschikbaar en pas themakleuren toe op componenten in de hele app.
Een ThemeContext met een darkmode-schakelaar is een gratis React Native Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Waarom een themacontext?
Een thema-context centraliseert kleur- en typografiewaarden, zodat elk onderdeel in de app uit één centrale bron leest. Wanneer je tussen de lichte en donkere modus schakelt, zorgt het bijwerken van de contextwaarde ervoor dat alle onderdelen die deze waarde gebruiken opnieuw worden gerenderd met de nieuwe kleuren — zonder prop-doorgeefketens of handmatige updates.
Lichte en donkere themaobjecten definiëren
Begin met het definiëren van twee themaobjecten met dezelfde sleutels. Door voor beide thema's identieke sleutels te gebruiken, kan elk onderdeel een kleur toepassen zonder te weten welke modus actief is — het leest gewoon uit het huidige themaobject en beide thema's regelen de rest.
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',
};De ThemeContext maken
Maak een ThemeContext die het huidige themaobject en een schakelfunctie bevat. De standaardwaarde heeft dezelfde vorm als wat de provider zal aanbieden. Daardoor kun je deze veilig destructureren in onderdelen die de context gebruiken, zelfs als de provider per ongeluk ontbreekt in tests.
import { createContext, useContext, useState } from 'react';
import { lightTheme, darkTheme } from './themes';
export const ThemeContext = createContext({
theme: lightTheme,
isDark: false,
toggleTheme: () => {},
});De ThemeProvider bouwen
De ThemeProvider beheert een booleaanse isDark-status en leidt daaruit het actieve themaobject af. De functie toggleTheme keert de booleaanse waarde om. Gebruik useMemo om de contextwaarde te onthouden, zodat alleen een nieuwe objectreferentie wordt gemaakt wanneer isDark daadwerkelijk verandert.
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>
);
}Een aangepaste useTheme-hook
Exporteer een useTheme-hook die useContext(ThemeContext) omhult. Onderdelen roepen useTheme() aan voor een duidelijke, beschrijvende import in plaats van te moeten onthouden dat ze het contextobject moeten doorgeven. De hook gooit ook een duidelijke fout als deze buiten een ThemeProvider wordt aangeroepen.
export function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be inside ThemeProvider');
return ctx;
}Themakleuren toepassen op een onderdeel
Elk onderdeel dat uit useTheme leest, toont automatisch de juiste kleuren voor de huidige modus. Geef de themakleuren door aan inline stijlen of stijlen van StyleSheet. Wanneer het thema wisselt, worden alle onderdelen die de context gebruiken opnieuw gerenderd met de nieuwe waarden.
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>
);
}Een schakelaar in het instellingenscherm
Voeg een schakelaar voor de donkere modus toe aan het instellingenscherm. De waarde van het onderdeel Switch is isDark uit de thema-context, en onValueChange roept toggleTheme aan. Lokale status is niet nodig — de schakelaar bestuurt de globale themastatus rechtstreeks.
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>
);
}De themavoorkeur bewaren
Sla de themavoorkeur van de gebruiker op in AsyncStorage, zodat deze behouden blijft wanneer de app opnieuw wordt gestart. Laad in ThemeProvider de opgeslagen voorkeur in een useEffect bij het koppelen en initialiseer de status overeenkomstig. Sla de nieuwe waarde op in toggleTheme telkens wanneer de gebruiker van modus wisselt.
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');
};
// ...
}Het systeemthema volgen
De hook useColorScheme van React Native retourneert het huidige kleurenschema van het apparaat ('light' of 'dark'). Je kunt dit als standaardthema gebruiken in plaats van altijd met de lichte modus te beginnen. Als de gebruiker niet expliciet een voorkeur heeft ingesteld, zorgt het volgen van de systeeminstelling voor de beste ervaring direct na installatie.
import { useColorScheme } from 'react-native';
function ThemeProvider({ children }) {
const systemScheme = useColorScheme();
const [isDark, setIsDark] = useState(systemScheme === 'dark');
// ...
}Het thema toepassen op de navigatiekop
De navigatiekop kan ook reageren op themawijzigingen. Geef aan screenOptions op de navigator een functie door die de thema-context leest en opties voor de kopstijl retourneert. Wanneer het thema verandert, evalueert de navigator de opties opnieuw en werkt deze de kleuren van de kop overeenkomstig bij.
function AppStack() {
const { theme } = useTheme();
return (
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: theme.card },
headerTintColor: theme.text,
}}
>
<Stack.Screen name='Home' component={HomeScreen} />
</Stack.Navigator>
);
}Flikkering bij het laden van het thema voorkomen
Wanneer je bij het opstarten het opgeslagen thema uit AsyncStorage laadt, is er kort een moment voordat de voorkeur is hersteld. Voorkom dat het verkeerde thema kort wordt getoond door een opstartscherm te tonen of de navigatie uit te stellen totdat het thema is geladen. Gebruik in de provider een isThemeReady-status en render null totdat deze waar is.
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 flashKorte controle
Test je begrip van de thema-context en de donkere modus uit deze les.
Samenvatting van de les
In deze les heb je geleerd om: afzonderlijke lichte en donkere themaobjecten met overeenkomende sleutels te definiëren, zowel het actieve thema als een functie toggleTheme via de context aan te bieden, en de themavoorkeur in AsyncStorage te bewaren en bij het opstarten van de app te herstellen. Hierna leer je hoe je prestatieproblemen met context voorkomt.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Een ThemeContext met een darkmode-schakelaar” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Een ThemeContext met een darkmode-schakelaar”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “Een ThemeContext met een darkmode-schakelaar”?
Bouw een ThemeContext die het huidige kleurenschema opslaat, stel een togglefunctie beschikbaar en pas themakleuren toe op componenten in de hele app. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Een ThemeContext met een darkmode-schakelaar”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Een context maken en beschikbaar stellen
- Context gebruiken met useContext
- Een ThemeContext met een darkmode-schakelaar
- Prestatieproblemen met context voorkomen