App Theming

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 का उपयोग करें।

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

त्वरित जाँच

त्वरित जाँच: Manifest.json में 'theme_color' क्या control करता है?

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

Accessible Color Schemes and Themes

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