Callbag JSX

👉 Use themePlug() to plug your theme into your renderer:

1linkimport { makeRenderer } from 'callbag-jsx'

2linkimport { themePlug } from 'themed-jss/jsx'

3linkimport { theme } from 'themed-jss'

4link

5linkconst myTheme = theme(

6link  {

7link    background: 'white',

8link    text: 'black',

9link    primary: 'blue',

10link  },

11link  {

12link    background: 'black',

13link    text: 'white',

14link  }

15link)

16link

17linkconst renderer = makeRenderer().plug(themePlug(myTheme))

18linkrenderer.render(

19link  <>

20link    ...

21link  </>

22link).on(document.body)

👉 Now use this.theme in components to access theme:

1linkimport { style } from 'themed-style'

2link

3linkconst BtnStyle = style(theme => ({

4link  background: theme.primary,

5link  color: theme.background,

6link  borderRadius: 3,

7link  border: `2px solid ${theme.primary}`,

8link  cursor: 'pointer',

9link

10link  '&:hover': {

11link    background: 'transparent',

12link    color: `${theme.primary} !darkmode`,

13link  }

14link}))

15link

16linkexport function Btn(_, renderer) {

17link  const cls = this.theme.class(BtnStyle)

18link

19link  return (

20link    <button class={cls}>Click Me!</button>

21link  )

22link}

verified_user TYPE SAFETY
In TypeScript, it is recommended to annotate this to get correct typing for your themed components:
1linkimport { ThemedComponentThis } from 'themed-jss/jsx'

2link

3linkexport function Btn(

4link  this: ThemedComponentThis<ThemeType>,

5link  props: any,

6link  renderer: RendererLike<Node>

7link) {

8link  ...

9link}
☝️ ThemeType type argument is optional.

linkRender JSX

The themePlug() function returns a generic Component Processor. This means it can be used to plug in themes into any renderer from Render JSX:

1linkimport { CommonDOMRenderer } from 'render-jsx/dom'

2linkimport { themePlug } from 'themed-jss/jsx'

3link

4linkconst myTheme = theme(...)

5link

6linkconst renderer = new CommonDOMRenderer().plug(themePlug(myTheme))

Render JSX