From ec0e9f5486642d95d9815ac9910b43d8290f341a Mon Sep 17 00:00:00 2001
From: MaxKless <34165455+MaxKless@users.noreply.github.com>
Date: Tue, 23 Apr 2024 03:59:07 +0200
Subject: [PATCH] fix(graph): don't listen to system theme changes in console
 (#22938)

---
 graph/ui-theme/src/lib/theme-resolver.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/graph/ui-theme/src/lib/theme-resolver.tsx b/graph/ui-theme/src/lib/theme-resolver.tsx
index 2dd3774e12b24b..61c1c768dcf231 100644
--- a/graph/ui-theme/src/lib/theme-resolver.tsx
+++ b/graph/ui-theme/src/lib/theme-resolver.tsx
@@ -1,3 +1,5 @@
+import { getEnvironmentConfig } from '@nx/graph/shared';
+
 const htmlEl = document.documentElement;
 export const localStorageThemeKey = 'nx-dep-graph-theme';
 export type Theme = 'light' | 'dark' | 'system';
@@ -48,6 +50,10 @@ export function getSystemTheme(): 'light' | 'dark' {
   if (isVSCodeDark || isVSCodeLight) {
     return isVSCodeDark ? 'dark' : 'light';
   }
+  // we don't want to use system theme in nx-console because it might conflict with the IDE theme
+  if (getEnvironmentConfig().environment === 'nx-console') {
+    return 'light';
+  }
   const isDarkMedia = window.matchMedia('(prefers-color-scheme: dark)').matches;
   return isDarkMedia || isVSCodeDark ? 'dark' : 'light';
 }
@@ -65,8 +71,9 @@ export function themeResolver(theme: Theme) {
     currentTheme = theme;
   } else {
     const resolver = getSystemTheme();
-
-    darkMedia.addEventListener('change', mediaListener);
+    if (getEnvironmentConfig().environment !== 'nx-console') {
+      darkMedia.addEventListener('change', mediaListener);
+    }
     vscodeDarkOberserver.observe(document.body, {
       attributes: true,
       attributeFilter: ['class'],