<WRAP hide>%%<!-- googleoff: index -->%%</WRAP>
<WRAP center notice centeralign>
**⚠️ v4.0 UI Transition Notice - In Process:**
//The release of Total Launcher v4.0 has introduced significant user interface changes. Please note that this 
page does not yet reflect these updates. The new layout paths, folds, and visual maps are currently being 
compiled and will be deployed shortly.//
</WRAP>
<WRAP hide>%%<!-- googleon: index -->%%</WRAP>


----


======  Dynamic Color Dialog  ======

Dialog selections are discussed below the image. For navigation to an item, make a selection in the Dynamic Color image.

{{imapmarkers>:ui:ui-folder-options-icon-dynamic_color.webp?200|Color - Dynamic Color}}
[[:ui:ui-resources-shape-selection-all-color-dynamic_color-custom|ID1|Primary@17,78,71,98]]
{{cfg>}}
   {
   }
{{<cfg}}
{{<imapmarkers}}
<wrap hi>**Dynamic Color dialog. Make selection above.**</wrap>

Dynamic Color, based on Android's Material You design language, adapts the launcher’s color palette to the user's wallpaper or theme. It uses //predefined// role, like "Primary," "Secondary," "Error,", to apply consistent and hopefully visually appealing colors across different UI elements. 

The options listed in the above **Color - Dynamic Color** image are further described below:
  * **Primary** -  The main accent color. Used for key buttons, highlights, or standout elements.
  * **On primary** -  Color used for text/icons placed on top of a primary background (usually high contrast, e.g., white/black).
  * **Primary container** -  A softer or lighter background variant of primary used for cards, panels, and grouped objects.
  * **On primary container** -  Text/icon color that appears on top of the primary container to be readable and well contrasted.
  * **Secondary** - A supporting accent color, often used for less-prominent buttons and UI elements.
  * **On secondary** -  Text/icons on top of secondary backgrounds.
  * **Secondary container** - A lighter version of secondary used for secondary cards or panels.
  * **On secondary container** - Tex/icons on top of the secondary container.
  * **Tertiary** - Tertiary (a third) accent color. This is less common but useful for subtle details.
  * **On tertiary** - Text/icon on top of tertiary backgrounds.
  * ** Tertiary container** - This is a lighter version of tertiary used for the background of tertiary objects.
  * **On tertiary container** - Text/icons on top of the tertiary container.
  * **Error** - Used for alerts/warning indicators (usually red).
  * **On error** - Text/icon color over error backgrounds
  * **Error container** - Text/icons on top of error backgrounds.
  * **On error container** - Text/kcons on top of the error container.
  * **Surface** - The default background color for most surfaces such as cards or pages.
  * **On surface** - Text/icons on top of the surface backgrounds.

Keep these points in mind when using dynamic colors
  * **Customization** - When designing a layout, assign these roles to widgets, panels, buttons, and text. For example, a weather widget might use "Primary Container" as its background and "On Primary Container" for the text.
  * **Contrast & Readability** - The “On…” roles are carefully chosen to ensure visibility. If your background is dark, the “On…” color will likely be light (and vice versa).
  * **Consistency** - Using these roles instead of manually picking colors helps maintain a cohesive look across your launcher—even if you change wallpapers.
  * **Error Handling** - Assign “Error” and “On Error” roles to elements that show warnings or failed actions (e.g., failed sync, missing data).
<WRAP center round tip 60%>
Start with the default dynamic color setup and observe how colors shift with different wallpapers. Use containers such as windows to group related elements, like a calendar panel or app folder. Experiment, preview changes instantly, and then tweak.
</WRAP>

=== Dynamic Color - Automatic vs Manual Control ===
Total Launcher’s Dynamic Color system, inspired by Android’s Material You, is not locked into it. There can be Automatic theming (based on wallpaper or system theme) and Manual overrides (for any individual color role)
  * **What Happens Automatically if Dynamic Color is enabled:**
          * Total Launcher pulls a color palette from the current wallpaper (or system theme if supported).
          * It assigns colors to each role, Primary, Secondary, Tertiary, Error, Surface, based on Material You guidelines.
          * These roles are then used across widgets, panels, buttons, and text if the user chose [[:section:section-launcher_options-ui_animation|Use of  Dynamic Color scheme]] for those objects.
          * It is sort of a "set it and forget it", and the launcher harmonizes everything automatically.
  ***What You Can Customize Independently**:
          * The user can override any role manually if the wallpaper/theme supports it. For example:
            * Want a custom red or blue for Error? It could be set directly.
            * Each role has its own [[ui:ui-resources-shape-selection-all-color-color_picker|color picker]] for adjusting hue, saturation, and using hex codes for precision. This means mix and match is possible: let most roles follow Dynamic Color, but tweak a few (like Error or Tertiary) for design purposes such as improving visibility.

<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>

<wrap hide>
===== Hidden Index Anchors =====
[[:ui:ui-resources-shape-selection-all-color-dynamic_color-custom]]
</wrap>