nativescript-themes

一个用于处理动态加载 UI 主题的 NativeScript 插件

安装

NativeScript 2.x

tns plugin add [email protected]

NativeScript 5.x

tns plugin add nativescript-themes

状态

此插件在 NativeScript 2.x 和 5.x 中工作。它不支持 v3 或 v4。

许可证

此插件采用 MIT 许可证发布，这意味着您可以自由地将它包含在任何类型的程序中。

示例快照

使用方法

要使用该模块，只需使用 require() 调用它

var themes = require('nativescript-themes');

在应用中设置

修改您的启动 app.js 文件

var themes = require('nativescript-themes');
themes.applyTheme(themes.getAppliedTheme('red-theme.css'));

如果没有选择其他主题作为默认主题，则这将自动应用 "red-theme.css" 主题。

您还可以使用 applyThemeCss 加载由 webpack 打包的主题

var themes = require('nativescript-themes');
var cssText = require('~/assets/themes/dark.scss');
themes.applyThemeCss(cssText, 'dark.scss');

您问，这到底有什么帮助？

这允许您通过调用主题系统来动态为主题化应用程序。首先应用主 app.css 文件，然后是主题文件，最后是您的 page.css

red-theme.css

button {
    background-color: red;
}

green-theme.css

button {
    background-color: green;
}

演示

演示展示了三个示例主题，并展示了如何启动时加载最后选择的主题。

为什么要使用这个？

这允许您全局应用特定的主题文件，以便所有页面都能获得它。

themes.applyTheme('cssFile', options);

options.noSave = true，这将导致它不保存此信息供 getAppliedTheme 获取，这通常用于需要临时应用主题的情况。

var themes = require('nativescript-themes');
themes.applyTheme('red-theme.css');

theme.getAppliedTheme(<default_theme>);

这返回最后一个应用的主题；如果没有应用任何主题，则使用默认主题。

var themes = require('nativescript-themes');
var currentTheme = themes.getAppliedTheme('red-theme.css');
if (currentTheme === 'red-theme.css') {
    console.log('We are using the default red-theme!');
} else {
    console.log('We are using', currentTheme);
}

themes.applyThemeCss('textCss', 'filename');

此函数接收一个包含 CSS 的字符串并将其应用。filename 仅用于参考（实际上不会加载任何文件）。

var themes = require('nativescript-themes');
themes.applyThemeCss('page {background-color: black;}', 'default-theme.css');

教程

需要一些额外的帮助来开始吗？请查看这些教程，了解如何在与 iOS 和 Android 应用程序中处理 NativeScript UI 主题。

• 在 NativeScript Angular 应用程序中更改 UI 主题

贡献者

• Brad Martin
• Tiago Alves