Theming — Kota Embeded Documentation

During the initialisation of the the Embedded SDK, in Health.employer.init() or Health.employee.init(), an optional parameter is allowed that accepts a config object. The config object may can contain a theme property that could be used to match the style of the embed to the look like your application.

`theme` object

In the theme object, each field is optional, but if provided should be hexadecimal color value for fields suffixed with ‘Color’, and should use rem for the ‘radius’. Any omitted fields will default to using our default value for that variable.

Kota's Default Theme

Our theme uses a simple background/foreground convention for colors, for example; theming a primary button uses the primaryColor as the background color, and primaryForegroundColor as the text color.

1 {
2   accentColor: string;
3   accentForegroundColor: string;
4   backgroundColor: string;
5   borderColor: string;
6   cardColor: string;
7   cardForegroundColor: string;
8   destructiveColor: string;
9   destructiveForegroundColor: string;
10   foregroundColor: string;
11   foregroundHeadingColour: string;
12   inputColor: string;
13   mutedColor: string;
14   mutedForegroundColor: string;
15   popoverColor: string;
16   popoverForegroundColor: string;
17   primaryColor: string;
18   primaryForegroundColor: string;
19   radius: string;
20   ringColor: string;
21   secondaryColor: string;
22   secondaryForegroundColor: string;
23   warningColor: string;
24   warningForegroundColor: string;
25 }

Below is an example snippet for the usage of theme

1 <script>
2       const themeConfig = {
3         primaryColor: '#00ffa6',
4         backgroundColor: '#04110c',
5         radius: '0rem',
6         ringColor: '#00ffa6'
7       };
8       
9       const employerEmbed = Kota.Health.employer();
10       
11       employerEmbed.init('<your_employer_access_token_here>', 
12         {theme: themeConfig} //pass the theme 
13       );
14 </script>

Category	Details
Primary	Primary Background/Text colors for buttons/badges/etc.
Secondary	Secondary Background/Text colors for buttons/badges/etc.
Accent	Background/Text for accents such as hover effects on dropdown menus & selects.
Foreground	Default text color of the embed.
Background	Default background color of the embed.
Border	Default border color.
Card	Background/Text color for cards.
Destructive	Used for destructive actions such as delete buttons.
Input	Border color for inputs like form inputs, selects, radio buttons.
Muted	Background/Text for off states of components like tabs & switches.
Popover	Background/Text colors for popovers.
Radius	Border radius for card, input and buttons. Use rem units.
Ring	Color of focus ring.
Warning	Background/Text colors for warning badges/alerts.

1	{
2	accentColor: string;
3	accentForegroundColor: string;
4	backgroundColor: string;
5	borderColor: string;
6	cardColor: string;
7	cardForegroundColor: string;
8	destructiveColor: string;
9	destructiveForegroundColor: string;
10	foregroundColor: string;
11	foregroundHeadingColour: string;
12	inputColor: string;
13	mutedColor: string;
14	mutedForegroundColor: string;
15	popoverColor: string;
16	popoverForegroundColor: string;
17	primaryColor: string;
18	primaryForegroundColor: string;
19	radius: string;
20	ringColor: string;
21	secondaryColor: string;
22	secondaryForegroundColor: string;
23	warningColor: string;
24	warningForegroundColor: string;
25	}

1	<script>
2	const themeConfig = {
3	primaryColor: '#00ffa6',
4	backgroundColor: '#04110c',
5	radius: '0rem',
6	ringColor: '#00ffa6'
7	};
8
9	const employerEmbed = Kota.Health.employer();
10
11	employerEmbed.init('<your_employer_access_token_here>',
12	{theme: themeConfig} //pass the theme
13	);
14	</script>