---
title: Optimizing your widget for accented rendering mode and Liquid Glass
framework: widgetkit
role: article
role_heading: Article
path: widgetkit/optimizing-your-widget-for-accented-rendering-mode-and-liquid-glass
---

# Optimizing your widget for accented rendering mode and Liquid Glass

Make your widget feel at home on Apple platforms and Liquid Glass by using accented rendering mode.

## Overview

Overview iPhone, iPad, Mac, and Apple Watch use Liquid Glass, a dynamic, adaptive material that also applies to widgets. When a person chooses a tinted or clear appearance for their Home Screen, the system: Renders your widget in the accented rendering mode Tints primary and accented content white in iOS and macOS Tints primary content white and accented content in the color of the watch face in watchOS Tints opaque images with a single white color Maintains opacity for transparent content and gradients, and tints them white Removes the background and replaces it with a themed glass or tinted color effect By already supporting the accented rendering mode, some widgets don’t need any further adjustments. However, you might need to update your widget to keep its text readable and make it look at home with Liquid Glass; for example, if your widget includes images, gradients, or transparent content. Support Liquid Glass To update your widget to support Liquid Glass: Add the widgetRenderingMode environment variable and conditionally update your widget layout for each rendering mode as explained in the previous section. Display full-color images, page, or partially transparent content only for the fullColor rendering mode. Adjust your widget’s layout as needed for the accented rendering mode. Group your views into a primary and an accent group using the widgetAccentable(_:) view modifier. Views you don’t mark as accentable are part of the primary group. Configure the rendering of any image using the WidgetAccentedRenderingMode view modifier. Choose rendering modes for images and views Using the WidgetAccentedRenderingMode view modifier, conditionally render images and views as needed: tip: Using accented, desaturated, or accentedDesaturated rendering modes helps the widget fit the system’s cohesive look on the Home Screen. Reserve the fullColor rendering mode for images that represent media content, such as album artwork or a book cover. To learn more about Liquid Glass and how to design and develop interfaces that work well with the material, refer to Liquid Glass and Adopting Liquid Glass.

## See Also

### Layout and presentation

- [Supporting additional widget sizes](widgetkit/supporting-additional-widget-sizes.md)
- [Displaying the right widget background](widgetkit/displaying-the-right-widget-background.md)
- [Adding StandBy and CarPlay support to your widget](widgetkit/adding-standby-and-carplay-support-to-your-widget.md)
- [WidgetRenderingMode](widgetkit/widgetrenderingmode.md)
- [WidgetAccentedRenderingMode](widgetkit/widgetaccentedrenderingmode.md)
- [AccessoryWidgetBackground](widgetkit/accessorywidgetbackground.md)
- [WidgetLocation](widgetkit/widgetlocation.md)