gh-137634: Modernizing calendar.HTMLCalendar for HTML Output

[Wulian233]

We don't need to worry about css overwriting the user's css in dark mode, I moved the to the bottom of style, and users can override them according to css priority

Removed cellpadding="0" cellspacing="0" they are deprecated:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/cellPadding
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/cellSpacing

CC: @hugovk

• Issue: Modernizing calendar.HTMLCalendar for HTML Output #137634

---

📚 Documentation preview 📚: https://cpython-previews--137635.org.readthedocs.build/

[serhiy-storchaka]

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?

[Wulian233]

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); }
}

[serhiy-storchaka]

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.

[hugovk]

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;
}

[Wulian233]

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

[hugovk]

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

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