使用 NativeScript 主题构建器为您的应用添加样式
我不会骗你们，我不是设计师。虽然我最多可能对空白区域的良好使用有眼力 - 但选择互补色和完善 UI 元素的布局远非我的专长。我们知道，总的来说，应用开发者更多的是工程师而不是艺术家。
虽然我们中最好的人同时主修计算机科学和艺术，但我们大多数人依赖其他人（即受过训练的设计师）来为我们提供我们需要的东西：色彩方案**不**像 1996 年的 Microsoft Word 主题一样华丽的设计。
推出 NativeScript 主题构建器。主题构建器是一款纯粹的视觉工具，可以非常轻松地将您的原生 UI 元素从极其无聊变为极具吸引力
{N} + CSS = 😍
使用 JavaScript 和 NativeScript 框架编写的移动应用是完全原生的，并且在 iOS 和 Android 平台上都能很好地工作。我们都知道这一点。应用的样式是通过使用我们多年来在网络上熟悉并（大部分有点）喜欢的相同 CSS 来实现的。
并且 NativeScript UI 元素开箱即用就是完全原生的。当我们实例化一个<Button>时，它会渲染一个真正的原生UIButton（在 iOS 上）和android.widget.Button（在 Android 上）。
但是原生样式可能会很快变得单调乏味。利用 NativeScript 和 CSS 的强大功能，NativeScript 主题构建器可以为您的原生 UI 元素生成完全兼容的样式。
不过诀窍在于，主题构建器生成的 CSS **无法“直接工作”**。**您还需要使用现在作为 NativeScript 框架核心的一部分提供的核心主题：**
核心主题还附带了您可以开箱即用的各种配色方案。
让我们快速了解一下如何使它工作。
使用 NativeScript 主题构建器
要利用 NativeScript 主题构建器创建的主题，您需要遵循几个简单的步骤
1) 使用 NativeScript 核心主题
从 NativeScript 2.4 开始，核心主题已作为所有 NativeScript 项目的一部分提供。如果您的应用出于某种原因使用的是 NativeScript 2.4 之前的版本，您仍然可以使用以下命令安装核心主题：npm install nativescript-theme-core --save。
打开您的app.css文件，并确保包含此行（默认情况下已包含）
@import 'nativescript-theme-core/css/core.light.css';
2) 使用 NativeScript 主题构建器创建样式
这非常不言而喻，但请导航到NativeScript 主题构建器并自定义您想要的所有颜色、字体大小、边框半径等。完成后，请务必单击**下载主题**按钮以获取生成的 CSS 文件。
有了下载的 CSS 文件，请再次打开您的app.css文件，并使用另一个@import语句来引用您的主题，该主题位于核心主题**之后**
@import 'nativescript-theme-core/css/core.light.css';
@import '<your css directory>/custom.css';
3) 在需要的地方添加类
核心主题默认使用类选择器，而不是元素选择器。这意味着您要设置样式的每个 UI 小部件都需要应用一个 CSS 类。幸运的是，这非常容易。
例如，如果要将一个类应用于<SegmentedBar>元素，则只需使用以下 CSS 类
<SegmentedBar class="segmented-bar">
<Button>和其他所有原生 UI 元素也一样
<Button class="btn btn-primary" text="I use the theme's primary color pattern!"></Button>
所需的 CSS 类的完整列表可以在NativeScript 文档中找到
应用所有类后，就可以尽情享受了！
后续步骤
立即尝试使用NativeScript 主题构建器！它是免费的（永远免费），易于使用，而且我敢说……很有趣！？