Bug 1622695 - Composer: when prefers-color-scheme: dark is set use appropriate colours. r=mkmelin BETA_BASE_20200406
authorRichard Marti <richard.marti@gmail.com>
Mon, 06 Apr 2020 16:38:17 +0300
changeset 37809 011b96fed1e5d9d0c5a4ba043f07ba979e1aadda
parent 37808 426213bc6cb981a05aef4281fe2f0cea555864c5
child 37810 49627fe4e28bb0917c1cee953d1093de58a334ae
push id2582
push userclokep@gmail.com
push dateMon, 06 Apr 2020 18:49:52 +0000
treeherdercomm-beta@294fedccf739 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmkmelin
bugs1622695
Bug 1622695 - Composer: when prefers-color-scheme: dark is set use appropriate colours. r=mkmelin
mail/base/content/composerOverlay.css
mail/themes/shared/mail/messengercompose.css
--- a/mail/base/content/composerOverlay.css
+++ b/mail/base/content/composerOverlay.css
@@ -19,8 +19,22 @@ table.moz-email-headers-table:hover,
 table.moz-email-headers-table:hover > tbody > tr > th,
 table.moz-email-headers-table:hover > tbody > tr > td,
 blockquote[type=cite] table:hover,
 blockquote[type=cite] table:hover > tbody > tr > th,
 blockquote[type=cite] table:hover > tbody > tr > td {
   border: 1px solid lightgrey !important;
 }
 
+/* Styles for the dark mode */
+@media (prefers-color-scheme: dark) {
+  html {
+    scrollbar-color: rgba(249, 249, 250, .4) rgba(20, 20, 25, .3);
+  }
+
+  body {
+    color: #f9f9fa;
+  }
+
+  span[_moz_quote="true"] {
+    color: #009fff;
+  }
+}
--- a/mail/themes/shared/mail/messengercompose.css
+++ b/mail/themes/shared/mail/messengercompose.css
@@ -245,26 +245,30 @@
 }
 
 #composeContentBox {
   /*
   * In order to remove the shadow border on left/right edges elegantly,
   * use left/right margins of -3px. We make up for this by adding 3px
   * of padding instead.
   */
-  margin-right: -3px;
-  margin-left: -3px;
-  padding-right: 3px;
-  padding-left: 3px;
+  margin-inline: -3px;
+  padding-inline: 3px;
 }
 
 #appcontent {
   border-top: 1px solid var(--splitter-color);
 }
 
+@media (prefers-color-scheme: dark) {
+  #appcontent {
+    background-color: #2a2a2e;
+  }
+}
+
 /* :::: primary toolbar buttons :::: */
 
 #button-send {
   list-style-image: url("chrome://messenger/skin/icons/send.svg");
 }
 
 #button-contacts {
   list-style-image: url("chrome://messenger/skin/icons/address.svg");