[✅ Solution] How can we apply the css tape color scheme?

[comfreakph]

Hi guys,

how can we implement the css tape color scheme in calculation field?

[Tim]

Hi @comfreakph,

thanks for sharing your question!

If I understood you correctly, you would like to style some of your calculation field’s HTML according to Tape’s color palette?

Indeed, Tape exposes a set of CSS variables that you can use for exactly that use case. These variables are dynamic, and automatically adjust colors to Tape’s color scheme (even if changes were made in the future). You find more details here:

HTML & CSS Support | Tape Developers

I hope that points you into the right direction?

Let me know how that goes!

Happy coding
Tim

[comfreakph]

Hi @Tim,
Thanks for the reply,
how can we apply it? like:
<span class='--tape-color-primary '>no email yet</span>

[Tim]

@comfreakph Tape exposes standard CSS variables, you can either refer to them inside <style> tags, or you can directly use the HTML style property (note the var(--...) syntax.:

You find a small set of examples here:

Buttons | Tape Developers

Happy coding!
Cheers
Tim

[comfreakph]

@Tim, thanks, coz it was not in documentation on how to use it hehe…
many thanks again.

[Tim]

You’re welcome! I will add an example to the docs to make using the CSS variables smoother and more accessible.

Thanks for bringing this up.

Cheers
Tim

[comfreakph]

Thanks @Tim,
Love the result

[Tim]

So do I! Great Job