Class Theme<TValues>

constructor

• new Theme<TValues>(value, opts?): 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): void

• Parameters

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

  Returns void

attach

• attach(el?): 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?): void

• Parameters

  • el: HTMLElement = document.documentElement

  Returns void

off

• off(type, cb): void

• Parameters

  • type: "change"

  • cb: (() => void)

    • • (): void

      • Returns void

  Returns void

on

• on(type, cb): void

• Parameters

  • type: "change"

  • cb: (() => void)

    • • (): void

      • Returns void

  Returns void

recompute

• recompute(force?): 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): void

• Parameters

  • key: string

  Returns void

set

• set(key, value): void

• Parameters

  • key: string

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

  Returns void

setOpts

• setOpts(value?): void

• Parameters

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

  Returns void

write

• write(metaUrl, filepath): Promise<void>

• Write theme variables to get autocomplete while developing. Only works from node.

  // src/bin/generateThemeVars.ts
  
  import { theme } from "../theme.js" // import theme instance
  // write relative to file
  theme.write(import.meta.url, "../assets/variables.scss")
  Copy

  In package.json:

  "scripts": {
      "gen:theme": "pnpm ts-node src/bin/generateThemeVars.ts"
  }
  Copy

  Parameters

  • metaUrl: string

  • filepath: string

  Returns Promise<void>

Static setElVariables

• setElVariables(el, css, lastPropertiesSet?): 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[]