fix

Author: pamparam83

templates/development.css

@@ -27,7 +27,6 @@ body {
     color: var(--page-text-color);
     background: var(--page-bg-color);
     line-height: 1;
-    display: none;
 }
 
 ul {
@@ -37,9 +36,6 @@ ul {
 
 
 /* light theme */
-.light-theme {
-    display: block;
-}
 :root {
     --page-bg-color: #fff;
     --page-text-color: #505050;
@@ -813,8 +809,6 @@ main {
     --button-color: #fff;
     --button-bg-hover: #5c636a;
     --button-color-hover: #fff;
-
-    display: block;
 }
 
 .dark-theme header {
@@ -879,4 +873,80 @@ main {
     display: inline;
 }
 
+@media (prefers-color-scheme: dark) {
+    body:not(.light-theme) {
+        --page-bg-color: rgba(46,46,46, 0.9);
+        --page-text-color: #fff;
+        --icon-color: #989898;
+        --icon-hover-color: #fff;
+    }
+
+    body:not(.light-theme) header {
+        --header-bg-color: #2e2e2e;
+        --previous-text-color: rgba(255, 255, 255, 0.8);
+        --previous-arrow-color: #fff;
+    }
+
+    body:not(.light-theme) .exception-card {
+        --exception-card-bg-color: #222;
+        --exception-card-border-color: #591e15;
+        --exception-class-text-color: #fff;
+        --exception-class-friendly-text-color: rgba(255, 255, 255, 0.5);
+        --exception-class-friendly-link-color: #E57373;
+        --exception-message-text-color: rgba(255, 255, 255, 0.8);
+    }
+
+    body:not(.light-theme) header .solution {
+        --text-color: rgba(255, 255, 255, 0.8);
+        --link-color: #03a9f4;
+        --link-hover-color: #39b9f3;
+        --blockquote-text-color: #999;
+        --blockquote-border-color: #484c50;
+        --code-bg-color: #2d333b;
+        --pre-bg-color: #2d333b;
+        --table-border-color: #484c50;
+        --separator-color: #484c50;
+    }
+
+    body:not(.light-theme) .call-stack {
+        --bg-color: #1e1e1e;
+        --border-color: transparent;
+        --box-shadow: 0 13px 20px rgba(0, 0, 0, 0.25);
+        --link-color: rgba(255, 255, 255, 0.5);
+        --error-line-bg-color: #422c2c;
+        --hover-line-bg-color: #292929;
+        --element-wrap-border-color: #141414;
+        --element-wrap-text-color: #fff;
+        --element-wrap-hover-text-color: #9cdcfe;
+        --vendor-bg-color: rgba(46,46,46, 0.9);
+        --vendor-border-color: #666;
+        --vendor-state-bg-color: #666;
+        --vendor-content-bg-color: rgba(46,46,46, 0.9);
+    }
+
+    body:not(.light-theme) .functionArguments {
+        --function-arguments-bg: #303030;
+        --function-arguments-border-color: #272727;
+    }
+    body:not(.light-theme) .hljs {
+        --hljs-text-color: #fff;
+        --hljs-comment-text-color: #999;
+        --hljs-keyword-text-color: #88aece;
+        --hljs-attribute-text-color: #c59bc1;
+        --hljs-name-text-color: #f08d49;
+        --hljs-string-text-color: #b5bd68;
+        --hljs-code-text-color: #cccccc;
+        --hljs-delition-text-color: #de7176;
+        --hljs-addition-text-color: #76c490;
+    }
+
+    body:not(.light-theme) #dark-mode {
+        display: none;
+    }
+
+    body:not(.light-theme) #light-mode {
+        display: inline;
+    }
+}
+
 /* end dark-theme */

templates/development.php

@@ -37,6 +37,16 @@
         <?= file_get_contents(__DIR__ . '/development.css') ?>
     </style>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700">
+    <noscript>
+        <style>
+            .call-stack-vendor-items, .functionArguments {
+                display: block !important;
+            }
+            .call-stack-vendor-collapse .flex-1 {
+                display: none;
+            }
+        </style>
+    </noscript>
 </head>
 <body<?= !empty($theme) ? " class=\"{$this->htmlEncode($theme)}\"" : '' ?>>
 <header>
@@ -365,20 +375,12 @@ function enableLightTheme() {
     document.onmousedown = function() { document.getElementsByTagName('body')[0].classList.add('mousedown'); }
     document.onmouseup = function() { document.getElementsByTagName('body')[0].classList.remove('mousedown'); }
 
-    const themeMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    <?php if (empty($theme)): ?>
     const theme = getCookie('yii-exception-theme');
-
     if (theme) {
         applyTheme(theme);
-    } else {
-        applyTheme((themeMedia.matches ? DARK_THEME : LIGHT_THEME));
     }
-
-    themeMedia.addEventListener('change', event => {
-        if (!theme) {
-            applyTheme((event.matches ? DARK_THEME : LIGHT_THEME));
-        }
-    });
+    <?php endif; ?>
 
     function applyTheme(theme){
         document.body.classList.remove(DARK_THEME, LIGHT_THEME);