Nylas themeConfig not working

[IanPolo]

I’m using the nylas scheduling component to create a popup in my page to book a call with someone. The app is built on NextJs. I’m using the themeConfig property to change the colours, but some elements are not changing properly, how can I customize this component?

<NylasScheduling
    themeConfig={{
           '--nylas-info': '#24E1A5',
           '--nylas-primary': '#24E1A5',
           '--nylas-base-0': '#26262A',
           '--nylas-base-25': '#18181B',
           '--nylas-base-50': '#18181B',
           '--nylas-base-100': '#18181B',
           '--nylas-base-200': '#18181B',
           '--nylas-base-300': '#5E5E69',
           '--nylas-base-400': '#5E5E69',
           '--nylas-base-500': '#24E1A5',
           '--nylas-base-600': '#24E1A5',
           '--nylas-base-700': '#ffffff',
           '--nylas-base-800': '#ffffff',
           '--nylas-base-900': '#ffffff',
           '--nylas-base-950': '#ffffff',
     }}
/>

[pooja.g]

Hey IanPolo, thank you for reporting this. We have a fix for this which will be deployed soon (ETA next week).
In the meanwhile, you can target that component using css parts to modify the color Ex:

  <style>
    nylas-scheduling {
      &::part(nls__timezone-drop-button) {
        background-color: #8b3737;
        color: white;
      }
      &::part(nls__language-drop-button) {
        background-color: #8b3737;
        color: white;     
      }
    }
  </style>

This is what it would look like:

Hope that helps!

[IanPolo]

Thanks! That works fine!

[IanPolo]

How can I access the styling of these texts? I’d like all the texts to be in white, but because they seem to be part of the shadow-root elements its not easy to acces them throw css