How to switch between extensions

UI Builder
1

Hello,

I want my app to have 2 style versions: Bright; Dark. Each version has its own dedicated “Extension”, one for Bright mode and another for Dark mode.

My idea is to allow users to switch between these extensions dynamically by clicking, for example, a button in the layout. Is there a way to determine which “Extension” should be applied at runtime?

Looking forward to your guidance!

Thanks in advance.

Best regards,
Manuel Germano

2

Hi @Manuel_Germano

There is no way to switch between CSS extensions, all extensions will be composed into a single CSS file when you build your app, or in runtime when you open it in the preview mode.

You can have one extension for the Dark Mode and inside you decorate all elements under the root selector, like:

.dark-mode {
  div {
   background: black;
   color: white;
  }
}

then when you need to enable the DarkTheme you just add the dark-mode CSS class to the root block

Regards,
Vlad

3

Thank you @vladimir-upirov
Regards,
Manuel