fixed show dark mode (#142)

Co-authored-by: Sergei Predvoditelev <[email protected]>

Author: pamparam83

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## 4.0.1 under development
 
-- no changes in this release.
+- Bug #142: Fix dark mode argument display issues (@pamparam83)
 
 ## 4.0.0 February 05, 2025
 

templates/development.css

@@ -875,10 +875,22 @@ main {
 
 @media (prefers-color-scheme: dark) {
     body:not(.light-theme) {
-        --page-bg-color: rgba(46,46,46, 0.9);
+        --page-bg-color: rgba(46, 46, 46, 0.9);
         --page-text-color: #fff;
+        --page-text-muted-color: #aaa;
         --icon-color: #989898;
         --icon-hover-color: #fff;
+
+        --table-line-even-bg: #555;
+        --table-line-even-color: #eee;
+        --table-line-odd-bg: #999;
+        --table-line-odd-color: #eee;
+        --table-line-hover: #141414;
+
+        --button-bg: #6c757d;
+        --button-color: #fff;
+        --button-bg-hover: #5c636a;
+        --button-color-hover: #fff;
     }
 
     body:not(.light-theme) header {
@@ -924,6 +936,10 @@ main {
         --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;
@@ -945,5 +961,4 @@ main {
     }
 }
 
-
 /* end dark-theme */

templates/development.php

@@ -1,13 +1,15 @@
 <?php
 
+use Psr\Http\Message\ServerRequestInterface;
 use Yiisoft\ErrorHandler\CompositeException;
 use Yiisoft\ErrorHandler\Exception\ErrorException;
+use Yiisoft\ErrorHandler\Renderer\HtmlRenderer;
 use Yiisoft\FriendlyException\FriendlyExceptionInterface;
 
 /**
- * @var $this \Yiisoft\ErrorHandler\Renderer\HtmlRenderer
- * @var $request \Psr\Http\Message\ServerRequestInterface|null
- * @var $throwable \Throwable
+ * @var $this HtmlRenderer
+ * @var $request ServerRequestInterface|null
+ * @var $throwable Throwable
  */
 
 $theme = $_COOKIE['yii-exception-theme'] ?? '';
@@ -35,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>
@@ -189,6 +201,9 @@ class="copy-clipboard"
     <?= file_get_contents(__DIR__ . '/highlight.min.js') ?>
 </script>
 <script>
+    const LIGHT_THEME = 'light-theme';
+    const DARK_THEME = 'dark-theme';
+
     window.onload = function() {
         const codeBlocks = document.querySelectorAll('.solution pre code,.codeBlock');
         const callStackItems = document.getElementsByClassName('call-stack-item');
@@ -346,15 +361,13 @@ class="copy-clipboard"
         }
 
         function enableDarkTheme() {
-            document.body.classList.remove('light-theme');
-            document.body.classList.add('dark-theme');
-            setCookie('yii-exception-theme', 'dark-theme');
+            applyTheme(DARK_THEME);
+            setCookie('yii-exception-theme', DARK_THEME);
         }
 
         function enableLightTheme() {
-            document.body.classList.remove('dark-theme');
-            document.body.classList.add('light-theme');
-            setCookie('yii-exception-theme', 'light-theme');
+            applyTheme(LIGHT_THEME);
+            setCookie('yii-exception-theme', LIGHT_THEME);
         }
     };
 
@@ -363,28 +376,32 @@ function enableLightTheme() {
     document.onmouseup = function() { document.getElementsByTagName('body')[0].classList.remove('mousedown'); }
 
     <?php if (empty($theme)): ?>
-    var theme = getCookie('yii-exception-theme');
-
+    const theme = getCookie('yii-exception-theme');
     if (theme) {
-        document.body.classList.add(theme);
+        applyTheme(theme);
     }
     <?php endif; ?>
 
+    function applyTheme(theme){
+        document.body.classList.remove(DARK_THEME, LIGHT_THEME);
+        document.body.classList.add(theme);
+    }
+
     function setCookie(name, value) {
-        var date = new Date(2100, 0, 1);
-        var expires = "; expires=" + date.toUTCString();
+        const date = new Date(2100, 0, 1);
+        const expires = "; expires=" + date.toUTCString();
 
         document.cookie = name + "=" + (value || "")  + expires + "; path=/";
     }
 
     function getCookie(name) {
-        var nameEQ = name + "=";
-        var ca = document.cookie.split(';');
+        const nameEQ = name + "=";
+        const ca = document.cookie.split(';');
 
-        for (var i=0; i < ca.length; i++) {
-            var c = ca[i];
-            while (c.charAt(0)==' ') c = c.substring(1,c.length);
-            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+        for (let i=0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) === ' ') c = c.substring(1,c.length);
+            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
         }
 
         return null;