安装

• tns plugin add @nativescript-community/css-theme

请确保在添加插件后运行新的构建，以避免任何问题。

使用方法

该主题将通过元素选择器为您的应用程序设置样式 - 您无需在需要样式的每个元素上添加 CSS 类。

import "@nativescript-community/css-theme";

此 JS 负责更新应用程序根元素上的几个类，这在 {N} 6.1 中已包含在 @nativescript/core 中。

设置深色或浅色模式

将主题模式从浅色设置为深色现在更容易 - 而不是加载新文件，只需找到根视图并将其 .ns-dark 类设置为它 - 这将更改所有着色为深色调。例如，如果您的页面根是 RadSideDrawer，只需向其添加一个类，如下所示

<drawer:RadSideDrawer class="ns-dark" xmlns:drawer="nativescript-ui-sidedrawer">
    ...
</drawer:RadSideDrawer>

如果您的根是框架，您可以这样操作

<Frame class="ns-dark" defaultPage="root"></Frame>

对于 Angular，如果您的根是 page-router-outlet，您可以在其上设置 .ns-dark 类 - 它将传递给它渲染的框架。

从 JavaScript 设置深色或浅色模式

现在从 JavaScript 设置主题模式也更容易 - 只需导入主题，并使用您首选的模式调用 Theme.setMode() - 要么 Theme.Light，要么 Theme.Dark，如下所示

import Theme from "@nativescript-community/css-theme";

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

请注意，在 {N} 6.2 中，这些更改将覆盖默认系统模式。要恢复，请使用 Theme.Auto（自 Theme 2.3.0 起可用）

import Theme from "@nativescript-community/css-theme";

Theme.setMode(Theme.Auto);

此外，还有一个辅助方法 - toggleMode，您可以用不带参数的方式切换模式，或者用布尔参数确保设置为浅色或深色模式

import Theme from "@nativescript-community/css-theme";

Theme.toggleDarkMode(); // to toggle between the modes

// or

Theme.toggleDarkMode(true);  // to ensure dark mode
Theme.toggleDarkMode(false); // to ensure light mode

注意事项

由于 Playground 的限制，JS 主题 API 不能像 ES6 模块一样在 TS/Angular 项目中导入。您必须使用 require 来导入

const Theme = require("@nativescript-community/css-theme");

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

更多根类

除了 .ns-light 和 .ns-dark 类之外，主题的 JavaScript 文件还引入了根元素上的 .ns-root，根据当前平台（主题广泛使用）是 .ns-android/.ns-ios，以及 .ns-portrait/.ns-landscape 和 .ns-phone/.ns-tablet，这些应该很容易理解。当然，.ns-portrait/.ns-landscape 在方向改变时更新，因此您可以使用它来显示横屏时的两栏布局，例如。

使用主题变量

核心主题中有几个函数和混合，可以在您的项目中使用，只要您使用 SASS/SCSS。

如果您需要访问特定的主题变量，如简单的颜色或大小，请通过 const 函数进行访问

Button {
    background-color: const(forest);
    height: const(btn-height);
}

您可以获取浅色/深色颜色

Button {
    color: light(primary);

    .ns-dark & {
        color: dark(primary);
    }
}