Skip to content

gh-137634: Modernizing calendar.HTMLCalendar for HTML Output #137635

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Wulian233
Copy link
Contributor

@Wulian233 Wulian233 commented Aug 11, 2025

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

edit: add image

 2025-08-11 141712

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

@serhiy-storchaka
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants