C3 AI Documentation Home

Theme and Style

C3 AI UI Stack provides a consistent out-of-the-box design system. The C3 AI UI Stack allows you to::

  • Create a custom theme to match a specific brand.
  • Adjust the layout, space, and size of components.
  • Design a new component.

Prerequisites

Use the out-of-the-box templates

The C3 AI UI Stack provides the following themes and densities:

  • C3DefaultDark: default dark theme for ease in low-light situations.
  • C3DefaultLight: default light theme for high contrast display.
  • C3DefaultDenseDensity: default dense density for compact information.
  • C3DefaultClassicDensity: default classic density for a softer and lighter feel.

To use or change the themes or densities templates:

  • If you have an existing UiSdlConfig.json file, open the file.
  • If this file does not exist yet, create it and save it under the {package}/config/UiSdlConfig/ folder.
  • Enter the following JSON configurations with your desired theme or density.
JSON
// UiSdlConfig.json
{
 "style": {
    "theme": {
        "id": "C3DefaultDark" // or "C3DefaultLight"
      },
    "density": {
        "id": "C3DefaultDenseDensity" // or "C3DefaultClassicDensity"
    }
 }
}

Customize the default templates

To create a custom theme or density, change the default theme or density in your package's source code. The following example describes how to create custom branded dark theme that changes the component background color and accent color to match a brand's color.

To change the component's background and accent color to match a brand's color:

To create a custom branded dark theme that changes the component's background and accent color to match a brand's color:

  1. Create the theme type.

    • Create a MyCustomTheme Type that extends UiSdlDarkTheme inside {package}/src/ folder

      Type
      // MyCustomTheme.c3typ
type MyCustomTheme extends UiSdlDarkTheme

  2. Create the theme instance.

    • Create a JSON file called MyCustomTheme inside {package}/metadata/UiSdlThemeTemplate

    • Populate the JSON file with all the fields/values from the Type UiSdlDarkTheme.

    • Override these fields for a custom theme.

      JSON
        // MyCustomTheme.json
  {
    "type": "MyCustomTheme",
    "id": "MyCustomTheme",
    "themeCategory": "Dark",
    "accentColor": "#F4A30C",
    "componentBackgroundColor": "#011E4D",
    ... // all the other keys and values from the `UiSdlDarkTheme.c3typ` type
  }

  3. Use the customized template

    • Use your newly created customized theme, the same way you use the default themes.

    • Create a JSON file named UiSdlConfig with the file path as {package}/config/UiSdlConfig/UiSdlConfig.json.

    • Enter the JSONs in the newly created file:

      JSON
        {
  "style": {
      "theme": {
          "id": "MyCustomTheme"
        },
      "density": {
          "id": "C3DefaultDenseDensity" // or "C3DefaultClassicDensity"
      }
  }
  }

You can also set the in the web console:

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

This will be overwritten by any configuration defined in config when files are synced.

Create custom CSS with custom modal

You can create new styles or override existing style declarations using .css or .scss files. To create or override a style:

  1. Create a custom component
  2. Wrap the component with the new style by importing the custom .scss file.

Only .css or .scss files are supported.

Example - Override the style of a modal component

  1. Create three (3) new files:

    • MyApplication.CustomComponentPage.json - Custom page component instance under {package}/src/customInstances folder.
    • MyApplication.MyCustomModal.tsx - Custom component under {package}/src/ui/styling folder.
    • MyCustomModal.scss - Custom modal styles under {package}/ui/c3/meta folder.

  2. Use the following example to create your MyApplication.MyCustomModal.tsx file:

    TypeScript
    import UiSdlModal from '@c3/ui/UiSdlModal';

import '@c3/ui/styling/MyCustomModal.scss';

const MyCustomModal = (props) => {
  return <UiSdlModal {...props} />
};

export default MyCustomModal;

  3. Use the following example to create your MyCustomModal.scss file:

    SCSS
    // Override existing modal styles - inspect html to see existing class names
.c3-modal-body {
  .c3-modal-sub-header {
    // Contrived example
    background-color: #fff;
  }
}

Add static assets

The C3 AI UI Stack also supports the url function that points to images or other static assets. Use the css-loader webpack plugin to tailor the url function for the following different use cases.

Use case 1

To add a static asset in the ui/content directory and reference these assets directly in my styles without going into webpack. Then, change the static asset paths and override the asset by using dependent packages without (re)bundling.

Add /* webpackIgnore: true */ in the .scss file and use an absolute path.

SCSS
/**
 * MyCustomModal.scss
 */

/*
 * The path assumes `ui/content` as the root.
 * Thus, the following configuration
 * would look for `my-asset.png` at `[package]/ui/content/assets/images` path.
 */

/* webpackIgnore: true */
content: url("/assets/images/my-asset.png");

Use case 2

To add static assets in my ui/src directory, reference these assets as relative paths, and allow webpack to bundle them.

In this scenario, this static asset cannot be overridden by dependent packages.

Use relative paths without the webpackIgnore directive.

SCSS
/**
 * MyCustomModal.scss
 */

/*
*  Since the path assumes `ui/content` as the root,
* the static asset's, `my-asset.png`, file path
* is entered with `./assets/images/` instead of
* ` [package]/ui/src/assets/images` path.
*/

// Add the relative path
content: url("./assets/images/my-asset.png");
Was this page helpful?