Ensuring dark mode compatibility for your Zendesk Support apps

<p><strong>Audience: </strong>This article is for Zendesk customers using Support apps.</p><p>As Zendesk supports dark mode, it's important that the apps you use also support it to maintain a consistent and visually comfortable workspace. If an app doesn’t support dark mode, it may appear with bright or mismatched visuals that can be distracting or harder to use. </p><p>This article will help you understand what steps to take based on how your app was created or acquired. <br><br>This article includes these sections:</p><ul>
<li><a href="#h_01JV8EXH7Y7PHNW3CBPFGACJQJ">Scenario 1: App installed from the Zendesk Marketplace</a></li>
<li><a href="#h_01JV8EXH81B8NJ6T79GCA2S7WB">Scenario 2: App developed internally by your team</a></li>
<li><a href="#h_01JV8EXH845QGQ5RAVKXG5E84Z">Scenario 3: App built by Zendesk Professional Services</a></li>
<li>
<a href="#h_01JV8EXH87RJFW50N7K2CKJ65A">Additional tips</a><br> </li>
</ul><h2 id="h_01JV8EXH7Y7PHNW3CBPFGACJQJ">Scenario 1: App installed from the Zendesk Marketplace</h2><p><strong>What to do </strong><br>If you installed the app from the Zendesk App Marketplace, the responsibility for dark mode support lies with the app developer.</p><p><strong>Steps to take</strong></p><ol>
<li>Visit the app’s page in the marketplace.</li>
<li>Scroll to find the <strong>“Contact Us”</strong> link.</li>
<li>Reach out to the developer to request dark mode support or inquire about planned updates.</li>
</ol><div class="p">
<div class="note tip">
<span class="tiptitle">Tip:</span> When contacting the developer, mention
your current Zendesk theme setting (light or dark) and share screenshots
if possible. This helps them prioritize and troubleshoot effectively.
</div>
<h2 id="h_01JV8EXH81B8NJ6T79GCA2S7WB">Scenario 2: App developed internally by your team</h2>
<p>
<strong>What to do</strong><br>
Your internal development team will need to update the app to support dark
mode using Zendesk’s development guidelines.
</p>
<p>
<strong>Steps to take</strong>
</p>
<ol>
<li>
Direct your developers to
<a href="https://developer.zendesk.com/documentation/apps/app-developer-guide/dark-mode/" rel="noopener noreferrer" target="_blank">Supporting dark mode</a>
in the Zendesk developer documentation.
</li>
<li>
Ensure the app uses the latest version of the
<a href="https://garden.zendesk.com/"><span class="wysiwyg-underline">Zendesk Garden design system</span></a>,
which includes built-in support for dark mode.
</li>
</ol>
<p>
If your app doesn't use the Garden component, you can import
<code>@zendeskgarden/react-theming</code> from Garden to access the full
color theme.
</p>
<div class="p">
<div class="note tip">
<span class="tiptitle">Tip:</span> Ask your developers to test the app
in both light and dark modes to ensure proper behavior before deploying
changes.
</div>
<h2 id="h_01JV8EXH845QGQ5RAVKXG5E84Z">Scenario 3: App built by Zendesk Professional Services</h2>
<p>
<strong>What to do</strong><br>
Zendesk Professional Services builds custom apps for customers. If they
created your app, they can help update it for dark mode.
</p>
<p>
<strong>Steps to take</strong>
</p>
<ol>
<li>
Reach out to your Zendesk account representative or customer success
manager.
</li>
<li>
Mention that you’re using dark mode and would like assistance with
updating your custom app.
</li>
</ol>
<div class="p">
<div class="note tip">
<span class="tiptitle">Tip:</span> If you’re unsure whether Zendesk
built the app, check your project documentation or reach out to Zendesk
support for clarification.
</div>
<!--
<h2 id="h_01JV8EXH85JTQE13AZYDAWNVPW">Scenario 4: App built with Zendesk App Builder</h2>
<p>
<strong>What to do</strong><br>
If your app was built using Zendesk App Builder, it may need to be
rebuilt or recompiled to ensure dark mode support.
</p>
<p>
<strong>Steps to take</strong>
</p>
<ol>
<li>
Locate the original app or reach out to the team that built it.
</li>
<li>
Rebuild the app assets using the latest version of
<a href="https://support.zendesk.com/hc/en-us/articles/9034700691866-Using-the-App-Builder-EAP"><span class="wysiwyg-underline">App Builder</span></a>,
which includes dark mode compatibility features.
</li>
</ol>
<div class="p">
<div class="note tip">
<span class="tiptitle">Tip:</span> Make sure to test in both
light and dark themes after rebuilding.
</div>
-->
<h2 id="h_01JV8EXH87RJFW50N7K2CKJ65A">Additional tips</h2>
<ul>
<li>
<strong>How do I know if an app supports dark mode? </strong>Switch
the profile menu of your Zendesk instance to dark mode and
observe the app's appearance. If the app looks out of place
(for example, overly bright or unreadable), it likely doesn't
support dark mode.
</li>
<li>
<strong>Can I force dark mode in an unsupported app? </strong>Not
reliably. If an app isn’t designed for dark mode, forcing
dark styles may cause functionality or visibility issues.
</li>
<li>
<strong>Still not sure who built the app? </strong>Visit
the
<strong>Admin Center &gt; Apps and Integrations &gt; Apps </strong>page.
The app name and configuration details can help identify
whether it's installed from the Marketplace, built internally,
or built by Zendesk.
</li>
</ul>
</div>
</div>
</div><script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/9257152764570",
"url": "https://support.zendesk.com/hc/en-us/articles/9257152764570-Ensuring-dark-mode-compatibility-for-your-Zendesk-Support-apps",
"headline": "Ensuring dark mode compatibility for your Zendesk Support apps",
"description": "You can ensure your support apps maintain visual consistency in dark mode by following specific steps based on how the app was acquired or developed, including contacting developers or updating the app using provided guidelines.",
"articleSection": "Zendesk basics",
"datePublished": "2025-05-14T22:42:24+00:00",
"dateModified": "2025-05-20T23:53:46+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/9257152764570"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com",
"softwareAddOn": {
"@type": "SoftwareApplication",
"name": "Copilot",
"@id": "https://support.zendesk.com/hc/en-us/sections/4405303717658"
}
}
}</script>