Class: FlyzeThemingService

@flyze/lib-core-angular 1.0.0-alpha.34· latest

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:27

Implements

OnDestroy

Constructors

Constructor

new FlyzeThemingService(): FlyzeThemingService

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:120

Returns

FlyzeThemingService

Properties

customPreferredColorScheme$

readonly customPreferredColorScheme$: Observable<"dark" | "light" | "auto">

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:52

Holds the custom preferred color scheme of the user. Can be set to ‘dark’, ‘light’, or ‘auto’ (which will use the system preference).

detectedPreferredColorScheme$

readonly detectedPreferredColorScheme$: Observable<"dark" | "light">

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:36

Holds the automatic detected preferred color scheme of the user.

preferredColorScheme$

readonly preferredColorScheme$: Observable<"dark" | "light">

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:74

Holds the preferred color scheme of the user, which is determined by the custom preference or the detected system preference. It will emit ‘dark’ or ‘light’ based on the user’s choice or system preference.

theme$

readonly theme$: Observable<string>

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:93

Holds the current theme name. e.g., ‘flyze’

Accessors

customPreferredColorScheme

Get Signature

get customPreferredColorScheme(): "dark" | "light" | "auto"

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:58

The custom preferred color scheme of the user.

Returns

"dark" | "light" | "auto"

Set Signature

set customPreferredColorScheme(value): void

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:61

Parameters

value

"dark" | "light" | "auto"

Returns

void

detectedPreferredColorScheme

Get Signature

get detectedPreferredColorScheme(): "dark" | "light"

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:42

The automatic detected preferred color scheme of the user.

Returns

"dark" | "light"

preferredColorScheme

Get Signature

get preferredColorScheme(): "dark" | "light"

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:83

The preferred color scheme of the user, which is either ‘dark’ or ‘light’. It is determined by the custom preference or the detected system preference. If the custom preference is set to ‘auto’, it will use the detected system preference. If the custom preference is set to ‘dark’ or ‘light’, it will use that value instead.

Returns

"dark" | "light"

theme

Get Signature

get theme(): string

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:102

The current theme name. e.g., ‘flyze’ The theme must exist in the theming service. If not, the theme will not be changed. Register the theme via setThemeConfig before using it.

Returns

string

Set Signature

set theme(value): void

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:105

Parameters

value

string

Returns

void

Methods

generateGradiationPalette()

generateGradiationPalette<Key>(themeName, key): any

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:295

Generates a gradient palette for a given theme and key.

Type Parameters

Key

Key extends NestedKeyOf<DeepPartialWithColor<{ dark: { colors: { colors-flyze-default: string; colors-flyze-orange: string; colors-flyze-pink: string; colors-system-blue: string; colors-system-brown: string; colors-system-cyan: string; colors-system-gray: string; colors-system-gray-2: string; colors-system-gray-3: string; colors-system-gray-4: string; colors-system-gray-5: string; colors-system-gray-6: string; colors-system-green: string; colors-system-indigo: string; colors-system-mint: string; colors-system-orange: string; colors-system-pink: string; colors-system-purple: string; colors-system-red: string; colors-system-teal: string; colors-system-yellow: string; }; platform: { platform-flyze-error: string; platform-flyze-info: string; platform-flyze-success: string; platform-flyze-warning: string; platform-shell-asset-tree: string; platform-shell-body: string; platform-shell-dashboard-header: string; platform-shell-header: string; platform-shell-sidenav: string; }; system: { system-black-text: string; system-dark-text: string; system-label: string; system-label-default: string; system-label-quaternary: string; system-label-secondary: string; system-label-tertiary: string; system-light-text: string; system-link: string; system-opaque-separator: string; system-opaque-seperator: string; system-placeholder-text: string; system-quarterly-system-background-color: string; system-quartery-system-background-color: string; system-quaternary-system-fill: string; system-secondary-system-background: string; system-secondary-system-fill: string; system-secondary-system-grouped-background: string; system-separator: string; system-seperator: string; system-stroke: string; system-system-background: string; system-system-fill: string; system-system-grouped-background: string; system-tertiary-system-background: string; system-tertiary-system-fill: string; system-tertiary-system-grouped-background: string; system-tint: string; system-tint-5: string; system-tint-50: string; system-tint-95: string; system-white-text: string; }; }; light: { colors: { colors-flyze-default: string; colors-flyze-orange: string; colors-flyze-pink: string; colors-system-blue: string; colors-system-brown: string; colors-system-cyan: string; colors-system-gray: string; colors-system-gray-2: string; colors-system-gray-3: string; colors-system-gray-4: string; colors-system-gray-5: string; colors-system-gray-6: string; colors-system-green: string; colors-system-indigo: string; colors-system-mint: string; colors-system-orange: string; colors-system-pink: string; colors-system-purple: string; colors-system-red: string; colors-system-teal: string; colors-system-yellow: string; }; platform: { platform-flyze-error: string; platform-flyze-info: string; platform-flyze-success: string; platform-flyze-warning: string; platform-shell-asset-tree: string; platform-shell-body: string; platform-shell-dashboard-header: string; platform-shell-header: string; platform-shell-sidenav: string; }; system: { system-black-text: string; system-dark-text: string; system-label: string; system-label-default: string; system-label-quaternary: string; system-label-secondary: string; system-label-tertiary: string; system-light-text: string; system-link: string; system-opaque-separator: string; system-opaque-seperator: string; system-placeholder-text: string; system-quarterly-system-background-color: string; system-quartery-system-background-color: string; system-quaternary-system-fill: string; system-secondary-system-background: string; system-secondary-system-fill: string; system-secondary-system-grouped-background: string; system-separator: string; system-seperator: string; system-stroke: string; system-system-background: string; system-system-fill: string; system-system-grouped-background: string; system-tertiary-system-background: string; system-tertiary-system-fill: string; system-tertiary-system-grouped-background: string; system-tint: string; system-tint-5: string; system-tint-50: string; system-tint-95: string; system-white-text: string; }; }; }>>

Parameters

themeName

string

The name of the theme.

key

Key

The key of the theme property.

Returns

any

An object containing the gradient values for the given key.

getThemeConfig()

getThemeConfig(themeName): ThemeStructure

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:165

Retrieves the theme configuration for a given theme name.

Parameters

themeName

string

The name of the theme to retrieve the configuration for.

Returns

ThemeStructure

The theme configuration for the given theme name, or undefined if the theme does not exist.

getThemeValue()

getThemeValue<Key>(themeName, key): ValueOfPath<DeepPartialWithColor<{ dark: { colors: { colors-flyze-default: string; colors-flyze-orange: string; colors-flyze-pink: string; colors-system-blue: string; colors-system-brown: string; colors-system-cyan: string; colors-system-gray: string; colors-system-gray-2: string; colors-system-gray-3: string; colors-system-gray-4: string; colors-system-gray-5: string; colors-system-gray-6: string; colors-system-green: string; colors-system-indigo: string; colors-system-mint: string; colors-system-orange: string; colors-system-pink: string; colors-system-purple: string; colors-system-red: string; colors-system-teal: string; colors-system-yellow: string; }; platform: { platform-flyze-error: string; platform-flyze-info: string; platform-flyze-success: string; platform-flyze-warning: string; platform-shell-asset-tree: string; platform-shell-body: string; platform-shell-dashboard-header: string; platform-shell-header: string; platform-shell-sidenav: string; }; system: { system-black-text: string; system-dark-text: string; system-label: string; system-label-default: string; system-label-quaternary: string; system-label-secondary: string; system-label-tertiary: string; system-light-text: string; system-link: string; system-opaque-separator: string; system-opaque-seperator: string; system-placeholder-text: string; system-quarterly-system-background-color: string; system-quartery-system-background-color: string; system-quaternary-system-fill: string; system-secondary-system-background: string; system-secondary-system-fill: string; system-secondary-system-grouped-background: string; system-separator: string; system-seperator: string; system-stroke: string; system-system-background: string; system-system-fill: string; system-system-grouped-background: string; system-tertiary-system-background: string; system-tertiary-system-fill: string; system-tertiary-system-grouped-background: string; system-tint: string; system-tint-5: string; system-tint-50: string; system-tint-95: string; system-white-text: string; }; }; light: { colors: { colors-flyze-default: string; colors-flyze-orange: string; colors-flyze-pink: string; colors-system-blue: string; colors-system-brown: string; colors-system-cyan: string; colors-system-gray: string; colors-system-gray-2: string; colors-system-gray-3: string; colors-system-gray-4: string; colors-system-gray-5: string; colors-system-gray-6: string; colors-system-green: string; colors-system-indigo: string; colors-system-mint: string; colors-system-orange: string; colors-system-pink: string; colors-system-purple: string; colors-system-red: string; colors-system-teal: string; colors-system-yellow: string; }; platform: { platform-flyze-error: string; platform-flyze-info: string; platform-flyze-success: string; platform-flyze-warning: string; platform-shell-asset-tree: string; platform-shell-body: string; platform-shell-dashboard-header: string; platform-shell-header: string; platform-shell-sidenav: string; }; system: { system-black-text: string; system-dark-text: string; system-label: string; system-label-default: string; system-label-quaternary: string; system-label-secondary: string; system-label-tertiary: string; system-light-text: string; system-link: string; system-opaque-separator: string; system-opaque-seperator: string; system-placeholder-text: string; system-quarterly-system-background-color: string; system-quartery-system-background-color: string; system-quaternary-system-fill: string; system-secondary-system-background: string; system-secondary-system-fill: string; system-secondary-system-grouped-background: string; system-separator: string; system-seperator: string; system-stroke: string; system-system-background: string; system-system-fill: string; system-system-grouped-background: string; system-tertiary-system-background: string; system-tertiary-system-fill: string; system-tertiary-system-grouped-background: string; system-tint: string; system-tint-5: string; system-tint-50: string; system-tint-95: string; system-white-text: string; }; }; }>, Key>

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:251

Retrieves the value of a theme property from the specified theme.

Type Parameters

Key

Parameters

themeName

string

The name of the theme to retrieve the value from.

key

Key

The key of the theme property to retrieve.

Returns

ValueOfPath<DeepPartialWithColor<{ dark: { colors: { colors-flyze-default: string; colors-flyze-orange: string; colors-flyze-pink: string; colors-system-blue: string; colors-system-brown: string; colors-system-cyan: string; colors-system-gray: string; colors-system-gray-2: string; colors-system-gray-3: string; colors-system-gray-4: string; colors-system-gray-5: string; colors-system-gray-6: string; colors-system-green: string; colors-system-indigo: string; colors-system-mint: string; colors-system-orange: string; colors-system-pink: string; colors-system-purple: string; colors-system-red: string; colors-system-teal: string; colors-system-yellow: string; }; platform: { platform-flyze-error: string; platform-flyze-info: string; platform-flyze-success: string; platform-flyze-warning: string; platform-shell-asset-tree: string; platform-shell-body: string; platform-shell-dashboard-header: string; platform-shell-header: string; platform-shell-sidenav: string; }; system: { system-black-text: string; system-dark-text: string; system-label: string; system-label-default: string; system-label-quaternary: string; system-label-secondary: string; system-label-tertiary: string; system-light-text: string; system-link: string; system-opaque-separator: string; system-opaque-seperator: string; system-placeholder-text: string; system-quarterly-system-background-color: string; system-quartery-system-background-color: string; system-quaternary-system-fill: string; system-secondary-system-background: string; system-secondary-system-fill: string; system-secondary-system-grouped-background: string; system-separator: string; system-seperator: string; system-stroke: string; system-system-background: string; system-system-fill: string; system-system-grouped-background: string; system-tertiary-system-background: string; system-tertiary-system-fill: string; system-tertiary-system-grouped-background: string; system-tint: string; system-tint-5: string; system-tint-50: string; system-tint-95: string; system-white-text: string; }; }; light: { colors: { colors-flyze-default: string; colors-flyze-orange: string; colors-flyze-pink: string; colors-system-blue: string; colors-system-brown: string; colors-system-cyan: string; colors-system-gray: string; colors-system-gray-2: string; colors-system-gray-3: string; colors-system-gray-4: string; colors-system-gray-5: string; colors-system-gray-6: string; colors-system-green: string; colors-system-indigo: string; colors-system-mint: string; colors-system-orange: string; colors-system-pink: string; colors-system-purple: string; colors-system-red: string; colors-system-teal: string; colors-system-yellow: string; }; platform: { platform-flyze-error: string; platform-flyze-info: string; platform-flyze-success: string; platform-flyze-warning: string; platform-shell-asset-tree: string; platform-shell-body: string; platform-shell-dashboard-header: string; platform-shell-header: string; platform-shell-sidenav: string; }; system: { system-black-text: string; system-dark-text: string; system-label: string; system-label-default: string; system-label-quaternary: string; system-label-secondary: string; system-label-tertiary: string; system-light-text: string; system-link: string; system-opaque-separator: string; system-opaque-seperator: string; system-placeholder-text: string; system-quarterly-system-background-color: string; system-quartery-system-background-color: string; system-quaternary-system-fill: string; system-secondary-system-background: string; system-secondary-system-fill: string; system-secondary-system-grouped-background: string; system-separator: string; system-seperator: string; system-stroke: string; system-system-background: string; system-system-fill: string; system-system-grouped-background: string; system-tertiary-system-background: string; system-tertiary-system-fill: string; system-tertiary-system-grouped-background: string; system-tint: string; system-tint-5: string; system-tint-50: string; system-tint-95: string; system-white-text: string; }; }; }>, Key>

The value of the theme property.

getThemeValueGradiation()

getThemeValueGradiation<Key>(themeName, key, gradition): string

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:272

Retrieves a theme value with a specified gradiation.

Type Parameters

Key

Parameters

themeName

string

The name of the theme to retrieve the value from.

key

Key

The key of the theme property to retrieve.

gradition

The gradiation configuration.

gradiationPercentage

number

gradiationType

"lighter" | "darker"

Returns

string

A CSS color-mix string representing the gradiated theme value.

ngOnDestroy()

ngOnDestroy(): void

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:149

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

Returns

void

Implementation of

OnDestroy.ngOnDestroy

removeRootVariable()

removeRootVariable(variableName): void

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:228

Removes a root variable with the specified name.

Parameters

variableName

string

The name of the root variable to be removed.

Returns

void

setMultipleRootVariables()

setMultipleRootVariables(variables): void

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:239

Sets multiple root variables at once.

Parameters

variables

Record<string, string>

An object containing the variable names as keys and their corresponding values.

Returns

void

setRootVariable()

setRootVariable(variableName, value): void

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:217

Sets a root variable with the specified name and value. It will directly set the variable, ignoring theme configurations

Parameters

variableName

string

The name of the root variable.

value

string

The value of the root variable.

Returns

void

setThemeConfig()

setThemeConfig(themeName, themePalette): void

Defined in: projects/lib-core-angular/src/lib/modules/theme/flyze-theming.service.ts:178

Sets the theme configuration for a given theme name.

Parameters

themeName

string

The name of the theme to set the configuration for.

themePalette

DeepPartialWithColor<{ dark: { colors: { colors-flyze-default: string; colors-flyze-orange: string; colors-flyze-pink: string; colors-system-blue: string; colors-system-brown: string; colors-system-cyan: string; colors-system-gray: string; colors-system-gray-2: string; colors-system-gray-3: string; colors-system-gray-4: string; colors-system-gray-5: string; colors-system-gray-6: string; colors-system-green: string; colors-system-indigo: string; colors-system-mint: string; colors-system-orange: string; colors-system-pink: string; colors-system-purple: string; colors-system-red: string; colors-system-teal: string; colors-system-yellow: string; }; platform: { platform-flyze-error: string; platform-flyze-info: string; platform-flyze-success: string; platform-flyze-warning: string; platform-shell-asset-tree: string; platform-shell-body: string; platform-shell-dashboard-header: string; platform-shell-header: string; platform-shell-sidenav: string; }; system: { system-black-text: string; system-dark-text: string; system-label: string; system-label-default: string; system-label-quaternary: string; system-label-secondary: string; system-label-tertiary: string; system-light-text: string; system-link: string; system-opaque-separator: string; system-opaque-seperator: string; system-placeholder-text: string; system-quarterly-system-background-color: string; system-quartery-system-background-color: string; system-quaternary-system-fill: string; system-secondary-system-background: string; system-secondary-system-fill: string; system-secondary-system-grouped-background: string; system-separator: string; system-seperator: string; system-stroke: string; system-system-background: string; system-system-fill: string; system-system-grouped-background: string; system-tertiary-system-background: string; system-tertiary-system-fill: string; system-tertiary-system-grouped-background: string; system-tint: string; system-tint-5: string; system-tint-50: string; system-tint-95: string; system-white-text: string; }; }; light: { colors: { colors-flyze-default: string; colors-flyze-orange: string; colors-flyze-pink: string; colors-system-blue: string; colors-system-brown: string; colors-system-cyan: string; colors-system-gray: string; colors-system-gray-2: string; colors-system-gray-3: string; colors-system-gray-4: string; colors-system-gray-5: string; colors-system-gray-6: string; colors-system-green: string; colors-system-indigo: string; colors-system-mint: string; colors-system-orange: string; colors-system-pink: string; colors-system-purple: string; colors-system-red: string; colors-system-teal: string; colors-system-yellow: string; }; platform: { platform-flyze-error: string; platform-flyze-info: string; platform-flyze-success: string; platform-flyze-warning: string; platform-shell-asset-tree: string; platform-shell-body: string; platform-shell-dashboard-header: string; platform-shell-header: string; platform-shell-sidenav: string; }; system: { system-black-text: string; system-dark-text: string; system-label: string; system-label-default: string; system-label-quaternary: string; system-label-secondary: string; system-label-tertiary: string; system-light-text: string; system-link: string; system-opaque-separator: string; system-opaque-seperator: string; system-placeholder-text: string; system-quarterly-system-background-color: string; system-quartery-system-background-color: string; system-quaternary-system-fill: string; system-secondary-system-background: string; system-secondary-system-fill: string; system-secondary-system-grouped-background: string; system-separator: string; system-seperator: string; system-stroke: string; system-system-background: string; system-system-fill: string; system-system-grouped-background: string; system-tertiary-system-background: string; system-tertiary-system-fill: string; system-tertiary-system-grouped-background: string; system-tint: string; system-tint-5: string; system-tint-50: string; system-tint-95: string; system-white-text: string; }; }; }> & object

The theme configuration to set.

Returns

void