Themes, theme parameters and custom CSS

How to change the look of the web app and the snippets: pick one of ten themes, set your brand colour, the corners of the button and the background, override single properties, and add your own CSS to the web app.

Choose a theme

1. Open your service and open Apps → Theme.
2. Under Select Theme (Theme auswählen), pick a theme. Theme Preview (Theme-Vorschau) shows a sample with an input field and a button, with your own settings applied.
3. Click Save (Speichern) at the top of the service page.

The theme applies to the web app and to every snippet. Both resolve it the same way, so a button has the same colour and shape in the web app, in a snippet and in the preview. A web app or snippet without a theme wears Default.

Minimal has a transparent background, which suits snippets that should take on the background of your own page.

Where a theme change shows up

• Web app: after Save, the web app uses the new theme on its existing link.
• Snippets: the theme is part of the embed address. After you change it, copy the code under Apps → Web Snippets again and replace it on your page.

Match your brand

Under Your brand (Deine Marke), three settings make the web app and the snippets fit your website:

1. Choose your settings. Theme Preview follows at once.
2. Click Save (Speichern).
3. Copy the Web App URL and the snippet code again. Your settings travel in these addresses, so links you shared before keep their old look.

To take a setting back, clear the colour field or choose As in theme.

Transparent shows the page behind the calculator. Together with the Minimal theme, which has no card and no border, a snippet looks like a part of your own page.

Override single properties

The three settings write into Custom Theme Parameters (Optional) (Eigene Theme-Parameter (Optional)), the field below them. In this field you can set every property of the theme yourself.

1. Enter the properties in address format, joined with &, without a leading ? or &:

primaryColor=%231f8a8a&buttonBorderRadius=20px&resultValueFontSize=18px

1. Click Save.
2. Copy the Web App URL and the snippet code again.

The settings above and this field show the same thing: a setting changes its parameter in the field, and a parameter you type shows in its setting. Everything else in the field stays as you wrote it.

primaryColor is your brand colour. It colours the button, the button's hover state, the border of the focused input field, the header of layouts that have one and the sliders of the web app. To give the button a colour of its own, add buttonBg.

Rules for the values:

• Write the # of a colour as %23: %23FF0000 is red.
• Sizes need a unit, except 0.
• A value that is not valid for its property is ignored, and the theme keeps its own value. The other parameters still apply.

Available parameters

The page lists them under Advanced Customization (Erweiterte Anpassung). There are 53 in total.

The web app and the snippets read the same parameters and apply them to every element they both have:

accentColor, inputFontSize, the four card header parameters, resultsSectionBg, sectionSpacing, inputGroupSpacing, resultItemSpacing and headerPadding are accepted in an address, and the current layouts do not use them.

Custom CSS for the web app

Custom CSS gives you full control over the standard web app.

1. In Apps → Theme, scroll to Custom CSS (Eigenes CSS).
2. Write your rules into the field. Use !important to override the default styles.
3. Click Save. Custom CSS is saved with the service like the theme, and the web app uses it on its existing link.

/* Change the button colour */
.spreadapi-button {
  background-color: #FF5722 !important;
}

/* Style one input, here the input named "discount" */
.spreadapi-input-discount {
  border: 2px solid #4CAF50 !important;
}

/* Emphasise one result, here the output named "total" */
.spreadapi-result-total .spreadapi-result-value {
  font-size: 24px !important;
  color: #4CAF50 !important;
}

Custom CSS applies to the standard web app. Style snippets with the theme and the theme parameters.

Limits

• Themes and CSS change the look, not the content. To show or hide fields, use app rules; to change labels, change the titles of your inputs and outputs.
• A logo or images of your own are not part of a theme. To show a calculator inside your own branded page, embed a web snippet.

For developers and agents

Theme ids for the theme parameter: default, minimal, modern, purple, ocean, forest, sunset, slate, rose, sky. An address without theme, or with an id that is not in this list, uses default; the web app uses its saved theme when its address has none.

Address examples:

https://spreadapi.io/app/v1/services/{serviceId}?theme=ocean&primaryColor=%230055AA&buttonBorderRadius=20px
https://spreadapi.io/app/v1/services/{serviceId}/view/card?interactive=true&theme=ocean&primaryColor=%230055AA&buttonBorderRadius=20px

A theme parameter in the web app's address replaces the saved theme for that link only. Theme parameters are read from the address in the web app and in snippets alike; each value is checked against the kind of its parameter (colour, size, padding, border, shadow, font, font weight), and a value that does not fit is dropped while the rest of the address still applies.

What the three settings under Your brand write: Brand color → primaryColor; Button corners → buttonBorderRadius (0px, 8px or 999px); Background → containerBg (transparent or %23ffffff).

CSS classes of the web app:

CSS variables follow the parameter names in kebab case with the prefix --spreadapi-, for example var(--spreadapi-primary-color), var(--spreadapi-button-bg), var(--spreadapi-result-value-color).

FAQ

How do I change the colours of my web app?

Open Apps → Theme, pick a theme under Select Theme and click Save. For your own colour, set Brand color under Your brand: it colours the button and the accents in the web app and in snippets. Then copy the Web App URL and the snippet code again.

Which themes are there?

Ten: Default, Minimal, Modern, Purple, Ocean, Forest, Sunset, Slate, Rose and Sky. The preview on the Theme page shows each one before you save.

How do I write a colour in the theme parameters?

In the Brand color field, type the hex code as it is, for example #FF0000. In Custom Theme Parameters (Optional), write the # as %23, for example primaryColor=%23FF0000. Colour names such as red also work.

I set custom theme parameters but my shared link looks the same. Why?

Your brand settings and custom theme parameters are added to the address. Save, then copy the Web App URL or the snippet code again and share the new one.

Can I use my own CSS?

Yes, for the standard web app: enter it under Apps → Theme → Custom CSS and click Save. Use the .spreadapi-… classes and !important to override the default styles.

How do I style just one input or one result?

Use the class with the field's name: .spreadapi-input-{inputName} for an input and .spreadapi-result-{outputName} for a result. For example .spreadapi-result-total .spreadapi-result-value { font-size: 24px !important; }.

Does custom CSS also change my snippets?

No. Custom CSS applies to the standard web app. Snippets take their look from the theme and the theme parameters in the embed address.

Can I make the snippet background transparent?

Yes. Set Background to Transparent under Your brand, or choose the Minimal theme, which has a transparent background, no card and no border. Then copy the snippet code again.

Can I change the font size of the results in the web app?

Yes. Add resultValueFontSize=20px under Custom Theme Parameters (Optional); it works in the web app and in snippets. In the web app you can also use custom CSS, for example .spreadapi-result-value { font-size: 20px !important; }.

How do I make the button match the buttons of my website?

Under Apps → Theme → Your brand, set Brand color to the colour of your buttons and choose their shape under Button corners. For an exact radius, write it into Custom Theme Parameters (Optional), for example buttonBorderRadius=20px.

I typed a value and nothing changed. Why?

A value that is not valid for its property is ignored, and the theme keeps its own value. Check the kind of value the parameter takes: a colour for buttonBg, a size with a unit for buttonBorderRadius. Theme Preview shows the result before you save.

Does the web app look the same as my snippets?

Yes. The web app and the snippets resolve the theme and the theme parameters the same way, so button, background, card and input fields match. Custom CSS applies to the web app only.

As an agent, how do I apply a theme to a link?

Add theme={id} and any theme parameters to the address, with # written as %23. Valid ids are default, minimal, modern, purple, ocean, forest, sunset, slate, rose and sky; without theme the look is default. For a brand colour, primaryColor is enough: it colours the button too.