From 19f35a70b7e453ffbe4651ddf4214dd6f410ae4f Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 15:41:03 +0900
Subject: [PATCH 01/33] Apply dark mode to common elements

---
 res/css/global.css | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/res/css/global.css b/res/css/global.css
index 72c99c9064..f28ea9a0d6 100644
--- a/res/css/global.css
+++ b/res/css/global.css
@@ -2,6 +2,41 @@
  * 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;
+  --link-foreground-color: var(--blue-60);
+  --link-visited-foreground-color: var(--purple-70);
+  --link-active-foreground-color: var(--red-50);
+
+  background-color: var(--base-background-color);
+  color: var(--base-foreground-color);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --base-foreground-color: var(--grey-20);
+      --base-background-color: var(--ink-90);
+      --link-foreground-color: var(--blue-40);
+      --link-visited-foreground-color: var(--purple-40);
+      --link-active-foreground-color: var(--red-50);
+    }
+  }
+}
+
+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.

From 20da872d5c88949fdc5ed151e336fc3e4fc7b41f Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 21:35:13 +0900
Subject: [PATCH 02/33] Apply dark mode to photon components

---
 res/css/focus.css               |  10 ++--
 res/css/global.css              |  24 ++++++++
 res/css/photon/button.css       |  68 ++++++++++++++++-----
 res/css/photon/checkbox.css     |  14 ++---
 res/css/photon/input.css        |  34 ++++++++---
 res/css/photon/label.css        |   2 +-
 res/css/photon/message-bar.css  | 103 +++++++++++++++++++++++++-------
 res/css/photon/radio-button.css |  14 ++---
 res/img/svg/info-icon-light.svg |   4 ++
 res/img/svg/warning-light.svg   |   4 ++
 10 files changed, 214 insertions(+), 63 deletions(-)
 create mode 100644 res/img/svg/info-icon-light.svg
 create mode 100644 res/img/svg/warning-light.svg

diff --git a/res/css/focus.css b/res/css/focus.css
index a6291dcff1..3925aa3858 100644
--- a/res/css/focus.css
+++ b/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;
 }
diff --git a/res/css/global.css b/res/css/global.css
index f28ea9a0d6..8433a55153 100644
--- a/res/css/global.css
+++ b/res/css/global.css
@@ -8,6 +8,18 @@
   --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);
 
   background-color: var(--base-background-color);
   color: var(--base-foreground-color);
@@ -21,6 +33,18 @@
       --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);
     }
   }
 }
diff --git a/res/css/photon/button.css b/res/css/photon/button.css
index aeff4be412..14eccf58ea 100644
--- a/res/css/photon/button.css
+++ b/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,14 +28,45 @@
   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 */
   user-select: none;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .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%
+      );
+    }
+  }
+}
+
 /* This is a Firefox-specific style because Firefox adds a focusring at a bad
  * position. We're adding our own below. */
 .photon-button::-moz-focus-inner {
@@ -40,11 +80,11 @@
 /* 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);
 }
 
 .photon-button:hover:active:not(:disabled) {
-  background-color: var(--grey-90-a30);
+  background-color: var(--clickable-active-background-color);
 }
 
 .photon-button-primary,
@@ -57,30 +97,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 +131,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 {
diff --git a/res/css/photon/checkbox.css b/res/css/photon/checkbox.css
index 5db0c2b9b4..b0bb6a385b 100644
--- a/res/css/photon/checkbox.css
+++ b/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);
 }
diff --git a/res/css/photon/input.css b/res/css/photon/input.css
index 62fee5cfbd..c1d8dc20b9 100644
--- a/res/css/photon/input.css
+++ b/res/css/photon/input.css
@@ -4,31 +4,49 @@
 
 /* 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);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .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);
+    }
+  }
 }
 
 .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);
 }
diff --git a/res/css/photon/label.css b/res/css/photon/label.css
index a8ff77f3f7..2c8f93de77 100644
--- a/res/css/photon/label.css
+++ b/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. */
diff --git a/res/css/photon/message-bar.css b/res/css/photon/message-bar.css
index b119857f3b..ed8c0e49b0 100644
--- a/res/css/photon/message-bar.css
+++ b/res/css/photon/message-bar.css
@@ -4,6 +4,26 @@
 
 /* See https://design.firefox.com/photon/components/message-bars.html */
 .photon-message-bar {
+  --internal-foreground-color: var(--grey-90);
+  --internal-background-color: var(--grey-20);
+  --internal-error-foreground-color: #fff;
+  --internal-error-background-color: var(--red-60);
+  --internal-warning-foreground-color: var(--yellow-90);
+  --internal-warning-background-color: var(--yellow-50);
+  --internal-error-action-foreground-color: #fff;
+  --internal-error-action-background-color: var(--red-70);
+  --internal-error-action-hover-background-color: var(--red-80);
+  --internal-error-action-active-background-color: var(--red-90);
+  --internal-warning-action-background-color: var(--yellow-60);
+  --internal-warning-action-hover-forekground-color: #fff;
+  --internal-warning-action-hover-background-color: var(--yellow-70);
+  --internal-warning-action-active-background-color: var(--yellow-80);
+  --internal-close-icon: url(../../img/svg/close-dark.svg);
+  --internal-error-close-icon: url(../../img/svg/close-light.svg);
+  --internal-icon: url(../../img/svg/info-icon.svg);
+  --internal-error-icon: url(../../img/svg/error.svg);
+  --internal-warning-icon: url(../../img/svg/warning.svg);
+
   display: flex;
   min-height: 32px;
   box-sizing: border-box;
@@ -18,14 +38,55 @@
   /* Note: 8px is: 4px (left padding for the message bar) + 4px (left padding
    * for the icon). And same for the top positioning, because we want the icon
    * to stick at the top when the text is multiline */
-  background: url(../../img/svg/info-icon.svg) no-repeat 8px 8px / 16px 16px
-    var(--grey-20);
-  color: var(--grey-90);
+  background: var(--internal-icon) no-repeat 8px 8px / 16px 16px
+    var(--internal-background-color);
+  color: var(--internal-foreground-color);
   font-size: 13px;
   font-weight: 400;
   line-height: 1.4;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .photon-message-bar {
+      --internal-foreground-color: var(--grey-20);
+      --internal-background-color: var(--ink-60);
+      --internal-error-foreground-color: var(--grey-20);
+      --internal-error-background-color: var(--red-60);
+      --internal-warning-foreground-color: var(--grey-20);
+      --internal-warning-background-color: var(--yellow-70);
+      --internal-error-action-foreground-color: var(--grey-20);
+      --internal-error-action-background-color: var(--red-70);
+      --internal-error-action-hover-background-color: color-mix(
+        in hsl,
+        var(--red-70) 90%,
+        white 10%
+      );
+      --internal-error-action-active-background-color: color-mix(
+        in hsl,
+        var(--red-70) 50%,
+        var(--red-80) 50%
+      );
+      --internal-warning-action-background-color: var(--yellow-80);
+      --internal-warning-action-hover-forekground-color: var(--grey-20);
+      --internal-warning-action-hover-background-color: color-mix(
+        in hsl,
+        var(--yellow-80) 90%,
+        white 10%
+      );
+      --internal-warning-action-active-background-color: color-mix(
+        in hsl,
+        var(--yellow-80) 50%,
+        var(--yellow-90) 50%
+      );
+      --internal-close-icon: url(../../img/svg/close-light.svg);
+      --internal-error-close-icon: url(../../img/svg/close-light.svg);
+      --internal-icon: url(../../img/svg/info-icon-light.svg);
+      --internal-warning-icon: url(../../img/svg/warning-light.svg);
+    }
+  }
+}
+
 .photon-message-bar-action-button {
   flex: none;
 }
@@ -35,7 +96,7 @@
   height: 24px;
   flex: none;
   margin-left: auto;
-  background: url(../../img/svg/close-dark.svg) no-repeat center / 16px 16px;
+  background: var(--internal-close-icon) no-repeat center / 16px 16px;
 }
 
 .photon-message-bar-inner-content {
@@ -59,57 +120,57 @@
 }
 
 .photon-message-bar-error {
-  background-color: var(--red-60);
-  background-image: url(../../img/svg/error.svg);
-  color: #fff;
+  background-color: var(--internal-error-background-color);
+  background-image: var(--internal-error-icon);
+  color: var(--internal-error-foreground-color);
 }
 
 .photon-message-bar-warning {
-  background-color: var(--yellow-50);
-  background-image: url(../../img/svg/warning.svg);
-  color: var(--yellow-90);
+  background-color: var(--internal-warning-background-color);
+  background-image: var(--internal-warning-icon);
+  color: var(--internal-warning-foreground-color);
 }
 
 .photon-message-bar-error .photon-message-bar-close-button {
-  background-image: url(../../img/svg/close-light.svg);
+  background-image: var(--internal-error-close-icon);
 }
 
 /* The default styles for this button are copied from the ghost button, mostly
  * for ease of usage. */
 .photon-message-bar-close-button:hover {
-  background-color: var(--grey-90-a10);
+  background-color: var(--clickable-ghost-hover-background-color);
 }
 
 .photon-message-bar-error .photon-message-bar-action-button,
 .photon-message-bar-error .photon-message-bar-close-button:hover {
-  background-color: var(--red-70);
-  color: #fff;
+  background-color: var(--internal-error-action-background-color);
+  color: var(photon-message-bar-error-action-foreground-color);
 }
 
 .photon-message-bar-warning .photon-message-bar-action-button,
 .photon-message-bar-warning .photon-message-bar-close-button:hover {
-  background-color: var(--yellow-60);
+  background-color: var(--internal-warning-action-background-color);
 }
 
 .photon-message-bar-close-button:hover:active {
-  background-color: var(--grey-90-a20);
+  background-color: var(--clickable-ghost-active-background-color);
 }
 
 .photon-message-bar-error .photon-message-bar-action-button:hover,
 .photon-message-bar-error .photon-message-bar-close-button:hover:active {
-  background-color: var(--red-80);
+  background-color: var(--internal-error-action-hover-background-color);
 }
 
 .photon-message-bar-warning .photon-message-bar-action-button:hover,
 .photon-message-bar-warning .photon-message-bar-close-button:hover:active {
-  background-color: var(--yellow-70);
-  color: #fff;
+  background-color: var(--internal-warning-action-hover-background-color);
+  color: var(--internal-warning-action-hover-forekground-color);
 }
 
 .photon-message-bar-error .photon-message-bar-action-button:hover:active {
-  background-color: var(--red-90);
+  background-color: var(--internal-error-action-active-background-color);
 }
 
 .photon-message-bar-warning .photon-message-bar-action-button:hover:active {
-  background-color: var(--yellow-80);
+  background-color: var(--internal-warning-action-active-background-color);
 }
diff --git a/res/css/photon/radio-button.css b/res/css/photon/radio-button.css
index 5fc657c366..80d6233aa4 100644
--- a/res/css/photon/radio-button.css
+++ b/res/css/photon/radio-button.css
@@ -3,11 +3,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .photon-radio {
-  border: 1px solid var(--grey-90-a30);
+  border: 1px solid var(--clickable-border-color);
   border-radius: 8px;
   appearance: none;
   background: none;
-  background-color: var(--grey-90-a10);
+  background-color: var(--clickable-background-color);
 }
 
 /* Use this class with the photon-radio for the canonical photon styling. */
@@ -25,16 +25,16 @@
 }
 
 .photon-radio:hover {
-  background-color: var(--grey-90-a20);
+  background-color: var(--clickable-hover-background-color);
 }
 
 .photon-radio:checked {
   border: none;
-  background-color: var(--blue-60);
+  background-color: var(--clickable-checked-background-color);
 }
 
 .photon-radio:hover:active {
-  background-color: var(--grey-90-a30);
+  background-color: var(--clickable-active-background-color);
 }
 
 .photon-radio-default:checked {
@@ -46,9 +46,9 @@
 }
 
 .photon-radio:checked:hover {
-  background-color: var(--blue-70);
+  background-color: var(--clickable-checked-hover-background-color);
 }
 
 .photon-radio:checked:hover:active {
-  background-color: var(--blue-80);
+  background-color: var(--clickable-checked-active-background-color);
 }
diff --git a/res/img/svg/info-icon-light.svg b/res/img/svg/info-icon-light.svg
new file mode 100644
index 0000000000..ee3eb32aa8
--- /dev/null
+++ b/res/img/svg/info-icon-light.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0 2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm1-14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-1 3a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0v-4a1 1 0 0 0-1-1z" fill="#ededf0" fill-opacity=".8"></path></svg>
diff --git a/res/img/svg/warning-light.svg b/res/img/svg/warning-light.svg
new file mode 100644
index 0000000000..2531f5a60a
--- /dev/null
+++ b/res/img/svg/warning-light.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#ededf0" d="M14.742 12.106L9.789 2.2a2 2 0 0 0-3.578 0l-4.953 9.91A2 2 0 0 0 3.047 15h9.905a2 2 0 0 0 1.79-2.894zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z"></path></svg>

From 3e2c8f326a73fb85b37ca374281c3fa2dd7f879b Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 23:18:00 +0900
Subject: [PATCH 03/33] Apply dark mode to Home components

---
 res/css/global.css                 | 11 ++++++
 res/img/svg/help-blue-light.svg    |  6 +++
 res/index.html                     | 19 +++++++++-
 src/components/app/AppHeader.css   | 22 +++++++++--
 src/components/app/FooterLinks.css | 33 +++++++++++++++--
 src/components/app/Home.css        | 59 +++++++++++++++++++++---------
 6 files changed, 125 insertions(+), 25 deletions(-)
 create mode 100644 res/img/svg/help-blue-light.svg

diff --git a/res/css/global.css b/res/css/global.css
index 8433a55153..1255b4ca1d 100644
--- a/res/css/global.css
+++ b/res/css/global.css
@@ -20,6 +20,12 @@
   --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;
 
   background-color: var(--base-background-color);
   color: var(--base-foreground-color);
@@ -45,6 +51,11 @@
       --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);
     }
   }
 }
diff --git a/res/img/svg/help-blue-light.svg b/res/img/svg/help-blue-light.svg
new file mode 100644
index 0000000000..ec6a24034d
--- /dev/null
+++ b/res/img/svg/help-blue-light.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#45a1ff" d="M8 1a7 7 0 1 0 7 7 7.008 7.008 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6zM8 3.125A2.7 2.7 0 0 0 5.125 6a.875.875 0 0 0 1.75 0c0-1 .6-1.125 1.125-1.125a1.105 1.105 0 0 1 1.13.744.894.894 0 0 1-.53 1.016A2.738 2.738 0 0 0 7.125 9v.337a.875.875 0 0 0 1.75 0v-.37a1.041 1.041 0 0 1 .609-.824A2.637 2.637 0 0 0 10.82 5.16 2.838 2.838 0 0 0 8 3.125zm0 7.625A1.25 1.25 0 1 0 9.25 12 1.25 1.25 0 0 0 8 10.75z"></path>
+</svg>
diff --git a/res/index.html b/res/index.html
index 59792c2970..872298e4ff 100644
--- a/res/index.html
+++ b/res/index.html
@@ -8,8 +8,25 @@
     <meta name="viewport" content="initial-scale=1" />
     <title>Firefox Profiler</title>
     <link rel="preload" href="/locales/en-US/app.ftl" as="fetch" />
+    <style>
+      :root {
+        --body-background-color: #363959; /* --ink-70 */
+      }
+
+      @supports (color-scheme: dark) {
+        @media (prefers-color-scheme: dark) {
+          :root {
+            --body-background-color: #202340; /* --ink-80 */
+          }
+        }
+      }
+
+      body {
+        background-color: var(--body-background-color);
+      }
+    </style>
   </head>
-  <body style="background-color: #363959; /* ink-70 */">
+  <body>
     <svg id="svg-filters"></svg>
     <div id="root"></div>
     <div id="root-overlay"></div>
diff --git a/src/components/app/AppHeader.css b/src/components/app/AppHeader.css
index 1821021168..5b6c5203b7 100644
--- a/src/components/app/AppHeader.css
+++ b/src/components/app/AppHeader.css
@@ -3,23 +3,35 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .appHeader {
+  --internal-border-color: #ddd;
+
   display: flex;
   justify-content: space-between;
   padding-bottom: 0.5em;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--internal-border-color);
 
   /* Negative margin is here to compensate for the children's margins */
   margin: 0 -0.2em 0.5em;
   font-size: 1.5em;
 }
 
-.appHeaderLink {
-  color: inherit;
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .appHeader {
+      --internal-border-color: var(--ink-60);
+    }
+  }
+}
+
+.appHeaderLink,
+.appHeaderLink:visited {
+  color: var(--base-foreground-color);
   text-decoration: none;
 }
 
 /* Note that :focus-visible styles are defined in focus.css */
 .appHeaderLink:hover {
+  color: var(--base-foreground-color);
   text-decoration: underline;
 }
 
@@ -43,3 +55,7 @@
 .appHeaderGithubIcon:hover {
   opacity: 0.5;
 }
+
+.octicon-mark-github {
+  fill: var(--base-foreground-color);
+}
diff --git a/src/components/app/FooterLinks.css b/src/components/app/FooterLinks.css
index 6ad20af8cd..385ffc1c2e 100644
--- a/src/components/app/FooterLinks.css
+++ b/src/components/app/FooterLinks.css
@@ -1,4 +1,7 @@
 .appFooterLinks {
+  --internal-background-color: var(--grey-20);
+  --internal-border-color: var(--grey-40);
+
   /* Position */
   position: fixed;
   right: 0;
@@ -8,16 +11,24 @@
   padding: 0 3px;
 
   /* Other */
-  border-top: 1px solid var(--grey-40);
-  border-left: 1px solid var(--grey-40);
-  background-color: var(--grey-20);
+  border-top: 1px solid var(--internal-border-color);
+  border-left: 1px solid var(--internal-border-color);
+  background-color: var(--internal-background-color);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .appFooterLinks {
+      --internal-background-color: var(--ink-90);
+      --internal-border-color: var(--ink-70);
+    }
+  }
 }
 
 .appFooterLinksLink,
 .appFooterLinksClose {
   display: inline-block;
   margin: 2px 4px;
-  color: var(--blue-60);
   text-decoration: none;
 }
 
@@ -25,6 +36,7 @@
   border: none;
   margin: 0;
   background: none;
+  color: var(--link-foreground-color);
   cursor: pointer;
   font: inherit;
 }
@@ -40,6 +52,19 @@
   font: inherit;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .appFooterLinksLanguageSwitcher {
+      --internal-background-color: var(--ink-60);
+      --internal-boreder-color: var(--ink-40);
+
+      border: 1px solid var(--internal-boreder-color);
+      border-radius: 4px;
+      background: var(--internal-background-color);
+    }
+  }
+}
+
 @media (max-width: 767px) {
   .appFooterLinks {
     width: 100%;
diff --git a/src/components/app/Home.css b/src/components/app/Home.css
index b145cf5c6b..9040673787 100644
--- a/src/components/app/Home.css
+++ b/src/components/app/Home.css
@@ -3,6 +3,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .home {
+  --internal-special-background-color: #798fc8;
+  --internal-special-border-color: #000;
+  --internal-screenshot-border-color: #d1d1d1;
+  --internal-screenshot-shadow-color: #ddd;
+  --internal-button-disabled-foreground-color: var(--grey-50);
+  --internal-button-enabled-foreground-color: var(--blue-60);
+  --internal-button-enabled-hover-background-color: var(--blue-60);
+  --internal-docs-icon: url(../../../res/img/svg/help-blue.svg);
+
   display: flex;
   width: 100%;
   min-height: 100vh;
@@ -12,13 +21,28 @@
   line-height: 1.5;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .home {
+      --internal-special-background-color: var(--ink-70);
+      --internal-special-border-color: var(--ink-40);
+      --internal-screenshot-border-color: var(--ink-40);
+      --internal-screenshot-shadow-color: var(--ink-90);
+      --internal-button-disabled-foreground-color: var(--grey-10-a40);
+      --internal-button-enabled-foreground-color: var(--blue-40);
+      --internal-button-enabled-hover-background-color: var(--ink-50);
+      --internal-docs-icon: url(../../../res/img/svg/help-blue-light.svg);
+    }
+  }
+}
+
 .homeSpecialMessage {
   padding: 8px 16px;
-  border: 1px solid #000;
+  border: 1px solid var(--internal-special-border-color);
   border-radius: 3px;
   margin: 17px 0;
-  background-color: #798fc8;
-  color: #fff;
+  background-color: var(--internal-special-background-color);
+  color: var(--base-foreground-color);
 }
 
 .homeSection {
@@ -28,21 +52,22 @@
   max-width: 1200px;
   box-sizing: border-box;
   padding: 4em 8em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--home-border-color);
   border-radius: 3px;
-  background-color: #fff;
-  box-shadow: 0 5px 25px #0b1f50;
+  background-color: var(--base-background-color);
+  box-shadow: 0 5px 25px var(--home-shadow-color);
   font-size: 130%;
 }
 
 .homeSection kbd {
   display: inline-block;
   padding: 0 0.5em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--internal-kbd-border-color);
   border-radius: 0.2em;
   margin: 0 0.2em;
-  background-color: #f6f6f6;
-  box-shadow: 0.1em 0.1em 0 #bbb;
+  background-color: var(--internal-kbd-background-color);
+  box-shadow: 0.1em 0.1em 0 var(--internal-kbd-shadow-color);
+  color: var(--internal-kbd-foreground-color);
 }
 
 .homeSectionItems {
@@ -53,9 +78,9 @@
   width: 390px;
   max-width: 100%;
   height: auto;
-  border: 1px solid #d1d1d1;
+  border: 1px solid var(--internal-screenshot-border-color);
   border-radius: 0.4em;
-  box-shadow: 0 2px 4px #ddd;
+  box-shadow: 0 2px 4px var(--internal-screenshot-shadow-color);
   place-self: center;
 }
 
@@ -77,8 +102,8 @@
   padding: 0.5em;
   border: 2px solid currentcolor;
   margin: 15px 0;
-  background-color: #fff;
-  color: var(--grey-50);
+  background-color: var(--base-background-color);
+  color: var(--internal-button-disabled-foreground-color);
   font-size: 16px;
   font-weight: bold;
   line-height: 1.5;
@@ -90,7 +115,7 @@
 }
 
 .homeSectionButton:not(:disabled) {
-  color: var(--blue-60);
+  color: var(--internal-button-enabled-foreground-color);
   cursor: pointer;
 }
 
@@ -126,8 +151,8 @@
 
 .homeSectionButton:not(:disabled):hover,
 .homeSectionButton:not(:disabled)[aria-expanded='true'] {
-  background-color: var(--blue-60);
-  color: #fff;
+  background-color: var(--internal-button-enabled-hover-background-color);
+  color: var(--base-foreground-color);
 }
 
 .homeSectionPlus {
@@ -145,7 +170,7 @@
   width: 20px;
   height: 20px;
   margin: 0 10px -4px 3px;
-  background: url(../../../res/img/svg/help-blue.svg);
+  background: var(--internal-docs-icon);
   background-size: 100% 100%;
 }
 

From 8c862f987425d76362e19d747af173cd055603e1 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 17:02:01 +0900
Subject: [PATCH 04/33] Apply dark mode to TreeView component

---
 res/css/global.css                 |  8 +++
 src/components/shared/TreeView.css | 79 +++++++++++++++++++-----------
 2 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/res/css/global.css b/res/css/global.css
index 1255b4ca1d..1e20dbe6d8 100644
--- a/res/css/global.css
+++ b/res/css/global.css
@@ -5,6 +5,7 @@
 :root {
   --base-foreground-color: #000;
   --base-background-color: #fff;
+  --base-border-color: var(--grey-30);
   --link-foreground-color: var(--blue-60);
   --link-visited-foreground-color: var(--purple-70);
   --link-active-foreground-color: var(--red-50);
@@ -26,6 +27,7 @@
   --kbd-shadow-color: #bbb;
   --home-border-color: #ccc;
   --home-shadow-color: #0b1f50;
+  --row-odd-background-color: #f5f5f5;
 
   background-color: var(--base-background-color);
   color: var(--base-foreground-color);
@@ -36,6 +38,7 @@
     :root {
       --base-foreground-color: var(--grey-20);
       --base-background-color: var(--ink-90);
+      --base-border-color: var(--grey-50);
       --link-foreground-color: var(--blue-40);
       --link-visited-foreground-color: var(--purple-40);
       --link-active-foreground-color: var(--red-50);
@@ -56,6 +59,11 @@
       --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%
+      );
     }
   }
 }
diff --git a/src/components/shared/TreeView.css b/src/components/shared/TreeView.css
index c799f3752b..610d5985e9 100644
--- a/src/components/shared/TreeView.css
+++ b/src/components/shared/TreeView.css
@@ -3,25 +3,47 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .treeView {
-  --tree-row-toggle-button-color: #888;
-  --tree-row-toggle-button-active-color: var(--grey-60);
-  --selected-tree-row-toggle-button-color: #fff;
-  --selected-tree-row-toggle-button-active-color: rgb(255 255 255 / 0.7);
+  --internal-row-right-clicked-background-color: var(--blue-50-a30);
+  --internal-row-selected-foreground-color: #000;
+  --internal-row-selected-background-color: var(--grey-30);
+  --internal-highlighting-foreground-color: #000;
+  --internal-highlighting-background-color: #cbe8fe;
+  --internal-highlighting-shadow-color1: rgb(0 0 0 / 0.05);
+  --internal-highlighting-shadow-color2: rgb(0 0 0 / 0.3);
+  --internal-row-toggle-button-color: #888;
+  --internal-row-toggle-button-active-color: var(--grey-60);
+  --internal-selected-row-toggle-button-color: #fff;
+  --internal-selected-row-toggle-button-active-color: rgb(255 255 255 / 0.7);
 
   display: flex;
   flex: 1;
   flex-flow: column nowrap;
-  border-top: 1px solid var(--grey-30);
+  border-top: 1px solid var(--base-border-color);
   cursor: default;
   user-select: none;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .treeView {
+      --internal-row-right-clicked-background-color: var(--blue-50-a30);
+      --internal-row-selected-foreground-color: var(--grey-10);
+      --internal-row-selected-background-color: var(--ink-70);
+      --internal-highlighting-foreground-color: var(--grey-10);
+      --internal-highlighting-background-color: var(--teal-60);
+      --internal-row-toggle-button-color: var(--grey-50);
+      --internal-row-toggle-button-active-color: var(--grey-60);
+      --internal-selected-row-toggle-button-color: var(--grey-10);
+    }
+  }
+}
+
 @media (forced-colors: active) {
   .treeView {
-    --tree-row-toggle-button-color: ButtonText;
-    --tree-row-toggle-button-active-color: SelectedItem;
-    --selected-tree-row-toggle-button-color: SelectedItemText;
-    --selected-tree-row-toggle-button-active-color: ButtonText;
+    --internal-row-toggle-button-color: ButtonText;
+    --internal-row-toggle-button-active-color: SelectedItem;
+    --internal-selected-row-toggle-button-color: SelectedItemText;
+    --internal-selected-row-toggle-button-active-color: ButtonText;
   }
 }
 
@@ -40,8 +62,9 @@
 .treeViewHeader {
   height: 15px;
   padding: 4px 0;
-  border-bottom: 1px solid var(--grey-30);
-  background: white;
+  border-bottom: 1px solid var(--base-border-color);
+  background: var(--base-background-color);
+  color: var(--base-foreground-color);
 }
 
 .treeViewHeaderMainColumn {
@@ -86,7 +109,8 @@
 
 .treeViewBodyInner {
   overflow: hidden;
-  background: white;
+  background: var(--base-background-color);
+  color: var(--base-foreground-color);
 }
 
 .treeViewHeaderColumn {
@@ -116,13 +140,13 @@
 }
 
 .treeViewColumnDivider::before {
-  border-right: 1px solid var(--grey-30);
+  border-right: 1px solid var(--base-border-color);
   content: '';
 }
 
 .treeViewColumnDivider.isResizable::before {
   width: 1px;
-  border-left: 1px solid var(--grey-30);
+  border-left: 1px solid var(--base-border-color);
 }
 
 .treeViewHeaderColumn.treeViewFixedColumn {
@@ -153,21 +177,21 @@
 }
 
 .treeViewRow.even {
-  background-color: #fff;
+  background-color: var(--base-background-color);
 }
 
 .treeViewRow.odd {
-  background-color: #f5f5f5;
+  background-color: var(--row-odd-background-color);
 }
 
 /* Note that `isRightClicked` is present before `isSelected` so that it can be overriden. */
 .treeViewRow.isRightClicked {
-  background-color: var(--blue-50-a30);
+  background-color: var(--internal-row-right-clicked-background-color);
 }
 
 .treeViewRow.isSelected {
-  background-color: var(--grey-30);
-  color: black;
+  background-color: var(--internal-row-selected-background-color);
+  color: var(--internal-row-selected-foreground-color);
 }
 
 .treeViewMainColumn.dim {
@@ -204,11 +228,10 @@
   * covers the underlying background. There's an underlying background when the
   * line is selected. */
   margin: -1px 0;
-  background: #cbe8fe;
-  box-shadow:
-    0 0 0 0.5px rgb(0 0 0 / 0.05),
-    0 1px 1px rgb(0 0 0 / 0.3);
-  color: #000;
+  background: var(--internal-highlighting-background-color);
+  box-shadow: 0 0 0 0.5px var(--internal-highlighting-shadow-color1) 0 1px 1px
+    var(--internal-highlighting-shadow-color2);
+  color: var(--internal-highlighting-foreground-color);
 }
 
 .treeRowToggleButton {
@@ -219,7 +242,7 @@
   border-bottom: 5px solid transparent;
   border-left: 8px solid;
   margin-left: 8px;
-  color: var(--tree-row-toggle-button-color);
+  color: var(--internal-row-toggle-button-color);
 
   /* Opt-out of forced colors so the transparent borders aren't turned into opaque ones */
   forced-color-adjust: none;
@@ -236,17 +259,17 @@
 }
 
 .treeRowToggleButton:active:hover {
-  color: var(--tree-row-toggle-button-active-color);
+  color: var(--internal-row-toggle-button-active-color);
 }
 
 .treeViewBody:focus .treeViewRow.isSelected > .treeRowToggleButton {
-  color: var(--selected-tree-row-toggle-button-color);
+  color: var(--internal-selected-row-toggle-button-color);
 }
 
 .treeViewBody:focus
   .treeViewRow.isSelected
   > .treeRowToggleButton:active:hover {
-  color: var(--selected-tree-row-toggle-button-active-color);
+  color: var(--internal-selected-row-toggle-button-active-color);
 }
 
 .treeRowToggleButton.leaf {

From 898d4300054cd3aa84a9cd89de1a5a951c90b32a Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 01:41:49 +0900
Subject: [PATCH 05/33] Apply dark mode to FilterNavigationBar component

---
 res/css/global.css                            |  6 +++++
 res/img/svg/scope-bar-separator-light.svg     | 25 +++++++++++++++++++
 src/components/app/ProfileFilterNavigator.css | 12 ++++++++-
 src/components/shared/FilterNavigatorBar.css  |  9 +++++++
 src/components/shared/TransformNavigator.css  | 20 ++++++++++++---
 5 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100755 res/img/svg/scope-bar-separator-light.svg

diff --git a/res/css/global.css b/res/css/global.css
index 1e20dbe6d8..599608c914 100644
--- a/res/css/global.css
+++ b/res/css/global.css
@@ -28,6 +28,9 @@
   --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);
 
   background-color: var(--base-background-color);
   color: var(--base-foreground-color);
@@ -64,6 +67,9 @@
         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);
     }
   }
 }
diff --git a/res/img/svg/scope-bar-separator-light.svg b/res/img/svg/scope-bar-separator-light.svg
new file mode 100755
index 0000000000..fcf0fc5761
--- /dev/null
+++ b/res/img/svg/scope-bar-separator-light.svg
@@ -0,0 +1,25 @@
+<!-- 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/. -->
+<svg  xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="48" height="48" viewBox="0 0 24 24">
+  <defs>
+    <filter id="filter" filterSpaceUnits="objectBoundingBox" x="-100%" y="-20%" width="300%" height="140%">
+      <feFlood flood-color="rgba(237, 237, 240, 0.6)"/>
+      <feComposite operator="out" in2="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="0.2"/>
+      <feOffset dx="-1"/>
+      <feComposite operator="in" in2="SourceAlpha"/>
+    </filter>
+  <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0.1" stop-color="black"/>
+    <stop offset="0.5" stop-color="white"/>
+    <stop offset="0.9" stop-color="black"/>
+  </linearGradient>
+    <mask id="mask">
+      <rect x="0%" y="0%" width="100%" height="100%" fill="url(#gradient)"/>
+    </mask>
+  </defs>
+  <polyline points="4 0 6 0 18 12 6 24 4 24 16 12" style="filter:url(#filter); mask:url(#mask)"/>
+</svg>
diff --git a/src/components/app/ProfileFilterNavigator.css b/src/components/app/ProfileFilterNavigator.css
index 9daf3b89da..274be932d9 100644
--- a/src/components/app/ProfileFilterNavigator.css
+++ b/src/components/app/ProfileFilterNavigator.css
@@ -3,6 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .profileFilterNavigator--tab-selector {
+  --internal-disabled-arrow-color: var(--grey-30);
+
   display: flex;
   align-items: center;
   column-gap: 5px;
@@ -11,6 +13,14 @@
   padding-inline: 20px 5px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .profileFilterNavigator--tab-selector {
+      --internal-disabled-arrow-color: var(--grey-60);
+    }
+  }
+}
+
 /* This is the dropdown arrow on the left of the button. */
 .profileFilterNavigator--tab-selector::before {
   position: absolute;
@@ -30,7 +40,7 @@
 
 span.profileFilterNavigator--tab-selector::before {
   /* Disabled tab selector indicates this with a grayed out arrow. */
-  color: var(--grey-30);
+  color: var(--internal-disabled-arrow-color);
 }
 
 @media (forced-colors: active) {
diff --git a/src/components/shared/FilterNavigatorBar.css b/src/components/shared/FilterNavigatorBar.css
index 2a41257b5c..4860460c39 100644
--- a/src/components/shared/FilterNavigatorBar.css
+++ b/src/components/shared/FilterNavigatorBar.css
@@ -25,6 +25,15 @@
      we have removed this animation in the meantime */
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .filterNavigatorBar {
+      --internal-selected-color: var(--selected-color, var(--blue-40));
+      --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-light.svg);
+    }
+  }
+}
+
 .filterNavigatorBarItem {
   position: relative;
   display: flex;
diff --git a/src/components/shared/TransformNavigator.css b/src/components/shared/TransformNavigator.css
index 77c91966a2..436f334393 100644
--- a/src/components/shared/TransformNavigator.css
+++ b/src/components/shared/TransformNavigator.css
@@ -3,7 +3,21 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .calltreeTransformNavigator {
-  border-top: 1px solid var(--grey-30);
-  background: var(--grey-10);
-  color: var(--ink-70);
+  --internal-foreground-color: var(--panel-foreground-color);
+  --internal-background-color: var(--panel-background-color);
+  --internal-border-color: var(--panel-border-color);
+
+  border-top: 1px solid var(--internal-border-color);
+  background: var(--internal-background-color);
+  color: var(--internal-foreground-color);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .calltreeTransformNavigator {
+      --internal-foreground-color: var(--base-foreground-color);
+      --internal-border-color: var(--base-border-color);
+      --internal-background-color: var(--base-background-color);
+    }
+  }
 }

From c202c9b9ae9386bad7360bc3c56359d142db6b7e Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 01:14:44 +0900
Subject: [PATCH 06/33] Apply dark mode to profileViewerTopBar

---
 res/img/svg/back-arrow-light.svg              | 13 ++++
 res/img/svg/cloud-light-12.svg                | 13 ++++
 res/img/svg/download-light.svg                | 13 ++++
 res/img/svg/edit-name-profiler-light.svg      |  4 +
 res/img/svg/info-light-12.svg                 |  8 ++
 res/img/svg/info-light.svg                    | 10 +++
 res/img/svg/link-light-12.svg                 | 10 +++
 res/img/svg/maximize-light-12.svg             |  8 ++
 res/img/svg/open-in-new-light-12.svg          | 15 ++++
 res/img/svg/share-light-12.svg                | 10 +++
 res/img/svg/undo-light-12.svg                 |  9 +++
 src/components/app/MenuButtons/Permalink.css  | 14 +++-
 src/components/app/MenuButtons/Publish.css    | 76 +++++++++++++++----
 src/components/app/MenuButtons/index.css      | 48 +++++++++---
 src/components/app/ProfileName.css            | 33 +++++---
 src/components/app/ProfileName.tsx            |  2 +-
 src/components/app/ProfileViewer.css          | 43 +++++++++--
 .../shared/ButtonWithPanel/ArrowPanel.css     | 25 ++++--
 18 files changed, 301 insertions(+), 53 deletions(-)
 create mode 100644 res/img/svg/back-arrow-light.svg
 create mode 100644 res/img/svg/cloud-light-12.svg
 create mode 100644 res/img/svg/download-light.svg
 create mode 100644 res/img/svg/edit-name-profiler-light.svg
 create mode 100644 res/img/svg/info-light-12.svg
 create mode 100644 res/img/svg/info-light.svg
 create mode 100644 res/img/svg/link-light-12.svg
 create mode 100644 res/img/svg/maximize-light-12.svg
 create mode 100644 res/img/svg/open-in-new-light-12.svg
 create mode 100644 res/img/svg/share-light-12.svg
 create mode 100644 res/img/svg/undo-light-12.svg

diff --git a/res/img/svg/back-arrow-light.svg b/res/img/svg/back-arrow-light.svg
new file mode 100644
index 0000000000..bee610879d
--- /dev/null
+++ b/res/img/svg/back-arrow-light.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <g transform="translate(3, 8) rotate(-45)" fill="#ededf0">
+      <rect x="0" y="0" width="7" height="2"></rect>
+      <rect x="0" y="0" width="2" height="7"></rect>
+    </g>
+    <rect fill="#000" x="5" y="7" width="8" height="2"></rect>
+  </g>
+</svg>
diff --git a/res/img/svg/cloud-light-12.svg b/res/img/svg/cloud-light-12.svg
new file mode 100644
index 0000000000..397dc57b3e
--- /dev/null
+++ b/res/img/svg/cloud-light-12.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path
+    d="M2.82536496,4.3002101 L2.73255082,4.72363915 L2.31932038,4.8545866 C1.39257067,5.14826175 0.75,6.01210962 0.75,7 C0.75,8.24264069 1.75735931,9.25 3,9.25 L9.5,9.25 C10.4664983,9.25 11.25,8.46649831 11.25,7.5 C11.25,6.66399038 10.6589245,5.94895398 9.85058754,5.78497571 L9.24215446,5.66154972 L9.2497507,5.0407703 C9.24995835,5.02040899 9.24995835,5.02040899 9.25,5 C9.25,3.20507456 7.79492544,1.75 6,1.75 C4.46584561,1.75 3.14943679,2.82175618 2.82536496,4.3002101 Z"
+    stroke="rgba(237, 237, 240, .8)"
+    stroke-width="1.5"
+    fill="none"
+    fill-rule="evenodd">
+  </path>
+</svg>
diff --git a/res/img/svg/download-light.svg b/res/img/svg/download-light.svg
new file mode 100644
index 0000000000..4b9b3bce56
--- /dev/null
+++ b/res/img/svg/download-light.svg
@@ -0,0 +1,13 @@
+<!-- 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/. -->
+
+<svg width="14px" height="20px" viewBox="0 0 14 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-15, -9)" fill="#ededf0">
+      <g transform="translate(15, 9)">
+        <path d="M8,1 C8,0.44771525 7.55228475,0 7,0 C6.44771525,0 6,0.44771525 6,1 L6,12.586 L1.707,8.293 C1.31462111,7.91402779 0.690915223,7.91944763 0.305181425,8.30518142 C-0.0805523739,8.69091522 -0.0859722095,9.31462111 0.293,9.707 L6.293,15.707 C6.68349985,16.0973819 7.31650015,16.0973819 7.707,15.707 L13.707,9.707 C14.0859722,9.31462111 14.0805524,8.69091522 13.6948186,8.30518142 C13.3090848,7.91944763 12.6853789,7.91402779 12.293,8.293 L8,12.586 L8,1 Z M0,19 C0,18.4477153 0.44771525,18 1,18 L13,18 C13.5522847,18 14,18.4477153 14,19 C14,19.5522847 13.5522847,20 13,20 L1,20 C0.44771525,20 0,19.5522847 0,19 Z"></path>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/res/img/svg/edit-name-profiler-light.svg b/res/img/svg/edit-name-profiler-light.svg
new file mode 100644
index 0000000000..213181b04b
--- /dev/null
+++ b/res/img/svg/edit-name-profiler-light.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16"><path fill="#ededf0" d="M14.354 2.353l-.708-.707a2.007 2.007 0 0 0-2.828 0l-.379.379a.5.5 0 0 0 0 .707l2.829 2.829a.5.5 0 0 0 .707 0l.379-.379a2.008 2.008 0 0 0 0-2.829zM9.732 3.439a.5.5 0 0 0-.707 0L3.246 9.218a1.986 1.986 0 0 0-.452.712l-1.756 4.39A.5.5 0 0 0 1.5 15a.5.5 0 0 0 .188-.037l4.382-1.752a1.966 1.966 0 0 0 .716-.454l5.779-5.778a.5.5 0 0 0 0-.707zM5.161 12.5l-2.549 1.02a.1.1 0 0 1-.13-.13L3.5 10.831a.1.1 0 0 1 .16-.031l1.54 1.535a.1.1 0 0 1-.039.165z"></path></svg>
diff --git a/res/img/svg/info-light-12.svg b/res/img/svg/info-light-12.svg
new file mode 100644
index 0000000000..6b5461b33a
--- /dev/null
+++ b/res/img/svg/info-light-12.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg width="12px" height="12px" version="1.1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+ <rect x="5" y="5" width="2" height="4" ry="1" fill="#ededf0" fill-opacity=".8"/>
+ <rect x="5" y="3" width="2" height="1" ry="0.5" fill="#ededf0" fill-opacity=".8"/>
+ <ellipse cx="6" cy="6" rx="5.25" ry="5.25" fill="none" stroke="#ededf0" stroke-opacity=".8" stroke-width="1.5"/>
+</svg>
diff --git a/res/img/svg/info-light.svg b/res/img/svg/info-light.svg
new file mode 100644
index 0000000000..d62cabec2b
--- /dev/null
+++ b/res/img/svg/info-light.svg
@@ -0,0 +1,10 @@
+<!-- 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/. -->
+<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.8">
+   <g fill="#ededf0">
+     <path d="M22,39.6 C31.7202116,39.6 39.6,31.7202116 39.6,22 C39.6,12.2797884 31.7202116,4.4 22,4.4 C12.2797884,4.4 4.4,12.2797884 4.4,22 C4.4,31.7202116 12.2797884,39.6 22,39.6 Z M22,44 C34.1506,44 44,34.1506 44,22 C44,9.8494 34.1506,0 22,0 C9.8494,0 0,9.8494 0,22 C0,34.1506 9.8494,44 22,44 Z M24.2,13.2 C24.2,14.4150264 23.2150264,15.4 22,15.4 C20.7849736,15.4 19.8,14.4150264 19.8,13.2 C19.8,11.9849736 20.7849736,11 22,11 C23.2150264,11 24.2,11.9849736 24.2,13.2 Z M22,19.8 C20.7849736,19.8 19.8,20.7849736 19.8,22 L19.8,30.8 C19.8,32.0150264 20.7849736,33 22,33 C23.2150264,33 24.2,32.0150264 24.2,30.8 L24.2,22 C24.2,20.7849736 23.2150264,19.8 22,19.8 Z" id="Shape"></path>
+   </g>
+ </g>
+</svg>
diff --git a/res/img/svg/link-light-12.svg b/res/img/svg/link-light-12.svg
new file mode 100644
index 0000000000..8f9fc885b9
--- /dev/null
+++ b/res/img/svg/link-light-12.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g fill="rgba(237, 237, 240, .8)" fill-rule="nonzero">
+    <path d="M6.00026517,2.46439017 C6.41447873,2.46439017 6.75026517,2.8001766 6.75026517,3.21439017 L6.75026517,8.78614017 C6.75026517,9.20035373 6.41447873,9.53614017 6.00026517,9.53614017 C5.5860516,9.53614017 5.25026517,9.20035373 5.25026517,8.78614017 L5.25026517,3.21439017 C5.25026517,2.8001766 5.5860516,2.46439017 6.00026517,2.46439017 Z" id="Rectangle" transform="translate(6.000265, 6.000265) rotate(-45.000000) translate(-6.000265, -6.000265) "></path>
+    <path d="M1.7655,3.3915 L3.36375,1.7925 C3.43419143,1.72127641 3.53020117,1.681197 3.630375,1.681197 C3.73054883,1.681197 3.82655857,1.72127641 3.897,1.7925 L6.2895,4.185 L6.3,4.17375 C6.8820826,3.5886064 6.8820826,2.6431436 6.3,2.058 L4.704,0.462 C4.1188564,-0.120082601 3.1733936,-0.120082601 2.58825,0.462 L0.462,2.58825 C-0.120082601,3.1733936 -0.120082601,4.1188564 0.462,4.704 L2.058,6.3 C2.63599902,6.87871134 3.57179308,6.88539558 4.158,6.315 L1.7655,3.9255 C1.69404449,3.85503006 1.6538173,3.75885887 1.6538173,3.6585 C1.6538173,3.55814113 1.69404449,3.46196994 1.7655,3.3915 Z M11.562,7.31925 L9.96525,5.7225 C9.3801064,5.1404174 8.4346436,5.1404174 7.8495,5.7225 L7.83825,5.73375 L10.23,8.1255 C10.3012236,8.19594143 10.341303,8.29195117 10.341303,8.392125 C10.341303,8.49229883 10.3012236,8.58830857 10.23,8.65875 L8.631,10.25775 C8.56055857,10.3289736 8.46454883,10.369053 8.364375,10.369053 C8.26420117,10.369053 8.16819143,10.3289736 8.09775,10.25775 L5.7075,7.8675 C5.13710442,8.45370692 5.14378866,9.38950098 5.7225,9.9675 L7.3185,11.5635 C7.9036436,12.1455826 8.8491064,12.1455826 9.43425,11.5635 L11.5605,9.43725 C12.1444911,8.85225876 12.1451619,7.90506784 11.562,7.31925 L11.562,7.31925 Z"></path>
+  </g>
+</svg>
diff --git a/res/img/svg/maximize-light-12.svg b/res/img/svg/maximize-light-12.svg
new file mode 100644
index 0000000000..abce41fab3
--- /dev/null
+++ b/res/img/svg/maximize-light-12.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg width="12px" height="12px" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="m1 2v8.0124c0 0.50319 0.50439 0.98758 0.98758 0.98758h7.9752c0.52853 0 1.0373-0.47685 1.0373-0.98758v-8c0-0.53457-0.48433-1.0124-0.98758-1.0124h-8.0248c-0.54378 0-0.98758 0.48961-0.98758 1zm9 8h-8v-8h8z" fill="#ededf0" fill-opacity=".8"/>
+ <path d="m4 7h1v1c0 1 0.5 1 1 1s1 0 1-1v-1h1c1 0 1-0.5 1-1s0-1-1-1h-1v-1c0-1-0.5-1-1-1s-1 0-1 1v1h-1c-1 0-1 0.5-1 1s0 1 1 1z" fill="#ededf0" fill-opacity=".8"/>
+</svg>
diff --git a/res/img/svg/open-in-new-light-12.svg b/res/img/svg/open-in-new-light-12.svg
new file mode 100644
index 0000000000..e48c1834e5
--- /dev/null
+++ b/res/img/svg/open-in-new-light-12.svg
@@ -0,0 +1,15 @@
+<!-- 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/. -->
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 12 12"
+   height="12"
+   width="12">
+  <path
+     d="M 3.8590613,1.0001427 H 3.144796 A 2.142796,2.142796 0 0 0 1.002,3.1429387 V 8.857061 a 2.142796,2.142796 0 0 0 2.142796,2.142796 H 8.858919 A 2.142796,2.142796 0 0 0 11.001715,8.857061 V 8.142796 a 0.7142655,0.7142655 0 0 0 -1.428531,0 V 8.857061 A 0.71426533,0.71426533 0 0 1 8.858919,9.571327 H 3.144796 A 0.71426533,0.71426533 0 0 1 2.4305307,8.857061 V 3.1429387 A 0.71426533,0.71426533 0 0 1 3.144796,2.4286734 h 0.7142653 a 0.71426535,0.71426535 0 1 0 0,-1.4285307 z"
+     fill="rgba(237, 237, 240, .8)" />
+  <path
+     d="M 10.955287,1.4415587 A 0.71426533,0.71426533 0 0 0 10.29602,1.0001427 H 6.7246938 a 0.71426535,0.71426535 0 1 0 0,1.4285307 H 8.571784 L 6.2197082,4.7807491 A 0.71441004,0.71441004 0 1 0 7.2303936,5.7907203 L 9.582469,3.4386445 v 1.8470902 a 0.7142655,0.7142655 0 1 0 1.428531,0 V 1.714408 A 0.71426533,0.71426533 0 0 0 10.956,1.4415587 Z"
+     fill="rgba(237, 237, 240, .8)" />
+</svg>
diff --git a/res/img/svg/share-light-12.svg b/res/img/svg/share-light-12.svg
new file mode 100644
index 0000000000..732aff191c
--- /dev/null
+++ b/res/img/svg/share-light-12.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g transform="translate(1.000000, 0.000000)" fill="rgba(237, 237, 240, .8)" fill-rule="nonzero">
+    <path d="M8.55146332,3.2205 L5.55146332,0.2205 C5.48126552,0.150583611 5.3979106,0.0952685711 5.30621332,0.05775 C5.24656653,0.037424408 5.1845621,0.0248218816 5.12171332,0.02025 C5.08875039,0.0110647866 5.05516123,0.00429682043 5.02121332,0 C4.98726542,0.00429682043 4.95367625,0.0110647866 4.92071332,0.02025 C4.85786455,0.0248218816 4.79586012,0.037424408 4.73621332,0.05775 C4.64360119,0.0964284695 4.55969418,0.153301612 4.48946332,0.225 L1.48946332,3.225 C1.22507669,3.52241284 1.23899562,3.97453744 1.5211763,4.25512388 C1.80335699,4.53571032 2.25555318,4.54706743 2.55146332,4.281 L4.27121332,2.56125 L4.27121332,8.25 C4.27121332,8.66421356 4.60699976,9 5.02121332,9 C5.43542689,9 5.77121332,8.66421356 5.77121332,8.25 L5.77121332,2.56125 L7.49096332,4.281 C7.78524749,4.56522916 8.25302691,4.56116428 8.54232726,4.27186393 C8.8316276,3.98256358 8.83569248,3.51478417 8.55146332,3.2205 Z"></path>
+    <path d="M9.25,6.75 C8.83578644,6.75 8.5,7.08578644 8.5,7.5 L8.5,9.75 C8.5,10.1642136 8.16421356,10.5 7.75,10.5 L2.25,10.5 C1.83578644,10.5 1.5,10.1642136 1.5,9.75 L1.5,7.5 C1.5,7.08578644 1.16421356,6.75 0.75,6.75 C0.335786438,6.75 0,7.08578644 0,7.5 L0,9.75 C0,10.9926407 1.00735931,12 2.25,12 L7.75,12 C8.99264069,12 10,10.9926407 10,9.75 L10,7.5 C10,7.08578644 9.66421356,6.75 9.25,6.75 Z"></path>
+  </g>
+</svg>
diff --git a/res/img/svg/undo-light-12.svg b/res/img/svg/undo-light-12.svg
new file mode 100644
index 0000000000..e433de1ce5
--- /dev/null
+++ b/res/img/svg/undo-light-12.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g transform="translate(0.000000, 2.000000)" fill="rgba(237, 237, 240, .8)" fill-rule="nonzero">
+    <path d="M11.1999997,7 C10.7581719,7 10.3999997,6.66434202 10.3999997,6.25028692 C10.4012388,4.47423183 9.96105957,2.41644287 7.60870361,1.75811768 C5.25634766,1.09979248 3.52069092,2.5 2.78090443,4.50602423 L4.81441042,4.50602423 C5.25623821,4.50602423 5.6144104,4.8416822 5.6144104,5.2557373 C5.6144104,5.6697924 5.25623821,6 4.81441042,6 L0.811210539,6 C0.369382752,6 0,5.6697924 0,5.2557373 L0,1.50717191 C0,1.09311681 0.369382752,0.757458836 0.811210539,0.757458836 C1.25303833,0.757458836 1.61121052,1.09311681 1.61121052,1.50717191 L1.61121052,3.3004856 C2.53070068,1.09130859 5.28404654,-0.566101074 8.1293335,0.304748535 C10.9746205,1.17559814 11.9989328,3.40267358 12,6.25028692 C12,6.66434202 11.6418275,7 11.1999997,7 Z"></path>
+  </g>
+</svg>
diff --git a/src/components/app/MenuButtons/Permalink.css b/src/components/app/MenuButtons/Permalink.css
index ba9697c1f2..963309aff3 100644
--- a/src/components/app/MenuButtons/Permalink.css
+++ b/src/components/app/MenuButtons/Permalink.css
@@ -4,8 +4,20 @@
 
 /* This background image builds on the generic styles defined in
  * MenuButtons/index.css when using an icon. */
+.menuButtonsPermalinkButtonButton {
+  --internal-icon: url(../../../../res/img/svg/link-dark-12.svg);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .menuButtonsPermalinkButtonButton {
+      --internal-icon: url(../../../../res/img/svg/link-light-12.svg);
+    }
+  }
+}
+
 .menuButtonsPermalinkButtonButton::before {
-  background-image: url(../../../../res/img/svg/link-dark-12.svg);
+  background-image: var(--internal-icon);
 }
 
 .menuButtonsPermalinkPanel .arrowPanelContent {
diff --git a/src/components/app/MenuButtons/Publish.css b/src/components/app/MenuButtons/Publish.css
index 8df6094722..b5a1caa7ad 100644
--- a/src/components/app/MenuButtons/Publish.css
+++ b/src/components/app/MenuButtons/Publish.css
@@ -4,34 +4,82 @@
 
 /* These two background images build on the generic styles defined in
  * MenuButtons/index.css when using an icon. */
+.menuButtonsShareButtonButton {
+  --internal-share-icon: url(../../../../res/img/svg/share-dark-12.svg);
+  --internal-uploading-icon: url(../../../../res/img/svg/sharing-animated-dark-12.svg);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .menuButtonsShareButtonButton {
+      --internal-share-icon: url(../../../../res/img/svg/share-light-12.svg);
+      --internal-uploading-icon: url(../../../../res/img/svg/sharing-animated-dark-12.svg);
+    }
+  }
+}
+
 .menuButtonsShareButtonButton::before {
-  background-image: url(../../../../res/img/svg/share-dark-12.svg);
+  background-image: var(--internal-share-icon);
 }
 
 .menuButtonsShareButtonButton-uploading::before {
-  background-image: url(../../../../res/img/svg/sharing-animated-dark-12.svg);
+  background-image: var(--internal-uploading-icon);
 }
 
 .menuButtonsShareButtonError {
-  background-color: var(--red-60);
-  color: white;
+  --internal-error-foreground-color: white;
+  --internal-error-background-color: var(--red-60);
+  --internal-error-hover-background-color: var(--red-70);
+  --internal-error-active-background-color: var(--red-80);
+  --internal-error-icon: url(../../../../res/img/svg/error.svg);
+
+  background-color: var(--internal-error-background-color);
+  color: var(--internal-error-foreground-color);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .menuButtonsShareButtonError {
+      --internal-error-foreground-color: var(--grey-20);
+    }
+  }
 }
 
 .menuButtonsShareButtonError:hover {
-  background-color: var(--red-70);
+  background-color: var(--internal-error-hover-background-color);
 }
 
 .buttonWithPanel.open > .menuButtonsShareButtonError,
 .menuButtonsShareButtonError:hover:active {
-  background-color: var(--red-80);
+  background-color: var(--internal-error-active-background-color);
 }
 
 .menuButtonsShareButtonError::before {
-  background-image: url(../../../../res/img/svg/error.svg);
+  background-image: var(--internal-error-icon);
 }
 
 .publishPanelPanel {
   --width: 510px;
+  --internal-info-icon: url(../../../../res/img/svg/info.svg);
+  --internal-button-disabled-hover-background-color: var(--grey-90-a10);
+  --internal-upload-icon: url(../../../../res/img/svg/upload.svg);
+  --internal-download-icon: url(../../../../res/img/svg/download.svg);
+  --internal-upload-percentage-foreground-color: var(--blue-60);
+  --internal-upload-bar-background-color: var(--grey-40);
+  --internal-upload-bar-inner-background-color: var(--blue-50);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .publishPanelPanel {
+      --internal-info-icon: url(../../../../res/img/svg/info-light.svg);
+      --internal-button-disabled-hover-background-color: var(--grey-10-a10);
+      --internal-download-icon: url(../../../../res/img/svg/download-light.svg);
+      --internal-upload-percentage-foreground-color: var(--blue-60);
+      --internal-upload-bar-background-color: var(--grey-40);
+      --internal-upload-bar-inner-background-color: var(--blue-50);
+    }
+  }
 }
 
 .publishPanelContent {
@@ -46,7 +94,7 @@
    * This background image is 44x44, so this puts it 16px left of the text. */
   padding-left: 60px;
   margin: 0 0 0 -60px;
-  background: url(../../../../res/img/svg/info.svg) left center no-repeat;
+  background: var(--internal-info-icon) left center no-repeat;
   line-height: 44px; /* This is the height of the background image */
 }
 
@@ -93,7 +141,7 @@
 
 .publishPanelButtonDisabled:hover,
 .publishPanelButtonDisabled:active:hover {
-  background-color: var(--grey-90-a10);
+  background-color: var(--internal-button-disabled-hover-background-color);
 }
 
 .publishPanelButtonsSvg {
@@ -107,13 +155,13 @@
 .publishPanelButtonsSvgUpload {
   width: 20px;
   height: 20px;
-  background: url(../../../../res/img/svg/upload.svg) center center no-repeat;
+  background: var(--internal-upload-icon) center center no-repeat;
 }
 
 .publishPanelButtonsSvgDownload {
   width: 20px;
   height: 20px;
-  background: url(../../../../res/img/svg/download.svg) center center no-repeat;
+  background: var(--internal-download-icon) center center no-repeat;
 }
 
 .menuButtonsDownloadSize {
@@ -133,14 +181,14 @@
 
 .publishPanelUploadPercentage {
   margin: 10px 0;
-  color: var(--blue-60);
+  color: var(--internal-upload-percentage-foreground-color);
 }
 
 .publishPanelUploadBar {
   overflow: hidden;
   height: 5px;
   border-radius: 2px;
-  background-color: var(--grey-40);
+  background-color: var(--internal-upload-bar-background-color);
 }
 
 .publishPanelUploadBarInner {
@@ -149,7 +197,7 @@
   height: 3px;
   border-radius: 0 2px 2px 0;
   animation: animate-stripes 1s linear infinite;
-  background-color: var(--blue-50);
+  background-color: var(--internal-upload-bar-inner-background-color);
   background-image: linear-gradient(
     135deg,
     transparent 20%,
diff --git a/src/components/app/MenuButtons/index.css b/src/components/app/MenuButtons/index.css
index 88f34acab1..98a469e63f 100644
--- a/src/components/app/MenuButtons/index.css
+++ b/src/components/app/MenuButtons/index.css
@@ -6,6 +6,16 @@
  * This overrides most browser styles, for both links and buttons. */
 /* stylelint-disable order/properties-order */
 .menuButtonsButton {
+  --internal-hover-background-color: rgb(0 0 0 / 0.1);
+  --internal-active-background-color: rgb(0 0 0 / 0.2);
+  --internal-open-in-new-icon: url(../../../../res/img/svg/open-in-new-12.svg);
+  --internal-info-icon: url(../../../../res/img/svg/info-12.svg);
+  --internal-revert-icon: url(../../../../res/img/svg/undo-dark-12.svg);
+  --internal-full-view-icon: url(../../../../res/img/svg/maximize-dark-12.svg);
+  --internal-upload-foreground-color: var(--grey-50);
+  --internal-upload-border-color: rgb(0 0 0 / 0.05);
+  --internal-upload-icon: url(../../../../res/img/svg/cloud-dark-12.svg);
+
   position: relative; /* This allows to absolutely position its children */
   display: flex;
   height: 100%;
@@ -27,13 +37,29 @@
 }
 /* stylelint-enable order/properties-order */
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .menuButtonsButton {
+      --internal-hover-background-color: rgb(255 255 255 / 0.1);
+      --internal-active-background-color: rgb(255 255 255 / 0.2);
+      --internal-open-in-new-icon: url(../../../../res/img/svg/open-in-new-light-12.svg);
+      --internal-info-icon: url(../../../../res/img/svg/info-light-12.svg);
+      --internal-revert-icon: url(../../../../res/img/svg/undo-light-12.svg);
+      --internal-full-view-icon: url(../../../../res/img/svg/maximize-light-12.svg);
+      --internal-upload-foreground-color: var(--grey-50);
+      --internal-upload-border-color: rgb(255 255 255 / 0.05);
+      --internal-upload-icon: url(../../../../res/img/svg/cloud-light-12.svg);
+    }
+  }
+}
+
 .menuButtonsButton:hover {
-  background-color: rgb(0 0 0 / 0.1);
+  background-color: var(--internal-hover-background-color);
 }
 
 .buttonWithPanel.open > .menuButtonsButton,
 .menuButtonsButton:hover:active {
-  background-color: rgb(0 0 0 / 0.2);
+  background-color: var(--internal-active-background-color);
 }
 
 /* Use this class if a button has an icon */
@@ -69,7 +95,7 @@
   top: 4px;
   width: 1px;
   height: calc(100% - 8px);
-  background: var(--grey-30);
+  background: var(--base-border-color);
   content: '';
 }
 
@@ -92,34 +118,33 @@
   width: 12px;
   height: 12px;
   padding-left: 4px;
-  background: url(../../../../res/img/svg/open-in-new-12.svg) no-repeat right /
-    12px;
+  background: var(--internal-open-in-new-icon) no-repeat right / 12px;
 }
 
 /* These classes define respective states for the metainfo button. They change
  * the icon whose generic styles are defined above. */
 .menuButtonsMetaInfoButtonButton::before {
-  background-image: url(../../../../res/img/svg/info-12.svg);
+  background-image: var(--internal-info-icon);
 }
 
 /* This is the revert button, appearing after publishing a profile. */
 .menuButtonsRevertButton::before {
-  background-image: url(../../../../res/img/svg/undo-dark-12.svg);
+  background-image: var(--internal-revert-icon);
 }
 
 .menuButtonsRevertToFullView::before {
-  background-image: url(../../../../res/img/svg/maximize-dark-12.svg);
+  background-image: var(--internal-full-view-icon);
 }
 
 .profileInfoUploadedActions {
   padding: 8px 0 8px 40px; /* The 40px padding leaves the room for the cloud image */
-  border-bottom: 1px solid rgb(0 0 0 / 0.05);
+  border-bottom: 1px solid var(--internal-upload-border-color);
   font-size: 13px;
 }
 
 .profileInfoUploadedLabel {
   padding-right: 8px;
-  color: var(--grey-50);
+  color: var(--internal-upload-foreground-color);
 }
 
 .profileInfoUploadedDate {
@@ -135,8 +160,7 @@
   display: block;
   width: 32px;
   height: 32px;
-  background: url(../../../../res/img/svg/cloud-dark-12.svg) no-repeat left /
-    32px;
+  background: var(--internal-upload-icon) no-repeat left / 32px;
   content: '';
   opacity: 0.5;
 }
diff --git a/src/components/app/ProfileName.css b/src/components/app/ProfileName.css
index 4a34f40ec6..35fe45e284 100644
--- a/src/components/app/ProfileName.css
+++ b/src/components/app/ProfileName.css
@@ -3,18 +3,30 @@
  * file, you can obtain one at http://mozilla.org/mpl/2.0/. */
 
 .profileNameInput {
+  --internal-foreground-color: var(--grey-60);
+
   height: 17px;
   padding: 0 6px;
   border: none;
   border-radius: 1px;
   margin: 4px;
-  color: var(--grey-60);
+  color: var(--internal-foreground-color);
   font: inherit;
   font-weight: 700;
   line-height: 17px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .profileNameInput {
+      --internal-foreground-color: var(--base-foreground-color);
+    }
+  }
+}
+
 .profileNameButton {
+  --internal-icon: url(../../../res/img/svg/edit-name-profiler.svg);
+
   overflow: hidden;
   min-width: 80px;
   padding: 0 9px;
@@ -24,16 +36,15 @@
   white-space: nowrap;
 }
 
-.profileNameButton::before {
-  flex-shrink: 0;
-  background-image: url(../../../res/img/svg/edit-name-profiler.svg);
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .profileNameButton {
+      --internal-icon: url(../../../res/img/svg/edit-name-profiler-light.svg);
+    }
+  }
 }
 
-/* Using the style for links rather than for normal inputs, because we don't
- * want to trigger a border that would move things around. */
-.profileNameInput:focus-visible {
-  box-shadow:
-    0 0 0 2px var(--blue-50),
-    0 0 0 4px var(--blue-50-a30);
-  outline: 0;
+.profileNameButton::before {
+  flex-shrink: 0;
+  background-image: var(--internal-icon);
 }
diff --git a/src/components/app/ProfileName.tsx b/src/components/app/ProfileName.tsx
index 12e78e7df9..2b6e6e235c 100644
--- a/src/components/app/ProfileName.tsx
+++ b/src/components/app/ProfileName.tsx
@@ -144,7 +144,7 @@ class ProfileNameImpl extends React.PureComponent<Props, State> {
             // Make sure and use the profile name and focus generation to support the
             // back button invalidating the state
             key={key}
-            className="profileNameInput"
+            className="profileNameInput photon-input"
             style={{
               display: isFocused ? undefined : 'none',
             }}
diff --git a/src/components/app/ProfileViewer.css b/src/components/app/ProfileViewer.css
index e59a7ccdca..f78f752d8b 100644
--- a/src/components/app/ProfileViewer.css
+++ b/src/components/app/ProfileViewer.css
@@ -35,13 +35,23 @@
 }
 
 .profileViewerWrapper {
+  --internal-background-color: var(--grey-40);
+
   display: flex;
   min-width: 0;
   flex: 1;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .profileViewerWrapper {
+      --internal-background-color: var(--ink-70);
+    }
+  }
+}
+
 .profileViewerWrapperBackground {
-  background-color: var(--grey-40);
+  background-color: var(--internal-background-color);
 }
 
 .profileViewer {
@@ -51,7 +61,7 @@
   flex-flow: column nowrap;
   animation-duration: 200ms;
   animation-name: profileViewerFadeIn;
-  background-color: #fff;
+  background-color: var(--base-background-color);
 }
 
 .profileViewerFadeOut {
@@ -68,6 +78,11 @@
 }
 
 .profileViewerZipButton {
+  --internal-background-color: var(--green-50);
+  --internal-border-color: var(--green-60);
+  --internal-icon: url(../../../res/img/svg/back-arrow.svg);
+  --internal-hover-border-color: #000;
+
   /* Position */
   width: 18px;
   height: 18px;
@@ -75,18 +90,29 @@
   /* Box */
   flex: none;
   padding: 0;
-  border: 1px solid var(--green-60);
+  border: 1px solid var(--internal-border-color);
   border-radius: 3px;
   margin: 3px 0 3px 3px;
 
   /* Other */
-  background: var(--green-50) url(../../../res/img/svg/back-arrow.svg) center
+  background: var(--internal-background-color) var(--internal-icon) center
     center no-repeat;
-  color: #000;
+  color: var(--base-foreground-color);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .profileViewerZipButton {
+      --internal-background-color: var(--ink-50);
+      --internal-border-color: var(--ink-60);
+      --internal-icon: url(../../../res/img/svg/back-arrow-light.svg);
+      --internal-hover-border-color: var(--grey-20);
+    }
+  }
 }
 
 .profileViewerZipButton:hover {
-  border-color: #000;
+  border-color: var(--profile-viewer-zip-hover-border-color);
 }
 
 .profileViewerSplitter {
@@ -110,9 +136,10 @@
   flex: none;
   flex-flow: row nowrap;
   padding: 0;
-  border-bottom: 1px solid var(--grey-30);
+  border-bottom: 1px solid var(--base-border-color);
   margin: 0;
-  background: var(--grey-10);
+  background: var(--base-background-color);
+  color: var(--base-foreground-color);
 }
 
 .profileViewerSpacer {
diff --git a/src/components/shared/ButtonWithPanel/ArrowPanel.css b/src/components/shared/ButtonWithPanel/ArrowPanel.css
index d7d6e8abdf..5a9d47a606 100644
--- a/src/components/shared/ButtonWithPanel/ArrowPanel.css
+++ b/src/components/shared/ButtonWithPanel/ArrowPanel.css
@@ -14,23 +14,36 @@
   --internal-offset-from-top: 15px;
   --internal-width: var(--width, initial);
   --internal-button-height: 30px;
+  --internal-background-color: hsl(0deg 0% 97%);
+  --internal-border-color: rgb(0 0 0 / 0.25);
+  --internal-shadow-color: rgb(0 0 0 / 0.35);
 
   position: absolute;
   top: var(--internal-offset-from-top);
   right: calc(var(--internal-offset-from-right) * -1);
   min-width: var(--internal-width);
-  border: 0.5px solid rgb(0 0 0 / 0.25);
+  border: 0.5px solid var(--internal-border-color);
   border-radius: 5px;
-  background: hsl(0deg 0% 97%);
+  background: var(--internal-background-color);
   background-clip: padding-box;
-  box-shadow: 0 8px 12px rgb(0 0 0 / 0.35);
-  color: black;
+  box-shadow: 0 8px 12px var(--internal-shadow-color);
+  color: var(--base-foreground-color);
   line-height: 1.3;
   text-align: left;
   transform-origin: calc(100% - var(--internal-offset-from-right))
     calc(var(--internal-offset-from-top) * -1);
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .arrowPanel {
+      --internal-background-color: var(--ink-70);
+      --internal-border-color: var(--grey-60);
+      --internal-shadow-color: rgb(0 0 0 / 0.35);
+    }
+  }
+}
+
 .arrowPanel:not(.open) {
   opacity: 0;
   pointer-events: none;
@@ -83,8 +96,8 @@
   display: block;
   width: calc(1.42 * var(--internal-offset-from-top));
   height: calc(1.42 * var(--internal-offset-from-top));
-  border: 0.5px solid rgb(0 0 0 / 0.25);
-  background: hsl(0deg 0% 97%);
+  border: 0.5px solid var(--internal-border-color);
+  background: var(--internal-background-color);
   background-clip: padding-box;
   content: '';
   transform: rotate(45deg);

From b88d857c458a6e58d60d98c4dfbe64e1836b10f4 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 23:19:33 +0900
Subject: [PATCH 07/33] Apply dark mode to Timeline components

---
 res/css/global.css                            | 10 +++
 res/img/svg/zoom-icon-light.svg               | 12 ++++
 .../timeline/EmptyThreadIndicator.css         |  5 +-
 .../timeline/OverflowEdgeIndicator.css        | 18 +++--
 src/components/timeline/Ruler.css             | 22 +++++--
 src/components/timeline/Selection.css         | 56 ++++++++++++----
 src/components/timeline/Track.css             | 48 ++++++++++----
 src/components/timeline/TrackEventDelay.css   |  6 +-
 src/components/timeline/TrackMemory.css       |  2 +-
 src/components/timeline/TrackProcessCPU.css   |  6 +-
 src/components/timeline/TrackScreenshots.css  | 20 ++++--
 src/components/timeline/TrackThread.css       |  2 +-
 .../timeline/TrackVisualProgress.css          |  2 +-
 .../timeline/VerticalIndicators.css           | 20 +++++-
 src/components/timeline/index.css             | 65 +++++++++++++++----
 15 files changed, 235 insertions(+), 59 deletions(-)
 create mode 100755 res/img/svg/zoom-icon-light.svg

diff --git a/res/css/global.css b/res/css/global.css
index 599608c914..9d0e5d0774 100644
--- a/res/css/global.css
+++ b/res/css/global.css
@@ -6,6 +6,7 @@
   --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);
@@ -31,6 +32,8 @@
   --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);
 
   background-color: var(--base-background-color);
   color: var(--base-foreground-color);
@@ -42,6 +45,7 @@
       --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);
@@ -70,6 +74,12 @@
       --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);
     }
   }
 }
diff --git a/res/img/svg/zoom-icon-light.svg b/res/img/svg/zoom-icon-light.svg
new file mode 100755
index 0000000000..28d0f27223
--- /dev/null
+++ b/res/img/svg/zoom-icon-light.svg
@@ -0,0 +1,12 @@
+<!-- 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/. -->
+<svg  xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="20" height="20" viewBox="0 0 80 80">
+  <g stroke="#ededf0" stroke-width="5" fill="none">
+    <circle cx="33" cy="33" r="20"/>
+    <line x1="23" x2="43" y1="33" y2="33"/>
+    <line y1="23" y2="43" x1="33" x2="33"/>
+    <line x1="49" y1="49" x2="65" y2="65" stroke-width="10" stroke-linecap="round"/>
+  </g></svg>
diff --git a/src/components/timeline/EmptyThreadIndicator.css b/src/components/timeline/EmptyThreadIndicator.css
index 3289a0da66..2dea1bbfe3 100644
--- a/src/components/timeline/EmptyThreadIndicator.css
+++ b/src/components/timeline/EmptyThreadIndicator.css
@@ -8,6 +8,7 @@
 
   /* The following color is based off grey-20, but uses opacity instead. */
   --shutdown-startup-color: rgb(0 0 50 / 0.07);
+  --shutdown-startup-shadow-color: rgb(0 0 0 / 0.05);
 }
 
 .timelineEmptyThreadIndicatorBlock {
@@ -22,13 +23,13 @@
 .timelineEmptyThreadIndicatorStartup {
   border-right: solid 1px var(--grey-30);
   background-color: var(--shutdown-startup-color);
-  box-shadow: inset -4px 0 4px rgb(0 0 0 / 0.05);
+  box-shadow: inset -4px 0 4px var(--shutdown-startup-shadow-color);
 }
 
 .timelineEmptyThreadIndicatorShutdown {
   border-left: solid 1px var(--grey-30);
   background-color: var(--shutdown-startup-color);
-  box-shadow: inset 4px 0 4px rgb(0 0 0 / 0.05);
+  box-shadow: inset 4px 0 4px var(--shutdown-startup-shadow-color);
 }
 
 .timelineEmptyThreadIndicatorEmptyBuffer {
diff --git a/src/components/timeline/OverflowEdgeIndicator.css b/src/components/timeline/OverflowEdgeIndicator.css
index e769a24c66..5fb3a18dd4 100644
--- a/src/components/timeline/OverflowEdgeIndicator.css
+++ b/src/components/timeline/OverflowEdgeIndicator.css
@@ -11,6 +11,8 @@
 }
 
 .overflowEdgeIndicatorEdge {
+  --internal-shadow-color: rgb(0 0 0 / 0.4);
+
   position: absolute;
   z-index: 3;
   opacity: 0;
@@ -20,6 +22,14 @@
   visibility: hidden;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .overflowEdgeIndicatorEdge {
+      --internal-shadow-color: rgb(0 0 0 / 0.5);
+    }
+  }
+}
+
 .overflowEdgeIndicatorEdge.topEdge,
 .overflowEdgeIndicatorEdge.leftEdge,
 .overflowEdgeIndicatorEdge.bottomEdge {
@@ -57,7 +67,7 @@
 .overflowEdgeIndicatorEdge.topEdge {
   background: radial-gradient(
     ellipse at center top,
-    rgb(0 0 0 / 0.4),
+    var(--internal-shadow-color),
     transparent 60%
   );
 }
@@ -65,7 +75,7 @@
 .overflowEdgeIndicatorEdge.rightEdge {
   background: radial-gradient(
     ellipse at right center,
-    rgb(0 0 0 / 0.4),
+    var(--internal-shadow-color),
     transparent 60%
   );
 }
@@ -73,7 +83,7 @@
 .overflowEdgeIndicatorEdge.bottomEdge {
   background: radial-gradient(
     ellipse at center bottom,
-    rgb(0 0 0 / 0.4),
+    var(--internal-shadow-color),
     transparent 60%
   );
 }
@@ -81,7 +91,7 @@
 .overflowEdgeIndicatorEdge.leftEdge {
   background: radial-gradient(
     ellipse at left center,
-    rgb(0 0 0 / 0.4),
+    var(--internal-shadow-color),
     transparent 60%
   );
 }
diff --git a/src/components/timeline/Ruler.css b/src/components/timeline/Ruler.css
index a963c395e5..3055e9ab21 100644
--- a/src/components/timeline/Ruler.css
+++ b/src/components/timeline/Ruler.css
@@ -3,9 +3,23 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .timelineRuler {
+  --internal-foreground-color: var(--grey-50);
+  --internal-notch-color1: var(--grey-30);
+  --internal-notch-color2: #d7d7db66; /* --grey-30 + 66 */
+
   height: var(--timeline-ruler-height);
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .timelineRuler {
+      --internal-foreground-color: var(--grey-40);
+      --internal-notch-color1: var(--grey-40);
+      --internal-notch-color2: #b1b1b366; /* --grey-50 + 66 */
+    }
+  }
+}
+
 .timelineRulerContainer {
   position: absolute;
   top: 0;
@@ -16,7 +30,7 @@
   height: 20px;
   padding: 0;
   margin: 0;
-  color: var(--grey-50);
+  color: var(--internal-foreground-color);
   cursor: default;
   font-size: 9px;
   line-height: 20px;
@@ -37,9 +51,9 @@
   margin-left: -1px;
   background: linear-gradient(
     transparent,
-    var(--grey-30) 19px,
-    var(--grey-30) 20px,
-    #d7d7db66 0
+    var(--internal-notch-color1) 19px,
+    var(--internal-notch-color1) 20px,
+    var(--internal-notch-color2) 0
   );
   text-align: right;
   white-space: nowrap;
diff --git a/src/components/timeline/Selection.css b/src/components/timeline/Selection.css
index 48de90f2f4..97ce284427 100644
--- a/src/components/timeline/Selection.css
+++ b/src/components/timeline/Selection.css
@@ -13,6 +13,16 @@
   --grippy-range-border-color: white;
   --grippy-range-hover-background-color: #888;
   --selection-outbound-opacity: 0.1;
+  --internal-hover-line-color: rgb(0 0 0 / 0.4);
+  --internal-overlay-time-foreground-color: #fff;
+  --internal-overlay-time-background-color: rgb(153 153 153);
+  --internal-dimmed-color: rgb(12 12 13 / var(--selection-outbound-opacity));
+  --internal-range-background-color: var(--blue-50);
+  --internal-zoom-background-color: rgb(255 255 255 / 0.6);
+  --internal-zoom-border-color: rgb(0 0 0 / 0.2);
+  --internal-zoom-icon: url(../../../res/img/svg/zoom-icon.svg);
+  --internal-zoom-hover-background-color: rgb(255 255 255 / 0.9);
+  --internal-zoom-active-background-color: rgb(160 160 160 / 0.6);
 
   position: relative;
   display: flex;
@@ -23,13 +33,35 @@
   -moz-user-focus: ignore;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .timelineSelection {
+      --grippy-range-background-color: var(--ink-40);
+      --grippy-range-border-color: var(--grey-40);
+      --grippy-range-hover-background-color: var(--ink-60);
+      --internal-hover-line-color: rgb(237 237 240 / 0.4);
+      --internal-overlay-time-foreground-color: var(--grey-20);
+      --internal-overlay-time-background-color: var(--ink-70);
+      --internal-dimmed-color: rgb(
+        237 237 240 / var(--selection-outbound-opacity)
+      );
+      --internal-range-background-color: var(--blue-60);
+      --internal-zoom-background-color: rgb(54 57 89 / 0.6);
+      --internal-zoom-border-color: rgb(237 237 240 / 0.5);
+      --internal-zoom-icon: url(../../../res/img/svg/zoom-icon-light.svg);
+      --internal-zoom-hover-background-color: rgb(54 57 89 / 0.9);
+      --internal-zoom-active-background-color: rgb(89 94 145 / 0.6);
+    }
+  }
+}
+
 .timelineSelectionHoverLine {
   position: absolute;
   z-index: 1;
   top: 0;
   bottom: 0;
   width: 1px;
-  background: rgb(0 0 0 / 0.4);
+  background: var(--internal-hover-line-color);
   pointer-events: none;
 }
 
@@ -39,8 +71,8 @@
   padding: 3.25px 8px;
   border-radius: 0 4px 4px 0;
   margin-left: 1px;
-  background-color: rgb(153 153 153);
-  color: #fff;
+  background-color: var(--internal-overlay-time-background-color);
+  color: var(--internal-overlay-time-foreground-color);
 }
 
 .timelineSelectionOverlay {
@@ -58,7 +90,7 @@
 .timelineSelectionDimmerBefore,
 .timelineSelectionDimmerAfter {
   flex-shrink: 0;
-  background: rgb(12 12 13 / var(--selection-outbound-opacity));
+  background: var(--internal-dimmed-color);
   forced-color-adjust: none;
 }
 
@@ -130,9 +162,9 @@
   top: 20px;
   padding: 4px 8px;
   border-radius: 0 0 4px 4px;
-  background-color: var(--blue-50);
-  box-shadow: 0 2px 2px rgb(0 0 0 / 0.2);
-  color: #fff;
+  background-color: var(--internal-range-background-color);
+  box-shadow: 0 2px 2px var(--base-shadow-color);
+  color: var(--base-foreground-color);
   opacity: 1;
   pointer-events: none;
   transition: opacity 200ms;
@@ -147,10 +179,10 @@
   width: 30px;
   height: 30px;
   box-sizing: border-box;
-  border: 1px solid rgb(0 0 0 / 0.2);
+  border: 1px solid var(--internal-zoom-border-color);
   border-radius: 100%;
   margin: -15px;
-  background-color: rgb(255 255 255 / 0.6);
+  background-color: var(--internal-zoom-background-color);
   opacity: 0.5;
   pointer-events: auto;
   transition: opacity 200ms ease-in-out;
@@ -160,7 +192,7 @@
 .timelineSelectionOverlayZoomButton::before {
   position: absolute;
   display: grid;
-  content: url(../../../res/img/svg/zoom-icon.svg);
+  content: var(--internal-zoom-icon);
   inset: 0;
   place-content: center;
 }
@@ -172,7 +204,7 @@
 }
 
 .timelineSelectionOverlayZoomButton:hover {
-  background-color: rgb(255 255 255 / 0.9);
+  background-color: var(--internal-zoom-hover-background-color);
 }
 
 .timelineSelectionOverlayZoomButton:active,
@@ -181,7 +213,7 @@
 }
 
 .timelineSelectionOverlayZoomButton:active:hover {
-  background-color: rgb(160 160 160 / 0.6);
+  background-color: var(--internal-zoom-active-background-color);
 }
 
 @media (forced-colors: active) {
diff --git a/src/components/timeline/Track.css b/src/components/timeline/Track.css
index 7bba80b5d7..8927752bcb 100644
--- a/src/components/timeline/Track.css
+++ b/src/components/timeline/Track.css
@@ -7,10 +7,30 @@
  * into one file, as it is mostly shared style.
  */
 .timelineTrack {
+  --internal-row-selected-border-color: var(--blue-60);
+  --internal-label-details-foreground-color: var(--grey-90-a60);
+  --internal-close-icon: url(../../../res/img/svg/close-dark.svg);
+  --internal-close-hover-background-color: rgb(0 0 0 / 0.15);
+  --internal-close-active-background-color: rgb(0 0 0 / 0.3);
+  --internal-local-background-color: var(--grey-20);
+
   padding: 0;
   margin: 0;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .timelineTrack {
+      --internal-row-selected-border-color: var(--blue-60);
+      --internal-label-details-foreground-color: var(--grey-40);
+      --internal-close-icon: url(../../../res/img/svg/close-light.svg);
+      --internal-close-hover-background-color: rgb(255 255 255 / 0.15);
+      --internal-close-active-background-color: rgb(255 255 255 / 0.3);
+      --internal-local-background-color: var(--ink-80);
+    }
+  }
+}
+
 .timelineTrackLocal {
   --local-track-margin: 15px;
 
@@ -25,13 +45,14 @@
 
   display: flex;
   flex-flow: row nowrap;
-  background-color: #fff;
+  background-color: var(--base-background-color);
+  color: var(--base-foreground-color);
 }
 
 .timelineTrackRow.selected {
   position: relative;
   padding-left: 0;
-  background-color: #edf6ff;
+  background-color: var(--selected-track-background-color);
 }
 
 /* Showing a blue border on the left side of the track row to indicate that
@@ -42,13 +63,13 @@
   bottom: 0;
   left: 0;
   width: var(--selected-left-border-width);
-  background: var(--blue-60);
+  background: var(--internal-row-selected-border-color);
   content: '';
   pointer-events: none;
 }
 
 .timelineTrackLocalRow {
-  border-left: 1px solid var(--grey-30);
+  border-left: 1px solid var(--base-border-color);
 }
 
 .timelineTrackLocalRow.selected {
@@ -76,8 +97,8 @@
   box-sizing: border-box;
   flex-flow: row nowrap;
   align-items: center;
-  border-top: 1px solid var(--grey-30);
-  border-right: 1px solid var(--grey-30);
+  border-top: 1px solid var(--base-border-color);
+  border-right: 1px solid var(--base-border-color);
   cursor: default;
 }
 
@@ -90,6 +111,7 @@
   padding: 0 0 0 10px;
   border: none;
   background: none;
+  color: var(--internal-name-foreground-color);
   font: inherit;
   text-align: left;
   text-overflow: ellipsis;
@@ -97,7 +119,7 @@
 }
 
 .timelineTrackNameButtonAdditionalDetails {
-  color: var(--grey-90-a60);
+  color: var(--internal-label-details-foreground-color);
   font-size: 10px;
 }
 
@@ -109,7 +131,7 @@
   padding: 1px;
   border: 0;
   border-radius: 2px;
-  background: url(../../../res/img/svg/close-dark.svg) no-repeat center;
+  background: var(--internal-close-icon) no-repeat center;
   background-origin: content-box;
   background-size: contain;
   color: transparent;
@@ -118,11 +140,11 @@
 }
 
 .timelineTrackCloseButton:hover {
-  background-color: rgb(0 0 0 / 0.15);
+  background-color: var(--internal-close-hover-background-color);
 }
 
 .timelineTrackCloseButton:active:hover {
-  background-color: rgb(0 0 0 / 0.3);
+  background-color: var(--internal-close-active-background-color);
 }
 
 .timelineTrackLabel:not(:hover) > .timelineTrackCloseButton {
@@ -134,13 +156,13 @@
   display: flex;
   flex: 1;
   flex-flow: column nowrap;
-  border-top: 1px solid var(--grey-30);
+  border-top: 1px solid var(--base-border-color);
 }
 
 .timelineTrackLocalTracks {
   position: relative;
   padding: 0;
-  background: var(--grey-20);
+  background: var(--internal-local-background-color);
   list-style: none;
 }
 
@@ -157,7 +179,7 @@
   left: -15px;
   width: calc(100% + 15px);
   height: 100%;
-  box-shadow: inset 0 1px 5px rgb(0 0 0 / 0.2);
+  box-shadow: inset 0 1px 5px var(--base-shadow-color);
   content: '';
   pointer-events: none;
 }
diff --git a/src/components/timeline/TrackEventDelay.css b/src/components/timeline/TrackEventDelay.css
index 498da075a8..5ab407a32b 100644
--- a/src/components/timeline/TrackEventDelay.css
+++ b/src/components/timeline/TrackEventDelay.css
@@ -15,13 +15,15 @@
 }
 
 .timelineTrackEventDelayGraphDot {
+  --internal-background-color: var(--orange-60);
+
   position: absolute;
   width: 6px;
   height: 6px;
   border-radius: 3px;
   margin-top: -3px;
   margin-left: -3px;
-  background-color: var(--orange-60);
+  background-color: var(--internal-background-color);
   pointer-events: none;
 }
 
@@ -32,6 +34,6 @@
 .timelineTrackEventDelayTooltipNumber {
   display: inline-block;
   min-width: 60px;
-  color: var(--grey-60);
+  color: var(--tooltip-number-foreground-color);
   font-weight: bold;
 }
diff --git a/src/components/timeline/TrackMemory.css b/src/components/timeline/TrackMemory.css
index 38fcf20e68..404b625b0c 100644
--- a/src/components/timeline/TrackMemory.css
+++ b/src/components/timeline/TrackMemory.css
@@ -31,7 +31,7 @@
 .timelineTrackMemoryTooltipNumber {
   display: inline-block;
   min-width: 60px;
-  color: var(--grey-60);
+  color: var(--tooltip-number-foreground-color);
   font-weight: bold;
 }
 
diff --git a/src/components/timeline/TrackProcessCPU.css b/src/components/timeline/TrackProcessCPU.css
index f834f41728..76f8c45d52 100644
--- a/src/components/timeline/TrackProcessCPU.css
+++ b/src/components/timeline/TrackProcessCPU.css
@@ -15,13 +15,15 @@
 }
 
 .timelineTrackProcessCPUGraphDot {
+  --internal-background-color: var(--grey-50);
+
   position: absolute;
   width: 6px;
   height: 6px;
   border-radius: 3px;
   margin-top: -3px;
   margin-left: -3px;
-  background-color: var(--grey-50);
+  background-color: var(--internal-background-color);
   pointer-events: none;
 }
 
@@ -32,6 +34,6 @@
 .timelineTrackProcessCPUTooltipNumber {
   display: inline-block;
   min-width: 60px;
-  color: var(--grey-60);
+  color: var(--tooltip-number-foreground-color);
   font-weight: bold;
 }
diff --git a/src/components/timeline/TrackScreenshots.css b/src/components/timeline/TrackScreenshots.css
index 268a918aca..3d00a0ba1e 100644
--- a/src/components/timeline/TrackScreenshots.css
+++ b/src/components/timeline/TrackScreenshots.css
@@ -3,9 +3,21 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .timelineTrackScreenshot {
+  --internal-backgrond-color: var(--grey-20);
+  --internal-img-backgrond-color: var(--grey-30);
+
   position: relative;
   overflow: hidden;
-  background: var(--grey-20);
+  background: var(--internal-backgrond-color);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .timelineTrackScreenshot {
+      --internal-backgrond-color: var(--ink-90);
+      --internal-img-backgrond-color: var(--ink-80);
+    }
+  }
 }
 
 .timelineTrackScreenshotImgContainer {
@@ -22,7 +34,7 @@
   right: 0;
   width: 1px;
   height: 100%;
-  background: var(--grey-30);
+  background: var(--internal-img-backgrond-color);
 
   /* Create a border on the right of the container */
   content: '';
@@ -37,7 +49,7 @@
 
 .timelineTrackScreenshotHoverImg {
   padding: 0.5px;
-  border: 0.5px solid rgb(0 0 0 / 0.2);
+  border: 0.5px solid var(--base-shadow-color);
   border-radius: 5px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
+  box-shadow: 0 2px 4px var(--base-shadow-color);
 }
diff --git a/src/components/timeline/TrackThread.css b/src/components/timeline/TrackThread.css
index c0e8351728..c25bd2d971 100644
--- a/src/components/timeline/TrackThread.css
+++ b/src/components/timeline/TrackThread.css
@@ -17,5 +17,5 @@
   width: 100%;
   height: var(--timeline-track-thread-blank-height);
   padding-left: 1px;
-  background-color: #fff;
+  background-color: var(--base-background-color);
 }
diff --git a/src/components/timeline/TrackVisualProgress.css b/src/components/timeline/TrackVisualProgress.css
index a666104e06..aa637d7fa6 100644
--- a/src/components/timeline/TrackVisualProgress.css
+++ b/src/components/timeline/TrackVisualProgress.css
@@ -32,6 +32,6 @@
 .timelineTrackVisualProgressTooltipNumber {
   display: inline-block;
   min-width: 60px;
-  color: var(--grey-60);
+  color: var(--tooltip-number-foreground-color);
   font-weight: bold;
 }
diff --git a/src/components/timeline/VerticalIndicators.css b/src/components/timeline/VerticalIndicators.css
index dae6436e92..1928843dec 100644
--- a/src/components/timeline/VerticalIndicators.css
+++ b/src/components/timeline/VerticalIndicators.css
@@ -33,24 +33,42 @@
   display: inline-block;
   width: 12px;
   height: 12px;
-  border: 1px solid var(--grey-30);
+  border: 1px solid var(--base-border-color);
   margin-bottom: -3px;
   background-color: var(--vertical-indicator-color);
 }
 
 .timelineVerticalIndicatorsDim {
+  --internal-foreground-color: var(--grey-50);
+
   color: var(--grey-50);
 }
 
 .timelineVerticalIndicatorsTime {
+  --internal-foreground-color: var(--grey-70);
+
   color: var(--grey-70);
   font-weight: bold;
 }
 
 .timelineVerticalIndicatorsUrl {
+  --internal-foreground-color: var(--grey-60);
+
   overflow: hidden;
   margin-top: 6px;
   color: var(--grey-60);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .timelineVerticalIndicatorsTime {
+      --internal-foreground-color: var(--grey-30);
+    }
+
+    .timelineVerticalIndicatorsUrl {
+      --internal-foreground-color: var(--grey-40);
+    }
+  }
+}
diff --git a/src/components/timeline/index.css b/src/components/timeline/index.css
index 17a4f3dbc3..4ce74f0a61 100644
--- a/src/components/timeline/index.css
+++ b/src/components/timeline/index.css
@@ -3,6 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .timelineOverflowEdgeIndicatorScrollbox {
+  --internal-background-stop1-color: #eee;
+  --internal-background-stop2-color: var(--grey-30);
+
   position: absolute;
 
   /* if the platform scrollbar ends up being larger than --vertical-scrollbar-reserved-width (which is unexpected), make sure there is no horizontal scrollbar */
@@ -14,33 +17,60 @@
   margin-left: calc(var(--thread-label-column-width) * -1);
   background: linear-gradient(
     to left,
-    white,
-    #eee calc(var(--vertical-scrollbar-reserved-width) - 1px),
-    var(--grey-30) 0,
-    var(--grey-30) var(--vertical-scrollbar-reserved-width),
+    var(--base-background-color),
+    var(--internal-background-stop1-color)
+      calc(var(--vertical-scrollbar-reserved-width) - 1px),
+    var(--internal-background-stop2-color) 0,
+    var(--internal-background-stop2-color)
+      var(--vertical-scrollbar-reserved-width),
     transparent 0
   );
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .timelineOverflowEdgeIndicatorScrollbox {
+      --internal-background-stop1-color: var(--ink-80);
+      --internal-background-stop2-color: var(--ink-70);
+    }
+  }
+}
+
 .timelineThreadList {
+  --internal-background-color: var(--grey-20);
+  --internal-shadow-color: var(--grey-30);
+
   width: calc(100vw - var(--vertical-scrollbar-reserved-width));
   padding: 0;
   margin: 0 0 0 calc(var(--thread-label-column-width) * -1);
-  background-color: var(--grey-20);
-  box-shadow: inset 0 1px var(--grey-30);
+  background-color: var(--internal-background-color);
+  box-shadow: inset 0 1px var(--internal-shadow-color);
   list-style: none;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .timelineThreadList {
+      --internal-background-color: var(--ink-80);
+      --internal-shadow-color: var(--ink-90);
+    }
+  }
+}
+
 .timelineSettingsHiddenTracks,
 .timelineSettingsHiddenTracksSpacer {
   width: var(--thread-label-column-width);
   box-sizing: border-box;
 
   /* Separator line between tracks menu button and timeline ruler */
-  border-right: 1px solid var(--grey-30);
+  border-right: 1px solid var(--base-border-color);
 }
 
 .timelineSettingsHiddenTracks {
+  --internal-hover-background-color: rgb(0 0 0 / 0.1);
+  --internal-active-background-color: rgb(0 0 0 / 0.2);
+  --internal-arrow-foreground-color: var(--grey-60);
+
   /* Make sure and override all rules that have to do with button defaults. */
   position: relative;
 
@@ -53,12 +83,22 @@
   text-align: left;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .timelineSettingsHiddenTracks {
+      --internal-hover-background-color: rgb(237 237 240 / 0.1);
+      --internal-active-background-color: rgb(237 237 240 / 0.2);
+      --internal-arrow-foreground-color: var(--grey-30);
+    }
+  }
+}
+
 .timelineSettingsHiddenTracks:hover {
-  background-color: rgb(0 0 0 / 0.1);
+  background-color: var(--internal-hover-background-color);
 }
 
 .timelineSettingsHiddenTracks:hover:active {
-  background-color: rgb(0 0 0 / 0.2);
+  background-color: var(--internal-active-background-color);
 }
 
 /* This is the dropdown arrow on the left of the button. */
@@ -73,7 +113,7 @@
   margin-top: 5px;
   margin-right: 5px;
   margin-left: 5px;
-  color: var(--grey-60);
+  color: var(--internal-arrow-foreground-color);
   content: '';
 
   /* Opt-out of forced colors so arrow is visible in High Contrast Mode */
@@ -97,13 +137,14 @@
    * creating a padding and a minus margin with the scrollbar width to make
    * this work. */
   padding-right: var(--vertical-scrollbar-reserved-width);
-  border-bottom: 1px solid var(--grey-30);
+  border-bottom: 1px solid var(--base-border-color);
   margin-right: calc(var(--vertical-scrollbar-reserved-width) * -1);
   margin-left: calc(var(--thread-label-column-width) * -1);
 
   /* This div needs to be apaque so that it can properly hide the hidden tracks
    * container border below */
-  background: white;
+  background: var(--base-background-color);
+  color: var(--base-foreground-color);
 }
 
 .tracksContainer {

From 792c16422e5d61fcde5042ff0e4decf7c2f67e5a Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 20:14:35 +0900
Subject: [PATCH 08/33] Apply dark mode to TabBar component

---
 res/img/svg/pane-collapse-light.svg     |  7 ++++++
 res/img/svg/pane-expand-light.svg       |  7 ++++++
 src/components/app/Details.css          | 31 +++++++++++++++++++++----
 src/components/app/DetailsContainer.css |  8 +++----
 src/components/app/TabBar.css           | 31 +++++++++++++++++++------
 5 files changed, 69 insertions(+), 15 deletions(-)
 create mode 100644 res/img/svg/pane-collapse-light.svg
 create mode 100644 res/img/svg/pane-expand-light.svg

diff --git a/res/img/svg/pane-collapse-light.svg b/res/img/svg/pane-collapse-light.svg
new file mode 100644
index 0000000000..0cd7d6ce55
--- /dev/null
+++ b/res/img/svg/pane-collapse-light.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#ededf0">
+  <path fill-opacity=".3" d="M12 3h2v10h-2V3zM5 9.9V6.1L8 8 5 9.9z"></path>
+  <path d="M14 2H2c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h12c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1zM2 13V3h9v10H2zm12 0h-2V3h2v10zM8.5 7.2l-3-1.9C4.6 4.7 4 5 4 6.1v3.8c0 1.1.6 1.4 1.5.8l3-1.9c1-.5 1-1 0-1.6zM5 9.9V6.1L8 8 5 9.9z"></path>
+</svg>
diff --git a/res/img/svg/pane-expand-light.svg b/res/img/svg/pane-expand-light.svg
new file mode 100644
index 0000000000..b1d594c494
--- /dev/null
+++ b/res/img/svg/pane-expand-light.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#ededf0">
+  <path fill-opacity=".3" d="M4 13H2V3h2v10zm7-6.9v3.8L8 8l3-1.9z"></path>
+  <path d="M2 14h12c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1H2c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1zM14 3v10H5V3h9zM2 3h2v10H2V3zm5.5 5.8l3 1.9c1 .6 1.5.3 1.5-.8V6.1c0-1.1-.6-1.4-1.5-.8l-3 1.9c-1 .5-1 1 0 1.6zM11 6.1v3.8L8 8l3-1.9z"></path>
+</svg>
diff --git a/src/components/app/Details.css b/src/components/app/Details.css
index e62d2ddd6b..9e00fbed1e 100644
--- a/src/components/app/Details.css
+++ b/src/components/app/Details.css
@@ -1,19 +1,42 @@
 .Details {
+  --internal-sidebar-collapse-icon: url(../../../res/img/svg/pane-collapse.svg);
+  --internal-sidebar-expand-icon: url(../../../res/img/svg/pane-expand.svg);
+
   display: flex;
   overflow: clip;
   flex: auto;
   flex-direction: column;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .Details {
+      --internal-sidebar-collapse-icon: url(../../../res/img/svg/pane-collapse-light.svg);
+      --internal-sidebar-expand-icon: url(../../../res/img/svg/pane-expand-light.svg);
+    }
+  }
+}
+
 /* contains the tabbar and, if present, the sidebar button */
 .Details-top-bar {
+  --internal-background-color: var(--grey-10);
+
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between; /* This pushes the sidebar button to the right */
-  border: solid var(--grey-30);
+  border: solid var(--base-border-color);
   border-width: 1px 0;
-  background: var(--grey-10);
+  background: var(--internal-background-color);
+  color: var(--base-foreground-color);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .Details-top-bar {
+      --internal-background-color: var(--base-background-color);
+    }
+  }
 }
 
 .sidebar-open-close-button {
@@ -26,9 +49,9 @@
 }
 
 .sidebar-open-close-button-isopen {
-  background-image: url(../../../res/img/svg/pane-collapse.svg);
+  background-image: var(--internal-sidebar-collapse-icon);
 }
 
 .sidebar-open-close-button-isclosed {
-  background-image: url(../../../res/img/svg/pane-expand.svg);
+  background-image: var(--internal-sidebar-expand-icon);
 }
diff --git a/src/components/app/DetailsContainer.css b/src/components/app/DetailsContainer.css
index f46c2679eb..91c2ff47d7 100644
--- a/src/components/app/DetailsContainer.css
+++ b/src/components/app/DetailsContainer.css
@@ -16,11 +16,11 @@
 }
 
 .DetailsContainer .layout-splitter {
-  border-top: 1px solid var(--grey-30);
-  border-left: 1px solid var(--grey-30);
-  background: var(--grey-10); /* Same background as sidebars */
+  border-top: 1px solid var(--panel-border-color);
+  border-left: 1px solid var(--panel-border-color);
+  background: var(--panel-background-color);
 }
 
 .DetailsContainer .layout-splitter:hover {
-  background: var(--grey-30); /* same as the border above */
+  background: var(--panel-background-color);
 }
diff --git a/src/components/app/TabBar.css b/src/components/app/TabBar.css
index 06fd4bab6c..3a73ca4932 100644
--- a/src/components/app/TabBar.css
+++ b/src/components/app/TabBar.css
@@ -11,11 +11,17 @@
   border: none;
   margin: 0;
   background: none;
+  color: var(--base-foreground-color);
   font: inherit;
   text-overflow: ellipsis;
 }
 
 .tabBarTabWrapper {
+  --internal-selected-highlight-color: var(--blue-50);
+  --internal-selected-foreground-color: var(--blue-60);
+  --internal-hover-highlight-color: var(--grey-40);
+  --internal-hover-background-color: var(--grey-20);
+
   display: flex;
   overflow: auto hidden;
   min-width: 0; /* This makes the tab container actually shrinkable below min-content */
@@ -27,6 +33,17 @@
   scrollbar-width: none;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .tabBarTabWrapper {
+      --internal-selected-highlight-color: var(--blue-50);
+      --internal-selected-foreground-color: var(--blue-60);
+      --internal-hover-highlight-color: var(--ink-70);
+      --internal-hover-background-color: var(--ink-90);
+    }
+  }
+}
+
 .tabBarTab {
   position: relative;
   min-width: 8em;
@@ -62,26 +79,26 @@
 }
 
 .tabBarTab.selected::before {
-  background-color: var(--blue-50);
+  background-color: var(--internal-selected-highlight-color);
   transition: none; /* Switch the background color instantly when a tab is selected */
 }
 
 .tabBarTab:not(.selected):hover {
-  border-color: var(--grey-20);
-  background-color: var(--grey-20);
+  border-color: var(--internal-hover-background-color);
+  background-color: var(--internal-hover-background-color);
 }
 
 .tabBarTab:not(.selected):hover::before {
-  background-color: var(--grey-40);
+  background-color: var(--internal-hover-highlight-color);
 }
 
 .tabBarTab.selected {
   z-index: 1;
   padding: 6px 4px;
-  border-color: var(--grey-30);
+  border-color: var(--base-border-color);
   margin: 0 -0.5px; /* No bottom margin, so that this tab covers the .Details-top-bar bottom border. */
-  background: #fff;
-  color: var(--blue-60);
+  background: var(--base-background-color);
+  color: var(--internal-selected-foreground-color);
   transition: none; /* Switch the background color instantly when a tab is selected */
 }
 

From 24854c8caec1dcf1aec2976395a52107549488d4 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 20:44:48 +0900
Subject: [PATCH 09/33] Apply dark mode to settings components

---
 res/img/svg/filter-light.svg                |  7 +++++++
 res/img/svg/searchfield-icon-light.svg      | 19 +++++++++++++++++++
 src/components/shared/IdleSearchField.css   | 21 ++++++++++++++++-----
 src/components/shared/MarkerSettings.css    | 16 ++++++++++++++--
 src/components/shared/NetworkSettings.css   |  2 ++
 src/components/shared/PanelSettingsList.css | 12 +++++++++++-
 src/components/shared/StackSettings.css     |  2 ++
 7 files changed, 71 insertions(+), 8 deletions(-)
 create mode 100644 res/img/svg/filter-light.svg
 create mode 100644 res/img/svg/searchfield-icon-light.svg

diff --git a/res/img/svg/filter-light.svg b/res/img/svg/filter-light.svg
new file mode 100644
index 0000000000..68a45c31c0
--- /dev/null
+++ b/res/img/svg/filter-light.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#ededf0">
+   <path fill-opacity=".3" d="M6.6 8.4c0-.6-1.7.3-1.7-.3 0-.4-1.7-2.7-1.7-2.7H13s-1.8 2-1.8 2.7c0 .3-2.1-.1-2.1.3v6.1H7s-.4-4.1-.4-6.1z"></path>
+   <path d="M2 2v2.3L4.7 9H6v5.4l2.1 1 1.8-.9V9h1.3L14 4.3V2H2zm11 2l-2.2 4H9v5.8l-.9.4-1.1-.5V8H5.2L3 4V3h10v1z"></path>
+</svg>
diff --git a/res/img/svg/searchfield-icon-light.svg b/res/img/svg/searchfield-icon-light.svg
new file mode 100644
index 0000000000..9139ba9210
--- /dev/null
+++ b/res/img/svg/searchfield-icon-light.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="11" viewBox="0 0 11 11">
+  <style>
+    circle {
+      fill: none;
+    }
+    
+    circle, line {
+      stroke: rgba(237,237,240.65);
+      stroke-width: 0.8px;
+    }
+  </style>
+
+  <circle cx="4.65" cy="4.15" r="3.85"/>
+  <line x1="7.5" y1="7" x2="10.5" y2="10"/>
+</svg>
diff --git a/src/components/shared/IdleSearchField.css b/src/components/shared/IdleSearchField.css
index 99ffa91699..746dbafd63 100644
--- a/src/components/shared/IdleSearchField.css
+++ b/src/components/shared/IdleSearchField.css
@@ -3,26 +3,38 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .idleSearchField {
+  --internal-search-icon: url(../../../res/img/svg/searchfield-icon.svg);
+  --internal-cancel-icon: url(../../../res/img/svg/searchfield-cancel.svg);
+  --internal-border-color: #aaa;
+
   position: relative; /* to properly position the button */
   display: inline-flex;
   flex-flow: row nowrap;
   align-items: center;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .idleSearchField {
+      --internal-search-icon: url(../../../res/img/svg/searchfield-icon-light.svg);
+      --internal-border-color: var(--grey-70);
+    }
+  }
+}
+
 .photon-input.idleSearchFieldInput {
   /* the chain class selectors are used here 
   to override the styling for the photon-input class */
   height: 19px;
   padding: 0 18px 0 17px; /* right padding for the reset button, left padding for the search icon */
-  border: 0.5px solid #aaa;
+  border: 0.5px solid var(--internal-border-color);
 }
 
 .idleSearchFieldInput {
   position: relative;
   flex: 1;
   margin: 0;
-  background: url(../../../res/img/svg/searchfield-icon.svg) 3px center
-    no-repeat white;
+  background: var(--internal-search-icon) 3px center no-repeat;
   background-size: 11px 11px;
 }
 
@@ -34,8 +46,7 @@
   height: 11px;
   padding: 0;
   border: 0;
-  background: url(../../../res/img/svg/searchfield-cancel.svg) top left
-    no-repeat;
+  background: var(--internal-cancel-icon) top left no-repeat;
   background-size: contain;
   color: transparent;
   -moz-user-focus: ignore;
diff --git a/src/components/shared/MarkerSettings.css b/src/components/shared/MarkerSettings.css
index 84399301b8..3aa455853a 100644
--- a/src/components/shared/MarkerSettings.css
+++ b/src/components/shared/MarkerSettings.css
@@ -3,16 +3,28 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .markerSettings {
+  --internal-filter-icon: url(../../../res/img/svg/filter.svg);
+
   display: flex;
   overflow: auto hidden;
   height: 25px;
   flex-flow: row nowrap;
   padding: 0;
+  background-color: var(--base-background-color);
+  color: var(--base-foreground-color);
   line-height: 25px;
   scrollbar-width: none;
   white-space: nowrap;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .markerSettings {
+      --internal-filter-icon: url(../../../res/img/svg/filter-light.svg);
+    }
+  }
+}
+
 .filterMarkersButton {
   position: relative;
   width: 24px;
@@ -20,7 +32,7 @@
   flex: none;
   padding-right: 30px;
   margin: 0 4px;
-  background-image: url(../../../res/img/svg/filter.svg);
+  background-image: var(--internal-filter-icon);
   background-position: 4px center;
   background-repeat: no-repeat;
 }
@@ -37,6 +49,6 @@
   margin-top: 7px;
   margin-right: 4px;
   margin-left: 4px;
-  color: var(--grey-90);
+  color: var(--clickable-foreground-color);
   content: '';
 }
diff --git a/src/components/shared/NetworkSettings.css b/src/components/shared/NetworkSettings.css
index 70f3aeac83..583f00b876 100644
--- a/src/components/shared/NetworkSettings.css
+++ b/src/components/shared/NetworkSettings.css
@@ -7,6 +7,8 @@
   height: 25px;
   flex-flow: row nowrap;
   padding: 0;
+  background-color: var(--base-background-color);
+  color: var(--base-foreground-color);
   line-height: 25px;
 }
 
diff --git a/src/components/shared/PanelSettingsList.css b/src/components/shared/PanelSettingsList.css
index 2a3d6eb0a4..b617e8e5dc 100644
--- a/src/components/shared/PanelSettingsList.css
+++ b/src/components/shared/PanelSettingsList.css
@@ -13,13 +13,23 @@
 }
 
 .panelSettingsListItem {
+  --internal-border-color: var(--grey-20);
+
   display: flex;
   align-items: center;
   padding: 0;
   margin: 0 5px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .panelSettingsListItem {
+      --internal-border-color: var(--grey-80);
+    }
+  }
+}
+
 .panelSettingsListItem:not(:first-child) {
   padding-left: 10px;
-  border-left: 1px solid var(--grey-20);
+  border-left: 1px solid var(--internal-border-color);
 }
diff --git a/src/components/shared/StackSettings.css b/src/components/shared/StackSettings.css
index e491e619ef..e5d8db6032 100644
--- a/src/components/shared/StackSettings.css
+++ b/src/components/shared/StackSettings.css
@@ -9,6 +9,8 @@
   flex-flow: row nowrap;
   align-items: stretch;
   padding: 0;
+  background-color: var(--base-background-color);
+  color: var(--base-foreground-color);
   scrollbar-width: none;
   white-space: nowrap;
 }

From cbfcfa52e07852969c1b1460c888fc22305fced5 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 20:44:07 +0900
Subject: [PATCH 10/33] Apply dark mode to sidebar components

---
 src/components/sidebar/sidebar.css | 58 ++++++++++++++++++++++++------
 1 file changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/components/sidebar/sidebar.css b/src/components/sidebar/sidebar.css
index 1b9f02f0bf..7f67681ed5 100644
--- a/src/components/sidebar/sidebar.css
+++ b/src/components/sidebar/sidebar.css
@@ -1,12 +1,23 @@
 .sidebar {
+  --internal-dimmed-foreground-color: var(--grey-50);
+
   overflow: auto;
-  border-top: 1px solid var(--grey-30);
-  background: var(--grey-10);
+  border-top: 1px solid var(--panel-border-color);
+  background: var(--panel-background-color);
+  color: var(--base-foreground-color);
   font-size: 11px;
 
   --sidebar-indent: 16px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .sidebar {
+      --internal-dimmed-foreground-color: var(--grey-40);
+    }
+  }
+}
+
 .sidebar-contents-wrapper {
   /* Allow absolute positioning that is dependent of the scrolling. */
   position: relative;
@@ -56,7 +67,7 @@
 }
 
 .sidebar-title-label > :nth-child(2) {
-  color: var(--grey-50);
+  color: var(--internal-dimmed-foreground-color);
   text-align: end;
 }
 
@@ -90,7 +101,7 @@
 }
 
 .sidebar-subtitle {
-  color: var(--grey-50);
+  color: var(--internal-dimmed-foreground-color);
   font-size: inherit; /* reset browser styles */
 }
 
@@ -108,7 +119,7 @@
 }
 
 .sidebar-label {
-  color: var(--grey-50);
+  color: var(--internal-dimmed-foreground-color);
   grid-column-start: 1;
   margin-inline-start: var(--sidebar-indent);
   white-space: nowrap;
@@ -125,40 +136,65 @@
 }
 
 .sidebar-histogram-bar {
-  background-color: var(--grey-30);
+  --internal-background-color: var(--grey-30);
+  --internal-transparent-color: var(--grey-50);
+  --internal-grey-color: var(--grey-50);
+
+  background-color: var(--internal-background-color);
   grid-column-start: span 3;
   margin-inline-start: var(--sidebar-indent);
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .sidebar-histogram-bar {
+      --internal-background-color: var(--ink-70);
+      --internal-transparent-color: var(--ink-50);
+    }
+  }
+}
+
 .sidebar-histogram-bar-color {
   height: 5px;
 }
 
 .sidebar-histogram-bar-color.category-color-transparent {
   /* A white bar does not show up well here */
-  background-color: var(--grey-50);
+  background-color: var(--internal-transparent-color);
 }
 
 .sidebar-histogram-bar-color.category-color-grey {
   /* The grey category color is the same our background color, choose a darker grey instead. */
-  background-color: var(--grey-50);
+  background-color: var(--internal-grey-color);
 }
 
 .sidebar-toggle {
+  --internal-focus-foreground-color: var(--blue-60);
+  --internal-active-foreground-color: var(--grey-60);
+
   padding: 0;
   border: 0;
   background: 0;
-  color: var(--grey-50);
+  color: var(--internal-dimmed-foreground-color);
   font-size: inherit;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .sidebar-toggle {
+      --internal-focus-foreground-color: var(--blue-40);
+      --internal-active-foreground-color: var(--grey-30);
+    }
+  }
+}
+
 /* Opt out of the default photon styling, as it doesn't look very nice with the
    overflow: hidden of the container */
 .sidebar-toggle:focus-visible {
   border: 0;
   border-radius: 2px;
   box-shadow: none;
-  color: var(--blue-60);
+  color: var(--internal-focus-foreground-color);
   text-decoration: underline;
 }
 
@@ -183,7 +219,7 @@
 }
 
 .sidebar-toggle:active:hover {
-  color: var(--grey-60);
+  color: var(--internal-active-foreground-color);
 }
 
 .sidebar-toggle.expanded::before {

From 7c8490db72b5612d8df89dc8166448cd257a88ea Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 21:00:59 +0900
Subject: [PATCH 11/33] Apply dark mode to timeline markers

---
 src/components/timeline/Markers.tsx |  2 +-
 src/profile-logic/marker-styles.ts  | 68 ++++++++++++++++-------------
 src/utils/dark-mode.ts              | 28 ++++++++++++
 3 files changed, 66 insertions(+), 32 deletions(-)
 create mode 100644 src/utils/dark-mode.ts

diff --git a/src/components/timeline/Markers.tsx b/src/components/timeline/Markers.tsx
index f75f72db74..994e2e6b61 100644
--- a/src/components/timeline/Markers.tsx
+++ b/src/components/timeline/Markers.tsx
@@ -154,7 +154,7 @@ class TimelineMarkersCanvas extends React.PureComponent<CanvasProps> {
           )
         : Number.MAX_SAFE_INTEGER;
       const markerStyle = getMarkerStyle(marker);
-      ctx.fillStyle = markerStyle.background;
+      ctx.fillStyle = markerStyle.getBackground();
       if (markerStyle.squareCorners) {
         ctx.fillRect(pos, markerStyle.top, itemWidth, markerStyle.height);
       } else {
diff --git a/src/profile-logic/marker-styles.ts b/src/profile-logic/marker-styles.ts
index 5b71b2a061..13e4e00c5d 100644
--- a/src/profile-logic/marker-styles.ts
+++ b/src/profile-logic/marker-styles.ts
@@ -6,19 +6,25 @@ import * as colors from 'photon-colors';
 
 import type { CssPixels, Marker } from 'firefox-profiler/types';
 
+import { maybeLightDark } from '../utils/dark-mode';
+
 type MarkerStyle = {
   readonly top: CssPixels;
   readonly height: CssPixels;
-  readonly background: string;
+  readonly _background: string | [string, string];
+  readonly getBackground: () => string;
   readonly squareCorners: boolean;
   readonly borderLeft: null | string;
   readonly borderRight: null | string;
 };
 
-const defaultStyle = {
+const defaultStyle: MarkerStyle = {
   top: 0,
   height: 6,
-  background: 'black',
+  _background: ['black', '#ededf0'],
+  getBackground: function () {
+    return maybeLightDark(this._background);
+  },
   squareCorners: false,
   borderLeft: null,
   borderRight: null,
@@ -27,13 +33,13 @@ const defaultStyle = {
 const gcStyle = {
   ...defaultStyle,
   top: 6,
-  background: colors.ORANGE_50,
+  _background: colors.ORANGE_50,
 };
 
 const ccStyle = {
   ...gcStyle,
   // This is a paler orange to distinguish CC from GC.
-  background: '#ffc600',
+  _background: '#ffc600',
 };
 
 /**
@@ -55,13 +61,13 @@ const markerStyles: { readonly [styleName: string]: MarkerStyle } = {
   default: defaultStyle,
   RefreshDriverTick: {
     ...defaultStyle,
-    background: 'hsla(0,0%,0%,0.05)',
+    _background: 'rgba(237, 237, 240, 0.05)',
     height: 18,
     squareCorners: true,
   },
   RD: {
     ...defaultStyle,
-    background: 'hsla(0,0%,0%,0.05)',
+    _background: 'rgba(237, 237, 240, 0.05)',
     height: 18,
     squareCorners: true,
   },
@@ -69,86 +75,86 @@ const markerStyles: { readonly [styleName: string]: MarkerStyle } = {
   // here for backwards compatibility.
   Scripts: {
     ...defaultStyle,
-    background: colors.ORANGE_70,
+    _background: colors.ORANGE_70,
     top: 6,
   },
   'requestAnimationFrame callbacks': {
     ...defaultStyle,
-    background: colors.ORANGE_70,
+    _background: colors.ORANGE_70,
     top: 6,
   },
   Styles: {
     ...defaultStyle,
-    background: colors.TEAL_50,
+    _background: [colors.TEAL_50, colors.TEAL_60],
     top: 7,
   },
   FireScrollEvent: {
     ...defaultStyle,
-    background: colors.ORANGE_70,
+    _background: colors.ORANGE_70,
     top: 7,
   },
   Reflow: {
     ...defaultStyle,
-    background: colors.BLUE_50,
+    _background: colors.BLUE_50,
     top: 7,
   },
   DispatchSynthMouseMove: {
     ...defaultStyle,
-    background: colors.ORANGE_70,
+    _background: colors.ORANGE_70,
     top: 8,
   },
   DisplayList: {
     ...defaultStyle,
-    background: colors.PURPLE_50,
+    _background: colors.PURPLE_50,
     top: 9,
   },
   LayerBuilding: {
     ...defaultStyle,
-    background: colors.ORANGE_50,
+    _background: colors.ORANGE_50,
     top: 9,
   },
   Rasterize: {
     ...defaultStyle,
-    background: colors.GREEN_50,
+    _background: [colors.GREEN_50, colors.GREEN_60],
     top: 10,
   },
   ForwardTransaction: {
     ...defaultStyle,
-    background: colors.RED_70,
+    _background: colors.RED_70,
     top: 11,
   },
   NotifyDidPaint: {
     ...defaultStyle,
-    background: colors.GREY_40,
+    _background: colors.GREY_40,
     top: 12,
   },
   LayerTransaction: {
     ...defaultStyle,
-    background: colors.RED_70,
+    _background: colors.RED_70,
   },
   Composite: {
     ...defaultStyle,
-    background: colors.BLUE_50,
+    _background: colors.BLUE_50,
   },
   Vsync: {
     ...defaultStyle,
-    background: 'rgb(255, 128, 0)',
+    _background: 'rgb(255, 128, 0)',
   },
   LayerContentGPU: {
     ...defaultStyle,
-    background: 'rgba(0,200,0,0.5)',
+    _background: 'rgba(0,200,0,0.5)',
   },
   LayerCompositorGPU: {
     ...defaultStyle,
-    background: 'rgba(0,200,0,0.5)',
+    _background: 'rgba(0,200,0,0.5)',
   },
   LayerOther: {
     ...defaultStyle,
-    background: 'rgb(200,0,0)',
+    _background: 'rgb(200,0,0)',
   },
   Jank: {
     ...defaultStyle,
-    background: 'hsl(347, 100%, 60%)',
+    _background: 'hsl(347, 100%, 60%)',
     borderLeft: colors.RED_50,
     borderRight: colors.RED_50,
     squareCorners: true,
@@ -157,7 +163,7 @@ const markerStyles: { readonly [styleName: string]: MarkerStyle } = {
   // unavailable. Let's style them like Jank markers.
   'BHR-detected hang': {
     ...defaultStyle,
-    background: 'hsl(347, 100%, 60%)',
+    _background: 'hsl(347, 100%, 60%)',
     borderLeft: colors.RED_50,
     borderRight: colors.RED_50,
     squareCorners: true,
@@ -186,27 +192,27 @@ const markerStyles: { readonly [styleName: string]: MarkerStyle } = {
   // IO:
   FileIO: {
     ...defaultStyle,
-    background: colors.BLUE_50,
+    _background: colors.BLUE_50,
   },
 
   IPCOut: {
     ...defaultStyle,
-    background: colors.BLUE_50,
+    _background: colors.BLUE_50,
     top: 2,
   },
   SyncIPCOut: {
     ...defaultStyle,
-    background: colors.BLUE_70,
+    _background: colors.BLUE_70,
     top: 6,
   },
   IPCIn: {
     ...defaultStyle,
-    background: colors.PURPLE_40,
+    _background: colors.PURPLE_40,
     top: 13,
   },
   SyncIPCIn: {
     ...defaultStyle,
-    background: colors.PURPLE_70,
+    _background: colors.PURPLE_70,
     top: 17,
   },
 };
diff --git a/src/utils/dark-mode.ts b/src/utils/dark-mode.ts
new file mode 100644
index 0000000000..e63131c46a
--- /dev/null
+++ b/src/utils/dark-mode.ts
@@ -0,0 +1,28 @@
+let _isDarkModeSetup = false;
+let _isDarkMode = false;
+
+export function isDarkMode() {
+  if (!_isDarkModeSetup) {
+    if (window.matchMedia) {
+      const result = window.matchMedia('(prefers-color-scheme: dark)');
+      _isDarkMode = result.matches;
+      result.addEventListener('change', (event) => {
+        _isDarkMode = event.matches;
+      });
+    }
+    _isDarkModeSetup = true;
+  }
+
+  return _isDarkMode;
+}
+
+export function lightDark(light: string, dark: string): string {
+  return isDarkMode() ? dark : light;
+}
+
+export function maybeLightDark(value: string | [string, string]): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+  return lightDark(value[0], value[1]);
+}

From b45b04420ea43746dbf41ff37a0b7656e18cbf72 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 23:07:20 +0900
Subject: [PATCH 12/33] Apply dark mode to flame graph and stack chart

---
 res/css/categories.css                        |  16 ++
 src/components/flame-graph/Canvas.tsx         |  16 +-
 src/components/flame-graph/FlameGraph.css     |   2 +-
 .../flame-graph/MaybeFlameGraph.css           |  14 +-
 src/components/shared/chart/Viewport.css      |  32 ++--
 .../shared/thread/ActivityGraphCanvas.tsx     |   2 +-
 .../shared/thread/ActivityGraphFills.tsx      |  17 +-
 src/components/stack-chart/Canvas.tsx         |  16 +-
 src/components/stack-chart/index.css          |   2 +-
 src/components/tooltip/NetworkMarker.css      |  14 +-
 src/profile-logic/graph-color.ts              |   2 +-
 src/utils/colors.ts                           | 156 ++++++++++++------
 12 files changed, 199 insertions(+), 90 deletions(-)

diff --git a/res/css/categories.css b/res/css/categories.css
index 8d1d533854..6ec2b8e2e4 100644
--- a/res/css/categories.css
+++ b/res/css/categories.css
@@ -20,6 +20,22 @@
   --category-color-darkgrey: var(--grey-50);
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --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
diff --git a/src/components/flame-graph/Canvas.tsx b/src/components/flame-graph/Canvas.tsx
index 58ed593c8d..a6fdecbbd2 100644
--- a/src/components/flame-graph/Canvas.tsx
+++ b/src/components/flame-graph/Canvas.tsx
@@ -7,7 +7,11 @@ import { withChartViewport, type Viewport } from '../shared/chart/Viewport';
 import { ChartCanvas } from '../shared/chart/Canvas';
 import { FastFillStyle } from '../../utils';
 import TextMeasurement from '../../utils/text-measurement';
-import { mapCategoryColorNameToStackChartStyles } from '../../utils/colors';
+import {
+  mapCategoryColorNameToStackChartStyles,
+  getForegroundColor,
+  getBackgroundColor,
+} from '../../utils/colors';
 import {
   formatCallNodeNumberWithUnit,
   formatPercent,
@@ -226,7 +230,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
       TEXT_OFFSET_START * cssToDeviceScale
     );
 
-    fastFillStyle.set('#ffffff');
+    fastFillStyle.set(getBackgroundColor());
     ctx.fillRect(0, 0, deviceContainerWidth, deviceContainerHeight);
 
     const callNodeTable = callNodeInfo.getCallNodeTable();
@@ -304,8 +308,8 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
         );
 
         const background = isHighlighted
-          ? colorStyles.selectedFillStyle
-          : colorStyles.unselectedFillStyle;
+          ? colorStyles.getSelectedFillStyle()
+          : colorStyles.getUnselectedFillStyle();
 
         fastFillStyle.set(background);
         ctx.fillRect(
@@ -329,8 +333,8 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
           );
           if (fittedText) {
             const foreground = isHighlighted
-              ? colorStyles.selectedTextColor
-              : '#000';
+              ? colorStyles.getSelectedTextColor()
+              : getForegroundColor();
             fastFillStyle.set(foreground);
             // TODO - L10N RTL.
             ctx.fillText(fittedText, deviceTextLeft, deviceTextTop);
diff --git a/src/components/flame-graph/FlameGraph.css b/src/components/flame-graph/FlameGraph.css
index e0fca42603..afdea0743c 100644
--- a/src/components/flame-graph/FlameGraph.css
+++ b/src/components/flame-graph/FlameGraph.css
@@ -13,5 +13,5 @@
   display: flex;
   flex: 1;
   flex-direction: row;
-  border-top: 1px solid var(--grey-30);
+  border-top: 1px solid var(--base-border-color);
 }
diff --git a/src/components/flame-graph/MaybeFlameGraph.css b/src/components/flame-graph/MaybeFlameGraph.css
index 1641d08ace..a05a4565fb 100644
--- a/src/components/flame-graph/MaybeFlameGraph.css
+++ b/src/components/flame-graph/MaybeFlameGraph.css
@@ -1,11 +1,21 @@
 .flameGraphDisabledMessage {
+  --internal-background-color: var(--grey-20);
+
   display: flex;
   flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 10px;
-  background-color: var(--grey-20);
-  box-shadow: inset 0 0 150px rgb(0 0 0 / 0.1);
+  background-color: var(--internal-background-color);
+  box-shadow: inset 0 0 150px var(--base-shadow-color);
   font-size: 120%;
 }
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .flameGraphDisabledMessage {
+      --internal-background-color: var(--ink-80);
+    }
+  }
+}
diff --git a/src/components/shared/chart/Viewport.css b/src/components/shared/chart/Viewport.css
index a7868280c9..c0c12a607a 100644
--- a/src/components/shared/chart/Viewport.css
+++ b/src/components/shared/chart/Viewport.css
@@ -10,13 +10,15 @@
 }
 
 .chartViewport.expanded {
-  border-top: 1px solid var(--grey-30);
-  border-bottom: 1px solid var(--grey-30);
+  border-top: 1px solid var(--base-border-color);
+  border-bottom: 1px solid var(--base-border-color);
   margin-bottom: 5px;
   cursor: grab;
 }
 
 .chartViewport.expanded::after {
+  --internal-shadow-color: rgb(64 115 140 / 0.2);
+
   position: absolute;
   z-index: 1;
   top: 0;
@@ -25,7 +27,7 @@
   height: 100%;
 
   /* Slight blue shadow. */
-  box-shadow: inset 0 0 20px rgb(64 115 140 / 0.2);
+  box-shadow: inset 0 0 20px var(--internal-shadow-color);
   content: '';
   pointer-events: none;
 }
@@ -35,16 +37,18 @@
 }
 
 .chartViewportScroll {
+  --internal-background-color: rgb(0 0 0 / 0.07);
+
   position: absolute;
   bottom: 0;
   left: 0;
   overflow: hidden;
   padding: 3px 10px;
   border-radius: 0 5px 0 0;
-  background: rgb(0 0 0 / 0.07);
+  background: var(--internal-background-color);
   box-shadow:
-    0 0 0 0.5px rgb(0 0 0 / 0.1),
-    0 2px 4px rgb(0 0 0 / 0.1);
+    0 0 0 0.5px var(--base-shadow-color),
+    0 2px 4px var(--base-shadow-color);
   line-height: 20px;
   opacity: 1;
   pointer-events: none;
@@ -56,6 +60,14 @@
   will-change: opacity, transform;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .chartViewportScroll {
+      --internal-background-color: rgb(237 237 240 / 0.07);
+    }
+  }
+}
+
 .chartViewportScroll.hidden {
   opacity: 0;
   transform: translateY(30px);
@@ -66,10 +78,10 @@
   top: -1px;
   display: inline-block;
   padding: 0 0.5em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--kbd-border-color);
   border-radius: 0.2em;
   margin: 0 0.2em;
-  background-color: #f6f6f6;
-  box-shadow: -0.1em 0.1em 0 #bbb;
-  color: #000;
+  background-color: var(--kbd-background-color);
+  box-shadow: -0.1em 0.1em 0 var(--kbd-shadow-color);
+  color: var(--kbd-foreground-color);
 }
diff --git a/src/components/shared/thread/ActivityGraphCanvas.tsx b/src/components/shared/thread/ActivityGraphCanvas.tsx
index 705045cc82..77a562d43c 100644
--- a/src/components/shared/thread/ActivityGraphCanvas.tsx
+++ b/src/components/shared/thread/ActivityGraphCanvas.tsx
@@ -83,7 +83,7 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
             category: categoryIndex,
             filteredOutByTransformFillStyle: _createDiagonalStripePattern(
               ctx,
-              styles.unselectedFillStyle
+              styles.getUnselectedFillStyle()
             ),
           };
         }
diff --git a/src/components/shared/thread/ActivityGraphFills.tsx b/src/components/shared/thread/ActivityGraphFills.tsx
index 1898bfcde9..a664e8cfe8 100644
--- a/src/components/shared/thread/ActivityGraphFills.tsx
+++ b/src/components/shared/thread/ActivityGraphFills.tsx
@@ -67,10 +67,13 @@ type CategoryFill = {
 export type CategoryDrawStyles = ReadonlyArray<{
   readonly category: number;
   readonly gravity: number;
-  readonly selectedFillStyle: string;
-  readonly unselectedFillStyle: string;
+  readonly _selectedFillStyle: string | [string, string];
+  readonly _unselectedFillStyle: string | [string, string];
+  readonly _selectedTextColor: string | [string, string];
+  readonly getSelectedFillStyle: () => string;
+  readonly getUnselectedFillStyle: () => string;
+  readonly getSelectedTextColor: () => string;
   readonly filteredOutByTransformFillStyle: CanvasPattern;
-  readonly selectedTextColor: string;
 }>;
 
 type SelectedPercentageAtPixelBuffers = {
@@ -328,7 +331,7 @@ export class ActivityGraphFillComputer {
     const categoryDrawStyle = categoryDrawStyles[category];
     const percentageBuffers = this.mutablePercentageBuffers[category];
 
-    if (categoryDrawStyle.selectedFillStyle === 'transparent') {
+    if (categoryDrawStyle.getSelectedFillStyle() === 'transparent') {
       return;
     }
 
@@ -796,7 +799,7 @@ function _getCategoryFills(
       return [
         {
           category: categoryDrawStyle.category,
-          fillStyle: categoryDrawStyle.unselectedFillStyle,
+          fillStyle: categoryDrawStyle.getUnselectedFillStyle(),
           perPixelContribution: buffer.beforeSelectedPercentageAtPixel,
           accumulatedUpperEdge: new Float32Array(
             buffer.beforeSelectedPercentageAtPixel.length
@@ -804,7 +807,7 @@ function _getCategoryFills(
         },
         {
           category: categoryDrawStyle.category,
-          fillStyle: categoryDrawStyle.selectedFillStyle,
+          fillStyle: categoryDrawStyle.getSelectedFillStyle(),
           perPixelContribution: buffer.selectedPercentageAtPixel,
           accumulatedUpperEdge: new Float32Array(
             buffer.beforeSelectedPercentageAtPixel.length
@@ -812,7 +815,7 @@ function _getCategoryFills(
         },
         {
           category: categoryDrawStyle.category,
-          fillStyle: categoryDrawStyle.unselectedFillStyle,
+          fillStyle: categoryDrawStyle.getUnselectedFillStyle(),
           perPixelContribution: buffer.afterSelectedPercentageAtPixel,
           accumulatedUpperEdge: new Float32Array(
             buffer.beforeSelectedPercentageAtPixel.length
diff --git a/src/components/stack-chart/Canvas.tsx b/src/components/stack-chart/Canvas.tsx
index 0c113a3872..fbe5b0d083 100644
--- a/src/components/stack-chart/Canvas.tsx
+++ b/src/components/stack-chart/Canvas.tsx
@@ -16,7 +16,11 @@ import type {
 } from '../../actions/profile-view';
 
 type ChangeMouseTimePosition = typeof changeMouseTimePosition;
-import { mapCategoryColorNameToStackChartStyles } from '../../utils/colors';
+import {
+  mapCategoryColorNameToStackChartStyles,
+  getForegroundColor,
+  getBackgroundColor,
+} from '../../utils/colors';
 import { TooltipCallNode } from '../tooltip/CallNode';
 import { TooltipMarker } from '../tooltip/Marker';
 
@@ -224,7 +228,7 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
     const devicePixelsWidth = containerWidth * cssToDeviceScale;
     const devicePixelsHeight = containerHeight * cssToDeviceScale;
 
-    fastFillStyle.set('#ffffff');
+    fastFillStyle.set(getBackgroundColor());
     ctx.fillRect(0, 0, devicePixelsWidth, devicePixelsHeight);
 
     const viewportDevicePixelsTop = viewportTop * cssToDeviceScale;
@@ -513,8 +517,8 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
         // Draw the box.
         fastFillStyle.set(
           isHovered || isSelected
-            ? colorStyles.selectedFillStyle
-            : colorStyles.unselectedFillStyle
+            ? colorStyles.getSelectedFillStyle()
+            : colorStyles.getUnselectedFillStyle()
         );
         ctx.fillRect(
           intX,
@@ -544,8 +548,8 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
           if (fittedText) {
             fastFillStyle.set(
               isHovered || isSelected
-                ? colorStyles.selectedTextColor
-                : '#000000'
+                ? colorStyles.getSelectedTextColor()
+                : getForegroundColor()
             );
             ctx.fillText(fittedText, textX, intY + textDevicePixelsOffsetTop);
           }
diff --git a/src/components/stack-chart/index.css b/src/components/stack-chart/index.css
index b6c1d42fd0..f8d8c53505 100644
--- a/src/components/stack-chart/index.css
+++ b/src/components/stack-chart/index.css
@@ -12,5 +12,5 @@
 .stackChartContent {
   display: flex;
   flex: 1;
-  border-top: 1px solid var(--grey-30);
+  border-top: 1px solid var(--base-border-color);
 }
diff --git a/src/components/tooltip/NetworkMarker.css b/src/components/tooltip/NetworkMarker.css
index 7d5084b4f1..850b903167 100644
--- a/src/components/tooltip/NetworkMarker.css
+++ b/src/components/tooltip/NetworkMarker.css
@@ -7,9 +7,11 @@
 }
 
 .tooltipNetworkPhases {
+  --internal-border-color: var(--grey-40);
+
   display: grid;
   padding-top: 4px;
-  border-top: 1px solid var(--grey-40);
+  border-top: 1px solid var(--internal-border-color);
   margin-top: 4px;
   gap: 2px 5px;
 
@@ -18,6 +20,14 @@
   grid-template-columns: min-content min-content auto;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .tooltipNetworkPhases {
+      --internal-border-color: var(--base-border-color);
+    }
+  }
+}
+
 .tooltipNetworkTitle3 {
   /* Reset most default properties of h3. */
   padding: 0;
@@ -38,7 +48,7 @@
 }
 
 .tooltipNetworkPhaseEmpty {
-  background-color: white;
+  background-color: var(--base-background-color);
   box-shadow: 0 0 0 1px inset var(--marker-color);
   opacity: 0.5;
 }
diff --git a/src/profile-logic/graph-color.ts b/src/profile-logic/graph-color.ts
index 216afe78e1..84d2380aab 100644
--- a/src/profile-logic/graph-color.ts
+++ b/src/profile-logic/graph-color.ts
@@ -95,7 +95,7 @@ export function getTextColor(color: GraphColor): string {
   // values. For other values, mapCategoryColorNameToStyles defaults to gray.
   // This is good enough for now.
   const colorStyles = mapCategoryColorNameToStyles(color);
-  return colorStyles.selectedTextColor;
+  return colorStyles.getSelectedTextColor();
 }
 
 /**
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
index 845e33409a..b3d07aad97 100644
--- a/src/utils/colors.ts
+++ b/src/utils/colors.ts
@@ -2,6 +2,8 @@
  * 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 { lightDark, maybeLightDark } from './dark-mode';
+
 /**
  * These are the colors from Photon. They are inlined to provide easy access. If updating
  * please change the CSS variables as well.
@@ -74,97 +76,142 @@ export const INK_80 = '#202340';
 export const INK_90 = '#0f1126';
 
 type ColorStyles = {
-  readonly selectedFillStyle: string;
-  readonly unselectedFillStyle: string;
-  readonly selectedTextColor: string;
+  readonly _selectedFillStyle: string | [string, string];
+  readonly _unselectedFillStyle: string | [string, string];
+  readonly _selectedTextColor: string | [string, string];
+  readonly getSelectedFillStyle: () => string;
+  readonly getUnselectedFillStyle: () => string;
+  readonly getSelectedTextColor: () => string;
   readonly gravity: number;
 };
 
-const GRAY_STYLE = {
-  selectedFillStyle: GREY_40,
-  unselectedFillStyle: GREY_40 + '60',
-  selectedTextColor: '#000',
+const DEFAULT_STYLE: ColorStyles = {
+  _selectedFillStyle: ['#ffffff', '#0f1126'],
+  _unselectedFillStyle: ['#ffffff60', '#0f112660'],
+  _selectedTextColor: ['#000000', GREY_20],
+  getSelectedFillStyle: function () {
+    return maybeLightDark(this._selectedFillStyle);
+  },
+  getUnselectedFillStyle: function () {
+    return maybeLightDark(this._unselectedFillStyle);
+  },
+  getSelectedTextColor: function () {
+    return maybeLightDark(this._selectedTextColor);
+  },
+  gravity: 0,
+};
+
+const PSEUDO_TRANSPARENT_STYLE: ColorStyles = {
+  ...DEFAULT_STYLE,
+  _selectedFillStyle: [GREY_30, GREY_70],
+  _unselectedFillStyle: [GREY_30 + '60', GREY_70 + '60'],
+  _selectedTextColor: ['#000', GREY_20],
+  gravity: 8,
+};
+
+const GRAY_STYLE: ColorStyles = {
+  ...DEFAULT_STYLE,
+  _selectedFillStyle: [GREY_40, GREY_50],
+  _unselectedFillStyle: [GREY_40 + '60', GREY_50 + '60'],
+  _selectedTextColor: ['#000', GREY_20],
   gravity: 10,
 };
-const DARK_GRAY_STYLE = {
-  selectedFillStyle: GREY_50,
-  unselectedFillStyle: GREY_50 + '60',
-  selectedTextColor: '#fff',
+const DARK_GRAY_STYLE: ColorStyles = {
+  ...DEFAULT_STYLE,
+  _selectedFillStyle: [GREY_50, GREY_60],
+  _unselectedFillStyle: [GREY_50 + '60', GREY_60 + '60'],
+  _selectedTextColor: '#fff',
   gravity: 11,
 };
 const STYLE_MAP: { [key: string]: ColorStyles } = {
   transparent: {
-    selectedFillStyle: 'transparent',
-    unselectedFillStyle: 'transparent',
-    selectedTextColor: '#000',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: 'transparent',
+    _unselectedFillStyle: 'transparent',
+    _selectedTextColor: ['#000', GREY_20],
     gravity: 0,
   },
   lightblue: {
-    selectedFillStyle: BLUE_40,
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: BLUE_40,
     // Colors are assumed to have the form #RRGGBB, so concatenating 2 more digits to
     // the end defines the transparency #RRGGBBAA.
-    unselectedFillStyle: BLUE_40 + '60',
-    selectedTextColor: '#000',
+    _unselectedFillStyle: BLUE_40 + '60',
+    _selectedTextColor: ['#000', GREY_20],
     gravity: 1,
   },
   red: {
-    selectedFillStyle: RED_60,
-    unselectedFillStyle: RED_60 + '60',
-    selectedTextColor: '#fff',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: RED_60,
+    _unselectedFillStyle: RED_60 + '60',
+    _selectedTextColor: '#fff',
     gravity: 1,
   },
   lightred: {
-    selectedFillStyle: RED_70 + '60',
-    unselectedFillStyle: RED_70 + '30',
-    selectedTextColor: '#000',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: RED_70 + '60',
+    _unselectedFillStyle: RED_70 + '30',
+    _selectedTextColor: ['#000', GREY_20],
     gravity: 1,
   },
   orange: {
-    selectedFillStyle: ORANGE_50,
-    unselectedFillStyle: ORANGE_50 + '60',
-    selectedTextColor: '#fff',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: [ORANGE_50, ORANGE_60],
+    _unselectedFillStyle: [ORANGE_50 + '60', ORANGE_60 + '60'],
+    _selectedTextColor: '#fff',
     gravity: 2,
   },
   blue: {
-    selectedFillStyle: BLUE_60,
-    unselectedFillStyle: BLUE_60 + '60',
-    selectedTextColor: '#fff',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: BLUE_60,
+    _unselectedFillStyle: BLUE_60 + '60',
+    _selectedTextColor: '#fff',
     gravity: 3,
   },
   green: {
-    selectedFillStyle: GREEN_60,
-    unselectedFillStyle: GREEN_60 + '60',
-    selectedTextColor: '#fff',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: [GREEN_60, GREEN_80],
+    _unselectedFillStyle: [GREEN_60 + '60', GREEN_80 + '60'],
+    _selectedTextColor: '#fff',
     gravity: 4,
   },
   purple: {
-    selectedFillStyle: PURPLE_70,
-    unselectedFillStyle: PURPLE_70 + '60',
-    selectedTextColor: '#fff',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: [PURPLE_70, PURPLE_60],
+    _unselectedFillStyle: [PURPLE_70 + '60', PURPLE_60 + '60'],
+    _selectedTextColor: '#fff',
     gravity: 5,
   },
   yellow: {
-    selectedFillStyle: '#ffe129', // This yellow has more contrast than YELLOW_50.
-    unselectedFillStyle: YELLOW_50 + '70',
-    selectedTextColor: '#000',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: [
+      // This yellow has more contrast than YELLOW_50.
+      '#ffe129',
+      YELLOW_70,
+    ],
+    _unselectedFillStyle: [YELLOW_50 + '70', YELLOW_60 + '70'],
+    _selectedTextColor: ['#000', GREY_20],
     gravity: 6,
   },
   brown: {
-    selectedFillStyle: ORANGE_70,
-    unselectedFillStyle: ORANGE_70 + '60',
-    selectedTextColor: '#fff',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: ORANGE_70,
+    _unselectedFillStyle: ORANGE_70 + '60',
+    _selectedTextColor: '#fff',
     gravity: 7,
   },
   magenta: {
-    selectedFillStyle: MAGENTA_60,
-    unselectedFillStyle: MAGENTA_60 + '60',
-    selectedTextColor: '#fff',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: [MAGENTA_60, MAGENTA_70],
+    _unselectedFillStyle: [MAGENTA_60 + '60', MAGENTA_70 + '60'],
+    _selectedTextColor: '#fff',
     gravity: 8,
   },
   lightgreen: {
-    selectedFillStyle: GREEN_50,
-    unselectedFillStyle: GREEN_50 + '60',
-    selectedTextColor: '#fff',
+    ...DEFAULT_STYLE,
+    _selectedFillStyle: [GREEN_50, GREEN_70],
+    _unselectedFillStyle: [GREEN_50 + '60', GREEN_70 + '60'],
+    _selectedTextColor: '#fff',
     gravity: 9,
   },
   gray: GRAY_STYLE,
@@ -200,12 +247,15 @@ export function mapCategoryColorNameToStackChartStyles(
   colorName: string
 ): ColorStyles {
   if (colorName === 'transparent') {
-    return {
-      selectedFillStyle: GREY_30,
-      unselectedFillStyle: GREY_30 + '60',
-      selectedTextColor: '#000',
-      gravity: 8,
-    };
+    return PSEUDO_TRANSPARENT_STYLE;
   }
   return mapCategoryColorNameToStyles(colorName);
 }
+
+export function getForegroundColor(): string {
+  return lightDark('#000000', GREY_20);
+}
+
+export function getBackgroundColor(): string {
+  return lightDark('#ffffff', INK_90);
+}

From 94c3fa0140080c44993833211351e8c9128134bd Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 22:26:59 +0900
Subject: [PATCH 13/33] Apply dark mode to Tooltip components

---
 src/components/shared/Backtrace.css | 20 +++++++++--
 src/components/tooltip/CallNode.css | 40 +++++++++++++++++-----
 src/components/tooltip/Marker.css   | 12 ++++++-
 src/components/tooltip/Tooltip.css  | 53 +++++++++++++++++++++--------
 4 files changed, 98 insertions(+), 27 deletions(-)

diff --git a/src/components/shared/Backtrace.css b/src/components/shared/Backtrace.css
index 2cb6cf9b76..2b9286f056 100644
--- a/src/components/shared/Backtrace.css
+++ b/src/components/shared/Backtrace.css
@@ -1,8 +1,22 @@
 .backtrace {
+  --internal-origin-foreground-color: rgb(0 0 0 / 0.55);
+  --internal-frame-label-foreground-color: rgb(0 0 0 / 0.6);
+  --internal-link-hover-background-color: rgb(0 0 0 / 0.05);
+
   padding: 0;
   margin: 0;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .backtrace {
+      --internal-origin-foreground-color: rgb(237 237 2400 / 0.55);
+      --internal-frame-label-foreground-color: rgb(237 237 2400 / 0.6);
+      --internal-link-hover-background-color: rgb(237 237 2400 / 0.05);
+    }
+  }
+}
+
 .tooltip .backtrace {
   overflow: hidden;
 }
@@ -23,12 +37,12 @@
 
 .backtraceStackFrameOrigin {
   margin-left: 10px;
-  color: rgb(0 0 0 / 0.55);
+  color: var(--internal-origin-foreground-color);
   font-style: normal;
 }
 
 .backtraceStackFrame_isFrameLabel {
-  color: rgb(0 0 0 / 0.6);
+  color: var(--internal-frame-label-foreground-color);
 }
 
 .backtraceStackFrame_link {
@@ -38,5 +52,5 @@
 }
 
 .backtraceStackFrame_link:hover {
-  background-color: rgb(0 0 0 / 0.05);
+  background-color: var(--internal-link-hover-background-color);
 }
diff --git a/src/components/tooltip/CallNode.css b/src/components/tooltip/CallNode.css
index 4363502103..5f508f0c2e 100644
--- a/src/components/tooltip/CallNode.css
+++ b/src/components/tooltip/CallNode.css
@@ -2,20 +2,44 @@
  * 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/. */
 
+.tooltipCallNodeDetails {
+  --internal-category-border-color: var(--grey-40);
+  --internal-header-foreground-color: var(--grey-50);
+  --internal-graph-meter-border-color: var(--grey-50);
+  --internal-graph-meter-background-color: var(--grey-90-a10);
+  --internal-swatch-border-color: rgb(0 0 0 / 0.1);
+  --internal-swatch-running-background-color: var(--blue-40);
+  --internal-swatch-self-background-color: var(--blue-60);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .tooltipCallNodeDetails {
+      --internal-category-border-color: var(--grey-40);
+      --internal-header-foreground-color: var(--grey-20);
+      --internal-graph-meter-border-color: var(--grey-50);
+      --internal-graph-meter-background-color: var(--grey-10-a10);
+      --internal-swatch-border-color: rgb(237 237 240 / 0.1);
+      --internal-swatch-running-background-color: var(--blue-50);
+      --internal-swatch-self-background-color: var(--blue-70);
+    }
+  }
+}
+
 .tooltipCallNodeCategory {
   display: grid;
   align-items: center;
   padding-bottom: 10px;
-  border-top: 1px solid var(--grey-40);
+  border-top: 1px solid var(--internal-category-border-color);
   gap: 4px;
   grid-template-columns: repeat(4, min-content);
 }
 
 .tooltipCallNodeHeader {
   padding: 0 5px;
-  border-right: 1px solid var(--grey-30);
+  border-right: 1px solid var(--base-border-color);
   margin-top: 5px;
-  color: var(--grey-50);
+  color: var(--internal-header-foreground-color);
   white-space: nowrap;
 }
 
@@ -39,7 +63,7 @@
   height: 0;
   flex: 1;
   appearance: none;
-  background: var(--grey-90-a10);
+  background: var(--internal-graph-meter-background-color);
 }
 
 /* This is the bar inside the meter. */
@@ -49,7 +73,7 @@
 
   /* Some colors don't have enough contrast (yellow for JavaScript, white for
    * Idle), therefore adding a border improves accessibility. */
-  border-inline-end: 1px solid var(--grey-50);
+  border-inline-end: 1px solid var(--internal-graph-meter-border-color);
 }
 
 .tooltipCallNodeCategory .tooltipCategoryRowHeader {
@@ -69,16 +93,16 @@
   width: 9px;
   height: 9px;
   box-sizing: border-box;
-  border: 0.5px solid rgb(0 0 0 / 0.1);
+  border: 0.5px solid var(--internal-swatch-border-color);
   margin-right: 3px;
 }
 
 .tooltipCallNodeHeaderSwatchRunning {
-  background-color: var(--blue-40);
+  background-color: var(--internal-swatch-running-background-color);
 }
 
 .tooltipCallNodeHeaderSwatchSelf {
-  background-color: var(--blue-60);
+  background-color: var(--internal-swatch-self-background-color);
 }
 
 .tooltipCallNodeCategory .tooltipCallNodeHeaderSwatchSelf,
diff --git a/src/components/tooltip/Marker.css b/src/components/tooltip/Marker.css
index 6a3bc29dd7..f394e99b46 100644
--- a/src/components/tooltip/Marker.css
+++ b/src/components/tooltip/Marker.css
@@ -18,18 +18,28 @@
 }
 
 .tooltipTitleFilterButton {
+  --tooltip-filter-icon: url(../../../res/img/svg/filter.svg);
+
   width: 16px;
   height: 16px;
   flex: none;
   padding: 0;
   border: none;
   background-color: transparent;
-  background-image: url(../../../res/img/svg/filter.svg);
+  background-image: var(--tooltip-filter-icon);
   cursor: pointer;
   margin-inline-start: 6px;
   opacity: 0.6;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .tooltipTitleFilterButton {
+      --tooltip-filter-icon: url(../../../res/img/svg/filter-light.svg);
+    }
+  }
+}
+
 .tooltipTitleFilterButton:hover {
   opacity: 1;
 }
diff --git a/src/components/tooltip/Tooltip.css b/src/components/tooltip/Tooltip.css
index bd119676ca..2bda0cea4e 100644
--- a/src/components/tooltip/Tooltip.css
+++ b/src/components/tooltip/Tooltip.css
@@ -1,12 +1,22 @@
 .tooltip {
+  --internal-border-color: #ccc;
+  --internal-shadow-color: rgb(0 0 0 / 0.3);
+  --internal-timing-foreground-color: #666;
+  --internal-swatch-foreground-color: #888;
+  --internal-header-border-color: var(--grey-40);
+  --internal-dimmed-foreground-color: var(--grey-50);
+  --internal-backtrace-foreground-color: var(--grey-40);
+  --internal-label-foreground-color: var(--grey-60);
+
   position: fixed;
   display: inline-block;
   overflow: hidden;
   max-width: 600px;
   padding: 8px;
-  border: 1px solid #ccc;
-  background-color: var(--grey-10);
-  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
+  border: 1px solid var(--internal-border-color);
+  background-color: var(--panel-background-color);
+  box-shadow: 0 1px 3px var(--internal-shadow-color);
+  color: var(--base-foreground-color);
   line-height: 1.4;
   pointer-events: none;
   text-align: left;
@@ -14,6 +24,19 @@
   transition: opacity 250ms;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .tooltip {
+      --internal-border-color: var(--grey-60);
+      --internal-timing-foreground-color: var(--grey-40);
+      --internal-header-border-color: var(--grey-40);
+      --internal-dimmed-foreground-color: var(--grey-40);
+      --internal-backtrace-foreground-color: var(--grey-30);
+      --internal-label-foreground-color: var(--grey-40);
+    }
+  }
+}
+
 .tooltip.clickable {
   /* Make sure that the pointer events are properly triggered if it's clickable */
   pointer-events: auto;
@@ -21,7 +44,7 @@
 
 .tooltipTiming {
   padding-right: 0.5em;
-  color: #666;
+  color: var(--internal-timing-foreground-color);
   font-weight: bold;
 }
 
@@ -53,7 +76,7 @@
   display: inline-block;
   width: 10px;
   height: 10px;
-  border: 1px solid #888;
+  border: 1px solid var(--internal-swatch-foreground-color);
   margin-right: 3px;
 }
 
@@ -71,7 +94,7 @@
 
 .tooltipHeader {
   padding-bottom: 8px;
-  border-bottom: 1px solid var(--grey-40);
+  border-bottom: 1px solid var(--internal-header-border-color);
   font-size: 12px;
 }
 
@@ -89,7 +112,7 @@
 }
 
 .tooltipDetailSeparator {
-  border-top: 1px solid var(--grey-40);
+  border-top: 1px solid var(--internal-header-border-color);
   margin: 4px 0;
   grid-column: 1 / 3;
 }
@@ -99,39 +122,39 @@
 }
 
 .tooltipDetailsDim {
-  color: var(--grey-50);
+  color: var(--internal-dimmed-foreground-color);
 }
 
 .tooltipLabel {
-  color: var(--grey-50);
+  color: var(--internal-dimmed-foreground-color);
   text-align: right;
   white-space: nowrap;
 }
 
 .tooltipBackTraceTitle {
   margin: 0;
-  color: var(--grey-50);
+  color: var(--internal-dimmed-foreground-color);
   font-size: 100%;
   font-weight: normal;
 }
 
 .tooltipDetails + .tooltipDetailsBackTrace {
   padding-top: 5px;
-  border-top: 1px solid var(--grey-40);
+  border-top: 1px solid var(--internal-backtrace-foreground-color);
   margin-top: 5px;
 }
 
 .tooltipLib {
   align-self: flex-end;
-  color: var(--grey-50);
+  color: var(--internal-dimmed-foreground-color);
   white-space: nowrap;
 }
 
 .tooltipScreenshotImg {
   padding: 0.5px;
-  border: 0.5px solid rgb(0 0 0 / 0.2);
+  border: 0.5px solid var(--base-shadow-color);
   border-radius: 5px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
+  box-shadow: 0 2px 4px var(--base-shadow-color);
 }
 
 /**
@@ -148,7 +171,7 @@
 
 .sidebar .tooltipLabel {
   margin-top: 8px;
-  color: var(--grey-60);
+  color: var(--internal-label-foreground-color);
   font-weight: bold;
   text-align: left;
 }

From 2fc14b5466e2167cb50c11df99a615325643e14a Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 21:11:25 +0900
Subject: [PATCH 14/33] Apply dark mode to marker chart

---
 src/components/marker-chart/Canvas.tsx | 71 ++++++++++++++++++++------
 src/components/marker-chart/index.css  |  2 +-
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/components/marker-chart/Canvas.tsx b/src/components/marker-chart/Canvas.tsx
index ec6544ad32..ff452e28b2 100644
--- a/src/components/marker-chart/Canvas.tsx
+++ b/src/components/marker-chart/Canvas.tsx
@@ -1,7 +1,21 @@
 /* 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 { GREY_20, GREY_30, BLUE_60, BLUE_80 } from 'photon-colors';
+import {
+  GREY_20,
+  GREY_30,
+  GREY_50,
+  GREY_60,
+  GREY_90,
+  BLUE_60,
+  BLUE_80,
+  TEAL_60,
+  TEAL_80,
+  TEAL_50,
+  TEAL_70,
+} from 'photon-colors';
+import { getForegroundColor, getBackgroundColor } from '../../utils/colors';
+import { isDarkMode, lightDark } from '../../utils/dark-mode';
 import * as React from 'react';
 import {
   withChartViewport,
@@ -103,6 +117,37 @@ const LABEL_PADDING = 5;
 const MARKER_BORDER_COLOR = '#2c77d1';
 const DEFAULT_FILL_COLOR = '#8ac4ff'; // Light blue for non-highlighted
 
+function getSeparatorColor() {
+  return lightDark(GREY_20, GREY_60);
+}
+
+function getBucketBackgroundColor() {
+  return lightDark(GREY_20, GREY_60);
+}
+
+function getBucketBorderColor() {
+  return lightDark(GREY_30, GREY_50);
+}
+
+function getHighlightRowBackgroundColor() {
+  return 'rgba(40, 122, 169, 0.2)';
+}
+
+function getDefaultMarkerColors(isHighlighted: boolean) {
+  if (isDarkMode()) {
+    return {
+      fillColor: isHighlighted ? TEAL_60 : TEAL_80,
+      strokeColor: isHighlighted ? TEAL_50 : TEAL_70,
+      textColor: isHighlighted ? GREY_90 : GREY_20,
+    };
+  }
+  return {
+    fillColor: isHighlighted ? BLUE_60 : DEFAULT_FILL_COLOR,
+    strokeColor: isHighlighted ? BLUE_80 : MARKER_BORDER_COLOR,
+    textColor: isHighlighted ? 'white' : 'black', // White text on dark blue, black text on light blue
+  };
+}
+
 class MarkerChartCanvasImpl extends React.PureComponent<Props> {
   _textMeasurement: TextMeasurement | null = null;
 
@@ -152,15 +197,11 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
       return {
         fillColor: getFillColor(color),
         strokeColor: getStrokeColor(color),
-        textColor: '#000', // Always use black text for unselected markers
+        textColor: getForegroundColor(), // Always use black/white text for unselected markers
       };
     }
     // Fall back to default blue colors
-    return {
-      fillColor: isHighlighted ? BLUE_60 : DEFAULT_FILL_COLOR,
-      strokeColor: isHighlighted ? BLUE_80 : MARKER_BORDER_COLOR,
-      textColor: isHighlighted ? 'white' : 'black', // White text on dark blue, black text on light blue
-    };
+    return getDefaultMarkerColors(isHighlighted);
   }
 
   drawCanvas = (
@@ -235,7 +276,7 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
         this.drawSeparatorsAndLabels(ctx, oldRow, oldRow + 1);
       }
     } else {
-      ctx.fillStyle = '#ffffff';
+      ctx.fillStyle = getBackgroundColor();
       ctx.fillRect(0, 0, containerWidth, containerHeight);
       if (rightClickedRow !== undefined) {
         this.highlightRow(ctx, rightClickedRow);
@@ -253,7 +294,7 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
       viewport: { viewportTop, containerWidth },
     } = this.props;
 
-    ctx.fillStyle = 'rgba(40, 122, 169, 0.2)';
+    ctx.fillStyle = getHighlightRowBackgroundColor();
     ctx.fillRect(
       0, // To include the labels also
       row * rowHeight - viewportTop,
@@ -559,7 +600,7 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
       viewport: { viewportTop, containerWidth },
     } = this.props;
 
-    ctx.fillStyle = '#fff';
+    ctx.fillStyle = getBackgroundColor();
     ctx.fillRect(
       0,
       rowIndex * rowHeight - viewportTop,
@@ -648,7 +689,7 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
     const usefulContainerWidth = containerWidth - marginRight;
 
     // Draw separators
-    ctx.fillStyle = GREY_20;
+    ctx.fillStyle = getSeparatorColor();
     ctx.fillRect(marginLeft - 1, 0, 1, containerHeight);
     for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
       // `- 1` at the end, because the top separator is not drawn in the canvas,
@@ -660,7 +701,7 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
     const textMeasurement = this._getTextMeasurement(ctx);
 
     // Draw the marker names in the left margin.
-    ctx.fillStyle = '#000000';
+    ctx.fillStyle = getForegroundColor();
     for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
       const markerTiming = markerTimingAndBuckets[rowIndex];
       if (typeof markerTiming === 'string') {
@@ -703,16 +744,16 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
       const y = rowIndex * rowHeight - viewportTop;
 
       // Draw the backgound.
-      ctx.fillStyle = GREY_20;
+      ctx.fillStyle = getBucketBackgroundColor();
       ctx.fillRect(0, y - 1, usefulContainerWidth, rowHeight);
 
       // Draw the borders./*
-      ctx.fillStyle = GREY_30;
+      ctx.fillStyle = getBucketBorderColor();
       ctx.fillRect(0, y - 1, usefulContainerWidth, 1);
       ctx.fillRect(0, y + rowHeight - 1, usefulContainerWidth, 1);
 
       // Draw the text.
-      ctx.fillStyle = '#000000';
+      ctx.fillStyle = getForegroundColor();
       ctx.fillText(bucketName, LABEL_PADDING + marginLeft, y + TEXT_OFFSET_TOP);
     }
   }
diff --git a/src/components/marker-chart/index.css b/src/components/marker-chart/index.css
index b6c2beabda..66f92babe4 100644
--- a/src/components/marker-chart/index.css
+++ b/src/components/marker-chart/index.css
@@ -9,5 +9,5 @@
 }
 
 .markerChartCanvas {
-  border-top: 1px solid var(--grey-30);
+  border-top: 1px solid var(--base-border-color);
 }

From 768fe44d028d23ef0e6dd142a2de42d102a422b3 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 21:17:49 +0900
Subject: [PATCH 15/33] Apply dark mode to network chart

---
 src/components/network-chart/index.css | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/network-chart/index.css b/src/components/network-chart/index.css
index 601f93a60e..f372a982d7 100644
--- a/src/components/network-chart/index.css
+++ b/src/components/network-chart/index.css
@@ -6,12 +6,13 @@
   display: flex;
   flex: 1;
   flex-flow: column nowrap;
+  color: var(--base-foreground-color);
   cursor: default;
   user-select: none;
 }
 
 .networkChart .treeViewBody {
-  border-top: 1px solid var(--grey-30);
+  border-top: 1px solid var(--base-border-color);
 }
 
 .networkChart .treeViewBody .treeViewBodyInnerWrapper {
@@ -20,21 +21,34 @@
 }
 
 .networkChartRowItem {
+  --internal-selected-background-color: #bbe0f6;
+  --internal-item-bar-background-color: var(--grey-20);
+  --internal-item-uri-optional-foreground-color: var(--grey-40);
+
   position: relative;
   display: block;
   width: 100%;
   height: 16px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .networkChartRowItem {
+      --internal-selected-background-color: var(--teal-80);
+      --internal-item-uri-optional-foreground-color: var(--grey-50);
+    }
+  }
+}
+
 .networkChartRowItem.odd {
-  background-color: #f5f5f5;
+  background-color: var(--row-odd-background-color);
 }
 
 .networkChartRowItem:hover,
 .networkChartRowItem.isRightClicked,
 .networkChartRowItem.isSelected,
 .networkChartRowItem.isHovered {
-  background-color: #bbe0f6;
+  background-color: var(--internal-selected-background-color);
 }
 
 .networkChartRowItemLabel {
@@ -60,7 +74,7 @@
   margin: 1px 0; /* Because the line's height is 16px, this margin vertically centers the bar */
 
   /* styling properties */
-  background-color: var(--grey-20);
+  background-color: var(--internal-item-bar-background-color);
   box-shadow: 0 0 0 1px inset var(--marker-color);
   opacity: 0.7;
 }
@@ -75,7 +89,7 @@
   display: inline-block;
   overflow: hidden;
   max-width: 90px;
-  color: var(--grey-40);
+  color: var(--internal-item-uri-optional-foreground-color);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -84,6 +98,7 @@
   display: inline-block;
   overflow: hidden;
   max-width: 35%;
+  color: var(--internal-item-uri-required-foreground-color);
   text-overflow: ellipsis;
   white-space: nowrap;
 }

From a98f32aa533ea3460f7903ed636f27f5370f6ce8 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 23:45:27 +0900
Subject: [PATCH 16/33] Apply dark mode to TrackContextMenu component

---
 src/components/shared/TrackSearchField.css | 29 ++++++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/shared/TrackSearchField.css b/src/components/shared/TrackSearchField.css
index 9f3565a06f..52d3ec1b1e 100644
--- a/src/components/shared/TrackSearchField.css
+++ b/src/components/shared/TrackSearchField.css
@@ -3,6 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .trackSearchField {
+  --internal-search-icon: url(../../../res/img/svg/searchfield-icon.svg);
+  --internal-cancel-icon: url(../../../res/img/svg/searchfield-cancel.svg);
+
   position: relative; /* to properly position the button */
   display: inline-flex;
 
@@ -12,22 +15,39 @@
   align-items: center;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .trackSearchField {
+      --internal-search-icon: url(../../../res/img/svg/searchfield-icon-light.svg);
+    }
+  }
+}
+
 .photon-input.trackSearchFieldInput {
+  --internal-border-color: #aaa;
+
   /* the chain class selectors are used here
   to override the styling for the photon-input class */
   width: calc(100% - 10px);
   height: 25px;
   padding: 0 18px 0 17px; /* right padding for the reset button, left padding for the search icon */
-  border: 0.5px solid #aaa;
+  border: 0.5px solid var(--internal-border-color);
   margin: 0 5px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .photon-input.trackSearchFieldInput {
+      --internal-border-color: var(--base-border-color);
+    }
+  }
+}
+
 .trackSearchFieldInput {
   position: relative;
   flex: 1;
   margin: 0;
-  background: url(../../../res/img/svg/searchfield-icon.svg) 3px center
-    no-repeat white;
+  background: var(--internal-search-icon) 3px center no-repeat;
   background-size: 11px 11px;
 }
 
@@ -41,8 +61,7 @@
   height: 11px;
   padding: 0;
   border: 0;
-  background: url(../../../res/img/svg/searchfield-cancel.svg) top left
-    no-repeat;
+  background: var(--internal-cancel-icon) top left no-repeat;
   background-size: contain;
   color: transparent;
   -moz-user-focus: ignore;

From 19f3cdb44324d0286cf791bc48df52197437a1bd Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 21:21:52 +0900
Subject: [PATCH 17/33] Apply dark mode to TabSelectorMenu component

---
 src/components/shared/TabSelectorMenu.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/shared/TabSelectorMenu.css b/src/components/shared/TabSelectorMenu.css
index 92c6ad16b3..4039e06d07 100644
--- a/src/components/shared/TabSelectorMenu.css
+++ b/src/components/shared/TabSelectorMenu.css
@@ -3,6 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .TabSelectorMenu {
+  background-color: var(--base-background-color);
+  color: var(--base-foreground-color);
+
   /* Make it scrollable if the tab list is too long. */
   overflow-y: auto;
 }

From d0ed674ed45ce6247fde01f75c6a7c02e14507c7 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 21:22:59 +0900
Subject: [PATCH 18/33] Apply dark mode to MetaInfo component

---
 src/components/app/MenuButtons/MetaInfo.css   | 21 +++++++++++++++----
 .../MenuButtons/MetaOverheadStatistics.css    | 12 ++++++++++-
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/app/MenuButtons/MetaInfo.css b/src/components/app/MenuButtons/MetaInfo.css
index 1067be8932..d119a245b6 100644
--- a/src/components/app/MenuButtons/MetaInfo.css
+++ b/src/components/app/MenuButtons/MetaInfo.css
@@ -3,14 +3,27 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .metaInfoPanel {
+  --internal-label-foreground-color: var(--grey-50);
+  --internal-subtitle-border-color: rgb(0 0 0 / 0.05);
+
   width: 350px;
+  color: var(--base-foreground-color);
   font-size: 12px;
   line-height: 20px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .metaInfoPanel {
+      --internal-label-foreground-color: var(--grey-40);
+      --internal-subtitle-border-color: rgb(237 237 240 / 0.05);
+    }
+  }
+}
+
 .metaInfoPanel,
 .metaInfoPanel .arrowPanelArrow::before {
-  background-color: white;
+  background-color: var(--base-background-color);
 }
 
 .metaInfoSection {
@@ -22,7 +35,7 @@
 .metaInfoWideLabel {
   display: inline-block;
   width: 120px;
-  color: var(--grey-50);
+  color: var(--internal-label-foreground-color);
 }
 
 .metaInfoLargeContent {
@@ -38,7 +51,7 @@
 .visualMetricsLabel {
   display: inline-block;
   width: 145px;
-  color: var(--grey-50);
+  color: var(--internal-label-foreground-color);
 }
 
 .metaInfoList {
@@ -62,7 +75,7 @@
 .metaInfoSubTitle {
   padding-top: 4px;
   padding-bottom: 4px;
-  border-bottom: 1px solid rgb(0 0 0 / 0.05);
+  border-bottom: 1px solid var(--internal-subtitle-border-color);
   margin: 0;
   font-size: 1.2em;
   font-weight: 700;
diff --git a/src/components/app/MenuButtons/MetaOverheadStatistics.css b/src/components/app/MenuButtons/MetaOverheadStatistics.css
index 8a03792170..b356100d9e 100644
--- a/src/components/app/MenuButtons/MetaOverheadStatistics.css
+++ b/src/components/app/MenuButtons/MetaOverheadStatistics.css
@@ -3,11 +3,21 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .metaInfoGrid {
+  --internal-label-foreground-color: var(--grey-50);
+
   display: grid;
   margin-bottom: 20px;
   grid-template-columns: repeat(4, 1fr);
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .metaInfoGrid {
+      --internal-label-foreground-color: var(--grey-40);
+    }
+  }
+}
+
 .metaInfoGrid > div {
   margin: 2px 0;
 }
@@ -18,7 +28,7 @@
 }
 
 .metaInfoGrid > div:nth-child(4n + 1) {
-  color: var(--grey-50);
+  color: var(--internal-label-foreground-color);
   font-weight: 500;
 }
 

From 98b01073b20234470d3f4489f83b2c1c8b7b55e3 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 21:25:41 +0900
Subject: [PATCH 19/33] Apply dark mode to CodeView components

---
 res/img/svg/asm-icon-light.svg     |  8 ++++
 src/components/app/BottomBox.css   | 27 +++++++++++---
 src/components/shared/CodeView.css | 60 ++++++++++++++++++++++++------
 3 files changed, 78 insertions(+), 17 deletions(-)
 create mode 100644 res/img/svg/asm-icon-light.svg

diff --git a/res/img/svg/asm-icon-light.svg b/res/img/svg/asm-icon-light.svg
new file mode 100644
index 0000000000..42fae25e46
--- /dev/null
+++ b/res/img/svg/asm-icon-light.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <path fill="#ededf0" d="M3.073 8.015H2.76q-.826 0-1.247.286-.416.28-.416.842 0 .506.313.786t.867.28q.78 0 1.227-.525.447-.531.452-1.464v-.205Zm1.833-.38v3.201h-.95v-.832q-.303.502-.765.742-.457.236-1.114.236-.877 0-1.401-.481-.524-.487-.524-1.298 0-.937.642-1.424.647-.486 1.894-.486h1.268v-.145q-.005-.671-.349-.972-.344-.306-1.099-.306-.482 0-.975.135-.493.136-.96.396V5.48q.524-.195 1.001-.29.483-.1.934-.1.714 0 1.217.205.508.205.821.616.195.25.278.622.082.365.082 1.102z"/>
+  <path fill="#ededf0" d="M9.77 5.346v.91q-.392-.233-.79-.349-.397-.116-.81-.116-.622 0-.93.207-.303.202-.303.622 0 .38.229.567.228.187 1.138.364l.368.07q.681.132 1.03.527.352.394.352 1.027 0 .84-.586 1.315-.587.47-1.631.47-.413 0-.865-.09-.453-.087-.98-.264v-.96q.512.267.98.404.467.131.885.131.606 0 .94-.248.333-.252.333-.703 0-.647-1.219-.895l-.04-.01-.343-.07q-.79-.158-1.153-.527-.363-.374-.363-1.017 0-.814.542-1.254.542-.445 1.546-.445.448 0 .86.086.413.08.81.248z"/>
+  <path fill="#ededf0" d="M13.732 5.754q.162-.366.41-.539.252-.178.605-.178.643 0 .905.534.267.528.267 1.996v3.298h-.8V7.608q0-1.204-.13-1.494-.123-.294-.457-.294-.38 0-.524.315-.138.31-.138 1.473v3.257h-.8V7.608q0-1.22-.139-1.504-.133-.284-.486-.284-.348 0-.486.315-.133.31-.133 1.473v3.257h-.796v-5.69h.796v.487q.157-.305.39-.462.239-.163.539-.163.362 0 .6.178.243.178.377.539z"/>
+</svg>
diff --git a/src/components/app/BottomBox.css b/src/components/app/BottomBox.css
index 683dce9a99..d3e069c2c8 100644
--- a/src/components/app/BottomBox.css
+++ b/src/components/app/BottomBox.css
@@ -3,9 +3,24 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .bottom-box-pane {
+  --internal-sourceview-background-color: var(--grey-20);
+  --internal-close-icon: url(../../../res/img/svg/close-dark.svg);
+  --internal-assembly-icon: url(../../../res/img/svg/asm-icon.svg);
+
   display: flex;
   height: 100%; /* direct child of SplitterLayout */
   flex-flow: column nowrap;
+  color: var(--base-foreground-color);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .bottom-box-pane {
+      --internal-sourceview-background-color: var(--ink-80);
+      --internal-close-icon: url(../../../res/img/svg/close-light.svg);
+      --internal-assembly-icon: url(../../../res/img/svg/asm-icon-light.svg);
+    }
+  }
 }
 
 .bottom-sourceview-wrapper,
@@ -15,14 +30,14 @@
   min-height: 0;
   flex: 1;
   flex-flow: column;
-  background: var(--grey-20);
+  background: var(--internal-sourceview-background-color);
 }
 
 .bottom-box .layout-splitter {
   position: relative; /* containing block for absolute ::before */
   width: 1px;
   border: none;
-  background-color: var(--grey-30) !important;
+  background-color: var(--base-border-color) !important;
 }
 
 /* Provide 3px extra grabbable surface on each side of the splitter */
@@ -41,8 +56,8 @@
   flex-flow: row;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid var(--grey-30);
-  background: var(--grey-10);
+  border-bottom: 1px solid var(--panel-border-color);
+  background: var(--panel-background-color);
   line-height: 18px;
 }
 
@@ -72,11 +87,11 @@
 }
 
 .bottom-close-button {
-  background-image: url(../../../res/img/svg/close-dark.svg);
+  background-image: var(--internal-close-icon);
 }
 
 .bottom-assembly-button {
-  background-image: url(../../../res/img/svg/asm-icon.svg);
+  background-image: var(--internal-assembly-icon);
 }
 
 .codeLoadingOverlay,
diff --git a/src/components/shared/CodeView.css b/src/components/shared/CodeView.css
index 0798eb14ad..331d8e5e27 100644
--- a/src/components/shared/CodeView.css
+++ b/src/components/shared/CodeView.css
@@ -3,11 +3,24 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .codeView {
+  --codeview-foreground-color: #000;
+  --codeview-background-color: white;
+  --codeview-header-background-color: white;
+  --codeview-header-border-color: var(--grey-30);
+  --codeview-header-sep-color: #e5e5e5;
+  --codeview-gutter-foreground-color: black;
+  --codeview-gutter-background-color: white;
+  --codeview-gutter-border-color: var(--grey-30);
+  --codeview-linenum-foreground-color: ##aaa;
+  --codeview-nonzero-background-color: #edf6ff;
+  --codeview-highlight-background-color: #fffbcc;
+
   display: flex;
   min-height: 0;
   flex: 1;
   flex-flow: column;
-  background: white;
+  background: var(--codeview-background-color);
+  color: var(--codeview-foreground-color);
 
   /* Extra intermediate colors which Photon doesn't have, from
      https://searchfox.org/mozilla-central/rev/8012bca692dddb307c2787bac1d4dd48cb0d8243/devtools/client/themes/variables.css#34-100 */
@@ -24,13 +37,38 @@
   --theme-highlight-punctuation: var(--grey-70);
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .codeView {
+      --codeview-foreground-color: var(--grey-20);
+      --codeview-background-color: var(--ink-90);
+      --codeview-header-background-color: var(--ink-90);
+      --codeview-header-border-color: var(--grey-50);
+      --codeview-header-sep-color: var(--grey-50);
+      --codeview-gutter-foreground-color: var(--grey-30);
+      --codeview-gutter-background-color: var(--ink-90);
+      --codeview-gutter-border-color: var(--grey-50);
+      --codeview-linenum-foreground-color: var(--grey-30);
+      --codeview-nonzero-background-color: var(--ink-80);
+      --codeview-highlight-background-color: var(--yellow-90);
+      --theme-highlight-keyword: var(--magenta-65);
+      --theme-highlight-type: var(--purple-40);
+      --theme-highlight-variable: var(--blue-40);
+      --theme-highlight-method: var(--green-60);
+      --theme-highlight-literal: var(--teal-60);
+      --theme-highlight-comment: var(--grey-40);
+      --theme-highlight-punctuation: var(--grey-50);
+    }
+  }
+}
+
 .codeViewHeader {
   display: flex;
   height: 16px;
   flex-flow: row;
   padding: 1px 0;
-  border-bottom: 1px solid var(--grey-30);
-  background: white;
+  border-bottom: 1px solid var(--codeview-header-border-color);
+  background: var(--codeview-header-background-color);
 }
 
 .codeMirrorContainer {
@@ -52,7 +90,7 @@
 
 .cm-gutters {
   border-right: 0 !important;
-  background-color: white !important;
+  background-color: var(--codeview-gutter-background-color) !important;
 }
 
 .codeViewHeaderMainColumn {
@@ -74,7 +112,7 @@
   right: 0;
   bottom: 3px;
   width: 1px;
-  background: #e5e5e5;
+  background: var(--codeview-header-sep-color);
   content: '';
 }
 
@@ -88,12 +126,12 @@
 
 .cm-total-timings-gutter,
 .cm-self-timings-gutter {
-  border-right: 1px solid var(--grey-30);
-  color: black;
+  border-right: 1px solid var(--codeview-gutter-border-color);
+  color: var(--codeview-gutter-foreground-color);
 }
 
 .cm-lineNumbers {
-  color: #aaa;
+  color: var(--codeview-linenum-foreground-color);
   font-variant-numeric: tabular-nums;
 }
 
@@ -102,7 +140,7 @@
 }
 
 .cm-instruction-address-gutter {
-  color: #aaa;
+  color: var(--codeview-linenum-foreground-color);
   font-family: ui-monospace, 'Roboto Mono', monospace;
   font-variant-numeric: tabular-nums;
 }
@@ -122,11 +160,11 @@
 }
 
 .cm-nonZeroLine {
-  background-color: #edf6ff;
+  background-color: var(--codeview-nonzero-background-color);
 }
 
 .cm-highlightedLine {
-  background-color: #fffbcc;
+  background-color: var(--codeview-highlight-background-color);
 }
 
 .cm-content {

From 02e83b696b7c9f0402474ed443d3e50e4dfd842f Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 21:52:26 +0900
Subject: [PATCH 20/33] Apply dark mode to colored border

---
 res/css/global.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/res/css/global.css b/res/css/global.css
index 9d0e5d0774..8d4b99bc3a 100644
--- a/res/css/global.css
+++ b/res/css/global.css
@@ -34,6 +34,7 @@
   --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);
@@ -80,6 +81,7 @@
         var(--teal-50) 20%
       );
       --tooltip-number-foreground-color: var(--grey-40);
+      --colored-border-color: rgb(237 237 240 / 0.1);
     }
   }
 }
@@ -105,7 +107,7 @@ a:active {
   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 */
@@ -113,7 +115,7 @@ a:active {
 }
 
 .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 */

From d259069f969af07a863532931d57d1a03cbecb48 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sat, 27 Dec 2025 23:17:14 +0900
Subject: [PATCH 21/33] Apply dark mode to CompareHome component

---
 src/components/app/CompareHome.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/app/CompareHome.css b/src/components/app/CompareHome.css
index a4a438b336..0e31e5cf79 100644
--- a/src/components/app/CompareHome.css
+++ b/src/components/app/CompareHome.css
@@ -9,7 +9,7 @@
   margin: auto;
 
   /* Other */
-  background: #fff;
+  background: var(--base-border-color);
   box-shadow: 0 5px 25px #0b1f50;
   font-size: 130%;
 }

From 4907add2a7a2f483a758f9f9282c18f9d30cc6ca Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 01:03:11 +0900
Subject: [PATCH 22/33] Apply dark mode to UploadedRecordingsHome component

---
 res/img/svg/brands/android-light.svg          |  1 +
 res/img/svg/brands/apple-light.svg            |  1 +
 res/img/svg/brands/firefoxbrowser-light.svg   |  1 +
 res/img/svg/brands/linux-light.svg            |  1 +
 res/img/svg/brands/windows-light.svg          |  1 +
 src/components/app/CompareHome.css            |  6 ++--
 .../app/ListOfPublishedProfiles.css           | 30 ++++++++++++++--
 src/components/app/UploadedRecordingsHome.css |  6 ++--
 .../shared/ProfileMetaInfoSummary.css         | 34 +++++++++++++++----
 9 files changed, 65 insertions(+), 16 deletions(-)
 create mode 100644 res/img/svg/brands/android-light.svg
 create mode 100644 res/img/svg/brands/apple-light.svg
 create mode 100644 res/img/svg/brands/firefoxbrowser-light.svg
 create mode 100644 res/img/svg/brands/linux-light.svg
 create mode 100644 res/img/svg/brands/windows-light.svg

diff --git a/res/img/svg/brands/android-light.svg b/res/img/svg/brands/android-light.svg
new file mode 100644
index 0000000000..6946ad6852
--- /dev/null
+++ b/res/img/svg/brands/android-light.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Android icon</title><path fill="#ededf0" d="M24 19H0a13.6 13.6 0 0 1 2.21-6.07A11.2 11.2 0 0 1 5.87 9.4l.41-.23-2.02-3.41a.51.51 0 0 1 .17-.7.5.5 0 0 1 .69.18l2.08 3.5a12.62 12.62 0 0 1 4.84-.9 12.2 12.2 0 0 1 4.75.9l2.07-3.5a.5.5 0 0 1 .7-.17.51.51 0 0 1 .16.7L17.7 9.19l.5.28a11.38 11.38 0 0 1 3.63 3.62A14.48 14.48 0 0 1 24 19zm-7.5-4.48a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1zm-11 0a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1z"/></svg>
diff --git a/res/img/svg/brands/apple-light.svg b/res/img/svg/brands/apple-light.svg
new file mode 100644
index 0000000000..58e56d425a
--- /dev/null
+++ b/res/img/svg/brands/apple-light.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apple icon</title><path fill="#ededf0" d="M7.078 23.55c-.473-.316-.893-.703-1.244-1.15-.383-.463-.738-.95-1.064-1.454-.766-1.12-1.365-2.345-1.78-3.636-.5-1.502-.743-2.94-.743-4.347 0-1.57.34-2.94 1.002-4.09.49-.9 1.22-1.653 2.1-2.182.85-.53 1.84-.82 2.84-.84.35 0 .73.05 1.13.15.29.08.64.21 1.07.37.55.21.85.34.95.37.32.12.59.17.8.17.16 0 .39-.05.645-.13.145-.05.42-.14.81-.31.386-.14.692-.26.935-.35.37-.11.728-.21 1.05-.26.39-.06.777-.08 1.148-.05.71.05 1.36.2 1.94.42 1.02.41 1.843 1.05 2.457 1.96-.26.16-.5.346-.725.55-.487.43-.9.94-1.23 1.505-.43.77-.65 1.64-.644 2.52.015 1.083.29 2.035.84 2.86.387.6.904 1.114 1.534 1.536.31.21.582.355.84.45-.12.375-.252.74-.405 1.1-.347.807-.76 1.58-1.25 2.31-.432.63-.772 1.1-1.03 1.41-.402.48-.79.84-1.18 1.097-.43.285-.935.436-1.452.436-.35.015-.7-.03-1.034-.127-.29-.095-.576-.202-.856-.323-.293-.134-.596-.248-.905-.34-.38-.1-.77-.148-1.164-.147-.4 0-.79.05-1.16.145-.31.088-.61.196-.907.325-.42.175-.695.29-.855.34-.324.096-.656.154-.99.175-.52 0-1.004-.15-1.486-.45zm6.854-18.46c-.68.34-1.326.484-1.973.436-.1-.646 0-1.31.27-2.037.24-.62.56-1.18 1-1.68.46-.52 1.01-.95 1.63-1.26.66-.34 1.29-.52 1.89-.55.08.68 0 1.35-.25 2.07-.228.64-.568 1.23-1 1.76-.435.52-.975.95-1.586 1.26z"/></svg>
diff --git a/res/img/svg/brands/firefoxbrowser-light.svg b/res/img/svg/brands/firefoxbrowser-light.svg
new file mode 100644
index 0000000000..fe5bac6148
--- /dev/null
+++ b/res/img/svg/brands/firefoxbrowser-light.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Firefox Browser icon</title><path fill="#ededf0" d="M8.855 7.333c.008 0 .004 0 0 0zM6.082 5.947c.007 0 .004 0 0 0zm16.59 2.14c-.5-1.203-1.514-2.503-2.31-2.914.648 1.27 1.023 2.544 1.166 3.495l.002.02c-1.302-3.246-3.51-4.555-5.314-7.404-.09-.145-.182-.289-.27-.441a3.51 3.51 0 01-.128-.238 2.097 2.097 0 01-.171-.456.03.03 0 00-.027-.03.038.038 0 00-.021 0l-.006.002a.037.037 0 00-.009.005.038.038 0 01.005-.007c-2.56 1.5-3.622 4.126-3.894 5.797a6.136 6.136 0 00-2.282.582.294.294 0 00-.146.366.29.29 0 00.392.169 5.567 5.567 0 011.988-.519l.067-.005A5.636 5.636 0 0112 6.5a5.79 5.79 0 011.652.229l.094.03a5.757 5.757 0 01.265.088 5.839 5.839 0 01.191.075c.052.02.103.041.154.063a5.676 5.676 0 01.235.111l.106.054a5.776 5.776 0 01.224.123 5.165 5.165 0 01.141.086 5.895 5.895 0 012.014 2.083c-.615-.432-1.716-.859-2.776-.674 4.142 2.07 3.03 9.201-2.71 8.932a5.113 5.113 0 01-1.498-.29 6.347 6.347 0 01-.339-.137 4.37 4.37 0 01-.194-.093c-1.406-.727-2.567-2.1-2.712-3.768 0 0 .531-1.981 3.806-1.981.354 0 1.366-.988 1.385-1.274-.005-.094-2.009-.891-2.79-1.66-.418-.412-.616-.61-.791-.76a3.436 3.436 0 00-.299-.225 5.335 5.335 0 01-.032-2.814c-1.183.539-2.103 1.39-2.772 2.142h-.006c-.456-.578-.424-2.486-.398-2.884-.006-.025-.34.174-.385.204a8.395 8.395 0 00-1.125.964 10.086 10.086 0 00-1.075 1.29v0A9.72 9.72 0 00.819 9.9c-.003.013-.11.482-.188 1.062a12.736 12.736 0 00-.037.27 7.724 7.724 0 00-.068.66l-.002.034a28.326 28.326 0 00-.023.383l-.001.06c0 6.358 5.156 11.513 11.516 11.513 5.695 0 10.424-4.135 11.35-9.566.02-.147.035-.295.052-.444.23-1.974-.025-4.05-.746-5.786zm-7.862 3.455z"/></svg>
diff --git a/res/img/svg/brands/linux-light.svg b/res/img/svg/brands/linux-light.svg
new file mode 100644
index 0000000000..873d8c13ea
--- /dev/null
+++ b/res/img/svg/brands/linux-light.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Linux icon</title><path fill="#ededf0" d="M12.503 0c-.155 0-.315.008-.479.021-4.227.333-3.106 4.807-3.17 6.298-.077 1.093-.3 1.954-1.051 3.021-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489-.039.034-.076.068-.111.135-.26.268-.449.601-.662.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.681-.09.188-.136.393-.132.601 0 .199.027.401.055.536.058.399.116.729.039.97-.248.68-.279 1.146-.105 1.485.174.334.535.469.939.601.811.2 1.91.135 2.775.599.926.467 1.866.671 2.616.47.526-.115.97-.463 1.208-.945.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.578.199.025.135.063.199.114.334l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.199-.812-.714-1.377v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135-.056-.038-.121-.062-.19-.064.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.561-3.369.027-2.152.237-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.191.135.33.332.439.533.105.259.158.459.166.724 0-.02.006-.04.006-.059v.104c-.002-.007-.004-.015-.004-.021l-.004-.024c-.002.243-.053.483-.15.706-.047.125-.119.24-.213.335-.029-.016-.057-.03-.088-.042-.105-.045-.199-.064-.285-.133-.071-.028-.145-.051-.219-.066.049-.059.145-.133.182-.198.053-.128.082-.264.088-.402v-.019c.002-.135-.018-.271-.061-.4-.045-.135-.101-.201-.183-.334-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132-.095.094-.166.207-.205.334-.053.127-.084.264-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202-.01-.065-.016-.132-.018-.199v-.02c-.008-.264.043-.526.15-.769.082-.219.232-.406.43-.533.171-.129.379-.199.594-.199zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.141.401.153.667v.004c.007.134.006.201-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.089.013-.179.003-.267v-.015c-.012-.133-.039-.199-.082-.333-.031-.102-.088-.193-.166-.267-.049-.045-.115-.068-.183-.064h-.021c-.071.006-.13.041-.186.132-.064.077-.105.171-.12.27-.027.108-.035.219-.023.331v.014c.012.135.037.201.081.334.045.134.097.2.165.268.011.009.021.018.034.024-.07.057-.117.07-.176.136-.037.028-.08.06-.131.068-.104-.125-.196-.26-.275-.402-.096-.21-.146-.438-.155-.667-.017-.226.011-.452.08-.668.055-.197.152-.379.283-.535.128-.133.26-.2.418-.2zm1.371 1.706c.331 0 .732.065 1.215.399.293.2.523.269 1.053.468h.003c.255.136.405.266.478.399v-.131c.073.147.078.318.016.47-.123.311-.516.644-1.064.843v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267-.152.008-.305-.015-.448-.067-.11-.06-.218-.126-.322-.198-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.711-.069-.268-.005-.469.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.469.839-.601.139-.036.294-.065.466-.065zm2.799 2.143c.359 1.417 1.197 3.475 1.736 4.473.286.534.855 1.659 1.102 3.024.156-.005.329.018.513.064.646-1.671-.546-3.467-1.089-3.966-.221-.201-.232-.335-.123-.335.589.534 1.365 1.572 1.646 2.757.129.535.159 1.104.021 1.67.067.028.135.061.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.061-.003-.12 0-.181 0h-.015c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.771.465-.007.043-.012.066-.017.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.021.334-.171.838-.319 1.351-1.5 1.072-3.58 1.538-5.349.334-.111-.193-.246-.374-.402-.533-.074-.125-.168-.237-.275-.334.182 0 .338-.029.465-.067.145-.067.257-.188.314-.334.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.399-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.141 2.497-.122 3.854.038-.989.258-1.965.647-2.876.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.211.201.477.335.876.335.039.003.075.006.111.006.411 0 .729-.134.996-.268.29-.134.521-.334.74-.4h.005c.467-.135.836-.402 1.045-.7zm2.186 8.958c.037.601.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.009c.315-.008.577.01.847.267l.003.003c.208.199.305.531.391.876.085.401.154.78.409 1.066.486.527.645.906.636 1.14l.003-.006v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.371 1.139-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.401-.12-1.025.056-1.69.176-.668.428-1.345.463-1.898.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.815.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.638.434.598.77 1.131.729 1.57v.006c-.057.744-.479 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.611-.201-.723-.401-.111-.199-.113-.601.123-1.23v-.003l.002-.003c.117-.334.03-.753-.027-1.119-.055-.401-.083-.709.043-.94.16-.334.396-.399.689-.533.295-.135.641-.202.916-.469h.002v-.003c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.279-.466-.155-.134-.28-.268-.374-.335-.164-.134-.144-.334-.074-.334.109.016.129.135.199.201.096.066.215.199.361.333.291.2.68.467 1.166.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.137.149-.268.279-.268.129.016.034.134-.147.333-.181.135-.461.335-.69.468v-.001zm-1.082-1.584V5.64c-.006-.019.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.139.068-.051 0-.131-.019-.137-.068-.009-.066.088-.133.15-.133.081-.031.184-.047.259-.005.019.009.036.03.03.05v.021h.003z"/></svg>
diff --git a/res/img/svg/brands/windows-light.svg b/res/img/svg/brands/windows-light.svg
new file mode 100644
index 0000000000..768f507865
--- /dev/null
+++ b/res/img/svg/brands/windows-light.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Windows icon</title><path fill="#ededf0" d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/></svg>
diff --git a/src/components/app/CompareHome.css b/src/components/app/CompareHome.css
index 0e31e5cf79..2cf68ab9b2 100644
--- a/src/components/app/CompareHome.css
+++ b/src/components/app/CompareHome.css
@@ -4,13 +4,13 @@
 
   /* Box */
   padding: 8em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--home-border-color);
   border-radius: 3px;
   margin: auto;
 
   /* Other */
-  background: var(--base-border-color);
-  box-shadow: 0 5px 25px #0b1f50;
+  background: var(--base-background-color);
+  box-shadow: 0 5px 25px var(--home-shadow-color);
   font-size: 130%;
 }
 
diff --git a/src/components/app/ListOfPublishedProfiles.css b/src/components/app/ListOfPublishedProfiles.css
index 2d040d09bf..270bca81a1 100644
--- a/src/components/app/ListOfPublishedProfiles.css
+++ b/src/components/app/ListOfPublishedProfiles.css
@@ -35,6 +35,8 @@
 }
 
 .publishedProfilesListItem {
+  --internal-hover-shadow-color: var(--blue-60);
+
   display: flex;
   justify-content: space-between;
 
@@ -45,22 +47,44 @@
   margin: -2px 0;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .publishedProfilesListItem {
+      --internal-hover-shadow-color: var(--blue-70);
+    }
+  }
+}
+
 .publishedProfilesLink {
+  --internal-hover-background-color: var(--grey-90-a05);
+
   display: flex;
   min-width: 0;
   flex: auto;
   padding: 4px 8px; /* 4px as vertical padding so that it's 8 when added up, and 8px for the left and right padddings */
-  color: inherit;
+  color: var(--base-foreground-color);
   text-decoration: none;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .publishedProfilesLink {
+      --internal-hover-background-color: var(--grey-10-a10);
+    }
+  }
+}
+
+.publishedProfilesLink:visited {
+  color: var(--base-foreground-color);
+}
+
 .publishedProfilesLink:hover {
-  background: var(--grey-90-a05);
+  background: var(--internal-hover-background-color);
 }
 
 .publishedProfilesListItem_ConfirmDialogIsOpen,
 .publishedProfilesListItem:focus-within {
-  box-shadow: -3px 0 0 var(--blue-60); /* This is a border that doesn't move the content. */
+  box-shadow: -3px 0 0 var(--internal-hover-shadow-color); /* This is a border that doesn't move the content. */
 }
 
 .publishedProfilesDate {
diff --git a/src/components/app/UploadedRecordingsHome.css b/src/components/app/UploadedRecordingsHome.css
index 9d9f48f335..a02b3e52e4 100644
--- a/src/components/app/UploadedRecordingsHome.css
+++ b/src/components/app/UploadedRecordingsHome.css
@@ -8,13 +8,13 @@
   max-width: 900px;
   box-sizing: border-box;
   padding: 3em 1em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--home-border-color);
   border-radius: 3px;
   margin: auto;
 
   /* Other */
-  background: #fff;
-  box-shadow: 0 5px 25px #0b1f50;
+  background: var(--base-background-color);
+  box-shadow: 0 5px 25px var(--home-shadow-color);
   font-size: 13px;
   line-height: 1.5;
 }
diff --git a/src/components/shared/ProfileMetaInfoSummary.css b/src/components/shared/ProfileMetaInfoSummary.css
index dffc90cc34..38c93f0c6e 100644
--- a/src/components/shared/ProfileMetaInfoSummary.css
+++ b/src/components/shared/ProfileMetaInfoSummary.css
@@ -5,12 +5,32 @@
 /* We use em in this CSS file so that it will adjust with the inherited font-size. */
 
 .profileMetaInfoSummary {
+  --internal-info-icon: url(../../../res/img/svg/info.svg);
+  --internal-firefox-icon: url(../../../res/img/svg/brands/firefoxbrowser.svg);
+  --internal-apple-icon: url(../../../res/img/svg/brands/apple.svg);
+  --internal-windows-icon: url(../../../res/img/svg/brands/windows.svg);
+  --internal-linux-icon: url(../../../res/img/svg/brands/linux.svg);
+  --internal-android-icon: url(../../../res/img/svg/brands/android.svg);
+
   display: flex;
   overflow: hidden;
   min-width: 0;
   align-items: stretch;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .profileMetaInfoSummary {
+      --internal-info-icon: url(../../../res/img/svg/info-light.svg);
+      --internal-firefox-icon: url(../../../res/img/svg/brands/firefoxbrowser-light.svg);
+      --internal-apple-icon: url(../../../res/img/svg/brands/apple-light.svg);
+      --internal-windows-icon: url(../../../res/img/svg/brands/windows-light.svg);
+      --internal-linux-icon: url(../../../res/img/svg/brands/linux-light.svg);
+      --internal-android-icon: url(../../../res/img/svg/brands/android-light.svg);
+    }
+  }
+}
+
 .profileMetaInfoSummaryProductAndVersion,
 .profileMetaInfoSummaryPlatform {
   overflow: hidden;
@@ -20,32 +40,32 @@
 
 .profileMetaInfoSummaryProductAndVersion {
   padding-left: 1.4em; /* 1 (for the background image) + 0.4 */
-  background: url(../../../res/img/svg/info.svg) left center / 1em no-repeat;
+  background: var(--internal-info-icon) left center / 1em no-repeat;
 }
 
 .profileMetaInfoSummaryProductAndVersion[data-product^='Firefox'],
 .profileMetaInfoSummaryProductAndVersion[data-product='Fennec'] {
-  background-image: url(../../../res/img/svg/brands/firefoxbrowser.svg);
+  background-image: var(--internal-firefox-icon);
 }
 
 .profileMetaInfoSummaryPlatform {
   padding-left: 1.4em; /* 1 (for the background image) + 0.4 */
   margin-left: 1em;
-  background: url(../../../res/img/svg/info.svg) left center / 1em no-repeat;
+  background: var(--internal-info-icon) left center / 1em no-repeat;
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='macOS'] {
-  background-image: url(../../../res/img/svg/brands/apple.svg);
+  background-image: var(--internal-apple-icon);
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='Windows'] {
-  background-image: url(../../../res/img/svg/brands/windows.svg);
+  background-image: var(--internal-windows-icon);
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='Linux'] {
-  background-image: url(../../../res/img/svg/brands/linux.svg);
+  background-image: var(--internal-linux-icon);
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='Android'] {
-  background-image: url(../../../res/img/svg/brands/android.svg);
+  background-image: var(--internal-android-icon);
 }

From b2cd85b40a69f9defef13fc265551894235c5d72 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 00:28:47 +0900
Subject: [PATCH 23/33] Apply dark mode to context menu components

---
 src/components/shared/CallNodeContextMenu.css | 28 +++++++--
 src/components/shared/ContextMenu.css         | 62 ++++++++++++++-----
 src/components/shared/MarkerContextMenu.css   | 12 ++++
 src/components/timeline/TrackContextMenu.css  | 24 +++++--
 4 files changed, 98 insertions(+), 28 deletions(-)

diff --git a/src/components/shared/CallNodeContextMenu.css b/src/components/shared/CallNodeContextMenu.css
index fd94da6e7d..f88e256b44 100644
--- a/src/components/shared/CallNodeContextMenu.css
+++ b/src/components/shared/CallNodeContextMenu.css
@@ -32,19 +32,37 @@
 }
 
 .callNodeContextMenuShortcut {
-  padding: 0 5px;
-  border-radius: 3px;
+  --internal-foreground-color: #000;
 
   /* This color is based off of photon grey, but adjusted to have a nice visual look
      when hovering. */
-  background: #dedee3c9;
-  box-shadow: 1px 1px #0004;
+  --internal-background-color: #dedee3c9;
+  --internal-shadow-color: #0004;
+
+  padding: 0 5px;
+  border-radius: 3px;
+  background: var(--internal-background-color);
+  box-shadow: 1px 1px var(--internal-shadow-color);
 
   /* Override the hover color. */
-  color: #000;
+  color: var(--internal-foreground-color);
   margin-inline-start: 12px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+.callNodeContextMenu .react-contextmenu-icon,
+.callNodeContextMenu .react-contextmenu-icon {
+  filter: invert(1);
+}
+
+.callNodeContextMenuShortcut {
+  --internal-background-color: #d7d7dbc0;
+  --internal-shadow-color: #b1b1b380;
+}
+}
+}
+
 @media (forced-colors: active) {
   .callNodeContextMenuShortcut {
     background: SelectedItemText;
diff --git a/src/components/shared/ContextMenu.css b/src/components/shared/ContextMenu.css
index 710baa2fbe..58f3c5e669 100644
--- a/src/components/shared/ContextMenu.css
+++ b/src/components/shared/ContextMenu.css
@@ -3,6 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .react-contextmenu {
+  --internal-shadow-color1: rgb(0 0 0 / 0.1);
+  --internal-shadow-color2: rgb(0 0 0 / 0.3);
+  --internal-separator-color: #ddd;
+  --internal-divider-color: rgb(0 0 0 / 0.15);
+  --internal-active-foreground-color: #fff;
+  --internal-active-background-color: var(--blue-60);
+  --internal-disabled-foreground-color: #888;
+  --internal-selected-disabled-background-color: var(--blue-50-a30);
+  --internal-highlight-foreground-color: var(--grey-70);
+
   z-index: 4; /* needs to be on a higher level than .overflowEdgeIndicatorEdge */
   display: none;
   min-width: 160px;
@@ -10,18 +20,36 @@
   padding: 5px 0;
   border-radius: 3px;
   margin: 2px 0 0;
-  background-color: #fff;
+  background-color: var(--base-background-color);
   box-shadow:
-    0 0 0 0.5px rgb(0 0 0 / 0.1),
-    0 10px 12px rgb(0 0 0 / 0.3);
-  color: #000;
+    0 0 0 0.5px var(--internal-shadow-color1),
+    0 10px 12px var(--internal-shadow-color2);
+  color: var(--base-foreground-color);
   font-size: 12px;
   text-align: left;
   user-select: none;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+.react-contextmenu {
+  --internal-shadow-color1: rgb(0 0 0 / 0.2);
+  --internal-shadow-color2: rgb(0 0 0 / 0.4);
+  --internal-separator-color: var(--base-border-color);
+  --internal-divider-color: rgb(237 237 240 / 0.15);
+  --internal-active-foreground-color: var(--grey-20);
+  --internal-active-background-color: var(--blue-70);
+  --internal-disabled-foreground-color: var(--grey-50);
+  --internal-selected-disabled-background-color: var(--blue-60-a30);
+  --internal-highlight-foreground-color: var(--grey-30);
+
+  border: 1px solid var(--base-border-color);
+}
+}
+}
+
 .react-contextmenu-separator {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--internal-separator-color);
   margin: 6px 0;
 }
 
@@ -44,21 +72,21 @@
 
 .react-contextmenu-item.react-contextmenu-item--active,
 .react-contextmenu-item--selected {
-  border-color: var(--blue-60);
-  background-color: var(--blue-60);
-  color: #fff;
+  border-color: var(--internal-active-background-color);
+  background-color: var(--internal-active-background-color);
+  color: var(--internal-active-foreground-color);
   text-decoration: none;
 }
 
 .react-contextmenu-item.react-contextmenu-item--disabled,
 .react-contextmenu-item.react-contextmenu-item--disabled:hover {
   background-color: transparent;
-  color: #888;
+  color: var(--internal-disabled-foreground-color);
 }
 
 .react-contextmenu-item--divider {
   padding: 2px 0;
-  border-bottom: 1px solid rgb(0 0 0 / 0.15);
+  border-bottom: 1px solid var(--internal-divider-color);
   margin-bottom: 3px;
 }
 
@@ -71,7 +99,7 @@
   width: 0;
   height: 0;
   border: 6px solid transparent;
-  border-left-color: #000;
+  border-left-color: var(--base-foreground-color);
   content: '';
 }
 
@@ -99,7 +127,7 @@
   display: block;
   width: 3px;
   height: 6px;
-  border: solid #000;
+  border: solid var(--base-foreground-color);
   border-width: 0 2px 2px 0;
   content: '';
   transform: rotate(45deg);
@@ -107,18 +135,18 @@
 
 .react-contextmenu-item.react-contextmenu-item--active.checked,
 .react-contextmenu-item--selected.checked {
-  border-color: #fff;
+  border-color: var(--internal-active-foreground-color);
 }
 
 .react-contextmenu-item--disabled.react-contextmenu-item--selected {
-  background-color: var(--blue-50-a30);
+  background-color: var(--internal-selected-disabled-background-color);
 }
 
 .react-contextmenu-item--selected.checked:not(
     .react-contextmenu-item--disabled
   )::before {
   /* Invert the colors of the checkmark when selected */
-  border-color: #fff;
+  border-color: var(--internal-active-foreground-color);
 }
 
 /* Use this wrapper for a content that needs to take the available space or if
@@ -142,11 +170,11 @@
 
 /* Soften a bit the style of highlighted words */
 .react-contextmenu-item > strong {
-  color: #38383d;
+  color: var(--internal-highlight-foreground-color);
 }
 
 .react-contextmenu-item--selected > strong {
-  color: #fff;
+  color: var(--internal-active-foreground-color);
 }
 
 @media (forced-colors: active) {
diff --git a/src/components/shared/MarkerContextMenu.css b/src/components/shared/MarkerContextMenu.css
index 851877cfac..04c9c217e9 100644
--- a/src/components/shared/MarkerContextMenu.css
+++ b/src/components/shared/MarkerContextMenu.css
@@ -66,3 +66,15 @@
 .react-contextmenu-item:hover .markerContextMenuSelectThread {
   filter: invert(1);
 }
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+.markerContextMenuIconCopyDescription,
+.markerContextMenuIconCopyUrl,
+.markerContextMenuIconCopyStack,
+.markerContextMenuIconCopyPayload,
+.markerContextMenuSelectThread {
+  filter: invert(1);
+}
+}
+}
diff --git a/src/components/timeline/TrackContextMenu.css b/src/components/timeline/TrackContextMenu.css
index e1bf61fad5..bb2def8fbc 100644
--- a/src/components/timeline/TrackContextMenu.css
+++ b/src/components/timeline/TrackContextMenu.css
@@ -2,6 +2,13 @@
  * 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/. */
 
+.timelineTrackContextMenu {
+  max-height: 43.5vh;
+  background-color: var(--base-background-color);
+  color: var(--base-foreground-color);
+  overflow-y: auto;
+}
+
 .timelineTrackContextMenuItem {
   display: flex;
 }
@@ -16,16 +23,21 @@
 }
 
 .timelineTrackContextMenuPid {
-  color: var(--grey-90-a60);
+  --internal-foreground-color: var(--grey-90-a60);
+
+  color: var(--internal-foreground-color);
 }
 
-.react-contextmenu-item--selected .timelineTrackContextMenuPid {
-  color: #fff;
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .timelineTrackContextMenuPid {
+      --internal-foreground-color: var(--grey-10-a60);
+    }
+  }
 }
 
-.timelineTrackContextMenu {
-  max-height: 43.5vh;
-  overflow-y: auto;
+.react-contextmenu-item--selected .timelineTrackContextMenuPid {
+  color: var(--base-foreground-color);
 }
 
 .trackContextMenuSearchFilter {

From 936ca149e0ed206c3d963c5136a4ab21256de7f1 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 00:29:36 +0900
Subject: [PATCH 24/33] Apply dark mode to PanelSearch components

---
 src/components/shared/CallNodeContextMenu.css | 17 ++++++-----
 src/components/shared/ContextMenu.css         | 28 +++++++++----------
 src/components/shared/EmptyReasons.css        | 14 ++++++++--
 src/components/shared/MarkerContextMenu.css   | 16 +++++------
 src/components/shared/PanelSearch.css         | 26 +++++++++++++++--
 5 files changed, 65 insertions(+), 36 deletions(-)

diff --git a/src/components/shared/CallNodeContextMenu.css b/src/components/shared/CallNodeContextMenu.css
index f88e256b44..62c510b2be 100644
--- a/src/components/shared/CallNodeContextMenu.css
+++ b/src/components/shared/CallNodeContextMenu.css
@@ -51,16 +51,15 @@
 
 @supports (color-scheme: dark) {
   @media (prefers-color-scheme: dark) {
-.callNodeContextMenu .react-contextmenu-icon,
-.callNodeContextMenu .react-contextmenu-icon {
-  filter: invert(1);
-}
+    .callNodeContextMenu .react-contextmenu-icon {
+      filter: invert(1);
+    }
 
-.callNodeContextMenuShortcut {
-  --internal-background-color: #d7d7dbc0;
-  --internal-shadow-color: #b1b1b380;
-}
-}
+    .callNodeContextMenuShortcut {
+      --internal-background-color: #d7d7dbc0;
+      --internal-shadow-color: #b1b1b380;
+    }
+  }
 }
 
 @media (forced-colors: active) {
diff --git a/src/components/shared/ContextMenu.css b/src/components/shared/ContextMenu.css
index 58f3c5e669..a3af55cea3 100644
--- a/src/components/shared/ContextMenu.css
+++ b/src/components/shared/ContextMenu.css
@@ -32,20 +32,20 @@
 
 @supports (color-scheme: dark) {
   @media (prefers-color-scheme: dark) {
-.react-contextmenu {
-  --internal-shadow-color1: rgb(0 0 0 / 0.2);
-  --internal-shadow-color2: rgb(0 0 0 / 0.4);
-  --internal-separator-color: var(--base-border-color);
-  --internal-divider-color: rgb(237 237 240 / 0.15);
-  --internal-active-foreground-color: var(--grey-20);
-  --internal-active-background-color: var(--blue-70);
-  --internal-disabled-foreground-color: var(--grey-50);
-  --internal-selected-disabled-background-color: var(--blue-60-a30);
-  --internal-highlight-foreground-color: var(--grey-30);
-
-  border: 1px solid var(--base-border-color);
-}
-}
+    .react-contextmenu {
+      --internal-shadow-color1: rgb(0 0 0 / 0.2);
+      --internal-shadow-color2: rgb(0 0 0 / 0.4);
+      --internal-separator-color: var(--base-border-color);
+      --internal-divider-color: rgb(237 237 240 / 0.15);
+      --internal-active-foreground-color: var(--grey-20);
+      --internal-active-background-color: var(--blue-70);
+      --internal-disabled-foreground-color: var(--grey-50);
+      --internal-selected-disabled-background-color: var(--blue-60-a30);
+      --internal-highlight-foreground-color: var(--grey-30);
+
+      border: 1px solid var(--base-border-color);
+    }
+  }
 }
 
 .react-contextmenu-separator {
diff --git a/src/components/shared/EmptyReasons.css b/src/components/shared/EmptyReasons.css
index 9768a125a0..dd775716ea 100644
--- a/src/components/shared/EmptyReasons.css
+++ b/src/components/shared/EmptyReasons.css
@@ -1,11 +1,21 @@
 .EmptyReasons {
+  --internal-background-color: var(--grey-20);
+
   display: flex;
   flex: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 10px;
-  background-color: var(--grey-20);
-  box-shadow: inset 0 0 15px rgb(0 0 0 / 0.1);
+  background-color: var(--internal-background-color);
+  box-shadow: inset 0 0 15px var(--base-shadow-color);
   font-size: 120%;
 }
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .EmptyReasons {
+      --internal-background-color: var(--ink-80);
+    }
+  }
+}
diff --git a/src/components/shared/MarkerContextMenu.css b/src/components/shared/MarkerContextMenu.css
index 04c9c217e9..324ab89742 100644
--- a/src/components/shared/MarkerContextMenu.css
+++ b/src/components/shared/MarkerContextMenu.css
@@ -69,12 +69,12 @@
 
 @supports (color-scheme: dark) {
   @media (prefers-color-scheme: dark) {
-.markerContextMenuIconCopyDescription,
-.markerContextMenuIconCopyUrl,
-.markerContextMenuIconCopyStack,
-.markerContextMenuIconCopyPayload,
-.markerContextMenuSelectThread {
-  filter: invert(1);
-}
-}
+    .markerContextMenuIconCopyDescription,
+    .markerContextMenuIconCopyUrl,
+    .markerContextMenuIconCopyStack,
+    .markerContextMenuIconCopyPayload,
+    .markerContextMenuSelectThread {
+      filter: invert(1);
+    }
+  }
 }
diff --git a/src/components/shared/PanelSearch.css b/src/components/shared/PanelSearch.css
index 051bd04e05..c0967ead75 100644
--- a/src/components/shared/PanelSearch.css
+++ b/src/components/shared/PanelSearch.css
@@ -18,16 +18,36 @@
 }
 
 .panelSearchFieldIntroduction {
+  --internal-foreground-color: var(--grey-50);
+  --internal-background-color: var(--base-background-color);
+
+  /* This is grey-90 with 10% opacity, according to the photon design document */
+  --internal-shadow-color: rgb(12 12 13 / 0.1);
+
   z-index: -1; /* it needs to be below the input field */
   padding: 0 4px;
-  background-color: white;
-  box-shadow: 0 1px 4px rgb(12 12 13 / 0.1); /* This is grey-90 with 10% opacity, according to the photon design document */
-  color: var(--grey-50);
+  background-color: var(--base-background-color);
+  box-shadow: 0 1px 4px var(--internal-shadow-color);
+  color: var(--internal-foreground-color);
   font-size: 0.9em;
   line-height: 2;
   transform: translate(2px, -2px);
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .panelSearchFieldIntroduction {
+      --internal-foreground-color: var(--grey-40);
+      --internal-background-color: var(--panel-background-color);
+
+      /* This is grey-90 with 10% opacity, according to the photon design document */
+      --internal-shadow-color: rgb(12 12 13 / 0.2);
+
+      border: 0.5px solid var(--panel-border-color);
+    }
+  }
+}
+
 .panelSearchFieldIntroduction.isDisplayed {
   transition:
     transform 150ms var(--animation-curve),

From 9db1f20a9a05cd023a1906106f7b12b137ad4e2c Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 00:55:24 +0900
Subject: [PATCH 25/33] Apply dark mode to DragAndDrop component

---
 src/components/app/DragAndDrop.css | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/app/DragAndDrop.css b/src/components/app/DragAndDrop.css
index b89ac625b9..fca62c9f34 100644
--- a/src/components/app/DragAndDrop.css
+++ b/src/components/app/DragAndDrop.css
@@ -9,6 +9,10 @@
 }
 
 .dragAndDropOverlayWrapper {
+  --internal-foreground-color: #666;
+  --internal-background-color: rgb(255 255 255 / 0.9);
+  --internal-border-color: #888;
+
   position: absolute;
   top: 0;
   left: 0;
@@ -19,12 +23,22 @@
   align-items: stretch;
   justify-content: center;
   padding: 1em;
-  background-color: rgb(255 255 255 / 0.9);
+  background-color: var(--internal-background-color);
   opacity: 0;
   pointer-events: none;
   transition: opacity 200ms;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .dragAndDropOverlayWrapper {
+      --internal-foreground-color: var(--grey-40);
+      --internal-background-color: rgb(0 0 0 / 0.9);
+      --internal-border-color: var(--grey-30);
+    }
+  }
+}
+
 .dragAndDropOverlayWrapper.dragging {
   opacity: 1;
 }
@@ -34,9 +48,9 @@
   width: 100%;
   align-items: center;
   justify-content: center;
-  border: 2px dashed #888;
+  border: 2px dashed var(--internal-border-color);
   border-radius: 10px;
-  color: #666;
+  color: var(--internal-foreground-color);
   font-size: 30px;
   text-align: center;
 }

From c29ec6f3ad32eaa0e1e1df835a4cb177ba10e048 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 00:54:53 +0900
Subject: [PATCH 26/33] Apply dark mode to ErrorBoundary component

---
 src/components/app/ErrorBoundary.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/app/ErrorBoundary.css b/src/components/app/ErrorBoundary.css
index 8e3b26212d..e0a7993def 100644
--- a/src/components/app/ErrorBoundary.css
+++ b/src/components/app/ErrorBoundary.css
@@ -1,4 +1,6 @@
 .appErrorBoundary {
+  --internal-background-color: var(--grey-20);
+
   display: flex;
   overflow: hidden;
   box-sizing: border-box;
@@ -7,7 +9,15 @@
   align-items: center;
   justify-content: center;
   padding: 10px;
-  background-color: var(--grey-20);
+  background-color: var(--internal-background-color);
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .appErrorBoundary {
+      --internal-background-color: var(--ink-80);
+    }
+  }
 }
 
 .appErrorBoundaryContents {

From b115ea694c05282ac92cdf2069d45dd66b2d219c Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 00:55:37 +0900
Subject: [PATCH 27/33] Apply dark mode to KeyboardShortcut component

---
 src/components/app/KeyboardShortcut.css | 75 ++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 14 deletions(-)

diff --git a/src/components/app/KeyboardShortcut.css b/src/components/app/KeyboardShortcut.css
index 0317004c5d..301618d515 100644
--- a/src/components/app/KeyboardShortcut.css
+++ b/src/components/app/KeyboardShortcut.css
@@ -3,6 +3,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .appKeyboardShortcuts {
+  --internal-fade-color: #000a;
+  --internal-fade-from-color: #0000;
+  --internal-shadow-color: rgb(0 0 0 / 0.4);
+
   position: absolute;
   top: 0;
   left: 0;
@@ -12,7 +16,7 @@
   box-sizing: border-box;
   padding: 20px;
   animation: appKeyboardShortcutsFadeIn 0.2s;
-  background: #000a;
+  background: var(--internal-fade-color);
 }
 
 .appKeyboardShortcuts.open {
@@ -29,9 +33,17 @@
   border-radius: 5px;
   margin: 0 auto;
   animation: arrowPanelAppear 0.2s cubic-bezier(0.07, 0.95, 0, 1);
-  background: #fff;
-  filter: drop-shadow(0 0 0.5px rgb(0 0 0 / 0.4))
-    drop-shadow(0 4px 5px rgb(0 0 0 / 0.4));
+  background: var(--base-background-color);
+  filter: drop-shadow(0 0 0.5px var(--internal-shadow-color))
+    drop-shadow(0 4px 5px var(--internal-shadow-color));
+}
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .appKeyboardShortcutsBox {
+      border: 1px solid var(--base-border-color);
+    }
+  }
 }
 
 .appKeyboardShortcutsScroll {
@@ -51,16 +63,28 @@
 }
 
 .appKeyboardShortcutsShortcut {
+  --internal-background-color: rgb(222 222 227 / 0.79);
+  --internal-shadow-color: rgb(0 0 0 / 0.27);
+
   display: inline-flex;
   align-items: center;
   padding: 0 5px;
   border-radius: 3px;
-  background: rgb(222 222 227 / 0.79);
-  box-shadow: 1px 1px rgb(0 0 0 / 0.27);
-  color: #000;
+  background: var(--internal-background-color);
+  box-shadow: 1px 1px var(--internal-shadow-color);
+  color: var(--base-foreground-color);
   margin-inline-start: 6px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .appKeyboardShortcutsShortcut {
+      --internal-background-color: var(--ink-70);
+      --internal-shadow-color: #b1b1b380;
+    }
+  }
+}
+
 .appKeyboardShortcutsContent {
   display: grid;
   margin: 40px;
@@ -77,32 +101,55 @@
 }
 
 .appKeyboardShortcutsHeader {
+  --internal-background-color: var(--grey-20);
+
   display: flex;
-  border-bottom: 1px solid var(--grey-30);
-  background: var(--grey-20);
+  border-bottom: 1px solid var(--base-border-color);
+  background: var(--internal-background-color);
   font-size: 13px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .appKeyboardShortcutsHeader {
+      --internal-background-color: var(--ink-80);
+    }
+  }
+}
+
 .appKeyboardShortcutsHeaderTitle {
   flex: 1;
   margin: 10px;
 }
 
 .appKeyboardShortcutsHeaderClose {
+  --internal-cancel-icon: url(../../../res/img/svg/searchfield-cancel.svg);
+  --internal-hover-background-color: var(--grey-30);
+
   padding: 6px 6px 6px 30px;
   border: 0;
   border-radius: 3px;
 
   /* Allow for the photon focus ring to fit in the space by using a 4px margin. */
   margin: 4px;
-  background: url(../../../res/img/svg/searchfield-cancel.svg) 10px center
-    no-repeat;
+  background: var(--internal-cancel-icon) 10px center no-repeat;
+  color: var(--base-foreground-color);
   cursor: pointer;
   font-size: inherit;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .appKeyboardShortcutsHeaderClose {
+      --internal-hover-background-color: var(
+        --clickable-ghost-hover-background-color
+      );
+    }
+  }
+}
+
 .appKeyboardShortcutsHeaderClose:hover {
-  background-color: var(--grey-30);
+  background-color: var(--internal-hover-background-color);
 }
 
 .appKeyboardShortcutsNoInteract {
@@ -111,11 +158,11 @@
 
 @keyframes appKeyboardShortcutsFadeIn {
   from {
-    background: #0000;
+    background: var(--internal-fade-from-color);
   }
 
   to {
-    background: #000a;
+    background: var(--internal-fade-color);
   }
 }
 

From cfcdd802c90c3f43a0cc8d107278a3bec95d443b Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 01:20:18 +0900
Subject: [PATCH 28/33] Apply dark mode to ProfileDeleteButton component

---
 res/img/svg/check-light.svg                |  4 ++++
 src/components/app/ProfileDeleteButton.css | 18 ++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 res/img/svg/check-light.svg

diff --git a/res/img/svg/check-light.svg b/res/img/svg/check-light.svg
new file mode 100644
index 0000000000..19bec51466
--- /dev/null
+++ b/res/img/svg/check-light.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgba(237, 237, 240, .8)" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"></path></svg>
diff --git a/src/components/app/ProfileDeleteButton.css b/src/components/app/ProfileDeleteButton.css
index 0eb6a1adc5..4c8c5ddbfc 100644
--- a/src/components/app/ProfileDeleteButton.css
+++ b/src/components/app/ProfileDeleteButton.css
@@ -3,21 +3,31 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .profileDeleteButtonSuccess {
+  --internal-icon: url(../../../res/img/svg/check-dark.svg);
+
   /* Note: 20px is: 16px (icon width) + 4px (distance from the text) */
   padding-left: 20px;
   margin: 0;
-  background: url(../../../res/img/svg/check-dark.svg) no-repeat left / 16px
-    16px;
+  background: var(--internal-icon) no-repeat left / 16px 16px;
   white-space: nowrap;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .profileDeleteButtonSuccess {
+      --internal-icon: url(../../../res/img/svg/check-light.svg);
+    }
+  }
+}
+
 .profileDeleteButtonError {
+  --internal-icon: url(../../../res/img/svg/error-red.svg);
+
   /* Note: 24px is: 16px (icon width) + 4px (icon padding) + 4px (distance from the text) */
   padding-left: 24px;
 
   /* The icon is 4px below the top */
-  background: url(../../../res/img/svg/error-red.svg) no-repeat 0 4px / 16px
-    16px;
+  background: var(--internal-icon) no-repeat 0 4px / 16px 16px;
   color: var(--red-60);
   overflow-wrap: break-word;
 }

From c1823332d9ba98328863469711600e35bba9a508 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 01:40:48 +0900
Subject: [PATCH 29/33] Apply dark mode to ProfileRootMessage component

---
 src/components/app/ProfileRootMessage.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/app/ProfileRootMessage.css b/src/components/app/ProfileRootMessage.css
index cd3314ab61..62bb41914c 100644
--- a/src/components/app/ProfileRootMessage.css
+++ b/src/components/app/ProfileRootMessage.css
@@ -19,10 +19,10 @@
   max-width: 600px;
   box-sizing: border-box;
   padding: 3em;
-  border: 1px solid #ccc;
+  border: 1px solid var(--home-border-color);
   border-radius: 3px;
-  background-color: #fff;
-  box-shadow: 0 5px 25px #0b1f50;
+  background-color: var(--base-background-color);
+  box-shadow: 0 5px 25px var(--home-shadow-color);
   font-size: 130%;
 }
 
@@ -38,7 +38,7 @@
 
 .rootMessageAdditional {
   padding-top: 1em;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--home-border-color);
   margin-top: 1em;
   font-size: 12px;
 }

From 90081b6e722cdb4729e9cc7bd3beb76faac2508c Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 01:46:01 +0900
Subject: [PATCH 30/33] Apply dark mode to SymbolicationStatusOverlay component

---
 .../app/SymbolicationStatusOverlay.css           | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/app/SymbolicationStatusOverlay.css b/src/components/app/SymbolicationStatusOverlay.css
index 91d74b8f48..ee29870d3b 100644
--- a/src/components/app/SymbolicationStatusOverlay.css
+++ b/src/components/app/SymbolicationStatusOverlay.css
@@ -3,6 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .symbolicationStatusOverlay {
+  --internal-background-color: var(--grey-20);
+
   position: fixed;
   top: -8px;
   right: 30%;
@@ -13,10 +15,10 @@
   padding-right: 10px;
   padding-left: 10px;
   border-radius: 0 0 5px 5px;
-  background: var(--grey-20);
+  background: var(--internal-background-color);
   box-shadow:
-    0 0 0 0.5px rgb(0 0 0 / 0.1),
-    0 2px 4px rgb(0 0 0 / 0.1);
+    0 0 0 0.5px var(--base-shadow-color),
+    0 2px 4px var(--base-shadow-color);
   line-height: 20px;
   text-align: center;
   text-overflow: ellipsis;
@@ -27,6 +29,14 @@
   will-change: opacity, transform;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .symbolicationStatusOverlay {
+      --internal-background-color: var(--ink-80);
+    }
+  }
+}
+
 .symbolicationStatusOverlay.hidden {
   opacity: 0;
   transform: translateY(-30px);

From 0b55d1107ba5b1599d9e3f4c6f41ee3cd0c9ee52 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 01:51:22 +0900
Subject: [PATCH 31/33] Apply dark mode to ZipFileViewer component

---
 src/components/app/ZipFileViewer.css | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/app/ZipFileViewer.css b/src/components/app/ZipFileViewer.css
index 1e4a1b0e9d..a0e11a5678 100644
--- a/src/components/app/ZipFileViewer.css
+++ b/src/components/app/ZipFileViewer.css
@@ -28,12 +28,12 @@
   /* Box */
   box-sizing: border-box;
   flex-direction: column;
-  border: 1px solid #ccc;
+  border: 1px solid var(--home-border-color);
   border-radius: 3px;
 
   /* Other */
-  background-color: #fff;
-  box-shadow: 0 5px 25px #0b1f50;
+  background-color: var(--base-background-color);
+  box-shadow: 0 5px 25px var(--home-shadow-color);
 }
 
 .zipFileViewerSection > .treeView {
@@ -51,10 +51,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border-top: 1px solid var(--grey-30);
+  border-top: 1px solid var(--base-border-color);
 
   /* Other */
-  background-color: #f5f5f5;
+  background-color: var(--row-odd-background-color);
   font-size: 14px;
 }
 
@@ -63,6 +63,8 @@
 }
 
 .zipFileViewerUntrustedFilePath {
+  --internal-background-color: var(--grey-30);
+
   display: inline-block;
   overflow: hidden;
 
@@ -73,7 +75,15 @@
   max-width: 70%;
   padding: 0 5px;
   border-radius: 3px;
-  background-color: var(--grey-30);
+  background-color: var(--internal-background-color);
   font-family: monospace;
   text-overflow: ellipsis;
 }
+
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .zipFileViewerUntrustedFilePath {
+      --internal-background-color: var(--ink-70);
+    }
+  }
+}

From c9bd07e223a651c64e9038aaf26f1845fea50797 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 01:57:07 +0900
Subject: [PATCH 32/33] Apply dark mode to JsTracer components

---
 src/components/js-tracer/Settings.css | 24 ++++++++++++++++++++++--
 src/components/js-tracer/index.css    | 18 +++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/components/js-tracer/Settings.css b/src/components/js-tracer/Settings.css
index 104cb394f6..67f486f8a9 100644
--- a/src/components/js-tracer/Settings.css
+++ b/src/components/js-tracer/Settings.css
@@ -3,15 +3,25 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .jsTracerSettings {
+  --internal-foreground-color: var(--ink-70);
+
   display: flex;
   height: 25px;
   flex-flow: row nowrap;
   padding: 0;
-  border-bottom: 1px solid var(--grey-30);
-  color: var(--ink-70);
+  border-bottom: 1px solid var(--base-border-color);
+  color: var(--internal-foreground-color);
   line-height: 25px;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .jsTracerSettings {
+      --internal-foreground-color: var(--grey-30);
+    }
+  }
+}
+
 .jsTracerSettingsList {
   display: flex;
   flex: 1;
@@ -39,11 +49,21 @@
 }
 
 .jsTracerSettingsFilter {
+  --internal-border-color: var(--grey-20);
+
   padding-right: 10px;
   border-right: 1px solid var(--grey-20);
   white-space: nowrap;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .jsTracerSettingsFilter {
+      --internal-border-color: var(--grey-80);
+    }
+  }
+}
+
 .jsTracerSettingsFilterLabel {
   display: inline-flex;
   align-items: center;
diff --git a/src/components/js-tracer/index.css b/src/components/js-tracer/index.css
index ba116171de..8f21d7977c 100644
--- a/src/components/js-tracer/index.css
+++ b/src/components/js-tracer/index.css
@@ -9,19 +9,31 @@
 }
 
 .jsTracerLoader {
+  --internal-background-color: var(--grey-20);
+  --internal-border-color: var(--grey-10);
+
   display: flex;
   flex: 1;
   flex-flow: column;
   align-items: center;
   justify-content: center;
-  border-top: solid 1px var(--grey-20);
-  background-color: var(--grey-10);
+  border-top: solid 1px var(--internal-border-color);
+  background-color: var(--internal-background-color);
   font-size: 12px;
   vertical-align: middle;
 }
 
+@supports (color-scheme: dark) {
+  @media (prefers-color-scheme: dark) {
+    .jsTracerLoader {
+      --internal-background-color: var(--ink-80);
+      --internal-border-color: var(--grey-80);
+    }
+  }
+}
+
 .jsTracerCanvasFadeIn {
-  background-color: #fff;
+  background-color: var(--base-background-color);
   opacity: 0;
 }
 

From ab935493d5d914de8e5cc5da32a2b67945889670 Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Sun, 28 Dec 2025 02:56:00 +0900
Subject: [PATCH 33/33] Update snapshots

---
 .../__snapshots__/FlameGraph.test.tsx.snap    | 20 +++++++++----------
 .../__snapshots__/MarkerChart.test.tsx.snap   |  2 +-
 .../__snapshots__/ProfileName.test.tsx.snap   |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/test/components/__snapshots__/FlameGraph.test.tsx.snap b/src/test/components/__snapshots__/FlameGraph.test.tsx.snap
index bcd4d35814..ee201e3c8d 100644
--- a/src/test/components/__snapshots__/FlameGraph.test.tsx.snap
+++ b/src/test/components/__snapshots__/FlameGraph.test.tsx.snap
@@ -597,7 +597,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#000",
+    "#000000",
   ],
   Array [
     "fillText",
@@ -622,7 +622,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#000",
+    "#000000",
   ],
   Array [
     "fillText",
@@ -647,7 +647,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#000",
+    "#000000",
   ],
   Array [
     "fillText",
@@ -672,7 +672,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#000",
+    "#000000",
   ],
   Array [
     "fillText",
@@ -697,7 +697,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#000",
+    "#000000",
   ],
   Array [
     "fillText",
@@ -722,7 +722,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#000",
+    "#000000",
   ],
   Array [
     "fillText",
@@ -747,7 +747,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#000",
+    "#000000",
   ],
   Array [
     "fillText",
@@ -772,7 +772,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#000",
+    "#000000",
   ],
   Array [
     "fillText",
@@ -797,7 +797,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#000",
+    "#000000",
   ],
   Array [
     "fillText",
@@ -822,7 +822,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#000",
+    "#000000",
   ],
   Array [
     "fillText",
diff --git a/src/test/components/__snapshots__/MarkerChart.test.tsx.snap b/src/test/components/__snapshots__/MarkerChart.test.tsx.snap
index 038ff2c56c..15f12606d5 100644
--- a/src/test/components/__snapshots__/MarkerChart.test.tsx.snap
+++ b/src/test/components/__snapshots__/MarkerChart.test.tsx.snap
@@ -243,7 +243,7 @@ Array [
   ],
   Array [
     "set fillStyle",
-    "#fff",
+    "#ffffff",
   ],
   Array [
     "fillRect",
diff --git a/src/test/components/__snapshots__/ProfileName.test.tsx.snap b/src/test/components/__snapshots__/ProfileName.test.tsx.snap
index 545ca8673a..0278afcf6b 100644
--- a/src/test/components/__snapshots__/ProfileName.test.tsx.snap
+++ b/src/test/components/__snapshots__/ProfileName.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`ProfileName matches the snapshot 1`] = `
   </button>
   <input
     aria-label="Profile name"
-    class="profileNameInput"
+    class="profileNameInput photon-input"
     style="display: none;"
     title="Edit the profile name"
     value="Firefox – macOS 10.14"