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 Signature

get appTheme(): ColorScheme

Returns

ColorScheme

Defined in

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

---

edgelessTheme

Get Signature

get edgelessTheme(): ColorScheme

Returns

ColorScheme

Defined in

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

---

theme

Get Signature

get theme(): ColorScheme

Returns

ColorScheme

Defined in

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

---

theme$

Get Signature

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