themeColor String (default: 'secondary')

Specifies the theme color of the component. Valid options are

• inherit: no coloring will be applied to the badge. Useful when the badge needs to blend-in with the surrounding elements.
• default: apply coloring based on surface theme color.
• primary: apply coloring based on primary theme color.
• secondary: apply coloring based on secondary theme color.
• tertiary: apply coloring based on tertiary theme color.
• info: apply coloring based on info theme color.
• success: apply coloring based on success theme color.
• warning:apply coloring based on warning theme color.
• error: apply coloring based on error theme color.
• dark: apply coloring based on dark theme color.
• light: always coloring based on light theme color.
• inverse: depending on the luminance of the theme, light or dark, inverse will be dark or light.

Example

<span id="badge-inherit">Inherit</span>
<span id="badge-default">Default</span>
<span id="badge-primary">Primary</span>
<span id="badge-secondary">Secondary</span>
<span id="badge-tertiary">Tertiary</span>
<span id="badge-info">Info</span>
<span id="badge-success">Success</span>
<span id="badge-warning">Warning</span>
<span id="badge-error">Error</span>
<span id="badge-dark">Dark</span>
<span id="badge-light">Light</span>
<span id="badge-inverse">Inverse</span>

<script>
    $('#badge-inherit').kendoBadge({ themeColor: 'inherit' });
    $('#badge-secondary').kendoBadge({ themeColor: 'secondary' });
    $('#badge-primary').kendoBadge({ themeColor: 'primary' });
    $('#badge-secondary').kendoBadge({ themeColor: 'secondary' });
    $('#badge-tertiary').kendoBadge({ themeColor: 'tertiary' });
    $('#badge-info').kendoBadge({ themeColor: 'info' });
    $('#badge-success').kendoBadge({ themeColor: 'success' });
    $('#badge-warning').kendoBadge({ themeColor: 'warning' });
    $('#badge-error').kendoBadge({ themeColor: 'error' });
    $('#badge-dark').kendoBadge({ themeColor: 'dark' });
    $('#badge-light').kendoBadge({ themeColor: 'light' });
    $('#badge-inverse').kendoBadge({ themeColor: 'inverse' });
</script>