---
title: "How to Configure the Learndash App Colors"
source: "https://docs.nexcess.com/software/learndash/configure-app-colors/"
description: "Introduction Consistent, on-brand colors elevate your app’s design, reinforce your identity, and improve usability. The Learndash App Color settings let you cus…"
vertical: "Software"
area: "LearnDash"
date: "2025-09-23"
last_modified: "2026-07-02"
---

# How to Configure the Learndash App Colors

## **Introduction**

  
Consistent, on-brand colors elevate your app’s design, reinforce your identity, and improve usability. The **Learndash App Color** settings let you customize everything. From backgrounds and buttons to tab bars and in-app purchase highlights directly from your WordPress Dashboard.

This guide walks you through setting colors for every section of your app and previewing changes in real time on iOS and Android.

## **Open the Color Settings**

1. In WordPress, go to **Learndash App > Branding > Colors**.

![Screenshot of branding menu](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-1.png)2. Use the toggle to preview your app design on **Android** or **iPhone** mockups.

![Screenshot of phone mockup](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-2.png)## **Configure General Colors**

1. In the **General** section, click each **color swatch** to set:  
    
    - **Background Color**
    - **Alternate Background Color**
    - **Cover Image Background**
    - **Border Color**
    - **Content Loader Color**
    - **Accent Color**

![Screenshot of General color settings](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-3.png)2. Use hex codes or the color picker.

3. Changes preview live on the **App Page, Directory Page,** and **Menu Page**.

## **Customize the Navigation Bar**

1. Under **Navigation Bar**, set:  
    
    - **Background Color
    - **Text Color
    - **Link Color**

![Screenshot of Navigation Bar Color options](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-4.png)2. Preview the header changes in real time.

## **Style the Tab Bar & More Screen**

1. Go to **Tab Bar & More**.
2. Set:  
    
    - **Tab Bar Background Color
    - **Icon Default Color
    - **Icon Active Color**

![Screenshot of tab bar and more screen settings](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-5.png)3. Preview the updated Tab Bar and More Screen mockups.

## **Customize Button Styles**

1. Under **Buttons**, set:  
    
    - **Primary Button Background** & **Text Color
    - **Secondary Button Background** & **Text Color**

![Screenshot of button color settings](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-6.png)2. Review the updated styles in the app preview.

## **Adjust Text Colors**

1. Under **Text Colors**, configure:  
    
    - **Heading Text Color
    - **Body Text Color
    - **Description Text Color
    - **Meta Text Color**

![Screenshot of text color options](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-7.png)2. Ensure contrast and readability against both light and dark backgrounds.

## **Style Labels**

1. Under **Labels**, set:  
    
    - **Label Background Color
    - **Label Text Color**

![Screenshot of Label color options](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-8.png)2. Confirm visibility in both **list** and **detail views**.

## **Customize the Login Screen**

1. Scroll to **Login Screens**.
2. Configure background, field borders, and button colors.
3. Preview both **Login** and **Forgot Password** screens.

![Screenshot of login screen options](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-9.png)## **Style the Register Screen**

1. Under **Register Screens**, set colors for:  
    
    - Input fields
    - Buttons
    - Background

![Screenshot of register screen options ](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-10.png)2. Confirm changes in the Register screen preview.

## **Set Android Status Bar Color**

1. Under **Android Status Bar**, configure the **Status Background Color**.
2. Confirm changes in the Android device mockup.

![Screenshot of android status bar settings ](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-11.png)## **Configure Course Progress Colors**

1. In the **Courses** section, set colors for:  
    
    - **Completed
    - **In Progress
    - **Start Course
    - **Free
    - **Not Enrolled**

![Screenshot of courses color options](https://docs.nexcess.com/wp-content/uploads/2026/06/How-to-Configure-the-Learndash-App-Colors-_-12.png)2. Preview updates in the course list view.

## **Customize In-App Purchases**

1. Go to **In-App Purchases** and configure:  
    
    - **Purchased Status Checkmark Color
    - **Benefits Checkmark Color
2. Preview on the purchase screen to ensure proper contrast and visibility.

## **Save Your Changes**

- Scroll down and **click Save Changes** to apply all color settings.

Note: Unsaved changes will be lost upon navigating away or refreshing the page.

## **Troubleshooting and FAQs**

**Q: Why aren’t color previews updating?  
 A: Click **Save Changes**, then hard-refresh your browser or clear cache plugins.

**Q: Why don’t changes appear in the app?  
 A: Force-close and reopen the Learndash App to load the updated settings.