--- title: "Widgets Theming" canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/theming-widgets" markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/theming-widgets.md" last_updated: "2026-04-07T13:49:47Z" --- # Widgets Theming ## What Is Widget Theming? Widget theming allows you to customize the visual appearance of Sportradar widgets to match your website's design and branding. With theming, you can: - **Match your brand colors** - Apply your primary, background, and text colors - **Adapt to different designs** - Use light or dark themes that fit your site's style - **Maintain consistency** - Ensure widgets look cohesive with your existing interface - **Support team colors** - Automatically adapt widget colors based on competing teams ## Steps ### Find Your Widget Demo - Go to [widgets demo page](https://widgets.sir.sportradar.com/widgets-demo) - Find your widget in the grid menu on top **View screenshot** ![Grid menu](https://apidocs.sportradar.com/resources/widgets/static/img/widgets_grid.png) - If unable to find your widget in the grid menu, select *widgets* and click the **WIDGETS** option on the left side menu **View screenshot** ![Grid menu](https://apidocs.sportradar.com/resources/widgets/static/img/widgets_selection.png) - Select your widget, make sure you see your widget loaded in the main viewing panel **View screenshot** ![Loaded widget](https://apidocs.sportradar.com/resources/widgets/static/img/widget_loaded.png) ### Use the Styling Menu - Click the **styling** menu on the left **View screenshot** ![Styling menu](https://apidocs.sportradar.com/resources/widgets/static/img/widget_styling_menu.png) - In the styling menu you can select from a number of prepared themes **View screenshot** ![Widget themes](https://apidocs.sportradar.com/resources/widgets/static/img/widget_themes.png) - You can also hand-pick the five most important colors **View screenshot** ![Widget pick colors](https://apidocs.sportradar.com/resources/widgets/static/img/widget_pick_color.png) ### Understanding the Five Core Colors Each widget theme is built around five essential colors that control different aspects of the appearance: ### Primary Color **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 ### Home Color **Purpose**: Home team representation in sports widgets\ **Used for**: Home team scores, names, and related elements\ **Example**: `#00003c` (dark blue) for home team styling ### Away Color **Purpose**: Away/visiting team representation in sports widgets\ **Used for**: Away team scores, names, and related elements\ **Example**: `#ff0000` (red) for away team styling ### Background Color **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 ### Base Color **Purpose**: Primary text and content elements\ **Used for**: Main text, icons, borders, dividers\ **Example**: `#000000` (black) for light themes, `#ffffff` (white) for dark themes ### Download Widget Code - Click the **get code** option on the left side menu **View screenshot** ![Get code](https://apidocs.sportradar.com/resources/widgets/static/img/widget_get_code.png) - Download the code, save it > **Info** > > The downloaded package includes three files: > > - *preview\.html* with your widget included > - *script.js* containing code to include your widget > - *theme.css* containing styling of your widget > **Tip** > > 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 ***Example theme file include:*** ```html ``` > **Tip** > > 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. ## Advanced Customization ### Fine Tuning Your Theme 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. ### CSS Class Naming Convention **Recommended: Use `.srt-` prefixed classes** These classes are designed for customization and are safe to modify: ```css /* 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; } ``` > **Note** > > If you need more fine grained control over styling, you can write your own styles, but we encourage you to only style classes with `.srt-` 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. ### CSS Isolation Rules > **Warning** > > **Important for CSS Isolation** > > All widget styles are scoped within `.sr-bb` containers. For proper isolation: > > - **Don't use `sr-` or `srt-` prefixes** in your site's CSS > - **Avoid bare element selectors** like `div`, `span`, `p` in global styles and using spacing properties like `radius` | `top` | `padding` | `margin` might cause issues with future updates to your setup. > - **Test thoroughly** after theme changes to ensure no style conflicts ## Showcase As mentioned earlier, we have predefined themes on our demo page. Here are two showcases, light and dark theme, for our Match preview widget. | Light Theme (Match Preview) | Dark Theme (Match Preview 2) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![Match Preview light theme](https://apidocs.sportradar.com/resources/widgets/static/img/styling-widgets-light-example.png) | ![Match Preview dark theme](https://apidocs.sportradar.com/resources/widgets/static/img/styling-widgets-dark-example.png) | | [Demo](https://widgets.sir.sportradar.com/match-preview#layout:\(colorTheme:\(colors:\(away:%23ff0000,background:%23FFFFFF,base:%23000000,home:%2300003c,primary:%23FF0000\),formula:solid\)\),sidebar:\(selected:styling\)) | [Demo](https://widgets.sir.sportradar.com/match-preview#layout:\(colorTheme:\(colors:\(away:%23FB0000,background:%23232323,base:%23ffffff,home:%2300AB00,primary:%23FF0000\),formula:solid\)\),sidebar:\(selected:styling\)) |