TFD
ThoughtSpot For Developers•8mo ago
Rebecca Coales

Hi everyone, I'm using React to embed

Hi everyone, I'm using React to embed Thoughtspot. Is it possible at all to use my own CSS variables to customise the Thoughtspot CSS Variables?
My variables are available outside of the iframe Thoughtspot is embedded in, but not defined inside the Thoughtspot iframe. In my init for style customisations I have: 
import { vars } from '@zoopla-eng/bricks/themes';

variables: {
  '--ts-var-root-color': vars.colors.theme.textBody
}
import { vars } from '@zoopla-eng/bricks/themes';

variables: {
  '--ts-var-root-color': vars.colors.theme.textBody
}
5 Replies
ashish
ashish•8mo ago
Yes you can. Is the above not working ?
Rebecca Coales
Rebecca CoalesOP•8mo ago
No, I can see it's picking up the correct token name but it's saying it's not defined
No description
ashish
ashish•8mo ago
I see, I thought the vars.colors.theme.textBody contains the value of the variable. But it seems to contain the name. You would need to pass the value, as it cannot read across the embed boundary into your application.
jbc
jbc•8mo ago
@Rebecca Coales You would need to pass the exact colors when passing these down. For your case, if you want to pass down your custom CSS variables, you can define these values in a separate CSS file and pass it as part of customCSSUrl or as part of rules_UNSTABLE to pass them during runtime. https://visual-embed-sdk.vercel.app/docs/custom-css#_overview
CSS customization framework
Customize UX elements and layout of embedded ThoughtSpot interface using custom CSS
Rebecca Coales
Rebecca CoalesOP•8mo ago
Thank you both!

Did you find this page helpful?