{"id":10463,"date":"2025-09-22T20:09:53","date_gmt":"2025-09-23T00:09:53","guid":{"rendered":"https:\/\/learndash.com\/support\/?post_type=docs&p=10463"},"modified":"2025-10-02T17:05:32","modified_gmt":"2025-10-02T21:05:32","password":"","slug":"how-to-configure-the-learndash-app-colors","status":"publish","type":"docs","link":"https:\/\/learndash.com\/support\/kb\/learndash-app\/managing-content-for-learndash-app\/how-to-configure-the-learndash-app-colors\/","title":{"rendered":"How to Configure the Learndash App Colors"},"content":{"rendered":"\n

Introduction<\/strong><\/h2>\n\n\n\n


<\/strong>Consistent, on-brand colors elevate your app\u2019s design, reinforce your identity, and improve usability. The Learndash App Color<\/strong> settings let you customize everything. From backgrounds and buttons to tab bars and in-app purchase highlights directly from your WordPress Dashboard.
<\/p>\n\n\n\n

This guide walks you through setting colors for every section of your app and previewing changes in real time on iOS and Android.<\/p>\n\n\n\n

Open the Color Settings<\/strong><\/h2>\n\n\n\n
    \n
  1. In WordPress, go to Learndash App > Branding > Colors<\/strong>.<\/li>\n<\/ol>\n\n\n
    \n
    \"Screenshot<\/figure><\/div>\n\n\n
      \n
    1. Use the toggle to preview your app design on Android<\/strong> or iPhone<\/strong> mockups.
      <\/li>\n<\/ol>\n\n\n
      \n
      \"Screenshot<\/figure><\/div>\n\n\n

      Configure General Colors<\/strong><\/h2>\n\n\n\n
        \n
      1. In the General<\/strong> section, click each color swatch<\/strong> to set:
        \n
          \n
        • Background Color<\/strong><\/li>\n\n\n\n
        • Alternate Background Color<\/strong><\/li>\n\n\n\n
        • Cover Image Background<\/strong><\/li>\n\n\n\n
        • Border Color<\/strong><\/li>\n\n\n\n
        • Content Loader Color<\/strong><\/li>\n\n\n\n
        • Accent Color<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n
          \n
          \"Screenshot<\/figure><\/div>\n\n\n
            \n
          1. Use hex codes or the color picker.
            <\/li>\n<\/ol>\n\n\n\n
              \n
            1. Changes preview live on the App Page, Directory Page,<\/strong> and Menu Page<\/strong>.<\/li>\n<\/ol>\n\n\n\n

              Customize the Navigation Bar<\/strong><\/h2>\n\n\n\n
                \n
              1. Under Navigation Bar<\/strong>, set:
                \n
                  \n
                • Background Color<\/strong>
                  <\/strong><\/li>\n\n\n\n
                • Text Color<\/strong>
                  <\/strong><\/li>\n\n\n\n
                • Link Color<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n
                  \n
                  \"Screenshot<\/figure><\/div>\n\n\n
                    \n
                  1. Preview the header changes in real time.
                    <\/li>\n<\/ol>\n\n\n\n

                    Style the Tab Bar & More Screen<\/strong><\/h2>\n\n\n\n
                      \n
                    1. Go to Tab Bar & More<\/strong>.
                      <\/li>\n\n\n\n
                    2. Set:
                      \n
                        \n
                      • Tab Bar Background Color<\/strong>
                        <\/strong><\/li>\n\n\n\n
                      • Icon Default Color<\/strong>
                        <\/strong><\/li>\n\n\n\n
                      • Icon Active Color<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n
                        \n
                        \"Screenshot<\/figure><\/div>\n\n\n
                          \n
                        1. Preview the updated Tab Bar and More Screen mockups.
                          <\/li>\n<\/ol>\n\n\n\n

                          Customize Button Styles<\/strong><\/h2>\n\n\n\n
                            \n
                          1. Under Buttons<\/strong>, set:
                            \n
                              \n
                            • Primary Button Background<\/strong> & Text Color<\/strong>
                              <\/strong><\/li>\n\n\n\n
                            • Secondary Button Background<\/strong> & Text Color<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n
                              \n
                              \"Screenshot<\/figure><\/div>\n\n\n
                                \n
                              1. Review the updated styles in the app preview.
                                <\/li>\n<\/ol>\n\n\n\n

                                Adjust Text Colors<\/strong><\/h2>\n\n\n\n
                                  \n
                                1. Under Text Colors<\/strong>, configure:
                                  \n
                                    \n
                                  • Heading Text Color<\/strong>
                                    <\/strong><\/li>\n\n\n\n
                                  • Body Text Color<\/strong>
                                    <\/strong><\/li>\n\n\n\n
                                  • Description Text Color<\/strong>
                                    <\/strong><\/li>\n\n\n\n
                                  • Meta Text Color<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n
                                    \n
                                    \"Screenshot<\/figure><\/div>\n\n\n
                                      \n
                                    1. Ensure contrast and readability against both light and dark backgrounds.
                                      <\/li>\n<\/ol>\n\n\n\n

                                      Style Labels<\/strong><\/h2>\n\n\n\n
                                        \n
                                      1. Under Labels<\/strong>, set:
                                        \n
                                          \n
                                        • Label Background Color<\/strong>
                                          <\/strong><\/li>\n\n\n\n
                                        • Label Text Color<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n
                                          \n
                                          \"Screenshot<\/figure><\/div>\n\n\n
                                            \n
                                          1. Confirm visibility in both list<\/strong> and detail views<\/strong>.
                                            <\/li>\n<\/ol>\n\n\n\n

                                            Customize the Login Screen<\/strong><\/h2>\n\n\n\n
                                              \n
                                            1. Scroll to Login Screens<\/strong>.
                                              <\/li>\n\n\n\n
                                            2. Configure background, field borders, and button colors.
                                              <\/li>\n\n\n\n
                                            3. Preview both Login<\/strong> and Forgot Password<\/strong> screens.
                                              <\/li>\n<\/ol>\n\n\n
                                              \n
                                              \"Screenshot<\/figure><\/div>\n\n\n

                                              Style the Register Screen<\/strong><\/h2>\n\n\n\n
                                                \n
                                              1. Under Register Screens<\/strong>, set colors for:
                                                \n
                                                  \n
                                                • Input fields
                                                  <\/li>\n\n\n\n
                                                • Buttons
                                                  <\/li>\n\n\n\n
                                                • Background<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n
                                                  \n
                                                  \"Screenshot<\/figure><\/div>\n\n\n
                                                    \n
                                                  1. Confirm changes in the Register screen preview.
                                                    <\/li>\n<\/ol>\n\n\n\n

                                                    Set Android Status Bar Color<\/strong><\/h2>\n\n\n\n
                                                      \n
                                                    1. Under Android Status Bar<\/strong>, configure the Status Background Color<\/strong>.
                                                      <\/li>\n\n\n\n
                                                    2. Confirm changes in the Android device mockup.<\/li>\n<\/ol>\n\n\n
                                                      \n
                                                      \"Screenshot<\/figure><\/div>\n\n\n

                                                      Configure Course Progress Colors<\/strong><\/h2>\n\n\n\n
                                                        \n
                                                      1. In the Courses<\/strong> section, set colors for:
                                                        \n
                                                          \n
                                                        • Completed<\/strong>
                                                          <\/strong><\/li>\n\n\n\n
                                                        • In Progress<\/strong>
                                                          <\/strong><\/li>\n\n\n\n
                                                        • Start Course<\/strong>
                                                          <\/strong><\/li>\n\n\n\n
                                                        • Free<\/strong>
                                                          <\/strong><\/li>\n\n\n\n
                                                        • Not Enrolled<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n
                                                          \n
                                                          \"Screenshot<\/figure><\/div>\n\n\n
                                                            \n
                                                          1. Preview updates in the course list view.
                                                            <\/li>\n<\/ol>\n\n\n\n

                                                            Customize In-App Purchases<\/strong><\/h2>\n\n\n\n
                                                              \n
                                                            1. Go to In-App Purchases<\/strong> and configure:
                                                              \n
                                                                \n
                                                              • Purchased Status Checkmark Color<\/strong>
                                                                <\/strong><\/li>\n\n\n\n
                                                              • Benefits Checkmark Color<\/strong>
                                                                <\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n
                                                              • Preview on the purchase screen to ensure proper contrast and visibility.
                                                                <\/li>\n<\/ol>\n\n\n\n

                                                                Save Your Changes<\/strong><\/h2>\n\n\n\n
                                                                  \n
                                                                • Scroll down and click Save Changes<\/strong> to apply all color settings.
                                                                  <\/li>\n<\/ul>\n\n\n\n

                                                                  Note: Unsaved changes will be lost upon navigating away or refreshing the page.<\/p>\n\n\n\n

                                                                  Troubleshooting and FAQs<\/strong><\/h2>\n\n\n\n

                                                                  Q: Why aren\u2019t color previews updating?<\/strong>
                                                                  <\/strong> A: Click Save Changes<\/strong>, then hard-refresh your browser or clear cache plugins.<\/p>\n\n\n\n

                                                                  Q: Why don\u2019t changes appear in the app?<\/strong>
                                                                  <\/strong> A: Force-close and reopen the Learndash App to load the updated settings.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                                                  Introduction Consistent, on-brand colors elevate your app\u2019s 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…<\/p>\n","protected":false},"author":58,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_helpful_status":1,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"doc_category":[288],"doc_tag":[],"knowledge_base":[283],"class_list":["post-10463","docs","type-docs","status-publish","hentry","doc_category-managing-content-for-learndash-app","knowledge_base-learndash-app"],"year_month":"2026-04","word_count":452,"total_views":"715","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"Stephanie Liy","author_link":"https:\/\/learndash.com\/support\/author\/stephaniei\/"},"doc_category_info":[{"term_name":"Managing Content for LearnDash App","term_url":"https:\/\/learndash.com\/support\/kb\/learndash-app\/managing-content-for-learndash-app\/"}],"doc_tag_info":[],"taxonomy_info":{"doc_category":[{"value":288,"label":"Managing Content for LearnDash App"}],"knowledge_base":[{"value":283,"label":"LearnDash App"}]},"featured_image_src_large":false,"comment_info":0,"knowledge_base_info":[{"term_name":"LearnDash App","term_url":"https:\/\/learndash.com\/support\/kb\/learndash-app\/","term_slug":"learndash-app"}],"knowledge_base_slug":["learndash-app"],"_links":{"self":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/comments?post=10463"}],"version-history":[{"count":2,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10463\/revisions"}],"predecessor-version":[{"id":10958,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10463\/revisions\/10958"}],"wp:attachment":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/media?parent=10463"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_category?post=10463"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_tag?post=10463"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/knowledge_base?post=10463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}