Changing Colours and Themes

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:

1. Use your website's primary brand colour as the CalcWidgets primary colour
2. Choose a complementary secondary colour that works with your site's palette
3. Select the theme (light/dark) that matches your site's background
4. 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.