Access liquid objects from CSS in theme app extension

[diego-navarro]

In order to follow the UX guidelines for theme app extensions, Shopify says that App blocks should inherit styling properties from the theme, such as typography and colors. 

Is there a way to access the colors and typograhpy of the theme directly on the stylesheet of the theme app extension?

A workaround could be to style directly on the liquid file of the theme app extension, by accesing the properties such as settings.colors_background_1, but that is not a clean solution.

I think Shopify is currently providing an awful developer experience in theme app extension. There is not enough documentation, and only a few people knows the answers of the problems of the community.

Thanks in advance.

[wristbands]

I'm having the exact same problem! So far I've been able to get some similar styling in my theme app extension by inspecting the files from the theme and copying the class names of certain HTML elements, but it's not perfect.

[Liam]

Hi Diego,

As you mentioned, you can apply styles directly within the Liquid file of the theme app extension. While this isn't the best solution, it's a direct way to access theme settings and apply them to your app's elements. To keep things organized, you should consider using this method only for properties that need to inherit from the theme, and use external stylesheets for all other styles.

Another option would be to use JavaScript to read computed styles from theme elements and apply them to your app's elements. This can be done using the `window.getComputedStyle()` method.
This is a dynamic solution that adapts to changes in the theme's styles, but it requires additional JavaScript processing, which might impact performance.

Hope this helps!