Themes Templates
each section
C3 AI Component Library has two themes available the traditional "Light" theme or a "Dark" theme. The default theme is the "Light" theme. This guide shows how to change the theme templates.
Example of "Dark" theme:
"Dark" Theme Example
The themes are defined as C3 Types. These Types describe the style properties and their values for each respective theme.
The UiSdlThemeTemplate Type is used to implement the available themes for your application, with each theme configuration provided as seed data in JSON format. By creating your own seed data, you can define additional themes.

Default C3 AI Style Templates

Here we provide the implementation of the default C3 AI Light and Dark themes:
UiSdlThemeCategory.c3typ
C3DefaultLight.json
C3DefaultDark.json
1
/**
2
* Enum type for the categories of themes in C3 applications
3
*/
4
enum type UiSdlThemeCategory {
5
LIGHT = "Light"
6
DARK = "Dark"
7
}
Copied!
1
{
2
"id" : "C3DefaultLight",
3
"themeCategory": "Light",
4
"accentColor": "#2271e7",
5
"accentFontColor": "#fff",
6
"accentVariantColor": "#478ce0",
7
"borderColor": "#9d9b9c",
8
"buttonControlBorderColor": "#bcbabb",
9
"buttonControlFontColor": "#191919",
10
"buttonControlHoverBackgroundColor": "#ecf3fc",
11
"buttonControlSelectedBackgroundColor": "#4791e1",
12
"buttonControlSelectedDisabledBackgroundColor": "#bdd4f8",
13
"buttonControlSelectedFontColor": "#fff",
14
"buttonControlSelectedHoverBackgroundColor": "#1d83fb",
15
"buttonDangerPrimaryActiveBackgroundColor": "#bb071b",
16
"buttonDangerPrimaryHoverBackgroundColor": "#d82225",
17
"buttonDangerSecondaryActiveBackgroundColor": "#ffccd0",
18
"buttonDangerSecondaryHoverBackgroundColor": "#ffeaed",
19
"buttonDangerTertiaryActiveBackgroundColor": "#ffccd0",
20
"buttonDangerTertiaryHoverBackgroundColor": "#ffeaed",
21
"buttonIconActiveBackgroundColor": "#dcdedf",
22
"buttonIconBackgroundColor": "transparent",
23
"buttonIconHoverBackgroundColor": "#f2f2f2",
24
"buttonIconSelectedActiveBackgroundColor": "#dcdedf",
25
"buttonIconSelectedBackgroundColor": "#e5e5e5",
26
"buttonIconSelectedForegroundColor": "#191919",
27
"buttonIconSelectedHoverBackgroundColor": "#f2f2f2",
28
"buttonPrimaryActiveBackgroundColor": "#245fd4",
29
"buttonPrimaryHoverBackgroundColor": "#1092ff",
30
"buttonSecondaryActiveBackgroundColor": "#bbddff",
31
"buttonSecondaryHoverBackgroundColor": "#e3f2ff",
32
"buttonTertiaryActiveBackgroundColor": "#bbddff",
33
"buttonTertiaryHoverBackgroundColor": "#e3f2ff",
34
"cardElevation00BackgroundColor": "#fff",
35
"cardElevation01BackgroundColor": "#fff",
36
"cardElevation02BackgroundColor": "#fff",
37
"cardElevation03BackgroundColor": "#fff",
38
"cardElevation04BackgroundColor": "#fff",
39
"cardElevation06BackgroundColor": "#fff",
40
"cardElevation08BackgroundColor": "#fff",
41
"cardElevation12BackgroundColor": "#fff",
42
"cardElevation16BackgroundColor": "#fff",
43
"cardElevation24BackgroundColor": "#fff",
44
"componentBackgroundColor": "#fff",
45
"componentBackgroundColorError": "#fcc",
46
"componentBorderColor": "#c6c5c5",
47
"componentDividerColor": "#ccc",
48
"chartSeriesTooltipNameFontColor": "#191919",
49
"chartSeriesTooltipTitleFontColor": "#191919",
50
"chartSeriesTooltipValueFontColor": "#191919",
51
"checkboxBackgroundColor": "#fff",
52
"checkboxColor": "#bcbabb",
53
"checkboxHoverBackgroundColor": "#fff",
54
"checkboxHoverColor": "#191919",
55
"checkboxSelectedDisabledColor": "#bdd4f8",
56
"checkboxSelectedHoverColor": "#456cb7",
57
"dangerColor": "#cb181e",
58
"dropdownDescriptionBackgroundColor": "#e0f2ff",
59
"dropdownDescriptionColor": "#233abc",
60
"dropdownMessageColor": "rgba(0, 0, 0, 0.4)",
61
"dropdownOptionDividerColor": "#ccc",
62
"dropdownSelectionColor": "#e5f3fc",
63
"fontColor": "#191919",
64
"formFieldBorderColor": "#bcbabb",
65
"formFieldColorDisabled": "#e5e5e5",
66
"formFieldBackgroundColorDisabled": "rgba(17, 17, 18, 0.05)",
67
"formFieldBorderColorDisabled": "rgba(17, 17, 18, 0.2)",
68
"formFieldHeaderColorDisabled": "rgba(17, 17, 18, 0.4)",
69
"formFieldColorHint": "#666",
70
"formFieldErrorBorderColor": "#bcbabb",
71
"formFieldErrorHoverBorderColor": "#191919",
72
"formFieldHoverBackgroundColor": "#fff",
73
"formFieldHoverBorderColor": "#191919",
74
"formFieldLabelErrorColor": "#d82225",
75
"formFieldLabelFocusColor": "#2271e7",
76
"formFieldVariantBorderColor": "#e0dddf",
77
"gridHeaderFontColor": "#191919",
78
"gridHoverBackgroundColor": "rgba(34, 113, 231, 0.15)",
79
"gridPagerLabelFontColor": "#656565",
80
"gridPagerSizesFontColor": "#000",
81
"gridSelectedCellBackgroundColor": "#e3f2ff",
82
"gridSelectedCellBorderColor": "#2271e7",
83
"gridSelectedFontColor": "#656565",
84
"gridSelectedHoverBackgroundColor": "rgba(34, 113, 231, 0.35)",
85
"iconGroupColor": "#191919",
86
"infoColor": "#245fd4",
87
"invertedComponentBackgroundColor": "#333",
88
"mapMarkerClusterColor": "#2170b5",
89
"mapTooltipAdditionalFieldsDescriptionFontColor": "#191919",
90
"mapTooltipAdditionalFieldsHeaderFontColor": "#767676",
91
"mapTooltipHeaderFontColor": "#191919",
92
"mapTooltipSubHeaderFontColor": "#191919",
93
"menuBackgroundActiveColor": "#394255",
94
"menuBackgroundColor": "#262e3d",
95
"menuDividerColor": "#48556b",
96
"menuPrimaryColor": "#fff",
97
"pageBackgroundColor": "#f5f7f8",
98
"secondaryFontColor": "#767676",
99
"secondaryVariantFontColor": "#dcdedf",
100
"selectionBackgroundColor": "rgba(34, 113, 231, 0.2)",
101
"selectFieldPillActiveBackgroundColor": "#dcdedf",
102
"selectFieldPillHoverBackgroundColor": "#f2f4f5",
103
"selectFieldPillTextColor": "#333",
104
"sidePanelSubtitleColor":"#666",
105
"subMenuItemBackgroundActiveColor": "#596881",
106
"successColor": "#228630",
107
"toggleSwitchBackgroundColor": "#747273",
108
"toggleSwitchBorderColor": "#747273",
109
"toggleSwitchCheckedBorderColor": "#2271e7",
110
"toggleSwitchCheckedColor": "#fff",
111
"toggleSwitchCheckedDisabledBackgroundColor": "#bdd4f8",
112
"toggleSwitchCheckedDisabledBorderColor": "#bdd4f8",
113
"toggleSwitchCheckedDisabledColor": "#fff",
114
"toggleSwitchColor": "#fff",
115
"toggleSwitchDisabledBackgroundColor": "#e5e5e5",
116
"toggleSwitchDisabledBorderColor": "#e5e5e5",
117
"toggleSwitchDisabledColor": "#fff",
118
"warningColor": "#fdc321",
119
"zebraStripeBackgroundColor": "rgba(0, 0, 0, 0.04)"
120
}
Copied!
1
{
2
"id" : "C3DefaultDark",
3
"themeCategory": "Dark",
4
"accentColor": "#37a2ff",
5
"accentFontColor": "#000",
6
"accentVariantColor": "#37a2ff",
7
"borderColor": "#333",
8
"buttonControlBorderColor": "#4c4c4c",
9
"buttonControlFontColor": "rgba(255, 255, 255, 0.5)",
10
"buttonControlHoverBackgroundColor": "#191919",
11
"buttonControlSelectedBackgroundColor": "#37a2ff",
12
"buttonControlSelectedDisabledBackgroundColor": "#193a55",
13
"buttonControlSelectedFontColor": "#fff",
14
"buttonControlSelectedHoverBackgroundColor": "#245fd4",
15
"buttonDangerPrimaryActiveBackgroundColor": "#830513",
16
"buttonDangerPrimaryHoverBackgroundColor": "#bb071b",
17
"buttonDangerSecondaryActiveBackgroundColor": "#5d030d",
18
"buttonDangerSecondaryHoverBackgroundColor": "#380208",
19
"buttonDangerTertiaryActiveBackgroundColor": "#5d030d",
20
"buttonDangerTertiaryHoverBackgroundColor": "#380208",
21
"buttonIconActiveBackgroundColor": "rgba(255, 255, 255, 0.2)",
22
"buttonIconBackgroundColor": "#0d0d0d",
23
"buttonIconHoverBackgroundColor": "rgba(255, 255, 255, 0.1)",
24
"buttonIconSelectedActiveBackgroundColor": "rgba(255, 255, 255, 0.7)",
25
"buttonIconSelectedBackgroundColor": "rgba(255, 255, 255, 0.4)",
26
"buttonIconSelectedForegroundColor": "#0d0d0d",
27
"buttonIconSelectedHoverBackgroundColor": "rgba(255, 255, 255, 0.6)",
28
"buttonPrimaryActiveBackgroundColor": "#245fd4",
29
"buttonPrimaryHoverBackgroundColor": "#1d83fb",
30
"buttonSecondaryActiveBackgroundColor": "#0d2849",
31
"buttonSecondaryHoverBackgroundColor": "#0b1336",
32
"buttonTertiaryActiveBackgroundColor": "#0d2849",
33
"buttonTertiaryHoverBackgroundColor": "#0b1336",
34
"cardElevation00BackgroundColor": "#000",
35
"cardElevation01BackgroundColor": "#0d0d0d",
36
"cardElevation02BackgroundColor": "#121212",
37
"cardElevation03BackgroundColor": "#141414",
38
"cardElevation04BackgroundColor": "#171717",
39
"cardElevation06BackgroundColor": "#1c1c1c",
40
"cardElevation08BackgroundColor": "#1f1f1f",
41
"cardElevation12BackgroundColor": "#242424",
42
"cardElevation16BackgroundColor": "#262626",
43
"cardElevation24BackgroundColor": "#292929",
44
"componentBackgroundColor": "#0d0d0d",
45
"componentBackgroundColorError": "#5d030d",
46
"componentBorderColor": "#262626",
47
"componentDividerColor": "#333",
48
"chartSeriesTooltipNameFontColor": "rgba(255, 255, 255, 0.5)",
49
"chartSeriesTooltipTitleFontColor": "#fff",
50
"chartSeriesTooltipValueFontColor": "#fff",
51
"checkboxBackgroundColor": "#000",
52
"checkboxColor": "#4c4c4c",
53
"checkboxHoverBackgroundColor": "#191919",
54
"checkboxHoverColor": "#262626",
55
"checkboxSelectedDisabledColor": "#193a55",
56
"checkboxSelectedHoverColor": "#1d83fb",
57
"dangerColor": "#f44c48",
58
"dropdownDescriptionBackgroundColor": "#08182c",
59
"dropdownDescriptionColor": "#37a2ff",
60
"dropdownMessageColor": "rgba(255, 255, 255, 0.5)",
61
"dropdownOptionDividerColor": "#171717",
62
"dropdownSelectionColor": "rgba(255, 255, 255, 0.1)",
63
"fontColor": "#fff",
64
"formFieldBorderColor": "rgba(255, 255, 255, 0.3)",
65
"formFieldBackgroundColorDisabled": "rgba(255, 255, 255, 0.1)",
66
"formFieldBorderColorDisabled": "rgba(255, 255, 255, 0.2)",
67
"formFieldHeaderColorDisabled": "rgba(255, 255, 255, 0.3)",
68
"formFieldColorHint": "rgba(255, 255, 255, 0.5)",
69
"formFieldErrorBorderColor": "#f44c48",
70
"formFieldErrorHoverBorderColor": "#f39796",
71
"formFieldHoverBackgroundColor": "#191919",
72
"formFieldHoverBorderColor": "#262626",
73
"formFieldLabelErrorColor": "#fff",
74
"formFieldLabelFocusColor": "#fff",
75
"formFieldVariantBorderColor": "rgba(255, 255, 255, 0.1)",
76
"gridHeaderFontColor": "rgba(255, 255, 255, 0.5)",
77
"gridHoverBackgroundColor": "#1f1f1f",
78
"gridPagerLabelFontColor": "rgba(255, 255, 255, 0.5)",
79
"gridPagerSizesFontColor": "#fff",
80
"gridSelectedCellBackgroundColor": "#292929",
81
"gridSelectedCellBorderColor": "#333333",
82
"gridSelectedFontColor": "#fff",
83
"gridSelectedHoverBackgroundColor": "#4c4c4c",
84
"iconGroupColor": "#808080",
85
"infoColor": "#37a2ff",
86
"invertedComponentBackgroundColor": "#bdbdbd",
87
"mapMarkerClusterColor": "#2170b5",
88
"mapTooltipAdditionalFieldsDescriptionFontColor": "#fff",
89
"mapTooltipAdditionalFieldsHeaderFontColor": "rgba(255, 255, 255, 0.5)",
90
"mapTooltipHeaderFontColor": "#fff",
91
"mapTooltipSubHeaderFontColor": "rgba(255, 255, 255, 0.5)",
92
"menuBackgroundActiveColor": "#191919",
93
"menuBackgroundColor": "#121212",
94
"menuDividerColor": "#333",
95
"menuPrimaryColor": "#fff",
96
"pageBackgroundColor": "#000",
97
"secondaryFontColor": "#808080",
98
"secondaryVariantFontColor": "rgba(255, 255, 255, 0.2)",
99
"selectionBackgroundColor": "rgba(55, 162, 255, 0.3)",
100
"selectFieldPillActiveBackgroundColor": "#4c4c4c",
101
"selectFieldPillHoverBackgroundColor": "#292929",
102
"selectFieldPillTextColor": "#fff",
103
"sidePanelSubtitleColor": "#919191",
104
"subMenuItemBackgroundActiveColor": "#333",
105
"successColor": "#56b35f",
106
"toggleSwitchBackgroundColor": "#000",
107
"toggleSwitchBorderColor": "#4c4c4c",
108
"toggleSwitchCheckedBorderColor": "#8ec9ff",
109
"toggleSwitchCheckedColor": "#fff",
110
"toggleSwitchCheckedDisabledBackgroundColor": "#193a55",
111
"toggleSwitchCheckedDisabledBorderColor": "#3c6588",
112
"toggleSwitchCheckedDisabledColor": "rgba(255, 255, 255, 0.3)",
113
"toggleSwitchColor": "#808080",
114
"toggleSwitchDisabledBackgroundColor": "#000",
115
"toggleSwitchDisabledBorderColor": "#191919",
116
"toggleSwitchDisabledColor": "#333",
117
"warningColor": "#ebe441",
118
"zebraStripeBackgroundColor": "rgba(255, 255, 255, 0.04)"
119
}
Copied!

Set your application theme

To set a new theme for your application, the UiSdlConfig Type is used. You can set seed data for UiSdlConfig in your application package. The UiSdlStyleConfig is deprecated starting from 7.28.

To set seed data for UiSdlConfig

For example, to set your application to use C3-provided C3DefaultDark and C3DefaultDenseDensity:
1
exampleRepository
2
├── exampleUI
3
| └── config
4
│   | └── UiSdlConfig
5
│   | | └── UiSdlConfig.json
6
| ...
7
│   └── package.json
8
└── repository.json
Copied!

Set seed data

The id of the density is set to C3DefaultDark. To have the classic light theme, place C3DefaultLight.
UiSdlConfig.json
1
{
2
"style": {
3
"theme": {
4
"id": "C3DefaultDark"
5
},
6
"density": {
7
"id": "C3DefaultDenseDensity"
8
}
9
}
10
}
Copied!

Set style through the static console

1
UiSdlConfig.make().setConfigValue("style.theme.id","C3DefaultDark")
Copied!