Background Styles
The home screen background sits behind your greeting and cards, giving the widget visual depth and personality. You can choose from several decoration patterns, use a background image, or keep things minimal with a solid gradient.
Available Styles
Default
The default decoration combines geometric elements for a modern, tech-forward look:
- Two softly blurred color blobs (left and right)
- A grid of small bordered rectangles in the top-right area
- Four thin vertical accent lines at various positions
This is a balanced option that works well with most color schemes.
Blobs
A minimal version that uses only the two blurred color blobs — one on the left, one on the right. No lines or grid elements.
Spotlight
A dramatic top-down lighting effect created by two large, heavily blurred circles centered at the top of the widget. It creates the impression of a soft spotlight shining down onto your content.
Gradient
Three large blurred circles positioned at the top-left, middle-right, and bottom-center create a smooth, mesh-like gradient across three points. This gives the background a fluid, organic feel.
Ripple
Concentric circles radiate from two corners — four rings from the top-right and two from the bottom-left. Each ring increases in opacity from outside to inside, creating a subtle ripple-in-water effect.
Grid
A clean 40px grid pattern drawn across the background, fading out toward the bottom. Two color blobs add warmth underneath the grid lines.
Full Image
An image that covers the entire home screen background at 20% opacity. The image scales to fill the full height of the widget.
Small Image
Similar to Full Image, but the image only covers the top 300px of the home screen and fades out with a smooth gradient mask. Good for hero-style imagery that doesn't overwhelm the cards below.
None
No decoration at all. The background shows only the solid color gradient from your top color to your background color.
Style Comparison
| Style | Visual Elements | Best For |
|---|---|---|
| Default | Blobs + grid + lines | General use, modern look |
| Blobs | Two soft color blobs | Minimal, colorful accents |
| Spotlight | Centered top glow | Bold, dramatic feel |
| Gradient | Three-point gradient | Organic, fluid aesthetic |
| Ripple | Concentric circles | Geometric, elegant |
| Grid | Repeating line grid | Technical, structured look |
| Full Image | Custom image (full) | Brand imagery |
| Small Image | Custom image (top) | Hero-style header |
| None | Solid gradient only | Clean, minimal |
Background Colors
The home screen's colors live in the Home Screen section of the Appearance tab — but they are not all on screen at the same time:
Sub Colors is collapsed by default, with the note "Advanced home colors are auto-generated" — press Expand to open it. Alongside Decorations it holds the home screen's text and surface shades: Header Text, Body Text, Muted Text, Dimmed Text, Highlight Text, Muted Bg and Dimmed Bg. Yaplet derives them from your two main colors, so you only need the panel when you want to override one by hand.
The background uses a vertical gradient that transitions from Top Header (at the top) to Main Body (at around 300px down). This gradient is always present regardless of which decoration style you choose.