.. _reference-admin-gui-theme-customization-colors: Theme element color references for the Admin portal ------------------------------------------------------------- .. _21.4-PB1|EKB-14237: .. _25.4|VOSS-1547: .. tip:: :ref:`use-action-search-to-navigate-automate` This topic describes what each theme colour setting is for in the theme editor or saved theme data. See: :ref:`create-theme-in-BAP`. Quick map (setting and typical UI area) .......................................... +----------------------------------+-----------------------------------------------------------------------+ | Setting | Typical UI area | +==================================+=======================================================================+ | Primary / primary text | Brand, primary buttons, strong branded surfaces | +----------------------------------+-----------------------------------------------------------------------+ | Accent / accent text | Selection, highlights, active list/menu emphasis | +----------------------------------+-----------------------------------------------------------------------+ | Topbar / topbar text | Top strip of the app | +----------------------------------+-----------------------------------------------------------------------+ | Menu / menu text | Side navigation | +----------------------------------+-----------------------------------------------------------------------+ | Panel / panel text | Forms, tables, dialogs - main content surfaces; hierarchy tree labels | +----------------------------------+-----------------------------------------------------------------------+ | Background | Page canvas behind layout | +----------------------------------+-----------------------------------------------------------------------+ | Input / input text | Fields and editors | +----------------------------------+-----------------------------------------------------------------------+ | Button background | Solid action buttons | +----------------------------------+-----------------------------------------------------------------------+ | Highlight text | Text on selected table/list rows | +----------------------------------+-----------------------------------------------------------------------+ | Panel header bg / header text | Panel title bar strip and its wording | +----------------------------------+-----------------------------------------------------------------------+ | Paginator text | Table/list pagination labels | +----------------------------------+-----------------------------------------------------------------------+ | notification | Toast / message severity chrome | +----------------------------------+-----------------------------------------------------------------------+ Detailed colour reference ......................... * Primary colour (`primary_colour`) The main brand colour - the strongest "this is our product" tint. It appears on primary actions, key branding strips, many focus and active states, and other surfaces where the UI should read as "the official brand colour." * Primary text colour (`primary_text_colour`) The colour of text and icons drawn on top of primary-coloured surfaces (for example labels on a solid primary button, or wording on a primary-tinted header). It exists so foreground and background stay readable when you change the primary fill. * Accent colour (`accent_colour`) A second strong colour used where the UI needs to say "selected," "highlighted," or "emphasised" without reusing the same swatch as primary. Typical uses include selected rows in tables and lists, active items in menus or pickers, and other "this thing is currently chosen" affordances. * Accent text colour (`accent_text_colour`) The colour of text and icons on top of accent-coloured backgrounds - for example the label on a selected table row when the row background uses the accent colour. * Topbar colour (`topbar_colour`) The background of the top application bar - the horizontal strip at the very top of the portal (often logo, global search, environment or user controls). It is usually distinct from the main page background so the bar reads as fixed chrome. * Topbar text colour (`topbar_text_colour`) The colour of text and icons in that top bar (labels, icons, and similar elements sitting on `topbar_colour`). * Menu colour (`menu_colour`) The background of the main navigation menu (typically the vertical sidebar with module links). It sets the "menu panel" feel separate from the central panel and page areas. * Menu text colour (`menu_text_colour`) The colour of menu labels, icons, and similar elements drawn on `menu_colour` - including inactive items unless another state colour overrides them for a specific interaction. * Panel colour (`panel_colour`) The background of content panels - cards, form areas, dialog bodies, and similar "work surfaces" where most reading and data entry happens. It is the usual large neutral (or tinted) surface behind tables and forms. * Panel text colour (`panel_text_colour`) The default text colour for body content on panels - paragraphs, labels, table cell text, and general wording that sits on `panel_colour` (unless a more specific token applies to a sub-widget). In the portal it is also used for selectable hierarchy / organisation tree labels (there is no separate Theme key for tree text). * Background colour (`background_colour`) The page-level backdrop behind the main layout - the colour users perceive as the outer application background outside or around panels and the menu. It is typically calmer or darker/lighter than `panel_colour` so panels and the menu lift visually. * Input colour (`input_colour`) The fill background of text inputs - single-line fields, text areas, and similar editable controls (often aligned with dropdown surfaces in the same theme family). * Input text colour (`input_text_colour`) The colour of typed text (and related foreground) inside those input controls - chosen so characters stay readable on `input_colour`. * Button background colour (`button_background_colour`) The fill for standard solid action buttons (primary-style buttons used across the app). It can match primary or be set on its own when primary sits very close to panel fills in dark themes and buttons would otherwise look flat or hard to spot. * Highlight text colour (`highlight_text_colour`) The colour of text and icons on top of highlighted (selected) rows in tables and lists - the wording that sits on the coloured selection strip (often driven by accent). * Panel header background colour (`panel_header_background_colour`) The background of the title strip at the top of a panel - the bar behind the panel title, not the main panel body (`panel_colour`). * Panel header text colour (`panel_header_text_colour`) The colour of the title wording (and related icons) on that panel header strip, so titles stay readable when the header background differs from the panel body. * Paginator text colour (`paginator_text_colour`) The colour of pagination wording - page numbers, "rows per page", and similar labels in paginator controls (usually at the bottom of tables and lists). * Info notification colour (`info_notification_colour`) The background of informational notifications (neutral "here is something you should know" messages). * Info notification text colour (`info_notification_text_colour`) The text (and icon tint where applicable) on top of info notification backgrounds. * Success notification colour (`success_notification_colour`) The background of success notifications (completed actions, confirmations, positive outcomes). * Success notification text colour (`success_notification_text_colour`) The text on top of success notification backgrounds. * Warning notification colour (`warn_notification_colour`) The background of warning notifications (caution, validation warnings, non-blocking issues). * Warning notification text colour (`warn_notification_text_colour`) The text on top of warning notification backgrounds. * Error notification colour (`error_notification_colour`) The background of error notifications (failures, blocking problems, destructive outcomes). * Error notification text colour (`error_notification_text_colour`) The text on top of error notification backgrounds.