BlockSuite API Documentation / @blocksuite/blocks / ThemeObserver
Class: ThemeObserver 
Observer theme changing by data-theme property
Constructors 
new ThemeObserver() 
new ThemeObserver():
ThemeObserver
Returns 
Properties 
mode$ 
mode$:
Signal<ColorScheme>
Defined in 
packages/affine/shared/dist/theme/theme-observer.d.ts:7
Accessors 
computedStyle 
getstaticcomputedStyle():CSSStyleDeclaration
Returns 
CSSStyleDeclaration
Defined in 
packages/affine/shared/dist/theme/theme-observer.d.ts:8
instance 
getstaticinstance():ThemeObserver
Returns 
Defined in 
packages/affine/shared/dist/theme/theme-observer.d.ts:9
mode 
getstaticmode():ColorScheme
Returns 
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() 
staticgenerateColorProperty(color,fallback?):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.
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() 
staticgetColorValue(color,fallback?,real?):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.
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() 
staticgetPropertyValue(property):string
Parameters 
• property: string
Returns 
string
Defined in 
packages/affine/shared/dist/theme/theme-observer.d.ts:47
subscribe() 
staticsubscribe(callback): () =>void
Parameters 
• callback
Returns 
Function
Returns 
void
Defined in 
packages/affine/shared/dist/theme/theme-observer.d.ts:48