Merge pull request #36122 from cseelus/respect-operating-system-color-scheme-for-errors

Regard operating system color scheme for rescues

actionpack/lib/action_dispatch/middleware/templates/rescues/layout.erb

@@ -7,6 +7,8 @@
     body {
       background-color: #FAFAFA;
       color: #333;
+      color-scheme: light dark;
+      supported-color-schemes: light dark;
       margin: 0px;
     }
 
@@ -119,6 +121,8 @@
 
     .button_to {
       display: inline-block;
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
     }
 
     .hidden {
@@ -131,6 +135,60 @@
     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>
 

actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb

@@ -49,6 +49,17 @@
     width: 80%;
     font-size: inherit;
   }
+
+  @media (prefers-color-scheme: dark) {
+    #route_table tbody tr:nth-child(odd) {
+      background: #333;
+    }
+
+    #route_table tbody.exact_matches,
+    #route_table tbody.fuzzy_matches {
+      color: #333;
+    }
+  }
 <% end %>
 
 <table id='route_table' class='route_table'>