Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action
New in 1.26.0

uiContext()

Provides styling information about the environment in which a custom component is rendered.

console.log(Scrivito.uiContext()) //=> { theme: 'light' }

Custom components can show up either on a sidebar panel or in properties dialogs. Both use individual themes, dark and light respectively. Using Scrivito.uiContext(), custom components can adapt their styles to their respective environment.

Returns

null if the user interface is not present or is being loaded, otherwise UiContext (Object) – the styling information for the elements in which a custom component gets rendered, consisting of:

  • theme (String) – dark or light

Example

Add a specific class name to a custom component depending on the theme:

Scrivito.registerComponent('YesOrNoTab', ({ page }) => { const { theme } = Scrivito.uiContext(); return ( <input type="checkbox" className={`background--${theme}`} checked={page.get('yesOrNo') === 'yes'} onChange={(e) => page.update({ yesOrNo: e.target.checked ? 'yes' : 'no' }) } /> ); });