@nativescript/theme-switcher

ns plugin add @nativescript/theme-switcher

用法

import { initThemes, switchTheme } from '@nativescript/theme-switcher'


// first initialize the themes
initThemes({
    // default is optional - will be auto-applied after initializing (*)
    default: () => import('theme-loader!./themes/default.scss'),
    red: () => import('theme-loader!./themes/red.scss'),
    green: () => import('theme-loader!./themes/green.scss'),
})

// the later on, switch themes with
switchTheme('red');
switchTheme('green');

注意：使用 theme-loader! 前缀来应用一个自定义加载器，防止样式自动应用，而是由主题切换器按需应用。它需要 @nativescript/webpack@5+ 才能正确工作。

对 TypeScript 用户注意：TypeScript 不了解 theme-loader 或 css/scss 文件，为了在调用 import('theme-loader!./path/to/theme.css') 时抑制类型错误，您可以在 references.d.ts 中添加以下内容，或使用 // @ts-ignore 来局部抑制错误。

/// <reference path="./node_modules/@nativescript/theme-switcher/shims.d.ts" />

到您的 references.d.ts，或者使用 // @ts-ignore 来局部抑制错误。

如果您需要同时切换多个主题，您可以初始化所需数量的切换器。每个切换器将加载 CSS 并持久保存（除非禁用）最后选定的主题。

如果您的应用可以单独切换主题的不同部分，这可能很有用。例如

1. switcher1 切换按钮样式
2. switcher2 切换字体样式
3. 等等。

import { ThemeSwitcher } from '@nativescript/theme-switcher'

const switcher1 = new ThemeSwitcher('switcher1');
const switcher2 = new ThemeSwitcher('switcher1');

switcher1.initThemes({ /* ... */})
switcher2.initThemes({ /* ... */})

switcher1.switchTheme( /* ... */ )
switcher2.switchTheme( /* ... */ )

API

initThemes(themes: ThemeDefinition, options?: ThemeSwitcherOptions)

interface ThemeDefinition {
	[name: string]: () => any;
}

interface ThemeSwitcherOptions {
	persistent?: boolean; // default: true
	persistenceKey?: string; // default: __theme_switcher_default
}

themes 是一个对象，其中主题名称是键，一个返回主题 CSS（CSS 字符串、ast，可选异步）的加载器函数。

default 如果设置为主题，将应用。

如果启用 persistent（默认），最后选定的主题将被保存到 ApplicationSettings，并在调用 initThemes 时自动恢复。

switchTheme(themeName: string)

用于切换当前主题。

许可证

Apache 许可证版本 2.0