Force theme in preview not working correctly

acountrec commented 4 years ago

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

Plugin(s): Typescript

√ Getting NativeScript components versions information... √ Component nativescript has 6.7.4 version and is up to date. √ Component tns-core-modules has 6.5.7 version and is up to date. √ Component tns-android has 6.5.1 version and is up to date. √ Component tns-ios has 6.5.1 version and is up to date.

Also I use nativescript-vue

Describe the bug

Changing theme in preview does not work as expected. Using the info.plist doesn't really do anything. Using Theme.setMode(Theme.Light) works partly. it does turn background black or white and font opposite but native components like DatePicker do not show anything. Example picture:

To Reproduce

tns preview --no-hmr

Theme.setMode(Theme.Light);

or

<key>UIUserInterfaceStyle</key>
<string>Light</string>

Expected behavior For the theme to really change

Sample project

Playground Additional context

The playground only shows when changing through javascript since there are no info.plist files or the android variaty of that. If your phone uses lightmode just change it to Theme.Dark I assume it goes 2 ways.

nericode commented 4 years ago

Same +1

bundyo commented 4 years ago

Unfortunately the DatePicker included in {N} core is not completely styleable with CSS.

There is a change in the "next" version, that may help, can you try with it?

https://www.npmjs.com/package/@nativescript/theme/v/2.4.0-2020-05-29-092231-01

NativeScript / theme

Force theme in preview not working correctly #267