diff --git a/front_end/panels/changes/changesSidebar.css b/front_end/panels/changes/changesSidebar.css
index afdf5a6415..f219884b32 100644
--- a/front_end/panels/changes/changesSidebar.css
+++ b/front_end/panels/changes/changesSidebar.css
@@ -1,3 +1,21 @@
+.tree-outline {
+  /**
+   * These variables (and the dark mode variants) are duplicated from
+   * navigatorTree.css. They will be de-duped and tidied up as part of
+   * crbug.com/1210894
+   */
+  --override-script-snippet-tree-item-color: hsl(48deg 70% 50%);
+  --override-stylesheet-tree-item-color: hsl(256deg 50% 50%);
+  --override-image-font-tree-item-color: hsl(109deg 33% 50%);
+}
+
+.-theme-with-dark-background .tree-outline,
+:host-context(.-theme-with-dark-background) .tree-outline {
+  --override-script-snippet-tree-item-color: rgb(217 181 38);
+  --override-stylesheet-tree-item-color: rgb(98 64 191);
+  --override-image-font-tree-item-color: rgb(101 170 85);
+}
+
 li .icon {
   margin: -3px -5px -3px -5px;
   background: var(--color-background-elevation-2);
@@ -15,17 +33,17 @@ li .icon {
 .navigator-sm-script-tree-item .icon,
 .navigator-script-tree-item .icon,
 .navigator-snippet-tree-item .icon {
-  background: var(--color-syntax-4);
+  background: var(--override-script-snippet-tree-item-color);
 }
 
 .navigator-sm-stylesheet-tree-item .icon,
 .navigator-stylesheet-tree-item .icon {
-  background: var(--color-syntax-2);
+  background: var(--override-stylesheet-tree-item-color);
 }
 
 .navigator-image-tree-item .icon,
 .navigator-font-tree-item .icon {
-  background: var(--color-syntax-6);
+  background: var(--override-image-font-tree-item-color);
 }
 
 @media (forced-colors: active) {