With the release of iOS 18, Apple introduced some of the most significant design updates to the iPhone Home Screen in years. Alongside placing apps anywhere on the grid, users can now apply a custom color tint across all app icons and widgets.
This "Tinted" mode makes it easy to design a unified, monochromatic, and deeply aesthetic Home Screen.
However, fitness and health trackers are notorious for clashing with custom themes. Their bright red, orange, and neon green rings often stand out in a bad way. Here is how you can use iOS 18's tinted widgets feature to color-match your step counter and build a gorgeous, distraction-free layout.
What is iOS 18 Tinted Mode?
In iOS 18, when you customize your Home Screen, you can choose from four icon modes: Light, Dark, Automatic, and Tinted.
Selecting Tinted converts all your app icons and widgets into monochromatic variations, overlaying them with a single color of your choice. You can slide the color picker to select any hue or use the eyedropper tool to select a color directly from your wallpaper.
For widgets to look good in Tinted mode, developers must design them with the proper Swift APIs. If an app doesn't support the tinted API, iOS will try to force a tint on it, which often results in a blurry, unreadable, or washed-out mess.
How to Set Up Tinted Widgets on iPhone
Setting up tinted widgets on iOS 18 takes only a few taps:
- 1. Jiggle Mode: Long-press on an empty area of your Home Screen until your apps and widgets begin to shake.
- 2. Open Customizer: Tap the Edit button in the top-left corner of the screen and select Customize.
- 3. Select Tinted: Tap Tinted from the customization sheet that appears at the bottom of the screen.
- 4. Choose Your Color: Adjust the hue and brightness sliders to select your accent color, or tap the eyedropper icon in the top-right corner of the sheet and drag the loupe over your wallpaper to pick an accent color that coordinates perfectly.
Designing a Tinted Steps Widget with Steps Widget
Because Steps Widget is built natively for iOS 18, its widgets fully support Tinted mode rendering.
Instead of showing a standard gradient ring that clashes with your setup, Steps Widget translates its visual elements into a clean, high-contrast monochrome version when Tinted mode is activated.
Here are a few popular ways to style your tinted steps tracker:
- The Monochromatic Ring: A simple, circular progress ring that fills up as you walk. In Tinted mode, the track of the ring is rendered in a soft, low-opacity tint, while your active progress and step number glow in the solid accent color.
- The Minimal Numeric glance: A tiny, space-efficient widget showing only your step count and icon. This looks like a native system setting and blends perfectly into a single-color app grid.
- The Dark Accent: Set your tint brightness slider to dark. This gives your widgets a sleek, matte black background with thin, glowing colored lines, perfect for neon-on-black setups.
Tips for a Cohesive Health Layout
To get the most out of your customized Home Screen, combine your tinted steps widget with these layout strategies:
- Wallpaper First: Select a minimal, high-quality wallpaper. Abstract gradients, dark textures, and simple nature scenes work best for tinted icon layouts.
- Use Widget Stacks: Stack your tinted steps widget with other utility widgets (like calendar or battery). You can swipe through them when needed, keeping your screen clutter-free.
- Hide App Labels: In the iOS 18 customization sheet, select Large icons. This hides app titles below your icons and widgets, creating a cleaner, more fluid visual grid.
Try Steps Widget
Keep your daily steps visible on iPhone, Lock Screen, Home Screen, and Apple Watch with a private Apple Health step counter widget.
Back to home