API to access theme colors?

Jared_Burns1
Shopify Partner
30 0 7

Is there any API I can use to access the primary color of a theme?

I'd like this information so that the visual components of my app can be styled to match the storefront.

As a workaround, I'm currently adding a non-visual tag to the store's template (technically, it's in my own snippet) which loads the property {{settings.color_primary}}. That works in the limited testing I've done so far, but I have no idea A) whether all themes will expose a setting named "color_primary" and B) whether it would mean the same thing in all themes. So I'm looking for a more reliable way to pick a color.

Thanks.

0 Likes
Jason
Shopify Expert
10360 158 2010

Using the snippit is one method, as would be using the API to read the data directly from the settings_data.json file.

The issue you'll run into is that the theme setting options can be called anything - so you shouldn't rely on themes using the same naming convention. Just as it's possible for a theme to have color_primary, a theme could have no setting relating to colours at all.

If you're interested, there's some more info on the settings_schema.json file here:
https://help.shopify.com/themes/development/theme-editor/settings-schema

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Jared_Burns1
Shopify Partner
30 0 7

If there's no API to fetch data about a theme's colors and the properties in the theme aren't standardized, how do apps style themselves to match a storefront? Are they all just asking store owners to manually configure colors and fonts?

0 Likes
HunkyBill
Shopify Expert
4509 46 492

My guess is that since themes vary, when delivering front-end HTML visible to the customer you should aim to be as generic as possible. Then if a crowd comes knocking asking you to customize for a theme such-and-such, you make the effort to adapt your HTML to that theme, and make that code available to your merchant customers. 

I think that is the way to go. The simple reality is, ten themes can all look the same, but all ten choose to use different HTML and CSS. So you're likely to never succeed with perfection by inspecting some RGB value from settings. 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Jared_Burns1
Shopify Partner
30 0 7

Right. I've got a color picker in our app settings to let folks manually pick whatever color scheme they want. Just trying to figure out how seamlessly we can integrate right out of the gate.

Sounds like there's no good API to pick a color.

0 Likes
cormacncheese
Tourist
8 0 0

I was struggling to access the theme colors in a frontend component which was being overwritten by Bootstrap but I was able to solve this by setting the following styles in the the section:

 

body {
     background-color: var(--color-body);
     color: var(--color-text);
}
0 Likes