Widget theming allows you to customize the visual appearance of Sportradar widgets to match your website's design and branding. With theming, you can:
Go to widgets demo page
Find your widget in the grid menu on top
View screenshot
If unable to find your widget in the grid menu, select widgets and click the WIDGETS option on the left side menu
View screenshot
Select your widget, make sure you see your widget loaded in the main viewing panel
View screenshot
Click the styling menu on the left
View screenshot
In the styling menu you can select from a number of prepared themes
View screenshot
You can also hand-pick the five most important colors
View screenshot
Each widget theme is built around five essential colors that control different aspects of the appearance:
Purpose: Main action elements, highlights, and branding accents
Used for: Buttons, active states, important highlights, selection indicators
Example: #FF0000 (red) for call-to-action elements
Purpose: Home team representation in sports widgets
Used for: Home team scores, names, and related elements
Example: #00003c (dark blue) for home team styling
Purpose: Away/visiting team representation in sports widgets
Used for: Away team scores, names, and related elements
Example: #ff0000 (red) for away team styling
Purpose: Main widget background and container areas
Used for: Widget backgrounds, card backgrounds, modal overlays
Example: #FFFFFF (white) for light themes, #141435 (dark) for dark themes
Click the get code option on the left side menu
View screenshot
Download the code, save it
The downloaded package includes three files:
Example theme file include:
<link rel="stylesheet" type="text/css" href="theme.css" />After downloading your theme, you can make detailed adjustments by editing the theme.css file. The theming system uses a specific CSS class naming convention to avoid conflicts with your website styles.
Recommended: Use .srt- prefixed classes
These classes are designed for customization and are safe to modify:
/* Background colors */
.sr-bb .srt-base-1 {
background-color: #f5f5f5;
}
/* Text colors */
.sr-bb .srt-text-primary {
color: #333333;
}
/* Border styles */
.sr-bb .srt-border-1 {
border-color: #e0e0e0;
}If you need more fine grained control over styling, you can write your own styles, but we encourage you to only style classes with prefix, which are meant for branding. We offer no guarantee that any other classes or internal widget structure won't change in the future. You also need to use at least 2 class selectors for every rule (.sr-bb is always available on every widget), so they are not overridden with our css normalization rules.
Important for CSS Isolation
All widget styles are scoped within .sr-bb containers. For proper isolation:
sr- or srt- prefixes in your site's CSSdiv, span, p in global styles and using spacing properties like radius | top | padding | margin might cause issues with future updates to your setup.As mentioned earlier, we have predefined themes on our demo page. Here are two showcases, light and dark theme, for our Match preview widget.
Purpose: Primary text and content elements
Used for: Main text, icons, borders, dividers
Example: #000000 (black) for light themes, #ffffff (white) for dark themes
Import the widget on your page using either the declarative (html) or programmatic (javascript) method.
Be sure to upload and include the theme.css file on your page
You can also save and export your color theme settings for later import. On the demo page, click the Styling menu item and select your colors. Click the Save button to save your color theme. The theme will now be available in the My themes section where you can export it to a json file with the Export button.
.srt-