1 files changed, 71 insertions, 4 deletions
diff --git a/actionpack/lib/action_dispatch/middleware/templates/rescues/layout.erb b/actionpack/lib/action_dispatch/middleware/templates/rescues/layout.erb
index 39ea25bdfc..f535822ccf 100644
--- a/actionpack/lib/action_dispatch/middleware/templates/rescues/layout.erb
+++ b/actionpack/lib/action_dispatch/middleware/templates/rescues/layout.erb
@@ -2,11 +2,14 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Action Controller: Exception caught</title>
   <style>
     body {
       background-color: #FAFAFA;
       color: #333;
+      color-scheme: light dark;
+      supported-color-schemes: light dark;
       margin: 0px;
     }
 
@@ -35,6 +38,7 @@
     }
 
     h1 {
+      overflow-wrap: break-word;
       margin: 0.2em 0;
       line-height: 1.1em;
       font-size: 2em;
@@ -50,7 +54,7 @@
       border-radius: 4px;
       margin: 1em 0px;
       display: block;
-      width: 978px;
+      max-width: 978px;
     }
 
     .summary {
@@ -78,7 +82,7 @@
     .source {
       border: 1px solid #D9D9D9;
       background: #ECECEC;
-      width: 978px;
+      max-width: 978px;
     }
 
     .source pre {
@@ -114,7 +118,13 @@
     }
 
     .line.active {
-      background-color: #FFCCCC;
+      background-color: #FCC;
+    }
+
+    .button_to {
+      display: inline-block;
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
     }
 
     .hidden {
@@ -123,10 +133,67 @@
 
     a { color: #980905; }
     a:visited { color: #666; }
-    a.trace-frames { color: #666; }
+    a.trace-frames {
+      color: #666;
+      overflow-wrap: break-word;
+    }
     a:hover { color: #C52F24; }
     a.trace-frames.selected { color: #C52F24 }
 
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #222;
+        color: #ECECEC;
+      }
+
+      .details {
+        border-color: #666;
+      }
+
+      .summary {
+        border-color: #666;
+      }
+
+      .source {
+        border-color: #555;
+        background-color: #333;
+      }
+
+      .source .data {
+        background: #444;
+      }
+
+      .source .data .line_numbers {
+        background: #333;
+        border-color: #222;
+      }
+
+      .line:hover {
+        background: #666;
+      }
+
+      .line.active {
+        background-color: #977;
+      }
+
+      input[type="submit"] {
+        color: #EEE;
+        background-color: #535353;
+        border: none;
+        border-radius: 3px;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.15);
+        padding: 2px 7px;
+      }
+      input[type="submit"]:active {
+        background-color: #777;
+      }
+
+      a { color: #C52F24; }
+      a.trace-frames { color: #999; }
+      a:hover { color: #E9382B; }
+      a.trace-frames.selected { color: #E9382B; }
+    }
+
     <%= yield :style %>
   </style>