App blocks must inherit styling properties from the theme - how to implement?

[fonya2014]

Hello everyone!

According to UX guidelines for theme app extensions https://shopify.dev/apps/online-store/theme-app-extensions/ux-guidelines

App blocks must inherit styling properties from the theme, such as typography and colors.

Does anyone know how to implement this?

As I can see, the theme styles are accessible via settings, for example:

settings.colors_accent_1
settings.colors_accent_2
etc

How it is possible to add these settings as a default color here?

{% schema %}
  {
    "name": "Some name",
    "settings": [
         {"label":"Main color", "id":"main_color", "type":"color", "default":"#0076be"}
    ]
 }
{% endschema %}

It is said that settings: with id="main_color" default must be a CSS color

[paulomarg]

Hi @fonya2014! We usually use this repo for reporting bugs on our template, rather than discussions, so your issue might not get a lot of visibility here.

I'd recommend joining the Shopify Discord channel, where the community will be able to help you sort out any specific issues you might be having, and help come up with solutions.