[Django] #36851: Add dark mode support for Django debug error pages

[Django]

#36851: Add dark mode support for Django debug error pages
----------------------------+-------------------------------------------
Reporter: Ekin Ertaç | Type: New feature
Status: new | Component: Error reporting
Version: 6.0 | Severity: Normal
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
----------------------------+-------------------------------------------
== Problem

When working in dark mode environments, Django's debug error pages (500,
404, etc.) display with bright white backgrounds (`#fff` and `#eee`),
which causes significant eye strain and discomfort. This is a common issue
for developers who work in dark mode, as the sudden bright white page can
be jarring and painful to look at.

Django's admin interface and the main Django website already support dark
mode, but the error pages do not, creating an inconsistent experience.

== Proposed Solution

Add dark mode support to Django's debug error page templates using CSS
media queries (`@media (prefers-color-scheme: dark)`). This would
automatically detect the user's system preference and apply appropriate
dark theme colors.

The affected templates are:
* `django/views/templates/technical_500.html`
* `django/views/templates/technical_404.html`

This should follow the same pattern used in Django admin for consistency.

== Benefits

* Reduces eye strain for developers working in dark mode
* Creates consistency with Django admin and website dark mode support
* Respects user's system preferences automatically
* No breaking changes - light mode remains the default for systems without
dark mode preference
--
Ticket URL: <https://code.djangoproject.com/ticket/36851>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36851: Add dark mode support for Django debug error pages

---------------------------------+----------------------------------------
Reporter: Ekin Ertaç | Owner: Kundan Yadav
Type: New feature | Status: assigned

Component: Error reporting | Version: 6.0

Severity: Normal | Resolution:

Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1

---------------------------------+----------------------------------------
Changes (by Kundan Yadav):

* owner: (none) => Kundan Yadav
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36851#comment:1>

[Django]

#36851: Add dark mode support for Django debug error pages
---------------------------------+----------------------------------------
Reporter: Ekin Ertaç | Owner: Kundan Yadav
Type: New feature | Status: assigned
Component: Error reporting | Version: 6.0
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
---------------------------------+----------------------------------------

Comment (by Ekin Ertaç):

Hi @Kundan Yadav,

I've implemented dark mode support for Django's debug error pages as
described in this ticket. The implementation includes:

**Changes:**
- Added `@media (prefers-color-scheme: dark)` CSS to both
`technical_500.html` and `technical_404.html`
- Used a carefully chosen color palette for readability and consistency
- All existing light mode functionality is preserved
- Added comprehensive tests to verify dark mode CSS presence

**Testing:**
- All tests pass (including 2 new dark mode tests)
- Verified in both 500 and 404 error pages
- No breaking changes

**Pull Request:**
I've created a pull request at:
https://github.com/ekinertac/django/pull/new/ticket-36851-dark-mode-error-
pages

The branch is ready for review. Let me know if you need any adjustments!
--
Ticket URL: <https://code.djangoproject.com/ticket/36851#comment:2>

[Django]

#36851: Add dark mode support for Django debug error pages
---------------------------------+--------------------------------------

Reporter: Ekin Ertaç | Owner: (none)

Type: New feature | Status: new

Component: Error reporting | Version: 6.0
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
---------------------------------+--------------------------------------

Changes (by Kundan Yadav):

* owner: Kundan Yadav => (none)
* status: assigned => new

--
Ticket URL: <https://code.djangoproject.com/ticket/36851#comment:3>

[Django]

#36851: Add dark mode support for Django debug error pages
---------------------------------+--------------------------------------
Reporter: Ekin Ertaç | Owner: (none)
Type: New feature | Status: new
Component: Error reporting | Version: 6.0
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
---------------------------------+--------------------------------------

Comment (by Kundan Yadav):

i am sorry i have deassigned myself , i should have read the description
properly , i though the proposed solution was for someone else to
implemement , i am really sorry again
--
Ticket URL: <https://code.djangoproject.com/ticket/36851#comment:4>

[Django]

#36851: Add dark mode support for Django debug error pages
---------------------------------+--------------------------------------

Reporter: Ekin Ertaç | Owner: Ekin Ertaç

Type: New feature | Status: assigned

Component: Error reporting | Version: 6.0
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
---------------------------------+--------------------------------------

Changes (by Ekin Ertaç):

* owner: (none) => Ekin Ertaç

* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36851#comment:5>

[Django]

#36851: Add dark mode support for Django debug error pages
---------------------------------+--------------------------------------
Reporter: Ekin Ertaç | Owner: Ekin Ertaç
Type: New feature | Status: assigned
Component: Error reporting | Version: 6.0
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
---------------------------------+--------------------------------------

Comment (by Ekin Ertaç):

Hi @Kundan Yadav,

No worries at all. I understand the confusion. I've now claimed the ticket
and will continue working on it. The implementation is complete with
tests, and the PR is ready for review.

Thanks for your consideration, and I appreciate your message.
--
Ticket URL: <https://code.djangoproject.com/ticket/36851#comment:6>

[Django]

#36851: Add dark mode support for Django debug error pages
---------------------------------+--------------------------------------
Reporter: Ekin Ertaç | Owner: Ekin Ertaç
Type: New feature | Status: assigned
Component: Error reporting | Version: 6.0
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
---------------------------------+--------------------------------------

Changes (by Ekin Ertaç):

* has_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36851#comment:7>

[Django]

#36851: Add dark mode support for Django debug error pages
---------------------------------+--------------------------------------
Reporter: Ekin Ertaç | Owner: Ekin Ertaç

Type: New feature | Status: closed

Component: Error reporting | Version: 6.0

Severity: Normal | Resolution: duplicate

Keywords: | Triage Stage: Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
---------------------------------+--------------------------------------

Changes (by Jacob Walls):

* resolution: => duplicate
* status: assigned => closed

Comment:

Duplicate of #35875. Reviews are welcome of the linked patch there.
--
Ticket URL: <https://code.djangoproject.com/ticket/36851#comment:8>