meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
ui:ui-resources-shape-selection-all-color-dynamic_color [2026/07/08 18:09] – ui: google index hiding v4 wrap dorepsui:ui-resources-shape-selection-all-color-dynamic_color [2026/07/28 16:18] (current) – doreps
Line 14: Line 14:
 ======  Dynamic Color Dialog  ====== ======  Dynamic Color Dialog  ======
  
-Dialog selections are discussed below the image. For navigation to an item make a selection in the Dynamic Color image.+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}} {{imapmarkers>:ui:ui-folder-options-icon-dynamic_color.webp?200|Color - Dynamic Color}}
Line 25: Line 25:
 <wrap hi>**Dynamic Color dialog. Make selection above.**</wrap> <wrap hi>**Dynamic Color dialog. Make selection above.**</wrap>
  
-Dynamic Color, based on Android's Material You design language, is a system that adapts the launcher’s color palette based on 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. +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: The options listed in the above **Color - Dynamic Color** image are further described below:
Line 38: Line 38:
   * **Tertiary** - Tertiary (a third) accent color. This is less common but useful for subtle details.   * **Tertiary** - Tertiary (a third) accent color. This is less common but useful for subtle details.
   * **On tertiary** - Text/icon on top of tertiary backgrounds.   * **On tertiary** - Text/icon on top of tertiary backgrounds.
-  * **Teritary container** - This is a lighter version of tertiary used for background of tertiary objects. +  * ** Tertiary container** - This is a lighter version of tertiary used for the background of tertiary objects. 
-  * **On teritary container** - Text/icons on top of the tertiary container.+  * **On tertiary container** - Text/icons on top of the tertiary container.
   * **Error** - Used for alerts/warning indicators (usually red).   * **Error** - Used for alerts/warning indicators (usually red).
   * **On error** - Text/icon color over error backgrounds   * **On error** - Text/icon color over error backgrounds
Line 48: Line 48:
  
 Keep these points in mind when using dynamic colors 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.+  * **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).   * **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.   * **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).   * **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%> <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 for grouping related elements like a calendar panel or app folder. Experiment and preview changes instantly and then tweak.+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> </WRAP>
  
Line 65: Line 65:
   ***What You Can Customize Independently**:   ***What You Can Customize Independently**:
           * The user can override any role manually if the wallpaper/theme supports it. For example:           * 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 it directly. +            * 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 improve visibility.+            * 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 noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>
Line 72: Line 72:
 <wrap hide> <wrap hide>
 ===== Hidden Index Anchors ===== ===== Hidden Index Anchors =====
-[[:ui:ui-resources-shape-selection-all-color-dynamic_color-custom|ID1|Primary@17,78,71,98]]+[[:ui:ui-resources-shape-selection-all-color-dynamic_color-custom]]
 </wrap> </wrap>