Skip to content

Add Dark Mode and Theme Toggle Support to Trac - #309

Open
kehach07 wants to merge 5 commits into
django:mainfrom
kehach07:darkmode
Open

Add Dark Mode and Theme Toggle Support to Trac#309
kehach07 wants to merge 5 commits into
django:mainfrom
kehach07:darkmode

Conversation

@kehach07

Copy link
Copy Markdown
Contributor

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 main djangoproject.com website.

Work done under Google Summer of Code (GSoC) 2026 with the Django Software Foundation.


Key Changes

  • Theme Toggle Component: Implemented a 3-state switcher (Auto $\rightarrow$ Light $\rightarrow$ Dark) matching the upstream toggle behavior on the main Django website.
  • Template Updates: Updated trac-env/templates/site_header.html and site_head.html to inject theme markup, include accessibility hooks, and load dark mode scripts.
  • Stylesheets & Tokens: Created scss/trachacks.scss and darkmode.css with clean CSS custom properties for surfaces, borders, ticket tables, query builders, and admin views.
  • Accessibility Enhancements: Added accessible labels (aria-label, visible focus outlines, and compliant .visually-hidden styling) and fixed contrast ratios across key pages.
  • Dev Workflow & Docs: Updated README.rst and docker-entrypoint.sh for smoother static asset builds and local plugin registration checks.

Testing & Verification

  • Verified theme switching and state persistence across page refreshes.
  • Confirmed support for system preference detection (prefers-color-scheme).
  • Tested keyboard accessibility and screen-reader announcements using Accessibility Insights for Web.
  • Verified views locally across /query, /ticket, and /admin.

Related Links & References

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant