Day and Night Themes for Your Calendar Widget
Published · Updated · 6 min read
A calendar widget needs two looks if your phone switches between light and dark mode. A day theme and a night theme let the text stay readable in both. In Super Agenda, the two themes follow the system dark mode, so the widget changes when the phone changes.
This guide explains what to set in each theme and how to test it.
Why one look is not enough
Take a widget with dark gray text and no background. On a light wallpaper in the day, it reads well. When the phone moves to dark mode and the wallpaper turns dark, the same text almost disappears.
The reverse also fails. White text on a dark card looks right at night. In bright light it can feel heavy, and on a light wallpaper it can look out of place.
A pair of themes fixes this. One set of colors is for light mode and one is for dark mode. The widget picks the right set by itself.
What the system switch does
Android has a system setting for dark mode. Its name and its place in Settings differ by phone and Android version. Search for "dark" in Settings to find it. Many phones also let you switch it on a schedule.
The day and night themes follow that system setting. Change the system mode and the widget follows. The style options, including the day and night themes, need Super Agenda Pro, a one-time in-app purchase.
The four things to set in each theme
Each theme is a small set of choices. Treat day and night as two separate designs.
| Choice | Day theme | Night theme |
|---|---|---|
| Text color | Dark text | Light text |
| Background | Light tint or transparent | Dark tint or transparent |
| Transparency | A more solid card hides a busy wallpaper | A more solid card keeps text clear |
| Event color markers | Medium or deep colors | Brighter colors |
Event markers (bar, circle or small dot) need the most care. A deep blue marker is easy to see on a light card. On a dark card it can sink. Make it lighter in the night theme.
Your calendar, on your home screen. Super Agenda is a free, very customizable agenda widget for Android. No account, no ads.
Contrast: the one rule to follow
Contrast is the difference between text color and the color behind it. The W3C accessibility guidelines ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, in WCAG 2.1, success criterion 1.4.3. You do not need a tool to start. Squint at the widget. If you cannot read an event title in one second, raise the contrast.
A transparent widget sits on your wallpaper, so its contrast changes with the picture. Wallpapers with bright and dark areas are the hardest. See how to make a calendar widget transparent for more on this.
Three example pairs
| Pair | Day theme | Night theme |
|---|---|---|
| Clean card | White card, dark text, deep blue dot | Dark gray card, white text, light blue dot |
| Transparent | No background, black text | No background, white text |
| Soft tint | Pale yellow card, dark brown text | Dark brown card, cream text |
The clean card is the safest choice. It does not depend on the wallpaper. The transparent pair looks lighter, but you must pick a wallpaper that works in both modes. A calm, evenly lit wallpaper is best.
Keep the corner radius the same in both modes if you can. The widget then keeps the same outline day and night.
How to test both themes
- Add the widget and set the day theme first. Check the live preview in the app. It matches the widget on the home screen: same events, same size, same look.
- Switch the system to dark mode.
- Look at the widget on the home screen. Check event titles, day headers and the date.
- Check each day header and each event marker. Look for any marker that blends into the card.
- Switch back to light mode and look again.
- Repeat after you change the wallpaper. A new wallpaper can break a pair that worked before.
If one part looks wrong in only one mode, change that mode's setting and leave the other one alone.
Limits to know
- The themes use colors you choose. They do not take colors from your wallpaper. There is no wallpaper-based dynamic color (Material You color extraction). For widgets that aim for that look, see Material You-style calendar widgets.
- The night theme follows the system dark mode setting. If your phone stays in light mode, you will see only the day theme.
- You need Pro to use the themes. The time settings and the calendar choice stay free.
Your calendar, on your home screen. Super Agenda is a free, very customizable agenda widget for Android. No account, no ads.
What this means for you
Use this short checklist:
- [ ] Decide on one design for the day and one for the night.
- [ ] Use dark text on light backgrounds and light text on dark ones.
- [ ] Make event markers brighter in the night theme.
- [ ] Check readability in both modes on the home screen.
- [ ] Test again after a wallpaper change.
For more looks to try, read 10 calendar widget design ideas.