Add dark mode support for EASE error page (#19000)

pipboy96 · web-flow · commit 07841651bbb5 · 2020-03-16T10:17:42.000-07:00
diff --git a/chromium/images/banner-red.png b/chromium/images/banner-red.png
diff --git a/chromium/images/banner-red.svg b/chromium/images/banner-red.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1244 263"><style>.a{fill:#020202}@media(prefers-color-scheme:dark){.a{fill:#fff}}</style><path class="a" d="M1243.4 8.5h-35.6l-53.1 146.7h35.6zm-59.2 0h-35.6l-53.1 146.7h35.7zm-108.6 91.10001c-5.6 0-10.1 1.8-13.6 5.3s-5.3 8.1-5.3 13.6c0 5.7 1.8 10.3 5.3 13.8s8.1 5.3 13.6 5.3c5.7 0 10.3-1.8 13.8-5.3s5.3-8.1 5.3-13.8c0-5.6-1.8-10.1-5.3-13.6-3.5-3.6-8.1-5.3-13.8-5.3zm0-55.1c-5.6 0-10.1 1.8-13.6 5.3s-5.3 8.1-5.3 13.6c0 5.7 1.8 10.3 5.3 13.8s8.1 5.3 13.6 5.3c5.7 0 10.3-1.8 13.8-5.3s5.3-8.1 5.3-13.8c0-5.6-1.8-10.1-5.3-13.6s-8.1-5.3-13.8-5.3zm-104.9-43.6c11.7 0 23.3 1.6 34.9 4.8 11.6 3.2 21.7 7.5 30.2 12.9l-17.9 37.6c-8.4-4.6-17.5-8.6-27.4-12.2-9.9-3.6-17.9-5.3-24-5.3-6.1 0-9.2 2.1-9.2 6.2 0 2.8 1.9 5.3 5.8 7.4 3.8 2.1 8.6 3.7 14.3 4.8 5.7 1.1 11.9 2.9 18.7 5.2 6.8 2.3 13 5 18.7 8 5.7 3 10.5 7.6 14.3 13.8 3.8 6.2 5.8 13.6 5.8 22.1 0 15.8-6 27.8-17.9 35.9-12 8.1-27 12.2-45 12.2-13.2 0-26.6-2.1-40-6.3-13.4-4.2-25.1-10.1-34.9-17.6l18.4-37.1c7.5 6.3 17 11.7 28.4 16.3 11.4 4.6 20.9 6.9 28.6 6.9 8 0 12-2.6 12-7.7 0-3-1.9-5.5-5.8-7.6-3.8-2.1-8.6-3.6-14.3-4.7-5.7-1.1-11.9-2.7-18.7-4.9-6.8-2.2-13-4.7-18.7-7.6-5.7-2.8-10.5-7.2-14.3-13.1-3.8-5.9-5.8-13-5.8-21.2 0-14.9 5.8-26.8 17.4-35.5 11.4-8.9 26.9-13.3 46.4-13.3zm-211.3 2.1h70.2c19.5 0 34.6 4.7 45.3 14 10.7 9.3 16 22.5 16 39.6 0 18.1-5.3 32.1-16 42.2-10.7 10-25.8 15.1-45.3 15.1h-20.7v38.9h-49.5zm49.5 37.6v35.6H827c5.4 0 9.6-1.6 12.5-4.8 2.9-3.2 4.4-7.6 4.4-13.3 0-5.5-1.5-9.9-4.4-12.9-2.9-3.1-7.1-4.6-12.5-4.6zm-61.3 1.5h-42.7v110.6h-49.5v-110.6h-42.5v-39.1h134.7zm-145.8 0h-42.7v110.6h-49.5v-110.6h-42.5v-39.1h134.7zm-146.4 110.6h-49.5v-54h-46.3v54H310v-149.7h49.5v58.1h46.3v-58.1h49.5v149.7z"/><path fill="#630000" d="M0 218V3h215l45 45v215H45z"/><path fill="#931111" d="M215 3l45 45v215L0 3z"/><path fill="#ec1e1e" d="M0 3h215v215H0zm1229.9 196.5h-43.7v10.4h39.7v21.3h-39.7v10.5h44.8V263h-73v-84.9h71.9zm-112.2 63.6l-10.2-22.1H1097v22.1h-28.1v-84.9h41.1c11.6 0 20.5 2.6 26.8 7.9 6.3 5.3 9.5 12.8 9.5 22.5 0 12.4-4.5 21.4-13.5 26.9l16.7 27.6zm-20.7-43.4h13c3.1 0 5.4-.9 7.1-2.7 1.7-1.8 2.5-4.3 2.5-7.6 0-3.2-.8-5.6-2.5-7.3-1.7-1.7-4-2.6-7.1-2.6h-13zm-41.2-20.2H1012v10.4h39.7v21.3H1012v10.5h44.8V263h-72.9v-84.9h71.9zm-85.3 63.6h-28.1v-30.7h-26.3v30.7H888v-84.9h28.1v33h26.3v-33h28.1zm-117.1 0h-29l-11.8-50.8-12.1 50.8h-29L744 178.2h30.1l12.8 55.7 12.6-55.6 27.4-.1 12.8 55.7 12.6-55.7H881zm-139.2-26.4v26.4h-28.1v-25.8l-31-59.1h28l17.1 32.7 16.5-32.7h28zm-91.6 26.4L612.4 241h-10.5v22.1h-28.1v-84.9h41.1c11.6 0 20.5 2.6 26.8 7.9 6.3 5.3 9.5 12.8 9.5 22.5 0 12.4-4.5 21.4-13.5 26.9l16.7 27.6zm-20.7-43.4h13c3.1 0 5.4-.9 7.1-2.7 1.7-1.8 2.5-4.3 2.5-7.6 0-3.2-.8-5.6-2.5-7.3-1.7-1.7-4-2.6-7.1-2.6h-13zm-41.2-20.2H517v10.4h39.7v21.3H517v10.5h44.8V263h-72.9v-84.9h71.9v21.4zm-111.1 63.6h-29.1l-32.2-84.9h30.1l17.6 55.7 17.4-55.7H482zm-67.8-63.6h-43.7v10.4h39.7v21.3h-39.7v10.5h44.8V263H310v-84.9h71.9v21.4z"/><path fill="#fff" d="M111.35 41.4c10.5 0 21 1.4 31.5 4.3s19.5 6.8 27.3 11.7l-16.2 33.9c-7.6-4.1-15.8-7.8-24.7-11-8.9-3.2-16.1-4.8-21.7-4.8-5.5 0-8.3 1.9-8.3 5.6 0 2.6 1.7 4.8 5.2 6.6 3.5 1.9 7.8 3.3 12.9 4.3 5.1 1 10.8 2.6 16.9 4.7 6.1 2.1 11.7 4.5 16.9 7.2 5.1 2.7 9.4 6.8 12.9 12.4 3.5 5.6 5.2 12.2 5.2 19.9 0 14.3-5.4 25-16.2 32.4-10.8 7.3-24.3 11-40.6 11-11.9 0-24-1.9-36.1-5.7-12.1-3.8-22.6-9.1-31.5-15.9l16.6-33.5c6.8 5.7 15.3 10.6 25.6 14.7 10.3 4.2 18.9 6.3 25.8 6.3 7.2 0 10.8-2.3 10.8-6.9 0-2.7-1.7-5-5.2-6.8-3.5-1.9-7.8-3.3-12.9-4.2-5.1-1-10.8-2.4-16.9-4.4-6.1-2-11.7-4.3-16.9-6.8-5.1-2.6-9.4-6.5-12.9-11.8-3.5-5.3-5.2-11.7-5.2-19.2 0-13.5 5.2-24.2 15.7-32.1 10.4-7.9 24.4-11.9 42-11.9z"/></svg>
diff --git a/chromium/pages/cancel/index.html b/chromium/pages/cancel/index.html
@@ -10,7 +10,7 @@
   <body>
     <div class="content">
       <h1 id="https-everywhere">
-        <img src="/images/banner-red.png" alt="HTTPS Everywhere">
+        <img src="/images/banner-red.svg" alt="HTTPS Everywhere">
       </h1>
 
       <p data-i18n="cancel_he_blocking_explainer"></p>
diff --git a/chromium/pages/cancel/style.css b/chromium/pages/cancel/style.css
@@ -55,3 +55,23 @@ button:last-child {
     margin: 8px 0;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #202023;
+    color: #f9f9fa;
+  }
+
+  a {
+    color: #45a1ff;
+  }
+
+  button {
+    color: #202023;
+  }
+
+  button:hover {
+    background-color: #202023;
+    border-color: #ec1e1e;
+  }
+}
