• Installation
• Usage
  • Register the Themes
  • Switch Themes
  • Switch multiple themes simultaneously
• API
  • initThemes()
  • switchTheme()
  • loadDefaultTheme()
• Demo App
• License

npm install @nativescript/theme-switcher

Use the initThemes() function to register the themes to switch from.

Call this function in the app's app.ts or main.ts file, before the app starts.

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'),
})

To switch themes, call the [switchTheme()] method passing it the name of the theme to switch to.

switchTheme('red')
switchTheme('green')

:::tip Note

The theme-loader! prefix is used to apply a custom loader that prevents the styles from being auto-applied, and instead applied on-demand by the theme switcher. It requires @nativescript/webpack@5+ to work properly.

:::

:::tip Note for TypeScript users

TypeScript does not know about theme-loader or css/scss files, in order to supress the type errors when calling import('theme-loader!./path/to/theme.css') you can add

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

To your references.d.ts, or use // @ts-ignore to supress the errors locally.

:::

If you need to switch multiple themes simultaneously, you can initialize as many switchers as you need. Each switcher will load CSS and persist (unless disabled) the last selected theme.

Can be useful if your app can switch different parts of the theme individually. For example

1. switcher1 switches button styles
2. switcher2 switches font styles
3. etc.

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

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

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

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

initThemes(themes, options)

Register the themes to be switched from.

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

switchTheme(themeName)

Used to switch from the current theme to the specified one.

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

loadDefaultTheme()

Loads the last selected theme if persistence is enabled, otherwise loads "default" if it exists.

Try out the plugin's demo with the NativeScript Preview app at StackBlitz.

Apache License Version 2.0