Implement dark mode

locales/en-US/app.ftl

@@ -364,6 +364,8 @@ Home--additional-content-content = You can <strong>drag and drop</strong> a prof
 Home--compare-recordings-info = You can also compare recordings. <a>Open the comparing interface.</a>
 Home--your-recent-uploaded-recordings-title = Your recent uploaded recordings
 
+Home--dark-mode-title = Dark mode
+
 # We replace the elements such as <perf> and <simpleperf> with links to the
 # documentation to use these tools.
 Home--load-files-from-other-tools2 =

res/css/categories.css

@@ -20,6 +20,18 @@
   --category-color-darkgrey: var(--grey-50);
 }
 
+:root.dark-mode {
+  --category-color-purple: var(--purple-60);
+  --category-color-green: var(--green-80);
+  --category-color-orange: var(--orange-60);
+  --category-color-yellow: var(--yellow-70);
+  --category-color-magenta: var(--magenta-70);
+  --category-color-gray: var(--grey-50);
+  --category-color-grey: var(--grey-50);
+  --category-color-darkgray: var(--grey-60);
+  --category-color-darkgrey: var(--grey-60);
+}
+
 /**
  * These classes should be used to create a small color swatch to describe a
  * category. They should be used with the class `colored-square` that's defined

res/css/focus.css

@@ -18,15 +18,15 @@ input[type='range']:focus-visible,
 select:focus-visible,
 button:focus-visible {
   box-shadow:
-    0 0 0 1px var(--blue-50) inset,
-    0 0 0 1px var(--blue-50),
-    0 0 0 4px var(--blue-50-a30);
+    0 0 0 1px var(--focus-border-color) inset,
+    0 0 0 1px var(--focus-border-color),
+    0 0 0 4px var(--focus-shadow-color);
   outline: 0;
 }
 
 a:focus-visible {
   box-shadow:
-    0 0 0 2px var(--blue-50),
-    0 0 0 6px var(--blue-50-a30);
+    0 0 0 2px var(--focus-border-color),
+    0 0 0 6px var(--focus-shadow-color);
   outline: 0;
 }

res/css/global.css

@@ -2,6 +2,98 @@
  * 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/. */
 
+:root {
+  --base-foreground-color: #000;
+  --base-background-color: #fff;
+  --base-border-color: var(--grey-30);
+  --base-shadow-color: rgb(0 0 0 / 0.2);
+  --link-foreground-color: var(--blue-60);
+  --link-visited-foreground-color: var(--purple-70);
+  --link-active-foreground-color: var(--red-50);
+  --clickable-foreground-color: var(--grey-90);
+  --clickable-background-color: var(--grey-90-a10);
+  --clickable-border-color: var(--grey-90-a30);
+  --clickable-hover-background-color: var(--grey-90-a20);
+  --clickable-active-background-color: var(--grey-90-a30);
+  --clickable-ghost-hover-background-color: var(--grey-90-a10);
+  --clickable-ghost-active-background-color: var(--grey-90-a20);
+  --clickable-checked-background-color: var(--blue-60);
+  --clickable-checked-hover-background-color: var(--blue-70);
+  --clickable-checked-active-background-color: var(--blue-80);
+  --focus-border-color: var(--blue-50);
+  --focus-shadow-color: var(--blue-50-a30);
+  --kbd-foreground-color: var(--base-foreground-color);
+  --kbd-background-color: #f6f6f6;
+  --kbd-border-color: #ccc;
+  --kbd-shadow-color: #bbb;
+  --home-border-color: #ccc;
+  --home-shadow-color: #0b1f50;
+  --row-odd-background-color: #f5f5f5;
+  --panel-foreground-color: var(--ink-70);
+  --panel-background-color: var(--grey-10);
+  --panel-border-color: var(--grey-30);
+  --track-selected-background-color: #edf6ff;
+  --tooltip-number-foreground-color: var(--grey-60);
+  --colored-border-color: rgb(0 0 0 / 0.1);
+
+  background-color: var(--base-background-color);
+  color: var(--base-foreground-color);
+}
+
+:root.dark-mode {
+  --base-foreground-color: var(--grey-20);
+  --base-background-color: var(--ink-90);
+  --base-border-color: var(--grey-50);
+  --base-shadow-color: rgb(0 0 0 / 0.4);
+  --link-foreground-color: var(--blue-40);
+  --link-visited-foreground-color: var(--purple-40);
+  --link-active-foreground-color: var(--red-50);
+  --clickable-foreground-color: var(--grey-20);
+  --clickable-background-color: var(--grey-10-a10);
+  --clickable-border-color: var(--grey-10-a40);
+  --clickable-hover-background-color: var(--grey-10-a20);
+  --clickable-active-background-color: var(--grey-10-a40);
+  --clickable-ghost-hover-background-color: var(--grey-10-a10);
+  --clickable-ghost-active-background-color: var(--grey-10-a20);
+  --clickable-checked-background-color: var(--blue-50);
+  --clickable-checked-hover-background-color: var(--blue-60);
+  --clickable-checked-active-background-color: var(--blue-70);
+  --focus-border-color: var(--blue-40);
+  --focus-shadow-color: var(--blue-50-a30);
+  --kbd-background-color: var(--ink-70);
+  --kbd-border-color: var(--ink-60);
+  --kbd-shadow-color: var(--ink-50);
+  --home-border-color: var(--ink-70);
+  --home-shadow-color: var(--ink-90);
+  --row-odd-background-color: color-mix(
+    in hsl,
+    var(--ink-80) 50%,
+    var(--ink-90) 50%
+  );
+  --panel-foreground-color: var(--grey-20);
+  --panel-background-color: var(--ink-80);
+  --panel-border-color: var(--ink-60);
+  --selected-track-background-color: color-mix(
+    in hsl,
+    var(--ink-90) 80%,
+    var(--teal-50) 20%
+  );
+  --tooltip-number-foreground-color: var(--grey-40);
+  --colored-border-color: rgb(237 237 240 / 0.1);
+}
+
+a {
+  color: var(--link-foreground-color);
+}
+
+a:visited {
+  color: var(--link-visited-foreground-color);
+}
+
+a:active {
+  color: var(--link-active-foreground-color);
+}
+
 /**
  * This class should be used to create a small colored square. It's used
  * especially for categories and network mime types.
@@ -11,15 +103,15 @@
   width: 9px;
   height: 9px;
   box-sizing: border-box;
-  border: 0.5px solid rgb(0 0 0 / 0.1);
+  border: 0.5px solid var(--colored-border-color);
   margin-right: 3px;
 
   /* Opt-out of forced colors so the color is applied */
   forced-color-adjust: none;
 }
 
 .colored-border {
-  border: 2px solid rgb(0 0 0 / 0.1);
+  border: 2px solid var(--colored-border-color);
   margin-right: 3px;
 
   /* Opt-out of forced colors so the color is applied */

res/css/photon/button.css

@@ -4,6 +4,15 @@
 
 /* See https://design.firefox.com/photon/components/buttons.html for the spec */
 .photon-button {
+  --internal-primary-foreground-color: #fff;
+  --internal-primary-background-color: var(--blue-60);
+  --internal-primary-hover-background-color: var(--blue-70);
+  --internal-primary-active-background-color: var(--blue-80);
+  --internal-destructive-foreground-color: #fff;
+  --internal-destructive-background-color: var(--red-60);
+  --internal-destructive-hover-background-color: var(--red-70);
+  --internal-destructive-active-background-color: var(--red-80);
+
   /* These flex and sizing properties aren't necessary when a real <button> is used,
    * but they are when a <a> element is used as a button. */
   display: inline-flex;
@@ -19,8 +28,8 @@
   background: none;
 
   /* photon styles */
-  background-color: var(--grey-90-a10);
-  color: var(--grey-90);
+  background-color: var(--clickable-background-color);
+  color: var(--clickable-foreground-color);
   cursor: initial; /* reset the defaut link style when used as a button */
   font: inherit;
   text-decoration: none; /* reset the defaut link style when used as a button */
@@ -40,11 +49,40 @@
 /* Note: we're using :not(:disabled) instead of :enabled so that this can apply
  * to non-input elements too. */
 .photon-button:hover:not(:disabled) {
-  background-color: var(--grey-90-a20);
+  background-color: var(--clickable-hover-background-color);
+}
+
+:root.dark-mode {
+  .photon-button {
+    --internal-primary-foreground-color: var(--grey-20);
+    --internal-primary-background-color: var(--blue-60);
+    --internal-primary-hover-background-color: color-mix(
+      in hsl,
+      var(--blue-60) 90%,
+      white 10%
+    );
+    --internal-primary-active-background-color: color-mix(
+      in hsl,
+      var(--blue-60) 50%,
+      var(--blue-70) 50%
+    );
+    --internal-destructive-foreground-color: #fff;
+    --internal-destructive-background-color: var(--red-60);
+    --internal-destructive-hover-background-color: color-mix(
+      in hsl,
+      var(--red-60) 90%,
+      white 10%
+    );
+    --internal-destructive-active-background-color: color-mix(
+      in hsl,
+      var(--red-60) 50%,
+      var(--red-70) 50%
+    );
+  }
 }
 
 .photon-button:hover:active:not(:disabled) {
-  background-color: var(--grey-90-a30);
+  background-color: var(--clickable-active-background-color);
 }
 
 .photon-button-primary,
@@ -57,30 +95,30 @@
 }
 
 .photon-button-primary {
-  background-color: var(--blue-60);
-  color: #fff;
+  background-color: var(--internal-primary-background-color);
+  color: var(--internal-primary-foreground-color);
 }
 
 .photon-button-primary:hover:not(:disabled) {
-  background-color: var(--blue-70);
+  background-color: var(--internal-primary-hover-background-color);
 }
 
 .photon-button-primary:hover:active:not(:disabled) {
-  background-color: var(--blue-80);
+  background-color: var(--internal-primary-active-background-color);
 }
 
 /* Use this class for destructive actions only. */
 .photon-button-destructive {
-  background-color: var(--red-60);
-  color: #fff;
+  background-color: var(--internal-destructive-background-color);
+  color: var(--internal-destructive-foreground-color);
 }
 
 .photon-button-destructive:hover:not(:disabled) {
-  background-color: var(--red-70);
+  background-color: var(--internal-destructive-hover-background-color);
 }
 
 .photon-button-destructive:hover:active:not(:disabled) {
-  background-color: var(--red-80);
+  background-color: var(--internal-destructive-active-background-color);
 }
 
 .photon-button-ghost {
@@ -91,11 +129,11 @@
 
 .photon-button-ghost:hover:not(:disabled),
 .photon-button-ghost--checked {
-  background-color: var(--grey-90-a10);
+  background-color: var(--clickable-ghost-hover-background-color);
 }
 
 .photon-button-ghost:hover:active:not(:disabled) {
-  background-color: var(--grey-90-a20);
+  background-color: var(--clickable-ghost-active-background-color);
 }
 
 .photon-button-micro {

res/css/photon/checkbox.css

@@ -5,10 +5,10 @@
 .photon-checkbox {
   position: relative;
   padding: 0;
-  border: 1px solid var(--grey-90-a30);
+  border: 1px solid var(--clickable-border-color);
   border-radius: 2px;
   appearance: none;
-  background-color: var(--grey-90-a10);
+  background-color: var(--clickable-background-color);
 }
 
 /* Remove the border, as it compets with box-shadow styles applied with focus.css */
@@ -31,16 +31,16 @@
 }
 
 .photon-checkbox:hover:not([disabled]) {
-  background-color: var(--grey-90-a20);
+  background-color: var(--clickable-hover-background-color);
 }
 
 .photon-checkbox:checked:not([disabled]) {
   border: none;
-  background-color: var(--blue-60);
+  background-color: var(--clickable-checked-background-color);
 }
 
 .photon-checkbox:hover:active:not([disabled]) {
-  background-color: var(--grey-90-a30);
+  background-color: var(--clickable-active-background-color);
 }
 
 .photon-checkbox-default:checked:not([disabled]) {
@@ -52,9 +52,9 @@
 }
 
 .photon-checkbox:checked:hover:not([disabled]) {
-  background-color: var(--blue-70);
+  background-color: var(--clickable-checked-hover-background-color);
 }
 
 .photon-checkbox:checked:hover:active:not([disabled]) {
-  background-color: var(--blue-80);
+  background-color: var(--clickable-checked-hover-background-color);
 }

res/css/photon/input.css

@@ -4,31 +4,47 @@
 
 /* See https://design.firefox.com/photon/components/input-fields.html for the spec */
 .photon-input {
+  --internal-border-color: var(--grey-90-a20);
+  --internal-hover-border-color: var(--grey-90-a30);
+  --internal-invalid-border-color: var(--red-60);
+  --internal-invalid-shadow-color: var(--red-60-a30);
+
   height: 32px;
   padding: 0 8px;
-  border: 1px solid var(--grey-90-a20);
+  border: 1px solid var(--internal-border-color);
   border-radius: 2px;
+  background-color: var(--base-background-color);
   box-shadow: none; /* remove the default Firefox style */
+  color: var(--base-foreground-color);
 }
 
 .photon-input:hover {
-  border-color: var(--grey-90-a30);
+  border-color: var(--internal-hover-border-color);
 }
 
 /* The second selector is only here to have a specificity higher than the one in
  * `.photon-input:invalid:not(:placeholder-shown)`. */
 .photon-input:focus-visible,
 .photon-input:focus-visible:invalid {
-  border: 1px solid var(--blue-50);
+  border: 1px solid var(--focus-border-color);
   box-shadow:
-    0 0 0 1px var(--blue-50),
-    0 0 0 4px var(--blue-50-a30);
+    0 0 0 1px var(--focus-border-color),
+    0 0 0 4px var(--focus-shadow-color);
   outline: 0;
 }
 
 .photon-input:invalid:not(:placeholder-shown) {
-  border: 1px solid var(--red-60);
+  border: 1px solid var(--internal-invalid-border-color);
   box-shadow:
-    0 0 0 1px var(--red-60),
-    0 0 0 4px var(--red-60-a30);
+    0 0 0 1px var(--internal-invalid-border-color),
+    0 0 0 4px var(--internal-invalid-shadow-color);
+}
+
+:root.dark-mode {
+  .photon-input {
+    --internal-border-color: var(--grey-10-a20);
+    --internal-hover-border-color: var(--grey-10-a40);
+    --internal-invalid-border-color: var(--red-50);
+    --internal-invalid-shadow-color: var(--red-60-a30);
+  }
 }

res/css/photon/label.css

@@ -6,7 +6,7 @@
   display: inline-flex;
   align-items: center;
   padding: 3px 0;
-  color: var(--grey-90);
+  color: var(--clickable-foreground-color);
 }
 
 /* Use this class with the photon-label for the canonical photon styling. */