How to access styles in TypeScript?

[MLNW]

Hey, I need to theme an external library, i.e., https://github.com/bpmn-io/bpmn-js. This library offers ways to do so from code but I haven't found a way to access the Skeleton configuration values from TypeScript in my SvelteKit project. At the very least I need access to my theme colors, but it would also be great if I could add margin to a specific element depending on the current break point without having to resort to media queries myself.

I tried to access the tailwind config as described in their documentation but that did not work.

Has anyone tried and succeeded with this? Help would be greatly appreciated!

[endigo9740]

Hey @MLNW, I'm not quite sure I follow your request here. Why wouldn't you use CSS to handle CSS styling? Or use Javascript to manipulate the CSS? Can you walk through a few use cases and perhaps I can make some suggestions?

We've heard the request about accessing theme colors via JS a few times, so we'll most likely be introducing a new JSON export alongside the CSS export for themes. This will provide the same values in a format easily understood by javascript. We had a contributor volunteer to add this yesterday, but I may aim to get a quick draft of this inserted this upcoming release. We have use of it as well within our documentation.

Unfortunately we've not had success accessing Tailwind colors through Javascript either. They're instructions don't seem to take Vite into account. If you find a way to do this please let me know, I have some use cases for this!

[MLNW]

My aim was to theme the library to look more in line with the rest of the application. In the end I was able to accomplish what I wanted to do by relying on the light switch store to change most styling in my TypeScript code. The remainder I styled by overriding their CSS with !important rules ...

I tried a few things to access the Tailwind configuration in my code but didn't get far. The most promising thing I found was this thread svelte-add/svelte-add#209.

[endigo9740]

Thanks for taking the time to explain. FYI I'm going to be exploring this today:
https://gist.github.com/0gust1/aa8c8b831428cdd7a5535e92cbf02f04

It would greatly simplify how colors are imported and used in our Conic Gradient component, so fingers crossed. But maybe it can help you as well?

[endigo9740]

Quick follow up - this works, but has some notable caveats:

• Plugin injected styles do not appear in the theme.extend portion
• Instead they appear under each plugin. But, there's no set order for how these are imported by users. So we cannot rely on them

There's not even an identifier for which plugin is which, so unfortunately this is a no-go for us. But hey, in your project you control the order of your plugins, so perhaps you can make it work!