[Tracking] Dark Mode Support #7800

Overview

Android 10 and iOS 13 introduce system-wide dark appearance for all user interface elements, known as Dark theme for Android and Dark Mode for iOS. They allow users to toggle their interface and focus on the application’s content based on ambient lighting conditions.

Dark theme for Android:
https://developer.android.com/guide/topics/ui/look-and-feel/darktheme

Dark Mode for iOS:
https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface

Design

A summary for the Dark Mode support in NativeScript can be found here.

Tasks

• Adapt (dynamic) system colors from UIKit - feat(ios-dark-mode): adapt dynamic system colors #7826
• Detect system appearance at application launch - feat(dark-mode): add system appearance property, event and CSS classes #7887
• Add ns-light/ns-dark CSS classes to the application root view - feat(dark-mode): add system appearance property, event and CSS classes #7887
• Notify about a system appearance change - feat(dark-mode): add system appearance property, event and CSS classes #7887
• Expose API to be able to change appearance per View/ViewController/PresentationController
• (templates) Add support for Android DayNight theme and remove ForceDark flag
• Provide up-to-date image assets/launch screens/resources
• Dark Mode support for NativeScript Material Components - Dark Mode/theme Support nativescript-community/ui-material-components#51

Apps

• Playground and Preview applications
• SDK examples
• Templates
• Groceries

Contribution

If you want to work on a task from the list, tell us and we will do our best to help you!
If you have another great idea on how to make this feature even better, share it in the comments!

Discussion

Please, don't report problems here. Instead, open a new issue and link it to this one.
Let's use this discussion for suggestions and improvement ideas. We would love to hear from you!