Time-Based Theme Switching

[SameerJS6]

Time-Based Theme Switching

Problem

Currently, MonkeyType only supports system-based theme switching, which changes the theme based on OS preferences. Users (including me) who want themes to switch automatically at specific times (e.g., dark mode from 8 PM to 6 AM) have no way to configure this feature.

Proposed Solution

I'm working on a time-based theme switching feature that includes:

• Three modes: Off, System (existing behavior), and Time-based
• Auto/Manual options:
  • Auto: Uses calculated sunrise/sunset times
  • Manual: Allows custom time configuration
• Realtime switching: Themes switch automatically at configured times without page reload
• Flexible configuration: Users set "dark mode starts at" and "dark mode ends at" times

I have a working prototype ready to demonstrate. (Preview attached below)

Questions

1. Should we replace the current autoSwitchTheme setting? The new implementation consolidates both system-based and time-based switching under a unified mode selector. This would technically be a breaking change, but we can handle migration by automatically converting existing values (false → "off", true → "system"). This way, existing user preferences are preserved seamlessly. Open to suggestions if there's a better approach!

2. Can we install a small JS package for sunrise/sunset calculations? Currently using a simplified astronomical calculation. A dedicated package (like suncalc ~2KB) would provide more accurate times based on the user's geolocation. Would this be acceptable for the project?

Looking forward to feedback!

Preview

Early Prototype of UI

Time-based switch in action

2025-10-24.17-00-07.2.mp4