Branding & Customisation
Changing Colours and Themes
Learn how to switch between light and dark themes and customise the colour scheme of your calculators.
1 min read
Updated 15 March 2026
Theme Options
CalcWidgets supports multiple theme modes that you can set via your embed code:
- Light — Clean white background (default)
- Dark — Dark background for sites with dark designs
Set the theme in your embed URL:
?theme=light
?theme=dark
Custom Colour Scheme
Beyond themes, you can set custom colours in your Dashboard under Branding:
Primary Colour
Used for:
- Buttons and CTAs
- Active tab indicators
- Links and interactive elements
- Chart accents
Secondary Colour
Used for:
- Secondary buttons
- Hover states
- Background accents
Matching Your Website
For the best visual integration:
- Use your website's primary brand colour as the CalcWidgets primary colour
- Choose a complementary secondary colour that works with your site's palette
- Select the theme (light/dark) that matches your site's background
- Preview in the branding editor before saving
Colour Accessibility
When choosing colours, ensure sufficient contrast for readability. Dark text on light backgrounds (or vice versa) should have a contrast ratio of at least 4.5:1 for accessibility compliance.
Tip: Use a free contrast checker tool to verify your colour combinations meet WCAG standards.