Better dark mode Feodor2#399

Eclipse-Community · May 4, 2024 · 7b55cda · 7b55cda
1 parent c36eb2f
commit 7b55cda
Show file tree

Hide file tree

Showing 12 changed files with 194 additions and 54 deletions.
diff --git a/browser/app/profile/mypal.js b/browser/app/profile/mypal.js
@@ -955,13 +955,6 @@ pref("browser.flash-protected-mode-flip.enable", false);
 // Whether we've already flipped protected mode automatically
 pref("browser.flash-protected-mode-flip.done", false);
 
-// Dark in-content pages
-#ifdef NIGHTLY_BUILD
-  pref("browser.in-content.dark-mode", true);
-#else
-  pref("browser.in-content.dark-mode", false);
-#endif
-
 pref("dom.ipc.shims.enabledWarnings", false);
 
 #if defined(XP_WIN) && defined(MOZ_SANDBOX)

diff --git a/browser/components/aboutlogins/content/components/confirm-delete-dialog.css b/browser/components/aboutlogins/content/components/confirm-delete-dialog.css
@@ -1,9 +1,3 @@
-:host {
-  /* these variable values come from about:preferences */
-  --in-content-dialogtitle-background: #f1f1f1;
-  --in-content-dialogtitle-border: #c1c1c1;
-}
-
 .overlay {
   position: fixed;
   z-index: 1;
@@ -39,9 +33,9 @@
   position: relative;
   flex: 0 1 auto;
   text-align: center;
-  background-color: var(--in-content-dialogtitle-background);
+  background-color: var(--in-content-dialog-header-background);
   padding: 5px;
-  border-bottom: 1px solid var(--in-content-dialogtitle-border);
+  border-bottom: 1px solid var(--in-content-border-color);
 }
 
 .title {

diff --git a/browser/components/aboutlogins/content/components/login-item.css b/browser/components/aboutlogins/content/components/login-item.css
@@ -11,13 +11,11 @@
   --success-color: #00c100;
 }
 
-@supports -moz-bool-pref("browser.in-content.dark-mode") {
 @media (prefers-color-scheme: dark) {
   :host {
     --success-color: #86DE74;
   }
 }
-}
 
 :host([data-editing]) .edit-button,
 :host([data-is-new-login]) .delete-button,
@@ -181,12 +179,10 @@
   box-shadow: 0 0 0 4px var(--in-content-border-active-shadow);
 }
 
-@supports -moz-bool-pref("browser.in-content.dark-mode") {
 @media (prefers-color-scheme: dark) {
   :host {
     --reveal-checkbox-opacity: .8;
     --reveal-checkbox-opacity-hover: 1;
     --reveal-checkbox-opacity-active: .6;
   }
 }
-}
diff --git a/browser/themes/shared/incontentprefs/preferences.inc.css b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -6,20 +6,14 @@
 @namespace html "http://www.w3.org/1999/xhtml";
 
 :root {
-  --in-content-dialogtitle-background: #f1f1f1;
-  --in-content-dialogtitle-border: #c1c1c1;
   --in-content-warning-container: var(--grey-20);
 }
 
-@supports -moz-bool-pref("browser.in-content.dark-mode") {
 @media (prefers-color-scheme: dark) {
   :root {
-    --in-content-dialogtitle-background: rgba(249,249,250,0.05);
-    --in-content-dialogtitle-border: rgba(0,0,0,0.5);
     --in-content-warning-container: var(--grey-90-a30);
   }
 }
-}
 
 * {
   -moz-user-select: text;
@@ -524,8 +518,8 @@ button > hbox > label {
 .dialogTitleBar {
   margin-top: 0;
   padding: 3.5px 0;
-  background-color: var(--in-content-dialogtitle-background);
-  border-bottom: 1px solid var(--in-content-dialogtitle-border);
+  background-color: var(--in-content-dialog-header-background);
+  border-bottom: 1px solid var(--in-content-border-color);
 }
 
 .dialogTitle {

diff --git a/browser/themes/shared/newInstallPage.css b/browser/themes/shared/newInstallPage.css
@@ -29,6 +29,13 @@ p {
   height: 52px;
 }
 
+@media (prefers-color-scheme: dark) {
+  #header > img {
+    -moz-context-properties: fill;
+    fill: currentColor;
+  }
+}
+
 #content {
   display: flex;
   flex-direction: row;
@@ -69,7 +76,7 @@ p {
 #sync-terms {
   font-size: 87%;
   margin-bottom: 20px;
-  color: var(--grey-50);
+  color: var(--in-content-deemphasized-text);
 }
 
 #sync-terms a,
@@ -87,16 +94,12 @@ p {
   width: 100%;
   height: 42px;
   cursor: pointer;
-  padding: 8px 0;
-  margin: 0;
-  color: #FFF !important;
-  background-color: var(--blue-50);
-  border-radius: 4px;
 }
 
 #sync-first, #sync-learn {
   font-size: 87%;
-  color: var(--grey-50);
+  color: var(--in-content-deemphasized-text);
   margin-bottom: 0;
   text-align: start;
+  margin-inline: 4px; /* Align with input and button */
 }
diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css
@@ -38,14 +38,12 @@
   background-color: #25003e;
 }
 
-@supports -moz-bool-pref("browser.in-content.dark-mode") {
 @media (prefers-color-scheme: dark) {
   #tabbrowser-tabpanels {
     /* Value for --in-content-page-background for dark mode in in-content/common.inc.css */
     background-color: #2A2A2E;
   }
 }
-}
 
 #tabbrowser-tabs,
 #tabbrowser-tabs > .tabbrowser-arrowscrollbox,

diff --git a/toolkit/components/aboutperformance/content/aboutPerformance.css b/toolkit/components/aboutperformance/content/aboutPerformance.css
@@ -123,12 +123,12 @@ tr:-moz-any([selected], :hover) > td > .action-icon {
 
 #dispatch-thead > tr > td {
   border: none;
-  background-color: var(--in-content-box-background-hover);
+  background-color: var(--in-content-button-background);
 }
 #dispatch-thead > tr > td:not(:first-child) {
   border-inline-start-width: 1px;
   border-inline-start-style: solid;
-  border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
+  border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-box-border-color) 20%, var(--in-content-box-border-color) 80%, transparent 80%, transparent 100%) 1 1;
   border-bottom: 1px solid var(--in-content-border-color);
 }
 td {
@@ -207,3 +207,35 @@ td {
 #dispatch-tbody > tr:hover {
   background-color: var(--in-content-item-hover);
 }
+
+.clickable {
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+}
+.clickable:dir(rtl) {
+  background-position: left 4px center;
+}
+.asc {
+  background-image: url(chrome://global/skin/icons/arrow-up-12.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+.desc {
+  background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+#dispatch-thead > tr > td.clickable:hover {
+  background-color: var(--in-content-button-background-hover);
+}
+#dispatch-thead > tr > td.clickable:active {
+  background-color: var(--in-content-button-background-active);
+}
+
+.energy-impact {
+  --bar-width: 0;
+  background: linear-gradient(to right, var(--blue-40) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%));
+}
+.energy-impact:dir(rtl) {
+  background: linear-gradient(to left, var(--blue-40) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%));
+}