Cara menonaktifkan Dark Mode dan setting theme hanya di Light Mode di Nativescript

Pada dasarnya Nativescript sudah mendukung Dark atau Light Mode. Saat handphone kamu sedang dalam Dark Mode, maka aplikasi akan otomatis menyesuaikan dengan Theme Mode apa yang Handphone kamu gunakan. Namun di beberapa kasus mungkin kamu agak risi melihat tampilan aplikasi mu ketika dalam Mode Dark, dan kamu memutuskan untuk memaksa Theme aplikasi mu hanya di keadaan Light Mode dan ingin mematikan Dark Mode-nya.

Di pembahasan kali ini saya ingin berbagi tutorial tentang bagaimana cara mengatur aplikasi mu agar hanya berada di satu Mode saja, Ketika Theme Mode Handphone kamu di ubah, maka aplikasi mu akan tetap berada di mode yang sudah kamu tentukan. 

Sebelum masuk ke langkah-langkahnya, saya ingin Disclaimer terlebih dahulu. Pada pembahasan kali ini saya akan memberi contoh kode Nativesctipt menggunakan JS, bukan TS atau lainnya. Dan versi Nativescript yang saya gunakan adalah Nativescript versi 8.6.x. Jadi jika Source yang kamu gunakan adalah di luar JS, bisa kamu coba sesuaikan sendiri berdasarkan contoh yang saya akan berikan.

LANGKAH PERTAMA

Di file AndroidManifest.xml coba tambahkan properti android:forceDarkAllowed="false" pada tag <application> atau tag <activity>.

Jika kamu menemukan sebuah error, hapus kode pada file AndroidManifest yang tadi kamu tambahkan dan coba kamu tambahkan item berikut ini pada file App_Resouces/Android/src/main/res/values/styles.xml

<item name="android:forceDarkAllowed">false</item>

kode lengkapnya kurang lebih seperti ini :

<resources ...>

    <!-- ...more code, etc... -->
    <style name="LaunchScreenThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>

        <item name="colorPrimary">@color/ns_primary</item>
        <item name="colorPrimaryDark">@color/ns_primaryDark</item>
        <item name="colorAccent">@color/ns_accent</item>

        <item name="android:windowBackground">@drawable/splash_screen</item>

        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:forceDarkAllowed">false</item>
    </style>

    <!-- ...more code, etc... -->
</resources>

LANGKA KEDUA

Pada file app.js atau main.js kamu import dahulu package @nativescript/theme, setelah itu baru kamu set theme yang kamu inginkan, kurang lebih seperti ini kode lengkapnya :

import { Application } from "@nativescript/core";
import { Theme } from "@nativescript/theme";

Theme.setMode(Theme.Light); // Theme.Dark Or Theme.Light

Application.run({ moduleName: "app-root" });

Theme.Light itu untuk Light Mode dan Theme.Dark adalah untuk Dark Mode. 

Mungkin cukup sekian dulu utnuk pembahasan kali ini, semoga pembahasan ini cukup membantu dan bermanfaat untuk kamu, Terimakasih :)

Reference : https://medium.com/@kivind/nativescript-disabling-dark-mode-382e5dfd11bd