Add Dark Mode and Theme Toggle Support to Trac - #309
Conversation
- Improve contrast for query count (.numrows) and inline filter buttons - Fix text and link contrast for breadcrumbs (#pagepath) and search buttons - Enhance admin sidebar navigation (#tabs) active states and subheadings - Correct contrast for missing/forbidden indicators in table rows
sabderemane
left a comment
sabderemane
left a comment
There was a problem hiding this comment.
Hey @kehach07 ! This is close! It's missing the last changes and we are good to go ⭐
If there are anything else after that, I think it could be fixed in another PR while this one is merged.
There was a problem hiding this comment.
Hey Keha , there are still some light grey which could worth improvement in term of contrast, but most importantly the elements with the class foldable like filters and columns are barely readable since they include a link inside, see below:
The greyish color could be #9f9d9d for all those elements, this way you could have the same variable color and one color for all of them (they are not all the same grey).
The foldable elements with a link inside could be same as the nav bar colors (#0C3C26 on #C9F0DD).
After that, that would be perfect! ⭐
| #top p.meta, | ||
| #top .meta, | ||
| p.meta { | ||
| color: #c5e4d6; /* High contrast light green/mint */ |
There was a problem hiding this comment.
this color seems to be used many times, worth to have a variable with the color name to use it everywhere
| span.hint, | ||
| form.addnew p.hint, | ||
| form.addnew span.hint { | ||
| color: #c1cad2; |
There was a problem hiding this comment.
this color seems to be used many times, worth to have a variable with the color name to use it everywhere
There was a problem hiding this comment.
In a detail of a ticket they are still things which are hardly visible as I have previously mentioned like the code (class code):
or foldable elements here and cnum and timeline classes which correspond to the number of comment and the timeline
Note that if you hover on a foldable element with a link, it's impossible to read (this is on the screenshot with "Change history" below "Attachements") .
2 participants
Summary
This draft PR introduces dark mode support and theme toggle functionality to Django's Trac instance (
code.djangoproject.com), aligning its design, color tokens, and toggle behavior with the maindjangoproject.comwebsite.Work done under Google Summer of Code (GSoC) 2026 with the Django Software Foundation.
Key Changes
AutoLightDark) matching the upstream toggle behavior on the main Django website.trac-env/templates/site_header.htmlandsite_head.htmlto inject theme markup, include accessibility hooks, and load dark mode scripts.scss/trachacks.scssanddarkmode.csswith clean CSS custom properties for surfaces, borders, ticket tables, query builders, and admin views.aria-label, visible focus outlines, and compliant.visually-hiddenstyling) and fixed contrast ratios across key pages.README.rstanddocker-entrypoint.shfor smoother static asset builds and local plugin registration checks.Testing & Verification
prefers-color-scheme)./query,/ticket, and/admin.Related Links & References