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