BlockSuite API Documentation / @blocksuite/blocks / ThemeService

Class: ThemeService

Generic extension. Extensions are used to set up the dependency injection container. In most cases, you won't need to use this class directly. We provide helper classes like CommandExtension and BlockViewExtension to make it easier to create extensions.

Extends

• Extension

Constructors

new ThemeService()

new ThemeService(std): ThemeService

Parameters

• std: BlockStdScope

Returns

ThemeService

Overrides

Extension.constructor

Defined in

packages/affine/shared/dist/services/theme-service.d.ts:20

Properties

app$

app$: Signal<ColorScheme>

Defined in

packages/affine/shared/dist/services/theme-service.d.ts:14

---

edgeless$

edgeless$: Signal<ColorScheme>

Defined in

packages/affine/shared/dist/services/theme-service.d.ts:15

Accessors

appTheme

get appTheme(): ColorScheme

Returns

ColorScheme

Defined in

packages/affine/shared/dist/services/theme-service.d.ts:16

---

edgelessTheme

get edgelessTheme(): ColorScheme

Returns

ColorScheme

Defined in

packages/affine/shared/dist/services/theme-service.d.ts:17

---

theme

get theme(): ColorScheme

Returns

ColorScheme

Defined in

packages/affine/shared/dist/services/theme-service.d.ts:18

---

theme$

get theme$(): Signal<ColorScheme>

Returns

Signal<ColorScheme>

Defined in

packages/affine/shared/dist/services/theme-service.d.ts:19

Methods

generateColorProperty()

generateColorProperty(color, fallback?, theme?): 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.

• theme?: 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/services/theme-service.d.ts:40

---

getColorValue()

getColorValue(color, fallback?, real?, theme?): 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.

• theme?: ColorScheme

Returns

string

• A color property string.

Example

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

Defined in

packages/affine/shared/dist/services/theme-service.d.ts:57

---

getCssVariableColor()

getCssVariableColor(property, theme?): string

Parameters

• property: string

• theme?: ColorScheme

Returns

string

Defined in

packages/affine/shared/dist/services/theme-service.d.ts:58

---

setup()

static setup(di): void

Parameters

• di: Container

Returns

void

Overrides

Extension.setup

Defined in

packages/affine/shared/dist/services/theme-service.d.ts:21