Skip to content

BlockSuite API Documentation / @blocksuite/blocks / ThemeObserver

Class: ThemeObserver

Observer theme changing by data-theme property

Constructors

new ThemeObserver()

new ThemeObserver(): ThemeObserver

Returns

ThemeObserver

Properties

mode$

mode$: Signal<ColorScheme>

Defined in

packages/affine/shared/dist/theme/theme-observer.d.ts:7

Accessors

computedStyle

get static computedStyle(): CSSStyleDeclaration

Returns

CSSStyleDeclaration

Defined in

packages/affine/shared/dist/theme/theme-observer.d.ts:8


instance

get static instance(): ThemeObserver

Returns

ThemeObserver

Defined in

packages/affine/shared/dist/theme/theme-observer.d.ts:9


mode

get static mode(): ColorScheme

Returns

ColorScheme

Defined in

packages/affine/shared/dist/theme/theme-observer.d.ts:10

Methods

disconnect()

disconnect(): void

Returns

void

Defined in

packages/affine/shared/dist/theme/theme-observer.d.ts:49


observe()

observe(element): void

Parameters

element: HTMLElement

Returns

void

Defined in

packages/affine/shared/dist/theme/theme-observer.d.ts:50


generateColorProperty()

static generateColorProperty(color, fallback?, mode?): string

Generates a CSS's color property with var or light-dark functions.

Sometimes used to set the frame/note background.

Parameters

color: Color

A color value.

fallback?: string

If color value processing fails, it will be used as a fallback.

mode?: ColorScheme

Returns

string

  • A color property string.

Example

`rgba(255,0,0)`
`#fff`
`light-dark(#fff, #000)`
`var(--affine-palette-shape-blue)`

Defined in

packages/affine/shared/dist/theme/theme-observer.d.ts:29


getColorValue()

static getColorValue(color, fallback?, real?, mode?): string

Gets a color with the current theme.

Parameters

color: Color

A color value.

fallback?: string

If color value processing fails, it will be used as a fallback.

real?: boolean

If true, it returns the computed style.

mode?: ColorScheme

Returns

string

  • A color property string.

Example

`rgba(255,0,0)`
`#fff`
`--affine-palette-shape-blue`

Defined in

packages/affine/shared/dist/theme/theme-observer.d.ts:46


getPropertyValue()

static getPropertyValue(property): string

Parameters

property: string

Returns

string

Defined in

packages/affine/shared/dist/theme/theme-observer.d.ts:47


subscribe()

static subscribe(callback): () => void

Parameters

callback

Returns

Function

Returns

void

Defined in

packages/affine/shared/dist/theme/theme-observer.d.ts:48