Light/dark theme
- React Native course
- Intermediate
- Lesson 82/116
- 5 min
Learn light and dark theme management.
Light/dark theme
An app usually ships with two themes: light and dark. The light theme uses a bright background with dark text; the dark theme uses a dark background with light text. It changes by user preference or system setting.
The theme holds colors as an object: { background: '#fff', text: '#000' } for light, { background: '#000', text: '#fff' } for dark. Components read from this object; it changes in one place.
Theme object
Theme colors are defined as an object. Light theme: { background: '#fff', text: '#000' }. Dark theme: { background: '#000', text: '#fff' }. Components use these values in their styles.
This approach keeps colors in one place. To add a new theme you only write a new object; the component code does not change.
Practice Define light and dark themes
Define two theme objects: const light = { background: '#fff', text: '#000' } and const dark = { background: '#000', text: '#fff' }.
Starter code
import React from 'react';
import { View } from 'react-native';
// Define the light and dark theme objects
export default function App() {
return <View />;
}Sample solution
import React from 'react';
import { View } from 'react-native';
const light = { background: '#fff', text: '#000' };
const dark = { background: '#000', text: '#fff' };
export default function App() {
return <View />;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the background like in a light theme?
- Dark
- Bright Correct answer
- Transparent
- An image
Explanation: The light theme uses a bright background.
2 Light theme background
const light = { background: '____', text: '#000' };const light = { background: '#fff', text: '#000' };Explanation: #fff stands for a white background.
3 Match the theme concepts
| Term | Meaning |
|---|---|
light theme |
Bright background |
dark theme |
Dark background |
background |
Background color |
text |
Text color |