Dark mode conflicts with pygments

[jefftriplett]

While DDT served the right template and saved the day for me, Tim pointed out that dark mode conflicts with pygments and he asked me to open an issue. See the screenshot.

context: https://mastodon.social/@[email protected]/114105865490684530

[Off topic] It was also pointed out in that thread that there was a Dracula theme for pygments in case that's a useful data point.

https://draculatheme.com/pygments

[matthiask]

Thanks @andoriyaprashant

It seems that the issue hasn't been fixed; maybe you hadn't installed the pygments library and syntax highlighting wasn't active at all?

[matthiask]

I think you have to do something like the attached patch. Currently, the CSS has to be included twice -- once for the preference (media query) and once for the explicit switch, that would maybe be fixed also by only evaluating the media query in the JavaScript code*.

patch.txt

• To spell it out, something like:

diff --git i/debug_toolbar/static/debug_toolbar/js/toolbar.js w/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 077bc930..c0fa80fd 100644
--- i/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ w/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -216,6 +216,8 @@ const djdt = {
         const userTheme = localStorage.getItem("djdt.user-theme");
         if (userTheme !== null) {
             djDebug.setAttribute("data-theme", userTheme);
+        } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            djDebug.setAttribute("data-theme", "dark")
         }
         // Adds the listener to the Theme Toggle Button
         $$.on(djDebug, "click", "#djToggleThemeButton", () => {

But maybe slightly nicer. The Django admin has a nice cycling behavior: https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/theme.js

[matthiask]

Hey @andoriyaprashant

I want you to succeed, can I do anything to help? Maybe concentrate on what's in patch.txt first, the matchMedia stuff mentioned above can be cleaned up later.