Nativescript Disabling Dark Mode
After updating to the latest @nativescript/theme and nativescript 6.2+ we realized that our app has automatically started to implement the Dark theme in android in specific.
Our application was not ready to handle dark mode and it just looked awful.
I struggle with disabling the android dark mode, probably due to ignorance.
But to save anyone else precious time, here I attach a guide on how to disable the dark mode.
Some of the steps detailed below depend on using `@nativescript/theme` and not the old theme package `nativescript-theme-core`.
Steps 1 and 2 can be found in the github documentation of @nativescript/theme
1. Opt out of the Dark theme being forced.
For Android in specific, the dark mode will be specified in one of the style.xml files that can be found at App_Resources/Android/src/main/res
Look for the following specific piece of code:
<item name="android:forceDarkAllowed">true</item>In my case the file containing the force dark mode was App_Resources/Android/src/main/res/values-v29/styles.xml
For IOS, you should tweak the following variable at `Info.plist`
<key>UIUserInterfaceStyle</key>
<string>Light</string>2. Set a fixed light theme on your app.
You can implement the following code on your main.js / main.ts file.
import Theme from "@nativescript/theme";Theme.setMode(Theme.Dark); // Or Theme.Light
As a comment, this code worked for me on version `"@nativescript/theme: “~2.3.3”` but didn’t work on version `2.2.0`.
3. Use app root classes to modify your app style.
On latest versions of NS 6.2+, the application root / frame is tagged with some css classes automatically.
Get Kibsaim Vindas’s stories in your inbox
Join Medium for free to get updates from this writer.
For the case of dark mode, the classes that interest us are ns-light or ns-dark.
The class ns-light will be used to mark the app when using the light mode.
The class ns-dark will be used to mark the app when using the dark mode.
In case we want to force either mode, we should add one of these css classes to the root container.
In the case of angular apps it will be something as
<page-router-outlet class="ns-light"></page-router-outlet>In the case of regular apps:
<Frame class="ns-dark" defaultPage="root"></Frame>Personally, I tested this method, but didn’t work for me.
4. Disable the dark mode via native code.
For Android in specific, in order to disable the dark mode you need to implement an application delegate.
Inside the delegate, you should disable the dark mode.
The following code should be placed inside main.js / main.ts
import { android, on, launchEvent, ApplicationEventData } from '@nativescript/core/application';if (android) {
on(launchEvent, (args: ApplicationEventData) => {
androidx.appcompat.app.AppCompatDelegate.setDefaultNightMode(androidx.appcompat.app.AppCompatDelegate.MODE_NIGHT_NO)
});
}
If working with typescript, you will also require to define those types.
I have loosely define them with the following code.
declare namespace androidx {
export namespace appcompat {
export namespace app {
export const AppCompatDelegate: any;
}
}
}Hope this serves you as a guide to disable the dark mode.
