From 77b5eed024c41f08fffe744efe73c1b4f869a733 Mon Sep 17 00:00:00 2001
From: hawkgs <hawk.dvp@gmail.com>
Date: Fri, 28 Feb 2025 16:16:46 +0200
Subject: [PATCH] refactor(devtools): extract and organize colors into themes
 (#60374)

Extract all colors from the stylesheets, reduce their number by merging the similar ones and organize them into themes represented by CSS variables.

PR Close #60374
---
 .../projects/ng-devtools/src/lib/BUILD.bazel  |   1 -
 .../lib/application-services/theme_service.ts |   4 +-
 .../theme_service_spec.ts                     |   8 +-
 .../src/lib/devtools-tabs/BUILD.bazel         |   1 -
 .../resolution-path/BUILD.bazel               |   1 -
 .../resolution-path.component.scss            |  27 +--
 .../devtools-tabs.component.scss              |  44 +----
 .../directive-forest/BUILD.bazel              |   1 -
 .../directive-forest/breadcrumbs/BUILD.bazel  |   1 -
 .../breadcrumbs/breadcrumbs.component.scss    |  36 +---
 .../directive-forest.component.scss           | 110 ++---------
 .../directive-forest/filter/BUILD.bazel       |   1 -
 .../filter/filter.component.scss              |  22 +--
 .../property-tab/BUILD.bazel                  |   1 -
 .../property-tab-header.component.scss        |   8 -
 .../property-tab/property-view/BUILD.bazel    |   1 -
 .../property-editor.component.scss            |  17 +-
 .../property-preview.component.scss           |   4 +-
 .../property-view-body.component.scss         |  21 +--
 .../property-view-body.component.ts           |   1 -
 .../property-view-header.component.scss       |   8 -
 .../property-view-tree.component.scss         |  16 +-
 .../devtools-tabs/injector-tree/BUILD.bazel   |   1 -
 .../injector-providers/BUILD.bazel            |   1 -
 .../injector-providers.component.scss         |  11 --
 .../injector-tree.component.scss              |  46 ++---
 .../lib/devtools-tabs/profiler/BUILD.bazel    |   1 -
 .../profiler-import-dialog.component.scss     |   4 +-
 .../profiler/profiler.component.html          |   2 +-
 .../profiler/profiler.component.scss          |  18 +-
 .../profiler/timeline/BUILD.bazel             |   1 -
 .../timeline/frame-selector.component.scss    |  25 +--
 .../timeline/recording-visualizer/BUILD.bazel |   1 -
 .../bar-chart.component.scss                  |   9 +-
 .../execution-details.component.scss          |  12 +-
 .../flamegraph-visualizer.component.scss      |  30 +--
 .../timeline-visualizer.component.scss        |  16 +-
 .../tree-map-visualizer.component.scss        |  22 +--
 .../timeline/timeline-controls.component.scss |  19 +-
 .../profiler/timeline/timeline.component.scss |   8 -
 .../lib/devtools-tabs/router-tree/BUILD.bazel |   1 -
 .../router-tree/router-tree-visualizer.ts     |  12 +-
 .../router-tree/router-tree.component.scss    |  13 +-
 .../tree-visualizer-host.component.scss       | 115 ++++++------
 .../src/lib/devtools.component.scss           |  45 +----
 .../lib/component/split.component.scss        |  22 +--
 .../ng-devtools/src/styles/BUILD.bazel        |   8 +-
 .../ng-devtools/src/styles/_colors.scss       | 172 +++++++++++++++++-
 .../ng-devtools/src/styles/_global.scss       |  24 ++-
 .../ng-devtools/src/styles/_theme.scss        |  12 +-
 50 files changed, 362 insertions(+), 623 deletions(-)

diff --git a/devtools/projects/ng-devtools/src/lib/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/BUILD.bazel
index 7413c4c80a5..a944a6d1e7a 100644
--- a/devtools/projects/ng-devtools/src/lib/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/BUILD.bazel
@@ -8,7 +8,6 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "devtools_component_styles",
     src = "devtools.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(
diff --git a/devtools/projects/ng-devtools/src/lib/application-services/theme_service.ts b/devtools/projects/ng-devtools/src/lib/application-services/theme_service.ts
index 479aa6caef1..276572b8ff2 100644
--- a/devtools/projects/ng-devtools/src/lib/application-services/theme_service.ts
+++ b/devtools/projects/ng-devtools/src/lib/application-services/theme_service.ts
@@ -35,8 +35,8 @@ export class ThemeService {
   toggleDarkMode(isDark: boolean): void {
     const removeClass = isDark ? LIGHT_THEME_CLASS : DARK_THEME_CLASS;
     const addClass = !isDark ? LIGHT_THEME_CLASS : DARK_THEME_CLASS;
-    this.renderer.removeClass(this.doc.body, removeClass);
-    this.renderer.addClass(this.doc.body, addClass);
+    this.renderer.removeClass(this.doc.documentElement, removeClass);
+    this.renderer.addClass(this.doc.documentElement, addClass);
     this.currentTheme.set(addClass);
   }
 
diff --git a/devtools/projects/ng-devtools/src/lib/application-services/theme_service_spec.ts b/devtools/projects/ng-devtools/src/lib/application-services/theme_service_spec.ts
index d443df19ec2..06064f538f7 100644
--- a/devtools/projects/ng-devtools/src/lib/application-services/theme_service_spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/application-services/theme_service_spec.ts
@@ -57,7 +57,7 @@ describe('ThemeService', () => {
     const doc = TestBed.inject(DOCUMENT);
 
     expect(service.currentTheme()).toEqual('light-theme');
-    expect(doc.body.classList.contains('light-theme')).toBeTrue();
+    expect(doc.documentElement.classList.contains('light-theme')).toBeTrue();
   });
 
   it(`should enable dark mode, if it's the preferred/system one`, () => {
@@ -69,7 +69,7 @@ describe('ThemeService', () => {
     const doc = TestBed.inject(DOCUMENT);
 
     expect(service.currentTheme()).toEqual('dark-theme');
-    expect(doc.body.classList.contains('dark-theme')).toBeTrue();
+    expect(doc.documentElement.classList.contains('dark-theme')).toBeTrue();
   });
 
   it('should toggle dark mode', () => {
@@ -84,7 +84,7 @@ describe('ThemeService', () => {
     const doc = TestBed.inject(DOCUMENT);
 
     expect(service.currentTheme()).toEqual('dark-theme');
-    expect(doc.body.classList.contains('dark-theme')).toBeTrue();
+    expect(doc.documentElement.classList.contains('dark-theme')).toBeTrue();
   });
 
   it('should update the theme automatically, if the system one changes', () => {
@@ -95,7 +95,7 @@ describe('ThemeService', () => {
     // Initialize the watcher.
     service.initializeThemeWatcher();
 
-    const docClassList = TestBed.inject(DOCUMENT).body.classList;
+    const docClassList = TestBed.inject(DOCUMENT).documentElement.classList;
 
     expect(service.currentTheme()).toEqual('light-theme');
     expect(docClassList.contains('light-theme')).toBeTrue();
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel
index 80ff2348905..751c31e7825 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel
@@ -8,7 +8,6 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "devtools_tabs_component_styles",
     src = "devtools-tabs.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/BUILD.bazel
index 8f8bcb3cb9d..1f34a80a9e5 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/BUILD.bazel
@@ -9,7 +9,6 @@ sass_binary(
     name = "resolution_path_styles",
     src = "resolution-path.component.scss",
     visibility = ["//visibility:private"],
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/resolution-path.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/resolution-path.component.scss
index 11792b374e4..f704cc1439f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/resolution-path.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/resolution-path.component.scss
@@ -1,20 +1,14 @@
-@use '../../../../styles/theme' as theme;
-
-/* TODO: Extract */
-$darkBg: #1a1a1a;
-$lightBg: #f3f3f3;
-
 :host {
   display: flex;
   flex-wrap: wrap;
-  background: $lightBg;
-  border-top: 1px solid black;
+  background: var(--octonary-contrast);
   padding: 0.5rem 0.5rem 0.25rem 0.5rem;
+  border-top: 1px solid var(--senary-contrast);
 
   .node {
     position: relative;
     border-radius: 5px;
-    background: #c4c4c4;
+    background: var(--octonary-contrast);
     color: black;
     padding: 4px 25px 4px 15px;
     margin-bottom: 0.25rem;
@@ -23,15 +17,15 @@ $lightBg: #f3f3f3;
     box-sizing: border-box;
 
     &.type-env {
-      background: #f9c2c5;
+      background: var(--red-06);
     }
 
     &.type-element {
-      background: #a6d5a9;
+      background: var(--green-03);
     }
 
     &.type-imported {
-      background: #c79eff;
+      background: var(--purple-03);
     }
 
     &.type-hidden {
@@ -60,7 +54,7 @@ $lightBg: #f3f3f3;
 
     &:not(:last-of-type)::before {
       content: '';
-      background: $lightBg;
+      background: var(--octonary-contrast);
       width: 21px;
       height: 21px;
       top: calc(50% - 6px);
@@ -76,10 +70,3 @@ $lightBg: #f3f3f3;
     }
   }
 }
-
-@include theme.dark-theme {
-  :host,
-  .node:not(:last-of-type)::before {
-    background: #1a1a1a;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
index a87df8a9b43..ed42bcfb12d 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
@@ -1,5 +1,3 @@
-@use '../../styles/theme' as theme;
-
 :host {
   position: relative;
   width: 100%;
@@ -23,6 +21,10 @@ ng-injector-tree.hidden {
   height: calc(100% - 31px);
 }
 
+nav {
+  border-bottom: 1px solid var(--color-separator);
+}
+
 #nav-buttons {
   display: flex;
 
@@ -31,6 +33,7 @@ ng-injector-tree.hidden {
     border: none;
     cursor: pointer;
     opacity: 0.8;
+    color: var(--secondary-contrast);
 
     &:active {
       opacity: 1;
@@ -39,7 +42,7 @@ ng-injector-tree.hidden {
 }
 
 .inspector-active {
-  color: #1a73e8 !important;
+  color: var(--blue-02) !important;
 }
 
 #app-angular-version {
@@ -54,7 +57,7 @@ ng-injector-tree.hidden {
 }
 
 #version-number {
-  color: #1b1aa5;
+  color: var(--blue-02);
   cursor: text;
   -moz-user-select: text;
   -khtml-user-select: text;
@@ -63,7 +66,7 @@ ng-injector-tree.hidden {
   user-select: text;
 
   &.unsupported-version {
-    color: red;
+    color: var(--red-04);
   }
 }
 
@@ -109,9 +112,7 @@ mat-icon {
 }
 
 .frame-selector {
-  background-color: #e2e2e2;
   border-radius: 2px;
-  color: #474747;
   border: none;
   margin: 4px 4px 2px 4px;
   padding: 2px;
@@ -119,32 +120,3 @@ mat-icon {
   width: 100px;
   font-size: 12px;
 }
-
-@include theme.dark-theme {
-  .frame-selector {
-    background-color: #464646;
-    color: #fff;
-  }
-
-  #app-angular-version {
-    color: #fff;
-  }
-
-  #nav-buttons {
-    button {
-      color: #fff;
-    }
-  }
-
-  #version-number {
-    color: #5caace;
-
-    &.unsupported-version {
-      color: red;
-    }
-  }
-
-  .inspector-active {
-    color: #4688f1 !important;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/BUILD.bazel
index 9d362cd9609..a18b2ddbf02 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/BUILD.bazel
@@ -6,7 +6,6 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "directive_forest_component_styles",
     src = "directive-forest.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel
index ab5a2ab5d0e..8f9cb61c7ad 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel
@@ -6,7 +6,6 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "breadcrumbs_component_styles",
     src = "breadcrumbs.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss
index d25abdc3088..4e2ac5dae91 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../../styles/theme' as theme;
-
 .mdc-card.breadcrumb-card {
   padding: 0;
   width: 100%;
@@ -9,7 +7,7 @@
 
   .scroll-button {
     height: 100%;
-    background-color: rgb(243, 243, 243);
+    background-color: var(--septenary-contrast);
     border: none;
     cursor: pointer;
 
@@ -34,7 +32,7 @@
       height: 24px;
 
       &.selected {
-        background-color: rgb(243, 243, 243);
+        background-color: var(--color-tree-node-highlighted);
       }
     }
   }
@@ -45,36 +43,10 @@
     font-size: 11px;
     margin-right: 5px;
     width: fit-content;
-    color: #8a1882;
+    color: var(--color-tree-node-element-name);
 
     &:hover {
-      background-color: #ebf1fb;
-    }
-  }
-}
-
-@include theme.dark-theme {
-  .mdc-card {
-    &.breadcrumb-card {
-      .scroll-button {
-        background-color: rgb(41, 42, 45);
-        color: #ffffff;
-      }
-
-      .breadcrumbs {
-        button {
-          &.selected {
-            background-color: rgb(41, 42, 45);
-          }
-        }
-      }
-
-      .mdc-button {
-        color: #5caace;
-        &:hover {
-          background-color: #093e69;
-        }
-      }
+      background-color: var(--color-tree-node-hovered);
     }
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.scss
index f2d047c3da4..1232bbfa76f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../styles/theme' as theme;
-
 :host {
   width: 100%;
   height: 100%;
@@ -7,7 +5,7 @@
 
   .tree-node {
     position: relative;
-    color: #8a1882;
+    color: var(--color-tree-node-element-name);
 
     cursor: default;
     font-family: Menlo, monospace;
@@ -35,50 +33,47 @@
       width: 16px;
       height: 13px;
       display: inline-block;
+      color: var(--primary-contrast);
     }
 
     .dir-names {
-      color: #9b4807;
+      color: var(--color-tree-node-dir-name);
     }
 
     .console-reference,
     .on-push {
-      color: #748591;
+      color: var(--color-tree-node-console-ref);
       padding-left: 8px;
       font-style: italic;
     }
 
     &:hover {
-      background-color: #ebf1fb;
+      background-color: var(--color-tree-node-hovered);
     }
 
     &.matched {
-      background-color: #ebf1fb;
-
-      &:hover {
-        background-color: #cfe8fc;
-      }
+      background-color: var(--color-tree-node-matched);
     }
 
     &.selected,
     &.highlighted {
-      background-color: #cfe8fc;
+      background-color: var(--color-tree-node-highlighted);
     }
 
     .hydration {
       margin: auto 8px auto auto;
       font-size: 14px;
-      color: #60a6fc;
+      color: var(--blue-02);
 
       position: sticky;
       right: 0;
 
       &.skipped {
-        color: #9a9a9a;
+        color: var(--senary-contrast);
       }
 
       &.mismatched {
-        color: #ff0040;
+        color: var(--red-04);
       }
     }
   }
@@ -89,7 +84,7 @@
     background-color: transparent;
   }
   50% {
-    background-color: #cfe8fc;
+    background-color: var(--blue-04);
   }
   100% {
     background-color: transparent;
@@ -100,29 +95,6 @@
   animation: appear 1.5s;
 }
 
-.filter {
-  display: flex;
-
-  .icon {
-    width: 20px;
-    height: 20px;
-    margin: auto 12px;
-    opacity: 0.7;
-  }
-
-  .filter-input {
-    border: none;
-    background: rgba(0, 0, 0, 0.003);
-    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
-    width: 100%;
-    font-size: 2em;
-    font-family: inherit;
-    font-weight: inherit;
-    line-height: 1.4em;
-    padding: 12px 6px;
-  }
-}
-
 .up-down-buttons {
   width: 20%;
   display: flex;
@@ -135,7 +107,7 @@
 
 .angular-element {
   content: '';
-  color: #1b1aa5;
+  color: var(--color-tree-node-ng-element);
 
   &::before {
     content: '<';
@@ -147,13 +119,13 @@
 }
 
 .hydration-error {
-  color: #e62222;
+  color: var(--dynamic-red-01);
   margin-left: 16px;
   padding: 0 8px 8px 0px;
 
   pre {
     margin: 0;
-    background: rgba(1, 1, 1, 0.05);
+    background: var(--dynamic-transparent-01);
     padding: 8px;
     border-radius: 8px;
 
@@ -162,57 +134,3 @@
     }
   }
 }
-
-@include theme.dark-theme {
-  .tree-node {
-    color: #5cadd3;
-
-    .mat-icon {
-      color: #bcc5ce;
-    }
-
-    .dir-names {
-      color: #91adcb;
-    }
-
-    .angular-element {
-      color: #dc8c61;
-    }
-
-    &:hover {
-      background-color: #262d36;
-    }
-
-    &.matched {
-      background-color: #262d36;
-
-      &:hover {
-        background-color: #073d69;
-      }
-    }
-
-    &.selected,
-    &.highlighted {
-      background-color: #073d69;
-    }
-
-    .hydration {
-      color: #60a6fc;
-
-      &.skipped {
-        color: #9a9a9a;
-      }
-
-      &.mismatched {
-        color: #ff0040;
-      }
-    }
-
-    .hydration-error {
-      color: #ea7171;
-      pre {
-        background: rgb(1, 1, 1, 0.2);
-      }
-    }
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/BUILD.bazel
index 27b0377df21..af7756b7443 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/BUILD.bazel
@@ -6,7 +6,6 @@ package(default_visibility = ["//visibility:public"])
 sass_binary(
     name = "filter_component_styles",
     src = "filter.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
index ec15185b6af..e4968d84a23 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
@@ -1,11 +1,9 @@
-@use '../../../../../styles/theme' as theme;
-
 .filter {
   display: flex;
   padding: 0px;
   border-radius: 0px;
   box-shadow: none !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-bottom: 1px solid var(--color-separator);
 
   label {
     display: flex;
@@ -25,7 +23,6 @@
 
     .filter-input {
       border: none;
-      border-left: 1px solid rgba(0, 0, 0, 0.12);
       padding-left: 5px;
       width: 100%;
       font-size: 11px;
@@ -33,7 +30,7 @@
       font-weight: inherit;
       height: 30px;
       outline: none;
-      color: rgba(0, 0, 0, 0.87);
+      background: var(--color-background);
     }
   }
 }
@@ -64,18 +61,3 @@
     }
   }
 }
-
-@include theme.dark-theme {
-  .filter {
-    label {
-      .filter-input {
-        background-color: #202124;
-        color: #ffffff;
-      }
-    }
-  }
-
-  mat-icon {
-    color: #fff;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel
index 86dd929fd71..a5009f931ee 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel
@@ -18,7 +18,6 @@ _STYLE_LABELS = [
     sass_binary(
         name = label,
         src = src,
-        deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
     )
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.scss
index 60b5b6960b4..b4c4d74dba7 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../styles/theme' as theme;
-
 .element-header {
   display: flex;
   justify-content: space-between;
@@ -45,9 +43,3 @@
     }
   }
 }
-
-@include theme.dark-theme {
-  .element-name {
-    color: #ffffff;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel
index b32d83694ab..fbf18915f4b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel
@@ -22,7 +22,6 @@ _STYLE_LABELS = [
     sass_binary(
         name = label,
         src = src,
-        deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
     )
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.scss
index fb34ec48ea5..ef8f21637fd 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-editor.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../../styles/theme' as theme;
-
 .editor {
   cursor: text;
   border: none;
@@ -10,8 +8,7 @@
 }
 
 .editor-input {
-  background-color: #bbddfb;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 1px var(--dynamic-transparent-01);
 }
 
 input {
@@ -22,15 +19,3 @@ input {
   border: none;
   outline: none;
 }
-
-@include theme.dark-theme {
-  input {
-    color: #bcc5ce;
-    background-color: #202124;
-  }
-
-  .editor-input {
-    background-color: #454546;
-    box-shadow: 0 0 0 1px rgba(165, 165, 165, 0.05);
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.scss
index da799c074da..c468cc50432 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-preview.component.scss
@@ -1,7 +1,7 @@
 .function {
   &:hover {
-    background: #4da1ff;
-    color: #fff;
+    background: var(--blue-02);
+    color: white;
     cursor: pointer;
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.scss
index 73ee2f4ee1a..5921b8e3eef 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.scss
@@ -1,11 +1,15 @@
-@use '../../../../../styles/theme' as theme;
-
 :host {
   ::ng-deep {
     mat-expansion-panel {
       border-radius: unset !important;
     }
 
+    .mat-expansion-panel {
+      box-shadow:
+        0 -2px 5px -2px var(--dynamic-transparent-02),
+        0 2px 5px 0 var(--dynamic-transparent-02);
+    }
+
     .mat-expansion-panel-body {
       padding: 0;
     }
@@ -24,14 +28,13 @@
       }
 
       .docs-link {
-        color: #000000de;
         height: inherit;
         width: fit-content;
         font-size: initial;
         padding-left: 0.1rem;
 
         &:active {
-          color: #1b1aa5;
+          color: var(--blue-02);
         }
       }
     }
@@ -47,15 +50,5 @@
         margin-bottom: 4.5px;
       }
     }
-
-    @include theme.dark-theme {
-      .docs-link {
-        color: #bcc5ce;
-
-        &:active {
-          color: #5caace;
-        }
-      }
-    }
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts
index 8e797f95c45..9eed33adf43 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.ts
@@ -152,7 +152,6 @@ export class DependencyViewerComponent {
   styles: [
     `
       ng-dependency-viewer {
-        border-bottom: 1px solid color-mix(in srgb, currentColor, #bdbdbd 85%);
         display: block;
       }
     `,
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss
index 22e890e84e4..a8ce8951e6e 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-header.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../../styles/theme' as theme;
-
 mat-toolbar {
   padding-left: 10px;
   justify-content: space-between;
@@ -33,9 +31,3 @@ button {
     opacity: 1;
   }
 }
-
-@include theme.dark-theme {
-  button {
-    color: #fff;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss
index d306e8155fc..a6033a47d68 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-tree.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../../styles/theme' as theme;
-
 :host {
   width: 100%;
   display: block;
@@ -38,29 +36,21 @@
   margin: 5px 5px 5px 15px;
   mat-tree-node {
     .name {
-      color: #ce271e;
+      color: var(--color-tree-node-element-name);
       font-weight: 500;
     }
   }
 }
 
-@include theme.dark-theme {
-  .property-list {
-    .name {
-      color: #54c9bd !important;
-    }
-  }
-}
-
 .property-list mat-tree-node.disabled .name,
 .disabled {
-  color: #333;
+  color: var(--secondary-contrast);
 }
 
 .arrow {
   font-family: monospace;
   font-size: 0.5em;
-  color: #6e6e6e;
+  color: var(--quaternary-contrast);
 }
 
 :host ::ng-deep .mat-tree-node,
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/BUILD.bazel
index 55bbe87c2e9..21c04799e30 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/BUILD.bazel
@@ -8,7 +8,6 @@ package(default_visibility = ["//:__subpackages__"])
 sass_binary(
     name = "injector_tree_styles",
     src = "injector-tree.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/BUILD.bazel
index 2c12628b9f7..0c08eebef4b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/BUILD.bazel
@@ -11,7 +11,6 @@ sass_binary(
     ],
     deps = [
         "//devtools/projects/ng-devtools/src/styles:material_sass_deps",
-        "//devtools/projects/ng-devtools/src/styles:theme",
     ],
 )
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss
index d3bcfd38d1e..3dc90a6c861 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss
@@ -1,5 +1,4 @@
 @use '@angular/material' as mat;
-@use '../../../../styles/theme' as theme;
 
 h2 {
   font-size: 0.875rem;
@@ -108,13 +107,3 @@ tr.example-detail-row {
   padding: 0.5rem 0;
   text-align: center;
 }
-
-@include theme.dark-theme {
-  .providers-title {
-    color: #ffffff;
-  }
-
-  .no-providers-label {
-    color: #bcc5ce;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.scss
index 79e5c234735..98606136919 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.scss
@@ -1,5 +1,3 @@
-@use '../../../styles/theme' as theme;
-
 :host {
   width: 100%;
   height: 100%;
@@ -56,14 +54,14 @@ svg {
       }
 
       .docs-link {
-        color: #000000de;
+        color: black;
         height: inherit;
         width: fit-content;
         font-size: initial;
         padding-left: 0.1rem;
 
         &:active {
-          color: #1b1aa5;
+          color: var(--blue-02);
         }
       }
     }
@@ -89,7 +87,7 @@ svg {
         height: 90px;
         flex-shrink: 0;
         align-items: center;
-        border-right: 1px solid #e8e8e8;
+        border-right: 1px solid var(--septenary-contrast);
       }
 
       .parameter {
@@ -113,20 +111,20 @@ svg {
       }
 
       .parameter-name {
-        color: #d23a32;
+        color: var(--dynamic-red-01);
       }
 
       .parameter-flag {
         a {
           display: inline-block;
           padding: 0px 6px;
-          background: #dddddd;
+          background: var(--senary-contrast);
           border-radius: 10px;
           color: inherit;
           text-decoration: none;
 
           &:hover {
-            background: #c6c6c6;
+            background: var(--senary-contrast);
           }
         }
       }
@@ -162,16 +160,16 @@ svg {
   display: flex;
   overflow: auto;
 
-  background: #f5f5f5;
+  background: var(--septenary-contrast);
 
   .dep {
-    border-top: 1px solid #e8e8e8;
-    border-bottom: 1px solid #e8e8e8;
-    border-left: 1px solid #e8e8e8;
+    border-top: 1px solid var(--septenary-contrast);
+    border-bottom: 1px solid var(--septenary-contrast);
+    border-left: 1px solid var(--septenary-contrast);
     padding: 1rem;
 
     &:last-of-type {
-      border-right: 1px solid #e8e8e8;
+      border-right: 1px solid var(--septenary-contrast);
     }
 
     .dep-header {
@@ -195,7 +193,7 @@ svg {
   font-size: 11px;
   font-weight: 500;
   height: auto;
-  background: #f5f5f5;
+  background: var(--septenary-contrast);
 }
 
 .injector-hierarchy {
@@ -207,7 +205,7 @@ svg {
     margin: 0;
     display: flex;
     align-items: center;
-    border-bottom: 1px solid #777777;
+    border-bottom: 1px solid var(--quaternary-contrast);
     font-size: 0.875rem;
     display: flex;
     align-items: center;
@@ -224,7 +222,7 @@ svg {
 
 .injector-graph {
   overflow: auto;
-  background: #f3f3f3;
+  background: var(--octonary-contrast);
   height: calc(100% - 50px);
 }
 
@@ -232,19 +230,3 @@ svg {
   color: currentColor;
   text-decoration: none;
 }
-
-@include theme.dark-theme {
-  .injector-hierarchy {
-    h2 {
-      color: #ffffff;
-    }
-  }
-
-  .deps {
-    background: #161515;
-  }
-
-  .injector-graph {
-    background: #1a1a1a;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/BUILD.bazel
index c005c9b4e7f..fc62d8e8533 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/BUILD.bazel
@@ -17,7 +17,6 @@ _STYLE_LABELS = [
     sass_binary(
         name = label,
         src = src,
-        deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
     )
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.scss
index e97821c5308..466f556a2fe 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog.component.scss
@@ -4,10 +4,10 @@
 }
 
 .profiler-version {
-  color: #388e3c;
+  color: var(--green-01);
 }
 
 .imported-version,
 .error {
-  color: #d32f2f;
+  color: var(--dynamic-red-01);
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html
index 2f76dd93163..24a59502828 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html
@@ -32,7 +32,7 @@
     }
     <p class="instructions" [class.hidden]="state() !== 'idle'">
       <span>
-        Click the record button to start a new recording, or upload a json file containing profiler
+        Click the record button to start a new recording, or upload a JSON file containing profiler
         data.
       </span>
       <br />
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.scss
index 5072f31ffcc..1e9bf7b898f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.scss
@@ -1,5 +1,3 @@
-@use '../../../styles/theme' as theme;
-
 :host,
 .profiler-wrapper {
   font-size: 1em;
@@ -21,7 +19,7 @@
   cursor: pointer;
 
   &.recording-button {
-    color: #d83c34;
+    color: var(--dynamic-red-01);
   }
 }
 
@@ -38,12 +36,6 @@
   }
 }
 
-@include theme.dark-theme {
-  .instructions {
-    color: #ffffff;
-  }
-}
-
 #profiler-content-wrapper {
   margin: 0;
   height: calc(100% - 30px);
@@ -55,14 +47,6 @@
   height: 100%;
 }
 
-@include theme.dark-theme {
-  .profiler-control {
-    &.recording-button {
-      color: #ff625a;
-    }
-  }
-}
-
 .mdc-card {
   flex-direction: row;
   align-items: center;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/BUILD.bazel
index 029ac350b5b..afe36852957 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/BUILD.bazel
@@ -21,7 +21,6 @@ _STYLE_LABELS = [
     sass_binary(
         name = label,
         src = src,
-        deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
     )
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.scss
index eae6a018f10..465dd747e76 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/frame-selector.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../styles/theme' as theme;
-
 .bar-graph-container {
   padding: 2px;
   height: 54px;
@@ -43,7 +41,7 @@
       margin-top: 2px;
 
       &:hover {
-        background-color: #ebf1fb;
+        background-color: var(--septenary-contrast);
       }
 
       &.selected {
@@ -53,8 +51,8 @@
         padding-left: 0.5px;
         padding-right: 0.5px;
 
-        background-color: #cfe8fc;
-        border: 2px solid #cfe8fc;
+        background-color: var(--dynamic-blue-01);
+        border: 2px solid var(--dynamic-blue-01);
       }
     }
   }
@@ -64,23 +62,6 @@
   }
 }
 
-@include theme.dark-theme {
-  .bar-graph-container .bar-container .frame-bar {
-    &:hover {
-      background-color: #262d36;
-    }
-
-    &.selected {
-      background-color: #073d69;
-      border: 2px solid #073d69;
-    }
-  }
-
-  .txt-frames {
-    color: #ffffff;
-  }
-}
-
 cdk-virtual-scroll-viewport {
   height: 50px;
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/BUILD.bazel
index 397022f57b3..e358d4e7cb8 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/BUILD.bazel
@@ -21,7 +21,6 @@ _STYLE_LABELS = [
     sass_binary(
         name = label,
         src = src,
-        deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
     )
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.scss
index 93c21a5c377..25eac6377b4 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/bar-chart.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../../styles/theme' as theme;
-
 .bar {
   width: 0%;
   margin-bottom: 7px;
@@ -22,6 +20,7 @@
   text-overflow: ellipsis;
   overflow: hidden;
   opacity: 1;
+  color: var(--color-text);
 }
 
 .bar:hover {
@@ -34,9 +33,3 @@
   height: 100%;
   display: block;
 }
-
-@include theme.dark-theme {
-  .bar span {
-    color: #bcc5ce;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/execution-details.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/execution-details.component.scss
index eadfc3ec53e..7da70af42b1 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/execution-details.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/execution-details.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../../styles/theme' as theme;
-
 table {
   border-collapse: collapse;
   width: 100%;
@@ -10,13 +8,5 @@ table {
 
 th,
 td {
-  border-bottom: 1px solid #ddd;
-}
-
-@include theme.dark-theme {
-  .name,
-  .method,
-  .value {
-    color: #ffffff;
-  }
+  border-bottom: 1px solid var(--senary-contrast);
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.scss
index 67ab44bb4c1..8f47104dacd 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/flamegraph-visualizer.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../../styles/theme' as theme;
-
 :host {
   width: 100%;
   height: 100%;
@@ -17,32 +15,18 @@
 
   ::ng-deep {
     .ngx-fg-label {
-      color: #000000de;
       font-weight: 500;
       font-size: 1em;
-    }
-  }
-
-  @include theme.dark-theme {
-    .entry-statistics {
-      span {
-        color: #54c9bd;
-      }
+      color: var(--senary-contrast);
     }
 
-    ::ng-deep {
-      .ngx-fg-rect {
-        stroke: #303030;
-        transition: none;
-      }
+    .ngx-fg-rect {
+      stroke: var(--secondary-contrast);
+      transition: none;
+    }
 
-      .ngx-fg-label {
-        color: #bcc5ce;
-      }
-
-      .ngx-fg-svg-g {
-        transition: none;
-      }
+    .ngx-fg-svg-g {
+      transition: none;
     }
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.scss
index 23807b685b1..d03a285f71d 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/timeline-visualizer.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../../styles/theme' as theme;
-
 :host {
   display: block;
   overflow: auto;
@@ -47,7 +45,7 @@
   }
 
   span {
-    color: #8a1882;
+    color: var(--purple-01);
   }
 }
 
@@ -60,15 +58,3 @@ ul {
   margin-block-start: 0px;
   padding-inline-start: 20px;
 }
-
-@include theme.dark-theme {
-  .entry-statistics {
-    span {
-      color: #5cadd3;
-    }
-  }
-
-  .txt-total-time {
-    color: #ffffff;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.scss
index cfdf4238d28..0f0357d8e7e 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/tree-map-visualizer.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../../styles/theme' as theme;
-
 .web-tree {
   height: calc(100% - 25px);
   width: calc(100% - 25px);
@@ -8,25 +6,15 @@
 
 :host {
   ::ng-deep {
+    .webtreemap-node {
+      background: var(--primary-contrast);
+    }
     .webtreemap-caption {
       font-size: 0.9em;
+      // color: white;
     }
     .webtreemap-node:hover {
-      background: #ebf1fb;
-    }
-  }
-}
-
-@include theme.dark-theme {
-  ::ng-deep {
-    .webtreemap-node {
-      background: #202124;
-    }
-    .webtreemap-node:hover {
-      background: #262d36;
-    }
-    .webtreemap-caption {
-      color: #ffffff;
+      background: var(--septenary-contrast);
     }
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.scss
index 112387b4b88..567e2addc4e 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline-controls.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../styles/theme' as theme;
-
 .visual-controls {
   display: flex;
   flex-direction: column;
@@ -49,12 +47,12 @@
       text-overflow: ellipsis;
 
       &.warning-label {
-        color: #d83c34;
+        color: var(--dynamic-red-01);
       }
     }
 
     .value {
-      color: #8a1882;
+      color: var(--dynamic-purple-01);
     }
   }
 
@@ -66,16 +64,3 @@
     min-height: 85px;
   }
 }
-
-@include theme.dark-theme {
-  .details .value {
-    color: #5cadd3;
-  }
-
-  .warning-label {
-    color: #ff625a;
-  }
-  .details {
-    color: #ffffff;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.scss
index 4a5d421ff2e..fd509bd68b8 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/timeline.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../styles/theme' as theme;
-
 :host {
   font-size: 11px;
   width: 100%;
@@ -28,9 +26,3 @@
   height: 100%;
   margin: 0 10px;
 }
-
-@include theme.dark-theme {
-  .info {
-    color: #ffffff;
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/BUILD.bazel
index fb694931589..d803324cef2 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/BUILD.bazel
@@ -6,7 +6,6 @@ package(default_visibility = ["//:__subpackages__"])
 sass_binary(
     name = "router_tree_styles",
     src = "router-tree.component.scss",
-    deps = ["//devtools/projects/ng-devtools/src/styles:theme"],
 )
 
 ng_module(
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree-visualizer.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree-visualizer.ts
index 6106cf7107e..6cd4ab5d4fc 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree-visualizer.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree-visualizer.ts
@@ -105,8 +105,8 @@ export class RouterTreeVisualizer {
       .attr('y', 10)
       .attr('width', size)
       .attr('height', size)
-      .style('stroke', '#ff7a7e')
-      .style('fill', '#f9c2c5');
+      .style('stroke', 'var(--red-05)')
+      .style('fill', 'var(--red-06)');
 
     svg
       .append('rect')
@@ -114,8 +114,8 @@ export class RouterTreeVisualizer {
       .attr('y', 45)
       .attr('width', size)
       .attr('height', size)
-      .style('stroke', 'oklch(0.65 0.25 266/1)')
-      .style('fill', '#8bc1ff');
+      .style('stroke', 'var(--blue-02)')
+      .style('fill', 'var(--blue-03)');
 
     svg
       .append('rect')
@@ -123,8 +123,8 @@ export class RouterTreeVisualizer {
       .attr('y', 80)
       .attr('width', size)
       .attr('height', size)
-      .style('stroke', '#28ab2c')
-      .style('fill', '#a7d5a9');
+      .style('stroke', 'var(--green-02)')
+      .style('fill', 'var(--green-03)');
 
     svg
       .append('text')
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss
index 5cf56b9a0a5..084b3afddc4 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss
@@ -1,5 +1,3 @@
-@use '../../../styles/theme' as theme;
-
 .router-tree-wrapper {
   font-size: 1em;
   width: 100%;
@@ -9,7 +7,7 @@
 }
 
 .filter-input {
-  border: 1px solid rgba(0, 0, 0, 0.12);
+  border: 1px solid var(--senary-contrast);
   border-radius: 3px;
   padding-left: 5px;
   margin: 0 5px 0 10px;
@@ -17,12 +15,5 @@
   font-size: 11px;
   height: 28px;
   outline: none;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-@include theme.dark-theme {
-  .filter-input {
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    color: rgba(255, 255, 255, 0.87);
-  }
+  color: black;
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/tree-visualizer-host/tree-visualizer-host.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/tree-visualizer-host/tree-visualizer-host.component.scss
index 8abff9a2644..e591dd4f70c 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/tree-visualizer-host/tree-visualizer-host.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/tree-visualizer-host/tree-visualizer-host.component.scss
@@ -15,23 +15,54 @@
         display: none;
       }
 
+      .legend {
+        background: var(--primary-contrast);
+      }
+
+      .arrow {
+        fill: var(--full-contrast);
+      }
+
+      .legend-router-tree {
+        fill: var(--full-contrast) !important;
+      }
+
       .link {
-        stroke: #9b9b9b;
+        stroke: var(--quaternary-contrast);
         stroke-width: 3px;
         fill: none;
 
         &.highlighted {
-          stroke: #4da1ff;
+          stroke: var(--blue-02);
         }
       }
 
       .node {
         cursor: pointer;
 
+        .node-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+          color: black;
+          font-size: 16px;
+          box-sizing: border-box;
+          border-radius: 2px;
+          border-style: solid;
+          border-width: 2px;
+          font-weight: 300;
+
+          &:hover {
+            color: white;
+          }
+        }
+
         &.highlighted {
           .node-container,
           .node-container:hover {
-            background: oklch(0.65 0.25 266 / 1);
+            background: var(--blue-02);
             border-color: white;
             color: white;
             font-weight: 400;
@@ -40,30 +71,15 @@
           &.selected {
             .node-container,
             .node-container:hover {
-              color: oklch(0.65 0.25 266 / 1);
+              color: var(--blue-02);
               background: white;
               border-width: 3px;
-              border-color: oklch(0.65 0.25 266 / 1);
+              border-color: var(--blue-02);
               font-weight: 800;
             }
           }
         }
 
-        .node-container {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 100%;
-          height: 100%;
-          color: #000;
-          font-size: 16px;
-          box-sizing: border-box;
-          border-radius: 2px;
-          border-style: solid;
-          border-width: 2px;
-          font-weight: 300;
-        }
-
         .node-search {
           border-width: 4px !important;
           border-style: groove !important;
@@ -72,44 +88,48 @@
         }
 
         .node-environment {
-          border: 1px solid #ff7a7e;
-          background: #f9c2c5;
+          border: 1px solid var(--red-05);
+          background: var(--red-06);
 
           &:hover {
-            background: #ff7a7e;
+            background: var(--red-05);
           }
         }
 
         .node-imported-module {
-          border-color: #8838f7;
-          background: #c79eff;
+          border-color: var(--purple-02);
+          background: var(--purple-03);
 
           &:hover {
-            background: #8838f7;
+            background: var(--purple-02);
           }
         }
 
         .node-lazy {
-          border-color: oklch(0.65 0.25 266/1);
-          background: #8bc1ff;
+          border-color: var(--blue-02);
+          background: var(--blue-03);
 
           &:hover {
-            background: #8bc1ff;
+            background: var(--blue-02);
           }
         }
 
         .node-element {
-          border-color: #28ab2c;
-          background: #a7d5a9;
+          border-color: var(--green-02);
+          background: var(--green-03);
 
           &:hover {
-            background: #28ab2c;
+            background: var(--green-02);
           }
         }
 
         .node-null {
-          border: 1px solid #8b8b8b;
+          border: 1px solid var(--quaternary-contrast);
           background: white;
+
+          &:hover {
+            color: black;
+          }
         }
 
         .node-label {
@@ -122,32 +142,3 @@
     }
   }
 }
-
-:host-context(.dark-theme) {
-  svg ::ng-deep {
-    .legend {
-      background: #2f2c2c;
-    }
-
-    .link {
-      stroke: #bcc5ce;
-      fill: none;
-
-      &.highlighted {
-        stroke: #4da1ff;
-      }
-    }
-
-    .arrow {
-      fill: white;
-    }
-
-    .node-label {
-      color: #000;
-    }
-
-    .legend-router-tree {
-      fill: #ffffff !important;
-    }
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.scss b/devtools/projects/ng-devtools/src/lib/devtools.component.scss
index d63deee6af3..e445ecbd3f7 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools.component.scss
@@ -1,20 +1,9 @@
-@use '../styles/theme' as theme;
-
 @keyframes pulse {
   0% {
-    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 0 0px var(--dynamic-red-02);
   }
   100% {
-    box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
-  }
-}
-
-@keyframes darkmode-pulse {
-  0% {
-    box-shadow: 0 0 0 0px rgb(126, 40, 40);
-  }
-  100% {
-    box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
+    box-shadow: 0 0 0 35px var(--dynamic-transparent-01);
   }
 }
 
@@ -30,18 +19,6 @@
   display: block;
 }
 
-@include theme.dark-theme {
-  .devtools-wrapper {
-    background: #202124;
-  }
-
-  .initializing {
-    .loading {
-      animation: darkmode-pulse 1s infinite;
-    }
-  }
-}
-
 .noselect {
   user-select: none;
 }
@@ -74,7 +51,7 @@
     display: inline-block;
     font-size: 0.8em;
     border-radius: 50%;
-    border: solid 2px rgb(17, 17, 17);
+    border: solid 2px var(--primary-contrast);
     cursor: pointer;
     width: 16px;
     height: 16px;
@@ -83,29 +60,19 @@
   }
 }
 
-@include theme.dark-theme {
-  .info-icon {
-    border: solid 2px #bcc5ce;
-  }
-
-  a {
-    color: #bcc5ce;
-  }
-}
-
 .ng-dev-mode-causes {
   font-weight: 500;
   font-size: 1.2em;
   padding: 1rem;
   width: 80%;
   margin: auto;
-  border: 1px solid;
+  border: 1px solid var(--quinary-contrast);
   border-radius: 16px;
 
   code {
     padding: 2px;
-    color: lightgreen;
-    background: #3e3e3e;
+    color: var(--dynamic-green-01);
+    background: var(--senary-contrast);
     border-radius: 5px;
   }
 
diff --git a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.scss b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.scss
index bb0f76da421..9eace676014 100644
--- a/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.scss
@@ -63,7 +63,7 @@
       }
 
       &:not(:first-of-type) {
-        border-left: 1px solid #eeeeee;
+        border-left: 1px solid var(--color-separator);
       }
     }
   }
@@ -91,7 +91,7 @@
       }
 
       &:not(:first-of-type) {
-        border-top: 1px solid #eeeeee;
+        border-top: 1px solid var(--color-separator);
       }
 
       &.as-hidden {
@@ -117,21 +117,3 @@
     }
   }
 }
-
-:host-context(.dark-theme) {
-  &.as-horizontal {
-    ::ng-deep > .as-split-area {
-      &:not(:first-of-type) {
-        border-left: 1px solid #3f3f3f;
-      }
-    }
-  }
-
-  &.as-vertical {
-    ::ng-deep > .as-split-area {
-      &:not(:first-of-type) {
-        border-top: 1px solid #3f3f3f;
-      }
-    }
-  }
-}
diff --git a/devtools/projects/ng-devtools/src/styles/BUILD.bazel b/devtools/projects/ng-devtools/src/styles/BUILD.bazel
index d834265d052..0a0a00c7716 100644
--- a/devtools/projects/ng-devtools/src/styles/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/styles/BUILD.bazel
@@ -13,7 +13,10 @@ npm_sass_library(
 sass_library(
     name = "global",
     srcs = ["_global.scss"],
-    deps = [":material_sass_deps"],
+    deps = [
+        ":colors",
+        ":material_sass_deps",
+    ],
 )
 
 sass_library(
@@ -29,6 +32,9 @@ sass_library(
 sass_library(
     name = "colors",
     srcs = ["_colors.scss"],
+    deps = [
+        ":theme",
+    ],
 )
 
 sass_binary(
diff --git a/devtools/projects/ng-devtools/src/styles/_colors.scss b/devtools/projects/ng-devtools/src/styles/_colors.scss
index 334e90df56d..9982b894322 100644
--- a/devtools/projects/ng-devtools/src/styles/_colors.scss
+++ b/devtools/projects/ng-devtools/src/styles/_colors.scss
@@ -1 +1,171 @@
-$dummy: #f00;
+@use 'sass:color';
+@use 'sass:map';
+@use './theme' as theme;
+
+/* A map with all available solid colors (excl. Special). Available as CSS vars as well. */
+/* prettier-ignore */
+$_colors: (
+  /* Reds */
+  red-01: oklch(40% 0.1 26),
+  red-02: oklch(49.3% 0.2 26),
+  red-03: oklch(55% 0.2 26),
+  red-04: oklch(63% 0.2 26),
+  red-05: oklch(68.8% 0.2 26),
+  red-06: oklch(86% 0.06 15),
+
+  /* Greens */
+  green-01: oklch(58% 0.13 145),
+  green-02: oklch(65% 0.13 145),
+  green-03: oklch(83% 0.13 145),
+
+  /* Blues */
+  blue-01: oklch(36% 0.1 258),
+  blue-02: oklch(57% 0.2 258),
+  blue-03: oklch(72% 0.2 258),
+  blue-04: oklch(83% 0.2 258),
+  blue-05: oklch(91% 0.04 258),
+  blue-06: oklch(96% 0.01 258),
+
+  /* Purples */
+  purple-01: oklch(47.5% 0.26 295),
+  purple-02: oklch(57.9% 0.26 295),
+  purple-03: oklch(76% 0.15 305),
+
+  /* Grayscale */
+  gray-1000: oklch(16.93% 0 0),
+  gray-900: oklch(19.37% 0 0),
+  gray-800: oklch(27.68% 0 0),
+  gray-700: oklch(36.98% 0 0),
+  gray-600: oklch(47% 0 0),
+  gray-500: oklch(54.84% 0 0),
+  gray-400: oklch(70.9% 0 0),
+  gray-300: oklch(84.01% 0 0),
+  gray-200: oklch(91.75% 0 0),
+  gray-100: oklch(97.12% 0 0),
+  gray-50: oklch(98.81% 0 0),
+
+  /* Transparent */
+  transparent-01: oklch(0% 0 0 / 0.8),
+  transparent-02: oklch(0% 0 0 / 0.35),
+  transparent-03: oklch(0% 0 0 / 0.2),
+  transparent-04: oklch(0% 0 0 / 0.05),
+);
+
+@mixin _light-colors {
+  /* Dynamic general purpose colors */
+  --full-contrast: black;
+
+  --primary-contrast: var(--gray-900);
+  --secondary-contrast: var(--gray-800);
+  --tertiary-contrast: var(--gray-700);
+  --quaternary-contrast: var(--gray-500);
+  --quinary-contrast: var(--gray-300);
+  --senary-contrast: var(--gray-200);
+  --septenary-contrast: var(--gray-100);
+  --octonary-contrast: var(--gray-50);
+
+  --dynamic-red-01: var(--red-03);
+  --dynamic-red-02: var(--red-06);
+  --dynamic-green-01: var(--green-01);
+  --dynamic-blue-01: var(--blue-05);
+  --dynamic-purple-01: var(--purple-01);
+
+  --dynamic-transparent-01: var(--transparent-04);
+  --dynamic-transparent-02: var(--transparent-02);
+
+  /* Main colors – general UI colors like background and text color */
+  --color-background: white;
+  --color-foreground: var(--blue-06);
+  --color-text: black;
+  --color-separator: var(--blue-05);
+
+  /* Special colors – usually a single-use colors meant for specific elements */
+  --color-tree-node-element-name: #830042;
+  --color-tree-node-dir-name: #953b13;
+  --color-tree-node-ng-element: #0c3a96;
+  --color-tree-node-console-ref: #146129;
+  --color-tree-node-hovered: #f2f2f2;
+  --color-tree-node-highlighted: #cddffd;
+  --color-tree-node-matched: #f3ce49;
+
+  --color-property-list-name: #71a2f7;
+}
+
+@mixin _dark-colors {
+  /* Dynamic general purpose colors */
+  --full-contrast: white;
+
+  --primary-contrast: var(--gray-50);
+  --secondary-contrast: var(--gray-300);
+  --tertiary-contrast: var(--gray-300);
+  --quaternary-contrast: var(--gray-400);
+  --quinary-contrast: var(--gray-500);
+  --senary-contrast: var(--gray-700);
+  --septenary-contrast: var(--gray-800);
+  --octonary-contrast: var(--gray-900);
+
+  --dynamic-red-01: var(--red-05);
+  --dynamic-red-02: var(--red-01);
+  --dynamic-green-01: var(--green-03);
+  --dynamic-blue-01: var(--blue-01);
+  --dynamic-purple-01: var(--purple-03);
+
+  --dynamic-transparent-01: var(--transparent-03);
+  --dynamic-transparent-02: var(--transparent-01);
+
+  /* Main colors – general UI colors like background and text color */
+  --color-background: var(--gray-800);
+  --color-foreground: var(--gray-700);
+  --color-text: white;
+  --color-separator: var(--gray-600);
+
+  /* Special colors – usually a single-use colors meant for specific elements */
+  --color-tree-node-element-name: #71a2f7;
+  --color-tree-node-dir-name: #9ec0f9;
+  --color-tree-node-ng-element: #fe824f;
+  --color-tree-node-console-ref: #a1a1a1;
+  --color-tree-node-hovered: #393939;
+  --color-tree-node-highlighted: #00416c;
+  --color-tree-node-matched: #906921;
+
+  --color-property-list-name: #0c3a96;
+}
+
+/* Utilities */
+
+@function convert-to-rgb($map) {
+  $rgb-map: ();
+
+  @each $name, $color in $map {
+    $rgb-map: map-merge(
+      $rgb-map,
+      (
+        $name: color.to-space($color, rgb),
+      )
+    );
+  }
+
+  @return $rgb-map;
+}
+
+@mixin convert-color-map-to-vars($colors) {
+  @each $name, $color in $colors {
+    --#{$name}: #{$color};
+  }
+}
+
+/* Main */
+
+/* Since Oklch global browser support is ~93%, we are converting colors to RGB. */
+$colors: convert-to-rgb($_colors); /* Main color map */
+
+@mixin root-colors {
+  :root {
+    @include convert-color-map-to-vars($colors);
+    @include _light-colors();
+
+    &.#{theme.$dark-theme-class} {
+      @include _dark-colors();
+    }
+  }
+}
diff --git a/devtools/projects/ng-devtools/src/styles/_global.scss b/devtools/projects/ng-devtools/src/styles/_global.scss
index 5a74158c7aa..5c3d80d5f50 100644
--- a/devtools/projects/ng-devtools/src/styles/_global.scss
+++ b/devtools/projects/ng-devtools/src/styles/_global.scss
@@ -2,13 +2,24 @@
 
 @use 'sass:map';
 @use 'external/npm/node_modules/@angular/material/index' as mat;
+@use './colors' as clr;
+
 @include mat.all-component-typographies();
 @include mat.core();
+@include clr.root-colors();
 
 html,
 body {
   padding: 0;
   margin: 0;
+  background: var(--color-background);
+  color: var(--color-text);
+}
+
+input,
+select {
+  color: var(--primary-contrast);
+  background: var(--color-foreground);
 }
 
 // Light theme
@@ -24,19 +35,19 @@ $dark-theme: map.deep-merge(
   (
     'color': (
       'background': (
-        background: #202124,
-        card: #202124,
+        background: map.get(clr.$colors, gray-800),
+        card: map.get(clr.$colors, gray-800),
       ),
       'foreground': (
-        text: #bcc5ce,
+        text: map.get(clr.$colors, gray-200),
       ),
     ),
     'background': (
-      background: #202124,
-      card: #202124,
+      background: map.get(clr.$colors, gray-800),
+      card: map.get(clr.$colors, gray-800),
     ),
     'foreground': (
-      'text': #bcc5ce,
+      'text': map.get(clr.$colors, gray-200),
     ),
   )
 );
@@ -53,7 +64,6 @@ $dark-theme: map.deep-merge(
 /* Keep class name in sync with ThemeService */
 .dark-theme {
   color-scheme: dark;
-  background: #202124;
   @include mat.all-component-themes($dark-theme);
 
   .mat-mdc-chip.mat-mdc-standard-chip {
diff --git a/devtools/projects/ng-devtools/src/styles/_theme.scss b/devtools/projects/ng-devtools/src/styles/_theme.scss
index ce075843c2d..d7d038442af 100644
--- a/devtools/projects/ng-devtools/src/styles/_theme.scss
+++ b/devtools/projects/ng-devtools/src/styles/_theme.scss
@@ -1,30 +1,30 @@
 /* Keep class names in sync with ThemeService */
-$_dark-theme-class: 'dark-theme';
-$_light-theme-class: 'light-theme';
+$dark-theme-class: 'dark-theme';
+$light-theme-class: 'light-theme';
 
 /* $browser expects 'chrome', 'firefox' or 'safari' */
 @mixin _theme($theme, $browser: '') {
   @if $browser == '' {
-    :host-context(body.#{$theme}) {
+    :host-context(:root.#{$theme}) {
       @content;
     }
   } @else {
     /* Keep browser class name in sync with BrowserService. */
     $browser-class: $browser + '-ui';
-    :host-context(body.#{$theme}.#{$browser-class}) {
+    :host-context(:root.#{$theme}.#{$browser-class}) {
       @content;
     }
   }
 }
 
 @mixin dark-theme($browser: '') {
-  @include _theme($_dark-theme-class, $browser) {
+  @include _theme($dark-theme-class, $browser) {
     @content;
   }
 }
 
 @mixin light-theme($browser: '') {
-  @include _theme($_light-theme-class, $browser) {
+  @include _theme($light-theme-class, $browser) {
     @content;
   }
 }