NativeScript 主题

• NativeScript 主题
  • 用法
  • 在 NativeScript 6.1 之前的使用
  • 设置深色或浅色模式
  • 从 JavaScript 设置深色或浅色模式 - 注意事项
  • 更多根类
  • 使用主题变量
  • CSS 变量
  • Kendo UI 主题构建器支持
  • 主题类和兼容性
  • 我应该使用 sass 还是 node-sass
  • 屏幕截图
  • 贡献
  • 发布
  • 重大更改
  • 优秀的贡献者
  • 授权协议

用法

核心主题支持在浅色和深色核心样式和皮肤的基础上。要加载核心主题样式，只需加载核心 CSS 和其默认皮肤

@import "@nativescript/theme/css/core.css";
@import "@nativescript/theme/css/default.css";

或

@import "@nativescript/theme/core";
@import "@nativescript/theme/default";

如果您想选择几个不同的皮肤，可以将第二个 CSS/SCSS 文件更改为您喜欢的皮肤名称

@import "@nativescript/theme/css/core.css";
@import "@nativescript/theme/css/blue.css";

或

@import "@nativescript/theme/core";
@import "@nativescript/theme/blue";

为了在您的模块中仅导入主题变量，请使用此方法

@import "@nativescript/theme/scss/variables";

这将仅导入变量和混入，而不会导入任何额外的样式。

以下是旧的主题皮肤列表 - 前两个现在是核心默认的浅色和深色皮肤，其余的都是可用的浅色皮肤，按名称列出。

主题将使用元素选择器为您应用程序设置样式 - 您不需要为每个需要样式的元素添加 CSS 类。

此外，如果您需要创建自己的皮肤，可以从核心主题开始 - 它包括组件的大小和初始样式。

在 NativeScript 6.1 之前的使用

为了在使用 NativeScript 6.1 之前使用 Theme 2.0，您还需要在项目中包含一个小 JS 文件

import "@nativescript/theme";

此 JS 负责更新应用程序根元素上的几个类，这是在 {N} 6.1 中包含在 tns-core-modules 中的内容。

设置深色或浅色模式

现在从浅色到深色设置主题模式变得更简单了 - 而不是加载新文件，只需找到根视图并将其 .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/theme";

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

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

import Theme from "@nativescript/theme";

Theme.setMode(Theme.Auto);

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

import Theme from "@nativescript/theme";

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

// or

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

注意事项

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

const Theme = require("@nativescript/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在方向改变时会更新，因此您可以使用它来在横屏中显示双面板布局，例如。

自2.0.4版以来，最新增加的是.ns-statusbar-transparent - 如果您已在OS中启用了透明状态栏并且ActionBar位于其下方，请将此类添加到您的根元素中。

请注意，Android API 21之前的版本不支持透明状态栏，这会导致不期望的上部ActionBar填充！

使用主题变量

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

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

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

您可以得到浅色/深色颜色

Button {
    color: light(primary);

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

或者一次性设置它们 - 此混入与上面的示例做相同的事情

Button {
    @include colorize($color: primary);
}

您可以根据背景来加深/变浅颜色（浅色主题加深，深色主题变浅）

Button {
    @include colorize($contrasted-border-color: accent background 20%);
}

上面的示例使用对比度函数检查背景的对比度级别，并根据它调整强调颜色的亮度。

CSS 变量

主题现在将所有内部变量导出到自定义CSS变量中，在.ns-root和.ns-modal类中。这同样适用于基于Kendo的皮肤。如果您使用CSS，可以使用它们从主题继承样式。以下是支持的自定义CSS变量列表

使用方法如下

.my-accented-class {
    color: var(--light-accent);
}

目前这些CSS变量未在内部使用，因此更改它们不会改变您皮肤的外观。这将在NativeScript 6.2支持HSL颜色之后计划实现。

Kendo UI 主题构建器支持

主题现在支持继承Kendo UI ThemeBuilder的主题变量。只需前往那里，自定义您的Kendo UI SASS主题，然后点击下载按钮。您将获得一个包含两个文件的ZIP文件 - 您可以使用它来设计您的Web应用的主题CSS，以及variables.scss - 您需要它来设计您的NativeScript主题。它看起来可能像这样

$base-theme:Default;
$skin-name:test;
$swatch-name:Default Purple;
$border-radius: 10px;
$accent: #bf70cc;
$info: #3e80ed;
$success: #5ec232;
$warning: #fdce3e;
$error: #d51923;
$text-color: #656565;
$bg-color: #ffffff;
$base-text: #656565;
$base-bg: #f6f6f6;
$hovered-text: #656565;
$hovered-bg: #ededed;
$selected-text: #ffffff;
$selected-bg: #bf70cc;
$series-a: #ff6358;
$series-b: #ffd246;
$series-c: #78d237;
$series-d: #28b4c8;
$series-e: #2d73f5;
$series-f: #aa46be;

将此文件添加以下内容

// Uncomment this row, if you target compat styling:
// $compat: true;

@import '~@nativescript/theme/index';

在核心主题之后加载该文件。它应该可以正常工作™。如果不行，请查看问题部分。

主题类和兼容性

为了避免与用户代码冲突，已弃用旧的通用主题类。现在它们位于.compat世界 - 如果您想使用它们，应单独加载它们，如下所示

@import "~@nativescript/theme/core.compat";
@import "~@nativescript/theme/blue.compat";

从2.0版开始，主题现在使用简化的BEM方法为新元素类提供支持，可能需要在这里或那里使用。例如，按钮需要.-primary和.-outline修饰符，而不是旧的.btn-primary和.btn-outline类。所有元素类（除了默认情况下不需要的之外，除非您想将组件设计得像另一个组件一样）都命名空间化，例如，按钮是.nt-button，操作栏是.nt-action-bar，ListView是.nt-list-view。

我应该使用 sass 还是 node-sass

主题2.0使用SASS开发。使用的NPM包是sass（以前是dart-sass），但它可以使用sass或node-sass。它们之间的区别在于sass不依赖于本地模块（除非您添加fibers），并且比node-sass慢（30%），但是如果您经常更改Node版本，则不需要重新编译。如果您决定使用它，您应该更新webpack配置并更改sass-loader选项以加载sass（node-sass是默认的sass-loader实现），如下所示

{
    loader: "sass-loader",
    options: {
        implementation: require("sass")
    }
}

屏幕截图

贡献

克隆此存储库，然后使用tns run命令在您的设备或所选模拟器上启动演示应用程序。

tns run ios

// or

tns run android

如果您想从浅色模式切换到深色模式，请打开侧边栏，滚动到页面底部的“主题”，然后切换。

发布

注意：只有授权的作者才能发布更新。

重要：始终确保您已运行iOS或Android上的演示应用程序以验证任何更改，并确保在执行以下操作之前已构建最新的css。

• 在package.json中提高版本号
• 如果需要更改发布的README，请调整nativescript-theme-core.md。

npm run builder
cd nativescript-theme-core
npm publish

重要：请勿直接修改nativescript-theme-core文件夹的内容。构建器会每次创建该文件夹，并且您所做的任何更改都将被覆盖。

设置更改日志生成

npm install -g conventional-changelog-cli

生成更改日志工作流程

1. 进行更改
2. 提交这些更改 - 使用这些约定。
3. 确保Travis变绿
4. 在package.json和nativescript-theme-core.json中提高版本号
5. conventional-changelog -p angular -i CHANGELOG.md -s
6. 提交package.json和CHANGELOG.md文件
7. 标签
8. 推送

重大更改

注意

从NativeScript主题1.0到2.0的迁移指南在这里可用。

• 主题需要加载两个文件 - 核心主题及其之上的皮肤。有关更多信息，请参阅使用方法。
• 主题现在使用 Element选择器 应用，如果您需要旧类的做法 - 它已移动到 .compat CSS/SCSS 文件中，例如 core.compat.css 和 blue.compat.css。
• 主题2.0用 sass 替换了 node-sass，它在功能上更现代，没有原生依赖。尽管如此，它仍然与 node-sass 兼容。

优秀的贡献者

NathanWalker	TheOriginalJosh	tjvantoll	NathanaelA	triniwiz	sis0k0
sitefinitysteve	vakrilov	bradmartin	firescript	valentinstoychev	enchev
bundyo

授权协议

Apache 2.0