Light/dark theme

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.

Exercise Define light and dark themes

Define two theme objects: const light = { background: '#fff', text: '#000' } and const dark = { background: '#000', text: '#fff' }.

Show example 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 />;
}

Test yourself

What is the background like in a light theme?
- Dark
- Bright
- Transparent
- An image
Show answer

Bright — The light theme uses a bright background.

Light theme background

const light = { background: '____', text: '#000' };

Show answer

const light = { background: '#fff', text: '#000' };

Match the theme concepts

light theme

Bright background
dark theme

Dark background
background

Background color
text

Text color

Next lesson: Theme context

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies