Repository: yiisoft/error-handler
Pull request #142: fixed show dark mode
Author: login: pamparam83
Created: 2025-03-16T15:33:58Z | Merged: 2025-03-27T19:17:52Z

| Q             | A
| ------------- | ---
| Is bugfix?    | ✔️
| New feature?  | ❌
| Breaks BC?    | ❌
| Fixed issues  | #141

Added a check for dark mode.
If the system’s theme cannot be detected, we default to the light theme.
Due to a known issue in Linux OS (see https://issues.chromium.org/issues/40642550),
Linux users will also get the light theme by default.




Diff:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88a75de..ba1bca8 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/templates/development.css b/templates/development.css
index a06d841..33b91e4 100644
--- a/templates/development.css
+++ b/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 */
diff --git a/templates/development.php b/templates/development.php
index 669dc1e..be386b3 100644
--- a/templates/development.php
+++ b/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;


Reviews:
user: login: vjik
body: It needs to remove section "@media (prefers-color-scheme: dark) { ..." from CSS
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-17T07:51:44Z
user: login: pamparam83
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T14:02:57Z
user: login: xepozz
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-18T09:26:24Z
user: login: samdark
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-25T20:12:50Z
user: login: vjik
body: Add line to changelog
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-26T12:17:51Z
user: login: samdark
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-26T15:20:59Z
user: login: vjik
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-27T18:44:15Z

Review comments:
diff_hunk: @@ -363,28 +365,42 @@ function enableLightTheme() {
     document.onmouseup = function() { document.getElementsByTagName('body')[0].classList.remove('mousedown'); }
 
     <?php if (empty($theme)): ?>
-    var theme = getCookie('yii-exception-theme');
+    const themeMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    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'));
+        }
+    });
+
+    function applyTheme(theme){
         document.body.classList.add(theme);
path: templates/development.php
user: login: vjik
body: Old theme classes should to remove here
created_at: 2025-03-17T07:51:15Z
author_association: MEMBER
diff_hunk: @@ -363,28 +365,42 @@ function enableLightTheme() {
     document.onmouseup = function() { document.getElementsByTagName('body')[0].classList.remove('mousedown'); }
 
     <?php if (empty($theme)): ?>
-    var theme = getCookie('yii-exception-theme');
+    const themeMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    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'));
+        }
+    });
+
+    function applyTheme(theme){
         document.body.classList.add(theme);
path: templates/development.php
user: login: pamparam83
body: ok
created_at: 2025-03-17T14:02:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -924,6 +924,10 @@ main {
         --vendor-content-bg-color: rgba(46,46,46, 0.9);
     }
 
+    body:not(.light-theme) .functionArguments {
path: templates/development.css
user: login: vjik
body: ![image](https://github.com/user-attachments/assets/d6b9566d-83e1-48d4-b850-ef0fc3edc153)

Button also required changes.
created_at: 2025-03-26T12:17:43Z
author_association: MEMBER
diff_hunk: @@ -2,7 +2,7 @@
 
 ## 4.0.1 under development
 
-- no changes in this release.
+- Bug #142: fixed show dark mode (@pamparam83)
path: CHANGELOG.md
user: login: samdark
body: ```suggestion
- Bug #142: Fix dark mode arument display issues (@pamparam83)
```
created_at: 2025-03-26T15:20:49Z
author_association: MEMBER
diff_hunk: @@ -2,7 +2,7 @@
 
 ## 4.0.1 under development
 
-- no changes in this release.
+- Bug #142: Fix dark mode arument display issues (@pamparam83)
path: CHANGELOG.md
user: login: vjik
body: ```suggestion
- Bug #142: Fix dark mode argument display issues (@pamparam83)
```
created_at: 2025-03-27T18:43:10Z
author_association: MEMBER

PR comments:
user: login: codecov[bot]
created_at: 2025-03-16T15:34:39Z
body: ## [Codecov](https://app.codecov.io/gh/yiisoft/error-handler/pull/142?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=yiisoft) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 77.47%. Comparing base [(`5eb18b6`)](https://app.codecov.io/gh/yiisoft/error-handler/commit/5eb18b60db554bbc1b19b29caeb12d93b6eada41?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=yiisoft) to head [(`6a23707`)](https://app.codecov.io/gh/yiisoft/error-handler/commit/6a237077f6e32e4f24f7e2fa4473e23d4da8bad8?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=yiisoft).
> Report is 2 commits behind head on master.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff            @@
##             master     #142   +/-   ##
=========================================
  Coverage     77.47%   77.47%           
  Complexity      184      184           
=========================================
  Files            14       14           
  Lines           586      586           
=========================================
  Hits            454      454           
  Misses          132      132           
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/yiisoft/error-handler/pull/142?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=yiisoft).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=yiisoft).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
</details>
author_association: NONE
user: login: pamparam83
created_at: 2025-03-17T14:19:46Z
body: > It needs to remove section "@media (prefers-color-scheme: dark) { ..." from CSS

this will cause flickering.
checked in Brave
author_association: CONTRIBUTOR
user: login: xepozz
created_at: 2025-03-18T09:31:41Z
body: > > It needs to remove section "@media (prefers-color-scheme: dark) { ..." from CSS
> 
> this will cause flickering. checked in Brave

Btw, you may access cookies in backend
author_association: MEMBER
user: login: pamparam83
created_at: 2025-03-18T11:57:19Z
body: > > > It needs to remove section "@media (prefers-color-scheme: dark) { ..." from CSS
> > 
> > 
> > this will cause flickering. checked in Brave
> 
> Btw, you may access cookies in backend

flickering occurs
1 no cookies
2 dark theme enabled

author_association: CONTRIBUTOR
user: login: xepozz
created_at: 2025-03-18T12:41:50Z
body: 1. it's ok
2. could be possible fixed by setting theme on the server

anyway, "flickering" occurs without your changes, isn't it?
author_association: MEMBER
user: login: pamparam83
created_at: 2025-03-23T17:03:39Z
body: @vjik
 I made some edits, please take a look
author_association: CONTRIBUTOR
user: login: vjik
created_at: 2025-03-27T19:18:17Z
body: Thank you @pamparam83 !
author_association: MEMBER