Class Theme<TValues>

constructor

• new Theme<
      TValues extends
          Record<string, ControlVar<any, any> | InterpolatedVars<any>> = Record<
          string,
          ControlVar<any, any>
          | InterpolatedVars<any>,
      >,
  >(
      value: TValues,
      opts?: Partial<{ escapeChar: string }>,
  ): Theme<TValues>

  Type Parameters

  • TValues extends Record<string, ControlVar<any, any> | InterpolatedVars<any>> = Record<string, ControlVar<any, any> | InterpolatedVars<any>>

  Parameters

  • value: TValues
  • opts: Partial<{ escapeChar: string }> = {}

  Returns Theme<TValues>

css

els

options

value

add

• add(value: Record<string, ControlVar<any, any> | InterpolatedVars<any>>): void

  Parameters

  • value: Record<string, ControlVar<any, any> | InterpolatedVars<any>>

  Returns void

attach

• attach(el?: HTMLElement): void

  Attach to an element and automatically set and update the theme's properties on it.

  If no element is passed, attaches to document.documentElement.

  Parameters

  • el: HTMLElement = document.documentElement

  Returns void

detach

• detach(el?: HTMLElement): void

  Parameters

  • el: HTMLElement = document.documentElement

  Returns void

off

• off(type: "change", cb: () => void): void

  Parameters

  • type: "change"
  • cb: () => void

  Returns void

on

• on(type: "change", cb: () => void): void

  Parameters

  • type: "change"
  • cb: () => void

  Returns void

recompute

• recompute(force?: boolean): void

  The theme can force dependencies to recompute.

  This should not be needed unless you want to recompute based of some external state.

  Please file a bug report otherwise.

  Parameters

  • force: boolean = true

  Returns void

remove

• remove(key: string): void

  Parameters

  • key: string

  Returns void

set

• set(key: string, value: ControlVar<any, any> | InterpolatedVars<any>): void

  Parameters

  • key: string
  • value: ControlVar<any, any> | InterpolatedVars<any>

  Returns void

setOpts

• setOpts(value?: Partial<{ escapeChar: string }>): void

  Parameters

  • value: Partial<{ escapeChar: string }> = {}

  Returns void

StaticsetElVariables

• setElVariables(
      el: HTMLElement,
      css: Record<string, string>,
      lastPropertiesSet?: string[],
  ): string[]

  Set css variables on an element.

  Careful that the css properties are prefixed with --, otherwise they might conflict with other style properties.

  Can be passed a list of already set properties to remove. Returns a list of properties that were set.

  Parameters

  • el: HTMLElement
  • css: Record<string, string>
  • lastPropertiesSet: string[] = []

  Returns string[]