===== Customizing: Total Launcher Dynamic Color Scheme =====

{{  :tl_custom_colors-visual.webp?direct&500 |Total Launcher Dynamic Color Overview  }}

==== What it Does ====
Total Launcher leverages Android's **Material You (M3)** system to create a harmonized look for the home screen. Instead of manually picking a color for every text or icon, it is assigned as a **Role**. If desired, some additional background on how Material Design evolved through its iterations to the current Material You v3 can be viewed ++++here.|

What it does is complicated, but some history may help.

In 2014, Google believed the Android interface lacked consistency across apps. It release **Material Design** language which provided strict rules for grids, colors, and typography. Developers and users complained about the uniformity which caused Google to loosen those standards with the release of **Material Theming** in 2018 where material components //could// be customized. But in 2021 Google moved away from "one size fits all" and offered the current **Material You** (aka Material Design v3) where users could have more control over how their device looked.

Material You used the philosophy of "Form Follows Feeling" with **Dynamic Color** being the major a feature through it's //monet engine// which extracts colors from the wallpaper //or a chosen color// [expands the color to 5 tonal palettes with 13 shades each] and applies them to the entire system and supported apps. The concept is applied seamlessly across devices of many forms and introduced larger touch targets, more rounded shapes, and improved contrast to make technology easier for everyone to use.
++++

==== Turn It On ====

To enable this engine: 
  * ''Edit mode'' > ''Main Menu'' > ''Launcher options'' > ''UI & Animation'' > ''Dynamic Color Scheme'' [Check the box]

==== The Master Plan: A Museum Exhibit ====
Think of the device screen as a **Museum Exhibit**. When  Material You (M3) is enabled, the system acts as a **"Master Curator."** The Curator’s job is to ensure that every part of the exhibit works together in perfect color harmony based on the "theme" (as per the wallpaper).

Instead of picking random colors, **Roles** as assigned to the objects. These roles define the objects "job" on the in the museum:

  * **Primary (The Main Exhibit):** The "Star of the Show." Use for important search bars or main buttons. It wears the most vibrant color to make sure users see it first.
  * **Secondary (The Support Gallery):** Supporting actors. Use for less important icons or smaller widgets. These stay in the same "color family" as the Primary role but are muted.
  * **Tertiary (The Highlight):** A single spotlight on a specific artifact. This is a "surprise" color that adds variety and "pop" (like a notification badge).
  * **Neutral & Surface (The Walls & Floor):** The building itself. Subtle background tones that allow the accented exhibits to shine.
  * **The "On" Roles (The Labels):** Clear labels required for reading. The **"On Primary"** or **"On Surface"** roles are text colors designed to be automatically readable against their specific background.

==== The Curator in Action ====
These samples show how the same objects (clock, icons, buttons) change their "costumes" automatically when the Curator changes the theme.

<WRAP group>
<WRAP column 30%>
**Basic Theme**
{{:section:section3-1-customize-dynamic_color-sample-basic_theme.webp?direct&250}}
</WRAP>
<WRAP column 30%>
**Dark Theme**
{{:section:section3-1-customize-dynamic_color-sample-dark_theme.webp?direct&250}}
</WRAP>
<WRAP column 30%>
**Green Theme**
{{:section:section3-1-customize-dynamic_color-sample-green_theme.webp?direct&250}}
</WRAP>
</WRAP>

==== Dynamic Color Cheat Sheet ====
This table explains the difference between the **Dynamic Path** (following the Curator) and the **Custom Path** (the Rebel).

<WRAP group>
<WRAP box center 90%>
^ If choosing ... ^ The Object follows... ^ Dynamic? ^ Best for... ^
| **Custom color** | a manually assigned ARGB Codes | **NO** | Minimalist B/W or fixed brand colors. |
| **Primary** | Main System Accent | **YES** | Most important buttons and headings. |
| **On Primary** | Contrast Algorithm | **YES** | Text on top of Primary backgrounds. |
| **Secondary** | Supporting Accent | **YES** | Less important widgets or accents. |
| **Tertiary** | Complementary Accent | **YES** | "Pop" accents like clocks or badges. |
| **Surface** | System Background Tones | **YES** | Page backgrounds and subtle cards. |

**Note:** If the launcher shows "No Wallpaper," M3 defaults to a neutral "Baseline" (usually dark blue or grey). To see the dynamic effect clearly, temporarily set a vibrant wallpaper.
</WRAP>
</WRAP>

Visual Guide to the Dialogs\\ 
^  TL Dynamic Color dialog: \\ Choosing a Role for your object  ^
{{:ui:ui-dynamic_color.webp?200  }}
| |
| |
|* Primary |
|* On primary |
|* Primary container |
|* On primary container |
|* Secondary |
|* On secondary |
|* Secondary container |
|* On secondary container |
|* Tertiary |
|* On tertiary |
|* Tertiary container |
|* On tertiary container |
|* Error |
|* On error  * Error container |
|* On error container |
|* Surface |
|* On surface |

==== Troubleshooting & Tips ====

<WRAP notice>
**The colors aren't changing!**\\ 
When wallpaper changes but the "Primary" text stays grey or blue, try these steps:
</WRAP>

  * **The "Baseline" Trap:** If the wallpaper is neutral, M3 defaults to a grey/blue palette. Use a **vibrant wallpaper** to verify the system is working.
  * **Sync Wallpaper:** Ensure ''Launcher options'' > ''UI & Animation'' > ''Sync system wallpaper'' is checked.
  * **The "Force Refresh":** If the palette doesn't update:
    * Restart the launcher: ''Launcher options'' > ''Troubleshooting'' > ''Restart Total Launcher''.
    * Toggle the ''Dynamic color scheme'' option OFF and then ON again.
  * **Custom Overrides:** A **Custom Color** rule will always ignore the Dynamic "Role" script.

==== Noted Issues ====

There have been discussions on how Total Launcher has implemented it's Dynamic Color Scheme and Dynamic Color dialog. Since the developer of not made available background documentation on it's implementation, questions will continue to arise. There may also be some additional thoughts posted in the discussion section at the bottom of this page.

For those interested in reviewing other viewpoints, ++++click here|

I am using a base wallpaper in my design (controlled by a third-party app called DualWallpaper, that allows automatic change on the lock and home screen wallpapers to change with Light/Dark mode), only that 70% is transparent. I have tried with more colorful wallpaper and the result for the Custom Color dialog is the same. 

The more I use TL the more I see it working as an GUI overlay that works on top of the Home UI (in my Samsung case) system. That gives it the possibility to re-frame the roles of the gui elements (buttons, menus, etc.) to what the user wants them to be. When constructing a home interface using TL, a button is a button only if the user decide it is.

The connection with M3 can be implemented in the custom home interface as much as the user needs it and on the elements the user needs it, but the restrictions of how those colors are read from M3 API by TL could be coming from Google side.

... the Custom Color function in TL falls outside the direct M3 implementation and, as far as I can see, is an internal addition to its functionality, developed by the TL dev to give direct possibilities of using static colors for Day and Dark theme elements inside of the launcher.

I think that the problem of not displaying the currently chosen colors when opening the custom colors dialog is either a technical inability to read any dynamic colors from a single selected object (no matter automatic - primary, secondary... or Custom) or it's an option missed in coding the Dynamic Colors implementation.

... I am not sure if that's a bug or a technical limitation.
++++

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