Change the default theme

The C3 AI UI Framework provides two built-in themes:

• C3DefaultLight — a high-contrast theme for bright environments.
• C3DefaultDark — a low-light theme for dark mode experiences.

When you set a theme in your application package, all application deployments use that theme by default. To apply a built-in theme:

1. Open or create the UiSdlConfig.json file in your package:

   Text

   Copy code to clipboard

   {package}/config/UiSdlConfig/UiSdlConfig.json

2. Set the theme ID to either the light or dark theme:

   JSON

   Copy code to clipboard

   {
     "style": {
       "theme": {
         "id": "C3DefaultDark"
       }
     }
   }

   To switch back to the light theme, update the id to C3DefaultLight.

3. (Optional) Override the theme at runtime using the browser console:

   JavaScript

   Copy code to clipboard

   UiSdlConfig.make().setConfigValue("style.theme.id", "C3DefaultDark");

   Runtime overrides take precedence over the package configuration, but only persist for the current deployment. You must reapply the override after each redeploy.