在应用程序启动时使用 nativescript-themes 插件更改 nativescript 主题

Question

如何使用 nativescript-themes 插件在应用启动期间更改 NativeScript 应用主题？

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" });

这不起作用，是的，这是 TS，但转译后的 JS 不起作用。

Answer 1

实际上正确的代码是：

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

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

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

主题系统取代当前运行 "app.css"；所以您不再使用默认 "app.css"。如果你还需要app.css；然后你只需使用 @import 语句导入到你的 theme.css 文件中。

请注意；您在 getAppliedTheme('dark-theme.css') 中使用的 'dark-theme.css' 是默认主题，如果该主题已被用户在应用中 changed/chosen并且应用程序再次启动，然后它将使用实际选择的主题，而不是默认主题。 ;-)

Answer 2

您可以使用 *

更改主题

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

@Component({
    selector: 'ns-app',
    templateUrl: 'app.component.html',
})

export class AppComponent implements OnInit {

  constructor() {}
  
  ngOnInit(): void {
    Theme.setMode(Theme.Light);
  }
  
}

插件然后根据以下代码在主 app.component.ts 文件中进行更改。

您还可以通过在 ngOnInit 生命周期中添加条件来更改模式。

在应用程序启动时使用 nativescript-themes 插件更改 nativescript 主题

Change nativescript theme with nativescript-themes plugin in app launch

nativescript

JS