[WIP] Add dark mode support for EASE error page

pipboy96 · pipboy96 · commit 1d0fed83f438 · 2020-03-01T11:48:48.000+03:00
diff --git a/chromium/images/banner-red-dark.png b/chromium/images/banner-red-dark.png
diff --git a/chromium/pages/cancel/index.html b/chromium/pages/cancel/index.html
@@ -10,7 +10,8 @@
   <body>
     <div class="content">
       <h1 id="https-everywhere">
-        <img src="/images/banner-red.png" alt="HTTPS Everywhere">
+        <img src="/images/banner-red.png" alt="HTTPS Everywhere" class="light-only">
+        <img src="/images/banner-red-dark.png" alt="HTTPS Everywhere" class="dark-only">
       </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,33 @@ 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;
+  }
+
+  .light-only {
+    display: none;
+  }
+}
+
+@media not (prefers-color-scheme: dark) {
+  .dark-only {
+    display: none;
+  }
+}
