View Categories

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
  1. Use the toggle to preview your app design on Android or iPhone mockups.
Screenshot of phone mockup

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
  1. Use hex codes or the color picker.
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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
  1. 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

Style the Register Screen #

  1. Under Register Screens, set colors for:
    • Input fields
    • Buttons
    • Background
Screenshot of register screen options
  1. 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

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
  1. 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.

Updated on October 2, 2025