GeezerVison

What problem does this solve? This PR changes the default theme to dark and hardcodes some colors -- what is the reason? Could not you just use a custom stylesheet?

We provide basic dark mode support for the HTML generated by module. In 3.14 and 3.15 we've already added this feature for http.server and difflib

In this case, the loading order ensures that calendar.css takes precedence over the styles defined in the <style> , allowing users to override properties like background-color in their calendar.css.

Regarding @media (prefers-color-scheme: dark), this doesn't dark mode by default, the browser will automatically switch based on the system settings

The hardcoded colors could potentially be changed, but this would make the code longer

:root {
  --background-color-dark: #121212;
  --text-color-dark: #e0e0e0;
  --border-color-dark: #444;
}
@media (prefers-color-scheme: dark) {
  body { background-color: var(--background-color-dark); color: var(--text-color-dark); }
  table.year, table.month, td, th { border-color: var(--border-color-dark); }
}

I do not think we should hardcode any colors. This will simply lead to problems in the future when custom stylesheets becomes dependent on these values and they will be changed again.

This also makes the HTML code longer.

If you need calendar in dark mode, just create a custom stylesheet.

Thanks for the PR, it's looking better.

Before

Lighthouse:

PR

More ideas

• vertically align the months
• add borders

table.year {
  border: solid;
}
table.year > tbody > tr > td {
  border: solid;
  vertical-align: top;
}

Thank you for the suggestion. I will add them this weekend. Also, do you think it should support dark mode? 👀

I think dark mode would be useful, but can it be done without hardcoding colours?

Compare https://github.com/python/cpython/pull/123475/files

should light mode take precedent here?
I think most people would agree that a white flash is worse than a dark flash.

Would it be better to switch to { color-scheme: dark light; } instead of { color-scheme: light dark; }?

Searching GitHub:

• color-scheme: dark light - 6.1k files - https://github.com/search?q=%22color-scheme%3A+dark+light%22&ref=opensearch&type=code
• color-scheme: light dark - 241k files - https://github.com/search?q=%22color-scheme%3A+light+dark%22&ref=opensearch&type=code

I don't notice any flash, but it's with a local http.server.