使用 NativeScript 核心主题打造 SASS 风格圣诞主题！

以下文章来自 NativeScript 社区成员和 Telerik 开发者专家 Nathan Walker。Nathan 领导了新发布的 NativeScript 核心主题的开发，并且刚刚发布了 egghead.io 上的 NativeScript 课程。

从 NativeScript 版本 2.4.0 开始 🎉，所有通过 tns create [项目名称]（包括所有可选标志，--tsc, --ng 等）创建的新 NativeScript 应用程序都提供了默认主题。

此主题是社区共同开发的成果，倾注了大量 ❤️ 和热情。我们鼓励其他人参与并改进它。欢迎提供反馈或报告问题在此。截至本文撰写之时，我们已经发布了官方 1.0.0 版本，未来将有更多改进，但我们对初始版本非常兴奋。

作为核心贡献者，我想向您展示如何通过自定义它提供的 SASS 来充分利用它。

制作一个圣诞主题

新应用？

如果您想在新项目中尝试这个有趣的练习，请运行以下命令

tns create christmas // 使用您喜欢的任何标志：--tsc, --ng 等。
cd christmas

安装 SASS 并准备迎接圣诞节！

下一步，执行以下步骤（无论您是在新应用还是现有应用中尝试）。

npm i nativescript-dev-sass --save
将 app.css 重命名为 app.ios.scss，清空其内容并添加以下内容

在上面文件的旁边创建 app.android.scss 并添加以下内容

在上面文件的旁边创建 _christmas.scss 并添加以下内容

提升应用并运行它！

确保 action-bar 类名位于任何 ActionBar 的根节点上。

对于标准的 NativeScript，请使用以下 XML

如果您正在使用 NativeScript for Angular

之后，运行应用程序

tns emulate ios

// 或者...

tns run android

使用此主题的特别圣诞演示应用程序 - 还有礼物！

想从项目负责人那里了解更多关于 NativeScript 主题的信息吗？查看我的 egghead.io 上的新课程！

您可以在此运行使用此主题的示例应用程序。

奖励：如果您从上面的仓库中运行应用程序，并在圣诞树上向下滑动 8 次，就会出现一个秘密按钮。点击该按钮即可获得 egghead.io 为期一年的折扣专业订阅。您可以在您喜欢的移动模拟器中直接注册：）

以下是抢先预览

您也可以通过 npm 安装此主题

npm i nativescript-theme-christmas --save

发布您自己的主题！

我们鼓励其他人发布他们自己的自定义主题。您可以根据此设置来创建自己的主题，甚至可以创建自己的独特设置。我们甚至有一个主题插件种子，您可以使用它来快速入门。

为了让其他人更容易找到您的主题，我们建议使用以下标准命名约定

nativescript-theme-[您的主题名称]

这样其他人就可以在 npm 中搜索 nativescript-theme 并看到所有主题，包括您的主题！