# App Theming — Progressive Web Apps

Source: https://www.geekswithgeeks.com/hi/pwa/pwa-app-theming

> Native app look और feel प्रदान करने के लिए proper color schemes के साथ theming को implement करें।

## PWAs में Theming

**Theming** में manifest में theme-color set करना, colors के लिए CSS custom properties का उपयोग करना और prefers-color-scheme को respect करना शामिल है। यह आपके PWA को native लगता है और user preferences को adapt करता है।

## Light और dark themes को implement करें

Responsive theming के लिए CSS custom properties और media queries का उपयोग करें।

```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.
```

त्वरित जाँच

**Quiz:** Manifest.json में 'theme_color' क्या control करता है?

- [x] Android पर browser के address bar और system chrome का color
- [ ] पूरे app का background color
- [ ] Light और dark modes के लिए color scheme

*Answer:* Android पर browser के address bar और system chrome का color. theme_color Android पर browser UI को आपके app की branding से match करने के लिए customize करता है।

## Accessible Color Schemes and Themes

Contrast, readability ensure करें और user preferences को support करें।