chore: readme

rigor789 · rigor789 · commit 7a3e1789508f · 2021-10-19T01:11:35.000+02:00
diff --git a/packages/theme-switcher/README.md b/packages/theme-switcher/README.md
@@ -6,7 +6,72 @@ ns plugin add @nativescript/theme-switcher
 
 ## Usage
 
-// TODO
+```ts
+
+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');
+```
+
+> **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.
+
+---
+
+If you need to switch multiple themes simultaniously, 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.
+
+```ts
+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)
+
+```ts
+interface ThemeDefinition {
+	[name: string]: () => any;
+}
+
+interface ThemeSwitcherOptions {
+	persistent?: boolean; // default: true
+	persistenceKey?: string; // default: __theme_switcher_default
+}
+```
+
+`themes` is an object with the theme name as the key, and a loader function that returns the theme css (css string, ast, optionally async).
+
+`default` will be applied if set as a theme.
+
+If `persistent` is enabled (default), the last selected theme will be saved to ApplicationSettings and automatically restored when `initThemes` is called.
+
+### switchTheme(themeName: string)
+
+Used to switch the current theme.
 
 ## License
 
diff --git a/packages/theme-switcher/index.ts b/packages/theme-switcher/index.ts
@@ -1,7 +1,7 @@
 import { addTaggedAdditionalCSS, removeTaggedAdditionalCSS, Application, ApplicationSettings } from '@nativescript/core';
 
 export interface ThemeDefinition {
-	[name: string]: () => string | any;
+	[name: string]: () => any;
 }
 
 export interface ThemeSwitcherOptions {
@@ -45,7 +45,7 @@ export class ThemeSwitcher {
 		});
 	}
 
-	async switchTheme(themeName) {
+	async switchTheme(themeName: string) {
 		console.log('SWITCHING THEME TO ', themeName);
 		if (!this.themes.has(themeName)) {
 			if (themeName !== 'default') {

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import { addTaggedAdditionalCSS, removeTaggedAdditionalCSS, Application, ApplicationSettings } from '@nativescript/core';`
`2`	`2`
`3`	`3`	`export interface ThemeDefinition {`
`4`		`- [name: string]: () => string \| any;`
	`4`	`+ [name: string]: () => any;`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`export interface ThemeSwitcherOptions {`
`@@ -45,7 +45,7 @@ export class ThemeSwitcher {`
`45`	`45`	`});`
`46`	`46`	`}`
`47`	`47`
`48`		`- async switchTheme(themeName) {`
	`48`	`+ async switchTheme(themeName: string) {`
`49`	`49`	`console.log('SWITCHING THEME TO ', themeName);`
`50`	`50`	`if (!this.themes.has(themeName)) {`
`51`	`51`	`if (themeName !== 'default') {`