Lesson 18 / 29

App theming

Implement theming to provide a native app look and feel with proper color schemes.

Theming in PWAs

Theming involves setting theme-color in manifest, using CSS custom properties for colors, and respecting prefers-color-scheme. This makes your PWA feel native and adapt to user preferences.

Implement light and dark themes

Use CSS custom properties and media queries for responsive theming.

:root {
  --primary-color: #8f5cf6;
  --bg-color: #ffffff;
  --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Output:

App automatically adapts to light and dark mode based on system preferences.

Quick check

Quick check: What does 'theme_color' in manifest.json control?

  • The color of the browser's address bar and system chrome on Android
  • The background color of the entire app
  • The color scheme for light and dark modes
Answer

The color of the browser's address bar and system chrome on Android — theme_color customizes the browser UI to match your app's branding on Android.

Accessible color schemes and themes

Ensure contrast, readability, and support for user preferences.