This article explains how each Theme setting affects the Modern Learner UI, including the classic pages that still appear inside it. Use it alongside the Modern Learner UI article when planning your Portal's branding. For Portals using the classic Learner interface, see the Color Variable Guide.
We advise choosing colors that meet the Web Content Accessibility Guidelines (WCAG) AA standard: a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Tools such as the WebAIM Contrast Checker can help verify your choices.
Banner & Button Text appears on every colored button and is not adjusted automatically, so check it against Primary, Success, and Failure. Count badges in the Modern Learner UI always use white numbers, so choose a Highlight color that contrasts with white.
How Theme Colors Apply in the Modern Learner UI
Theme settings are on the Theme tab of a Department Template, in the Colors, Fonts, and Appearance sections. For details on each field, see Department Templates: Theme Tab.
Each color generates a lighter and a darker version automatically. The Modern Learner UI uses these versions for hover states, selected items, and status chips, which pair a pale version of the color with a darker version for the text. Some elements use fixed colors that the Theme cannot change. These are listed under Fixed Colors below.
Choosing a Color
To choose a color, enter a hex code in the text field, such as #1272CB, or click the eyedropper icon to open the color picker. The color picker accepts HEX, RGB, and HSL values. The small swatches beside each color preview its lighter and darker versions.
The color picker does not sample colors from your screen, and it does not support transparency. Colors are always saved as hex codes.
Branding
The Branding section sets the core colors of the Portal frame:
| Variable | Where It Appears |
| Base | The header bar, the Footer background, and the mobile search panel. A darker version colors the loading screen and the background of classic pages, including Login. |
| Highlight | Count badges in the header, the Navigation Menu, Dashboard Tiles, Curriculum Details, and the Course Player. |
The following image shows the header and Navigation Menu:
The Footer uses Base for its background:
Status
The Status section sets action and status colors. These colors appear on buttons, progress bars, and status chips across the Modern Learner UI:
| Variable | Where It Appears |
| Primary | Main action buttons such as Start, Resume, Enroll, and Add to Cart, the Login button, progress bars, Pin, selected tabs and views, breadcrumbs, checked filters, Load more, and the current lesson in the Course Player sidebar. |
| Success | Completed chips, the Course Player progress bar and lesson icons for completed content, correct answer marks in assessments, course completion messages, and success pop-up messages. |
| Warning | Mandatory chips, the Course Player progress bar for Not Completed courses, the On waitlist chip on Instructor Led Course (ILC) sessions, and lessons pending a proctor. |
| Failure | Failed, Absent, and Overdue chips, failed progress bars and lessons in the Course Player, Clear all filters, actions that delete or leave content, and error pop-up messages. |
| Feedback | Due Date, In Cart, and Waitlist chips on Course Cards, the In progress chip in the Course Player, the currency chip in the Navigation Menu, and the Admin impersonation banner. |
| Default | Some lesson icons in the Course Player. Neutral buttons on modern pages use a fixed gray. |
| Danger | Some lesson icons in the Course Player and warning pop-up messages. Delete actions on modern pages use Failure. |
Default and Danger are used mainly on classic pages, such as for Cancel buttons and Transcript status chips. For details, see Classic Pages below.
In the classic interface, Feedback colors star ratings and pinned Courses. In the Modern Learner UI, star ratings use a fixed gold and Pin uses Primary.
On Course Cards, a chip appears for Completed, Mandatory, and date-based statuses. Courses that are not started or in progress show a progress bar instead of a chip:
On My Courses, Catalog, and Search Results, Primary marks the selected view, checked filters, and breadcrumbs:
The Online Course Details modal uses Primary for the main action and selected tab:
In the Course Player, the progress bar color reflects the course status, and lesson icons reflect each lesson's state:
Dashboard
The Dashboard section sets the colors of the Public and Private Dashboards:
| Variable | Where It Appears |
| Dashboard Background | The page behind Dashboard containers, under any background image. |
| Dashboard Container Title | Container titles, and section titles on the Overview tab of Profile. |
| Dashboard Tile Icon | Tile icons and personalized learning Ribbon icons. |
| Dashboard Tile Text | Tile titles and descriptions, and Ribbon titles and subtitles. |
| Tile Background | The background of Tiles, Ribbons, and the Welcome Tile. |
Customize Tile Theme overrides these colors for an individual Tile. For details, see Tiles in the Modern Learner UI.
Type
The Type section sets text colors:
| Variable | Where It Appears |
| Banner & Button Text | Text on all colored buttons, pop-up messages, course completion and lesson result messages, page banner titles, and Welcome Tile banner text. |
| Title & Body Text | Main text, including page titles, Course titles, prices, and the signed-in User's name in the Navigation Menu. |
| Hyperlinks | Links on classic pages, such as Login, Profile tabs, and Shopping Cart. Not used on modern pages. |
Icons
The Icons section sets icon colors:
| Variable | Where It Appears |
| Header Icons | Header icons for the menu, search, cart, and messages, the currency button, the Navigation Menu submenu arrow, and Footer links and the Language button. |
| View Selection Icons | Icons on classic pages, such as the view switcher and folder icons on Resources and expand arrows on FAQ and News. Not used on modern pages, where the selected view uses Primary. |
| Menu Icons | Navigation Menu item text and icons, the avatar circle, filter drop-down arrows, Shopping Cart drawer text, and icons in the messages menu, Transcript, and My Activity. |
| Button Icons | Icons on the Resources view switcher when hovered or selected. Not used on modern pages. |
Accessibility
The Accessibility section contains the Keyboard Focus Visible variable. On modern pages, it colors the focus indicator on the header logo, the Welcome Tile, the ILC calendar, the Share dialog, and some other dialogs. Other modern buttons, tabs, and filters use a fixed, high-visibility blue focus indicator. On classic pages, it colors all focus indicators.
Fonts and Appearance
The Fonts and Appearance sections of the Theme tab control typography and the shape of cards and panels:
| Setting | What It Affects |
| Header Font | Page headings and main titles. Only Google Fonts are supported. |
| Body Font | All other text. Only Google Fonts are supported. |
| Use rounded corners | Rounded corners on cards, panels, Dashboard Tiles, category lists, Course Cards, search result cards, and billboards. Buttons and dialogs are not affected. |
| Show shadows | Shadows on the same elements. Shadow Intensity and Shadow Color adjust the shadow and are available only when shadows are on. |
Pop-Up Messages
Pop-up messages, such as the confirmation shown after clicking Copy Link in the Share dialog, use a status color for the background and Banner & Button Text for the text:
| Message Type | Variable |
| Success | Success |
| Information | Primary |
| Error | Failure |
| Warning | Danger |
Classic Pages
Some pages keep their classic design inside the new header and Footer. These pages use the Theme colors differently from modern pages:
- Login, Sign Up, and Forgot Password
- Shopping Cart
- Profile and Messages
- Transcript
- Resources, FAQ, and News
- Leaderboards
- Polls & Surveys
- Collaborations
Common Elements
The following elements look the same on every classic page:
| Element | Variable |
| Page background and page banner | Base (darker version), behind any banner image |
| Page banner title | Banner & Button Text |
| Body text | Title & Body Text |
| Links | Hyperlinks |
| Buttons | Primary, with Banner & Button Text |
| Cancel buttons | Danger |
| Selected text fields | Primary border |
| Keyboard focus indicator | Keyboard Focus Visible |
| Field errors | Failure |
| Form error and success banners | Failure and Success |
Login, Sign Up, and Forgot Password
These pages use Base (darker version) for the page background. When a background image is set on Login, a tint of the same color covers the image, and the image opacity setting controls its strength. Form panels are a fixed, semi-transparent white.
| Element | Variable |
| Forgot password link | Hyperlinks |
| Back to login links | Primary |
| Divider between sign-in options | Default, with Title & Body Text |
| Keep me logged in checkbox | Primary |
| Toggle switches | Primary |
| Drop-down arrows | Default |
| Information notices | Feedback (pale version) |
| Multi-factor authentication errors | Failure |
Shopping Cart
Shopping Cart page backgrounds and panels use fixed colors. The following elements use Theme colors:
| Element | Variable |
| Cart tabs | Primary on hover, and Primary text on the selected tab |
| Item warnings and price errors | Warning and Highlight |
| Free label | Primary (pale version) |
| Remove item button on hover | Primary |
| Cart messages | Primary for notes, Warning for warnings, and Failure for errors |
| Payment options | Default ring, with Primary for the selected option and option icons |
| Proceed as guest button | Default (pale version), with Primary text |
| Receipt message | Primary |
Profile and Messages
Profile and the messages menu use the following colors:
| Element | Variable |
| Selected Profile tab | Hyperlinks text |
| Profile photo camera button | Primary |
| My Activity icons | Menu Icons |
| Clickable table rows on hover | Primary |
| Subscription status chips | Success for active, Default for expired, and Warning for cancelled |
| Priority message badge | Highlight |
| Messages menu icons | Menu Icons |
| Selected messages menu section | Primary side bar |
Transcript
Transcript status chips use a pale version of the status color, with a darker version for the text:
| Element | Variable |
| Complete chips | Success |
| In Progress chips | Primary |
| Not Started, Not Complete, Pending Approval, and Pending Evaluation chips | Danger |
| Failed and Absent chips | Failure |
| Credit totals and action buttons | Primary |
| Expired certificate icon | Warning |
| Field icons | Menu Icons |
Resources, FAQ, and News
These pages share many classic content elements:
| Element | Variable |
| Breadcrumb icon and category count | Highlight |
| Folder icons, expand arrows, and the view switcher | View Selection Icons |
| View switcher icons on hover or when selected | Button Icons, on View Selection Icons or Primary |
| Open and Load more buttons | Primary |
| Tags | Hyperlinks background, with white text |
| List view icons | Menu Icons |
| Sort and search arrows | Default |
Leaderboards
The Leaderboards page uses Primary for rankings. Medal colors are fixed:
| Element | Variable |
| Leaderboard names, ranks, points, and avatar rings | Primary (darker version) |
| Your row | Primary, with Banner & Button Text |
| Top 10, Top 50, and Top 100 buttons | Primary, with Banner & Button Text |
| Tabs | Hyperlinks text, with a Highlight underline |
Polls & Surveys
The Polls & Surveys page uses the following colors:
| Element | Variable |
| Radio buttons | Default ring, with Primary on hover and when selected |
| Results bars | Default, with Primary for your choice |
Collaborations
Collaborations pages use the following colors:
| Element | Variable |
| New post button and selected post type | Primary |
| Like button | Default, or Primary when liked |
| Best answer mark | Success |
| Character counter over the limit | Failure |
| Sidebar count badges | Highlight |
Fixed Colors
Some elements use fixed colors and cannot be changed through the Theme:
- Neutral buttons and icon buttons on modern pages, such as View, View details, scroll arrows, and the overflow menu.
- Disabled buttons on modern pages.
- Menu and list rows on modern pages, including their hover and pressed states.
- Page backgrounds on My Courses, Catalog, Search Results, the Course Player, and Shopping Cart.
- Chapter and task count badges in the Online Course Details modal.
- Search fields and drop-down menus.
- Star ratings and Leaderboards medals.
- ILC calendar session colors.
- Assessment feedback banners and timer.
- The Leaderboard Tile and Billboard Tile controls.
- The loading animation.
- Most keyboard focus indicators on modern pages.
Mobile Web and the Absorb Learning Mobile App
Mobile web uses the same colors as desktop. Only the layout changes: the Course Player sidebar becomes a bottom sheet, and filters and Course Card menus open as bottom drawers.
Most screens in the Absorb Learning Mobile App match the web. The app adds a bottom navigation bar with a fixed white background, the selected item in Primary, and the More badge in Feedback. The Transcript and Messages screens are native to the app and use limited branding. For setup details, see Absorb Learning Mobile App.
Comments
Article is closed for comments.