Bug 1559174 - Make the multimessage view use a dark theme when 'prefers-color-scheme: dark' is set. r=aleca
authorRichard Marti <richard.marti@gmail.com>
Wed, 12 Jun 2019 17:01:31 +0200
changeset 35891 97ad6c0239473731c93b0b971dfaf03a46d834e1
parent 35890 ab5f92797df27cba2bfa0a6cfd0f7926346689f4
child 35892 4eac5c4c23a31f05af4f150d51a47e474cf99925
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersaleca
bugs1559174
Bug 1559174 - Make the multimessage view use a dark theme when 'prefers-color-scheme: dark' is set. r=aleca
mail/base/content/multimessageview.css
mail/base/content/sharedsummary.css
mail/themes/linux/mail/multimessageview.css
mail/themes/osx/mail/multimessageview.css
mail/themes/windows/mail/multimessageview.css
--- a/mail/base/content/multimessageview.css
+++ b/mail/base/content/multimessageview.css
@@ -90,17 +90,16 @@
 }
 
 .right {
   float: right;
 }
 
 .count {
   white-space: nowrap;
-  color: InactiveCaptionText;
   margin-inline-start: 1ch;
 }
 
 .tags {
   padding-top: 4px;
   margin-inline-start: 1ch;
 }
 
@@ -118,8 +117,14 @@
   color: #111;
 }
 
 .snippet {
   opacity: .65;
   padding-inline-end: 1.5em;
   padding-bottom: 1ex;
 }
+
+.count, .info, .date,
+.message > .header > .snippet,
+.message > .header > .senders {
+  color: var(--info-text-color);
+}
--- a/mail/base/content/sharedsummary.css
+++ b/mail/base/content/sharedsummary.css
@@ -1,29 +1,55 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Generic (cross-platform) multimessage view CSS.  Some bits will be overridden
   by theme specific files */
 
+:root {
+  --body-background-color: -moz-Field;
+  --body-text-color: -moz-FieldText;
+  --header-background-color: Highlight;
+  --head-text-color: HighlightText;
+  --info-text-color: GrayText;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-background-color: #2a2a2e;
+    --body-text-color: rgb(249, 249, 250);
+    --header-background-color: #002b57;
+    --head-text-color: var(--body-text-color);
+    --info-text-color: #b1b1b3;
+
+  --toolbarbutton-hover-background: rgba(255, 255, 255, .25);
+  --toolbarbutton-hover-bordercolor: rgba(255, 255, 255, .5);
+  --toolbarbutton-header-bordercolor: rgba(255, 255, 255, .25);
+
+  --toolbarbutton-active-background: rgba(255, 255, 255, .4);
+  --toolbarbutton-active-bordercolor: rgba(255, 255, 255, .7);
+  --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
+  }
+}
+
 body {
   font-family: sans-serif;
   margin: 0;
   padding: 0;
-  background-color: -moz-Field;
-  color: -moz-FieldText;
+  background-color: var(--body-background-color);
+  color: var(--body-text-color);
 }
 
 #heading_wrapper {
   position: fixed;
   top: 0;
   width: -moz-available;
-  color: HighlightText;
-  background-color: Highlight;
+  color: var(--head-text-color);
+  background-color: var(--header-background-color);
 }
 
 #heading {
   padding: 1ex 0 1ex 1ex;
   margin: 0;
   font-size: large;
   font-weight: normal;
   vertical-align: middle;
--- a/mail/themes/linux/mail/multimessageview.css
+++ b/mail/themes/linux/mail/multimessageview.css
@@ -1,50 +1,36 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://messenger/content/multimessageview.css");
 
 /* linux-specific overrides for multimessageview.css*/
 
-/* mostly it's about CSS colors not being reliable */
-
-.heading.info {
-  color: CaptionText;
-}
-
-.count, .date {
-  color: InactiveCaptionText;
-}
-
-.info,
-.message > .header > .snippet,
-.message > .header > .senders {
-  color: GrayText;
-}
-
 #header-view-toolbox {
   font: message-box;
 }
 
 .star {
   width: 12px;
   height: 12px;
   margin-right: 0.5em;
 }
 
 .starred .star {
   background-image: url("chrome://messenger/skin/icons/flag-col.png");
 }
 
-.toolbarbutton-1.msgHeaderView-button {
-  background: -moz-Dialog;
-  color: -moz-DialogText !important;
-}
+@media not all and (prefers-color-scheme: dark) {
+  .toolbarbutton-1.msgHeaderView-button {
+    background: -moz-Dialog;
+    color: -moz-DialogText !important;
+  }
 
-.toolbarbutton-1.msgHeaderView-button:not([disabled=true]):not([checked=true]):not([open]):not(:active):hover {
-  background: -moz-dialog linear-gradient(rgba(255, 255, 255, .5), transparent);
-}
+  .toolbarbutton-1.msgHeaderView-button:not([disabled=true]):not([checked=true]):not([open]):not(:active):hover {
+    background: -moz-dialog linear-gradient(rgba(255, 255, 255, .5), transparent);
+  }
 
-.toolbarbutton-1.msgHeaderView-button:not([disabled=true]):not([checked=true]):not([open]):not(:active):hover {
-  background: rgb(154, 154, 154) linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .4));
+  .toolbarbutton-1.msgHeaderView-button:not([disabled=true]):not([checked=true]):not([open]):not(:active):hover {
+    background: rgb(154, 154, 154) linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .4));
+  }
 }
--- a/mail/themes/osx/mail/multimessageview.css
+++ b/mail/themes/osx/mail/multimessageview.css
@@ -11,28 +11,22 @@
   margin-top: 3px;
   margin-bottom: 3px;
 }
 
 .starred .star {
   background-image: url("chrome://messenger/skin/icons/flaggedmail.png");
 }
 
-.info {
-  color: GrayText;
-}
-
-.heading.info {
-  color: GrayText;
-}
-
 #header-view-toolbox {
   font: message-box;
 }
 
-.toolbarbutton-1.msgHeaderView-button {
-  color: -moz-DialogText !important;
-  background-color: white;
+@media not all and (prefers-color-scheme: dark) {
+  .toolbarbutton-1.msgHeaderView-button {
+    color: -moz-DialogText !important;
+    background-color: white;
+  }
+
+  .toolbarbutton-1.msgHeaderView-button:hover {
+    background-color: rgb(230, 230, 230) !important;
+  }
 }
-
-.toolbarbutton-1.msgHeaderView-button:hover {
-  background-color: rgb(230, 230, 230) !important;
-}
--- a/mail/themes/windows/mail/multimessageview.css
+++ b/mail/themes/windows/mail/multimessageview.css
@@ -1,52 +1,41 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://messenger/content/multimessageview.css");
 
 /* windows-specific overrides for multimessageview.css*/
 
-/* mostly it's about CSS colors not being reliable */
-
-.heading.info {
-  color: ButtonText;
-}
-
-.info,
-.count, .date,
-.message > .header > .snippet,
-.message > .header > .senders {
-  color: GrayText;
-}
-
 #header-view-toolbox {
   font: message-box;
 }
 
 .star {
   width: 12px;
   height: 12px;
   margin-right: 0.5em;
 }
 
 .starred .star {
   background-image: url("chrome://messenger/skin/icons/flag-col.png");
 }
 
-.toolbarbutton-1.msgHeaderView-button {
-  color: -moz-DialogText !important;
-}
-
-@media (-moz-windows-default-theme) {
+@media not all and (prefers-color-scheme: dark) {
   .toolbarbutton-1.msgHeaderView-button {
-    background-image: linear-gradient(-moz-dialog, -moz-dialog);
+    color: -moz-DialogText !important;
   }
 
-  .toolbarbutton-1.msgHeaderView-button:not([disabled=true]):not([checked=true]):not([open]):not(:active):hover {
-    background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), linear-gradient(-moz-dialog, -moz-dialog);
-  }
+  @media (-moz-windows-default-theme) {
+    .toolbarbutton-1.msgHeaderView-button {
+      background-image: linear-gradient(-moz-dialog, -moz-dialog);
+    }
 
-  .toolbarbutton-1.msgHeaderView-button:not([type="menu-button"]):not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active) {
-    background-image: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)), linear-gradient(-moz-dialog, -moz-dialog);
+    .toolbarbutton-1.msgHeaderView-button:not([disabled=true]):not([checked=true]):not([open]):not(:active):hover {
+      background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), linear-gradient(-moz-dialog, -moz-dialog);
+    }
+
+    .toolbarbutton-1.msgHeaderView-button:not([type="menu-button"]):not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active) {
+      background-image: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)), linear-gradient(-moz-dialog, -moz-dialog);
+    }
   }
 }