Color scheme support in theme app extension

Extensions
1

Hello,

I’m building a theme app extension, is it possible to use the color scheme of the shop for the extension? for an easier experience for the user

2

Have you tried using the color scheme input setting?

3

I believe you can access them through brand.colors (Liquid objects: brand_color)

I think most themes have different color scheme options that don’t necessarily reflect the brand colors, so I think Luke’s approach is a good alternative. If you setup color settings, a brand can always choose their brand colors directly. Alternatively, you could default to brand colors, and provide an override setting:

CleanShot 2025-11-24 at 08.54.53@2x
CleanShot 2025-11-24 at 08.54.53@2x1202×744 67.2 KB

1 Like
4

Not sure i understood, the color schemes that I meant are these:

image
image294×335 13.1 KB

Are they available for usage on theme app extension? Are they available for all themes?

5

As mentioned, have you tried/attempted to use the color scheme input setting or not?

6

Hi @Tomer_Klein
According to the Input settings described here:

Color scheme settings aren’t supported in app blocks.

7

Yeah, that input type setting is not supported in app blocks.

Workarounds:
A) Define your own color settings in the app block.

B) If your app block is for a specific theme and it uses CSS variables, then you use CSS variables. For example with Horizon, the color scheme is applied to the parent container of a specific section. Since the app block renders inside that section, it can inherit the CSS variables. E.g.

<div style="
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(var(--color-foreground), 0.1);
">

C) If your app block is for a specific theme, you can access the theme’s global settings object with Liquid. Add a select setting in your app block to let merchants point out the current/preferred scheme, then retrieve setting data directly. e.g.

{% assign selected_scheme_id = block.settings.color_scheme_select %}
{% assign scheme = settings.color_schemes[selected_scheme_id] %}
{% unless scheme %}
  {% assign scheme = settings.color_schemes["scheme-1"] %}
{% endunless %}

<div class="star-rating-block" style="
  background-color: {{ scheme.settings.background }};
  color: {{ scheme.settings.foreground }};
  padding: 20px;
  border-radius: 8px;
  border: 1px solid {{ scheme.settings.border }};
">

I only recommend approach B and C if you’re developing your app block for specific themes since CSS variable naming conventions and theme setting naming conventions can vary from theme to theme. That being said, I’ve seen some hard-working theme app extensions that have a separate CSS stylesheet per popular theme :exploding_head:

I’ve submitted a feature request on your behalf to add support for color scheme input settings in app blocks. While I can’t share any information on when/if this would be implemented, I appreciate you reaching out and creating a topic to discuss this :slight_smile:

1 Like
8

Thank you so much for your answer! Really helpful!

9

Thank you so much for your answer! Really helpful!

1 Like