Dark mode support

[TheRealVizard]

Description

This PR aims to add native support for dark mode.
It adds a button to switch between themes.

Checklist:

• I have added the relevant tests for this change.
• I have added an item to the Pending section of docs/changes.rst.

[matthiask]

Thanks for your contribution!

I think I like it. I wasn't convinced it's worth it at first, but the diff looks really clean and the changes are well localized. Thanks.

[matthiask]

Thank you! One more thing. The Django admin panel only uses prefers-color-scheme in the JavaScript code to determine the initial value. This simplifies the CSS insofar as the variables for the dark mode do not have to be repeated. Do you think something like that would be a good idea here as well? See https://github.com/django/django/blob/a09082a9bec18f8e3ee8c10d473013ec67ffe93b/django/contrib/admin/static/admin/js/theme.js#L14

[matthiask]

This doesn't look as if it has been formatted by prettier v4 (using pre-commit)?

[TheRealVizard]

probably was my VS formatter, odd since it's set to use prettier (maybe was not using the same rules)

My last commit reverted that change

[TheRealVizard]

Thank you! One more thing. The Django admin panel only uses prefers-color-scheme in the JavaScript code to determine the initial value. This simplifies the CSS insofar as the variables for the dark mode do not have to be repeated. Do you think something like that would be a good idea here as well? See

Yes! This can be used to avoid duplication.

They still have it on their CSS, maybe in case JS is disabled by default...
https://github.com/django/django/blob/ceaf1e2848583ba832cc74715da38c802b6b0671/django/contrib/admin/static/admin/css/dark_mode.css#L1C1-L38C26

[matthiask]

Ah yes, you're right. Maybe the difference is that the Django admin mostly works without JS while the debug toolbar is unusable without JS. They cannot fully depend on JS.

I would prefer removing the duplication and depending on the presence of JS some more, but it's not a requirement to merging this, at least not in my view. For me it's good.

@tim-schilling Maybe you have a different opinion?

[TheRealVizard]

Thank you! One more thing. The Django admin panel only uses prefers-color-scheme in the JavaScript code to determine the initial value. This simplifies the CSS insofar as the variables for the dark mode do not have to be repeated. Do you think something like that would be a good idea here as well? See

Yes! This can be used to avoid duplication.

They still have it on their CSS, maybe in case JS is disabled by default... https://github.com/django/django/blob/ceaf1e2848583ba832cc74715da38c802b6b0671/django/contrib/admin/static/admin/css/dark_mode.css#L1C1-L38C26

Ill push a change to this once i get home if it's needed

[tim-schilling]

I would prefer removing the duplication and depending on the presence of JS some more, but it's not a requirement to merging this, at least not in my view. For me it's good.

@tim-schilling Maybe you have a different opinion?

Nope, I'm indifferent on that.

[tim-schilling]

This looks really nice! My only gripe is that we're taking up an entire row of the toolbar for the toggle button. I'm not sure there's a better option though. I'm bringing it up to see if anyone else has an opinion.

[matthiask]

For the record, I agree with this, but I think that this can be addressed later, in a different pull request. Thanks!