Test Enterprise-Class Web CMS Scrivito Free for 30 Days
Test Scrivito Free for 30 Days
New in 1.25.0


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.


UiContext (Object) – the styling information for the elements in which a custom component gets rendered, consisting of:
  • theme (String) – dark or light


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' }) } /> ); });