Search code examples
nativescript

Change nativescript theme with nativescript-themes plugin in app launch

How can I change the NativeScript app theme during the app launch using the nativescript-themes plugin?

JS

import application = require("application");

let themes = require("nativescript-themes");

themes.applyTheme('dark-theme.css');

// TODO: Check if user is logged in

application.start({ moduleName: "views/signin/signin" });

This isn't working, and yes, this is TS but the transpiled JS doesn't work.

Solution

  • Actually the proper code is:

    import application = require("application");
let themes = require("nativescript-themes");

application.cssFile = themes.getAppliedTheme('dark-theme.css');

application.start({ moduleName: "views/signin/signin" });

    The theming system replaces the currently running "app.css"; so you no longer are using the default "app.css". If you need app.css still; then you just import into your theme.css files using the @import statement.

    Please note; the 'dark-theme.css' that you are using in getAppliedTheme('dark-theme.css') is the default theme, if the theme has been changed/chosen by the user in the app and the app is starting up again, then it will use the actual chosen theme, not the default theme. ;-)