Add system default to auto-detect if dark or light mode is set

[06b]

Add "system-default" theme which auto-detects if the a person has their system set to prefer dark or light mode and set the default theme to it.

Related to #69

[codecov]

Codecov Report

Merging #383 into main will decrease coverage by 2.82%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main     #383      +/-   ##
==========================================
- Coverage   57.86%   55.03%   -2.83%     
==========================================
  Files          23       23              
  Lines        2048     2055       +7     
  Branches      343      347       +4     
==========================================
- Hits         1185     1131      -54     
- Misses        764      818      +54     
- Partials       99      106       +7     

Impacted Files	Coverage Δ
js/user-preferences.js	92.59% <ø> (ø)
js/themes.js	100.00% <100.00%> (ø)
js/classes/FlexibleMonthCalendar.js	54.37% <0.00%> (-7.70%)	⬇️
js/classes/FixedDayCalendar.js	91.89% <0.00%> (-6.09%)	⬇️
js/classes/Calendar.js	68.57% <0.00%> (-5.17%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d719068...68a9488. Read the comment docs.

[araujoarthur0]

Thanks @06b! Why do you consider it experimental?
Also, could you please add a gif showing how this works based on your system's color? In which OS did you test it?

[araujoarthur0]

Please also add a commit adding this to the test at time-to-leave_tests__renderer_\themes.js :)

[06b]

Hi @araujoarthur0

I felt that it was experimental as I was only able to test it on Windows (Windows 10 Pro, Version 2004, OS build 19041.508) and since Time to Leave works on MacOS & Linux I thought that perhaps it should at least be tested on other operating systems before considering if it's okay not to consider it experimental.

I also wasn't sure if the theme name could be considered misleading, for example if someone used a high contrast theme would they expect that it should pickup the high contrast or if they picked a certain accent color on their computer, would they expect that Time to Leave would use that since the theme was "system-default"

So I figured if I included (experimental) - that hopefully users might be understanding that if they assumed something such as autodetecting high contrast mode / not using accent colors from their system and it didn't work... and maybe someone might think of a better name (but I could also be overthinking this, naming things is hard)

I will add a gif showing how it works shortly.

[06b]

Attached gif, starts with operating system default to dark mode, open up time to start and then it's on dark mode. Closed out of time to start, set operating system default to light mode, open up time to start and it's on light mode. Ends with keeping time to start open, and switching the operating system from light to dark mode, which in this case - I must go to view > reload.

While I don't think it would be common for a user to change the default app mode as shown in the gif often, it is possible that there might be operating systems or applications which would switch the mode depending on time of day, etc for example.

[thamara]

Wow! This looks really cool!
I have tested this in MacOS and it works as well!

But something I noticed is that the current width of the preferences window is not enough and the text becomes a bit clutter:

Can you please increase the initial size of the preferences window to better fit the content? For reference, on MacOS the minimal width should be 440px.

[araujoarthur0]

This is looking really neat! Gives off a very professional feeling hahaha

[thamara]

Really awesome work!

[thamara]

Congratulations on your first merged PR on TTL!

Here's to many more to come!