# App theming — Progressive Web Apps

Source: https://www.geekswithgeeks.com/en/pwa/pwa-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.

```css
: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

**Quiz:** What does 'theme_color' in manifest.json control?

- [x] 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.