> This page is part of the [Customer.io documentation](https://docs.customer.io). For the complete index, see [llms.txt](https://docs.customer.io/llms.txt).
> Last updated: July 10, 2026

# Global styles for in-app messages

In Design Studio, you can define colors, fonts, and more in Global Styles to reuse them across your messages. This way, you spend less time adding the same branding to each message. Global styles apply to emails made in Design Studio and in-app messages.

## How Design Studio works

[Design Studio](/messaging/design-studio/overview/) is a flexible editor that helps you create beautiful, responsive messages faster than ever before. Use it to set branding across emails made in Design Studio and in-app messages.

If you’re new to Design Studio, this is the core of what you need to know:

*   You continue to **create an in-app message in a workflow**, like a campaign or broadcast. By default, new messages use the styles set in Design Studio.
*   You **create global styles in *Design Studio > Styles***.
    1.  Set global style **variables** (your colors, fonts, radii, and spacing).
    2.  Then assign them to standard **components**, like paragraphs and headings, so each part of a message uses the right branding.
        
        [![The global Styles page. On the left are a list of styles. Text styles is selected. On the right are a list of heading styles.](https://docs.customer.io/images/design-studio-global-styles-sept-04-2025.png)](#2866f07383e92cbbb1b6a09d0acf3e4f-lightbox)
        
*   **When you update global styles, you decide whether to “Save only” or “Save and publish”.**
    *   Choose “Save only” if you don’t want workflows (your campaigns, broadcasts, etc) to use the latest styles.
    *   Choose “Save and publish” if you’re ready to update messages in your workflows (and start sending messages with the latest styles).

Go to [Design Studio’s page on Global Styles](/messaging/design-studio/emails/styles/set-styles/) for more information:

1.  [How to set global style variables](/messaging/design-studio/emails/styles/set-styles/#access-your-global-styles)
2.  [How to set default branding for components](/messaging/design-studio/emails/styles/set-styles/#assign-styles-to-content)
3.  [How to publish styles to emails & in-app messages](/messaging/design-studio/emails/connected/publish-changes/#publish-changes-to-global-styles)

## Get started

In-app messages use global styles set in Design Studio. The variables you assign to components are the defaults for in-app messages.

If you’re creating an in-app message from scratch, it will automatically pull in your global styles. For existing messages, you can choose to [sync global styles](#sync-global-styles) from Design Studio.

### Exceptions for in-app messages

In-app messages work a little different from emails, so here are a few notes on which settings apply to in-app:

*   **By default, in-app messages use the same styles in light and dark mode.** You can [set separate dark mode values](#set-light-and-dark-mode-styles) for color properties—like fills, text, and borders—in global styles or in an individual message. Where you don’t set a dark value, the light value applies in both modes.
*   **Your JavaScript web integration has to report the recipient’s color scheme.** While the iOS and Android SDKs automatically follow the device appearance by default, your website’s JavaScript integration has to [set `colorScheme: "auto"`](/integrations/data-in/connections/javascript/in-app/#set-the-color-scheme). Without this, messages keep their light styles.
*   In-app messages and emails have the same breakpoint: 600px wide. Both pull in desktop and mobile styles based on the recipient’s screen size. With [*modal* in-app messages](/messaging/channels/in-app/send-in-app-message/#display-and-position), the breakpoint continues to be 600px wide; however, it’s based on the *message* width, not the screen width. For instance, if a modal message is 300px wide, but the screen width is 800px, the modal message will display the mobile version of the styles.
*   The single button component automatically use global styles. However, the [components built from multiple buttons](#set-global-styles-on-buttons) do not automatically use global styles; you have to reset the properties to pull in your branding.

## Set light and dark mode styles

By default, in-app messages use the same styles in light and dark mode. You can set separate dark mode values for **color** properties—like **Fill**, **Text color**, borders, and divider colors. Anywhere you don’t set a dark value, the light value applies in both modes.

On any property that supports dark mode:

1.  Click to expose separate light and dark mode values.
    
    [![in-app-dark-mode-unset.png](https://docs.customer.io/images/in-app-dark-mode-unset.png)](#aaebc8d9ebf25bcfa4bc7da11ebd222d-lightbox)
    
2.  Set light and dark mode values.
    
    [![in-app-dark-mode-set.png](https://docs.customer.io/images/in-app-dark-mode-set.png)](#9126e587abf8ed77af803bd018bc35b8-lightbox)
    
3.  At the top of the canvas, click to switch the canvas between the light and dark previews.
    
    [![in-app-dark-mode-setup.png](https://docs.customer.io/images/in-app-dark-mode-setup.png)](#5bb0cfe6bb5d7abe2976d2fa3fcb7771-lightbox)
    

 Your SDK has to report the recipient’s color scheme

Dark mode values only render when your integration tells the renderer which color scheme to use:

*   **Web:** set the [`colorScheme`](/integrations/data-in/connections/javascript/in-app/#set-the-color-scheme) option to `auto` in your JavaScript integration.
*   **iOS and Android:** the mobile SDKs follow the device appearance automatically. See the [iOS](/integrations/sdk/ios/in-app/set-up-in-app/#set-the-color-scheme) and [Android](/integrations/sdk/android/in-app/in-app/#set-the-color-scheme) docs to change the default.

You can override your global styles on any message as well. You might do this if your normal light and dark mode styles don’t work well with a particular message or a page where you show a specific message. See [Set light and dark mode styles](/messaging/channels/in-app/send-in-app-message/#dark-mode) when you build a message.

## Sync global styles to in-app messages

Any message made before we rolled out global styles for in-app messages in February 2026 do not automatically use Design Studio; we won’t change your messages without your permission.

You can choose to pull in global styles by syncing individual in-app messages:

![A video showing how the font was Arial and changed to Primary after clicking Sync with Global Styles.](https://docs.customer.io/images/sync-global-for-in-app.gif)

1.  Open your in-app message.
2.  Click **Sync with Global Styles**.
3.  Click **Sync**. Syncing does not save the message; you’ll have time to review first.
4.  Review your message:
    1.  Do the styles and formatting look correct? If not, you can edit the message further or click **Discard Changes** to go back.
    2.  If something doesn’t sync as you expect, click and select your message background (click outside the message) to open Message properties. Click next to a property that you want using your global style. You’ll likely only run into this issue if you started an in-app message from one of our out-of-the-box templates.
5.  Click **Save Changes**. Any future sends of this message will include your global styles.

## Set global styles on multi-button components

Single button components automatically use global styles. However, components with multiple buttons need an extra step to start using global styles.

To change the styling of multi-button components to match your global styles, you need to manually reset them in the message. After you reset and save, the styles will use global styles (and any changes to them) moving forward.

1.  Open your in-app message.
2.  Drag in a multi-button component or click one to open the properties panel.
    
    [![The insert panel of an in-app message. The Buttons expander is open and shows three multi-button components.](https://docs.customer.io/images/insert-multi-button-component.png)](#3e104bb2f4c5e71bb83d065e82ad7255-lightbox)
    
3.  Find a property that was modified in your global styles and click . The button preview will now show your global style. Do this for each property you modified in global styles, like Fill, Hover, etc.
4.  Click **Save Changes**. Any future sends of this message will include your global styles.

*   *   [How Design Studio works](#how-design-studio-works)
    *   [Get started](#get-started)
        *   [Exceptions for in-app messages](#exceptions-for-in-app-messages)
    *   [Set light and dark mode styles](#set-light-and-dark-mode-styles)
    *   [Sync global styles to in-app messages](#sync-global-styles)
    *   [Set global styles on multi-button components](#set-global-styles-on-buttons)

Copy page

Copy page [Download .md](/messaging/channels/in-app/global-styles-in-app.md)

Is this page helpful?

![](https://docs.customer.io/images/export-success.png) ![](https://docs.customer.io/images/export-failure.png)

# How can we make it better?

Close

Do you need help from Customer.io support?  No  
 Yes

What part of Customer.io do you need help with? 

How can we improve this page?

Email (optional):  Please provide a valid email address

 I am not a bot

 

We appreciate your feedback!

Our support team will contact you as soon as possible