Change double render console color based on browser theme

Author: lunaruan

packages/react-devtools-extensions/src/main.js

@@ -46,6 +46,9 @@ function syncSavedPreferences() {
     )};
     window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
       getHideConsoleLogsInStrictMode(),
+    )};
+    window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify(
+      getBrowserTheme(),
     )};`,
   );
 }

packages/react-devtools-extensions/src/utils.js

@@ -1,5 +1,7 @@
 /* global chrome */
 
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+
 const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
 
 export type BrowserName = 'Chrome' | 'Firefox';
@@ -8,8 +10,6 @@ export function getBrowserName(): BrowserName {
   return IS_CHROME ? 'Chrome' : 'Firefox';
 }
 
-export type BrowserTheme = 'dark' | 'light';
-
 export function getBrowserTheme(): BrowserTheme {
   if (IS_CHROME) {
     // chrome.devtools.panels added in Chrome 18.

packages/react-devtools-shared/src/backend/agent.js

@@ -40,6 +40,7 @@ import type {
 } from './types';
 import type {ComponentFilter} from '../types';
 import {isSynchronousXHRSupported} from './utils';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -636,11 +637,13 @@ export default class Agent extends EventEmitter<{|
     breakOnConsoleErrors,
     showInlineWarningsAndErrors,
     hideConsoleLogsInStrictMode,
+    browserTheme,
   }: {|
     appendComponentStack: boolean,
     breakOnConsoleErrors: boolean,
     showInlineWarningsAndErrors: boolean,
     hideConsoleLogsInStrictMode: boolean,
+    browserTheme: BrowserTheme,
   |}) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-
@@ -651,6 +654,7 @@ export default class Agent extends EventEmitter<{|
       breakOnConsoleErrors,
       showInlineWarningsAndErrors,
       hideConsoleLogsInStrictMode,
+      browserTheme,
     });
   };
 

packages/react-devtools-shared/src/backend/console.js

@@ -9,6 +9,7 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {CurrentDispatcherRef, ReactRenderer, WorkTagMap} from './types';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 import {format} from './utils';
 
 import {getInternalReactConstants} from './renderer';
@@ -17,9 +18,12 @@ import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
 // NOTE: KEEP IN SYNC with src/hook.js
 const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn', 'log'];
 const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
-const DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, .5)';
-const DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, .5)';
-const DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
+const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
+const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
+const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
+const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
+const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
+const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';
 
 // React's custom built component stack strings match "\s{4}in"
 // Chrome's prefix matches "\s{4}at"
@@ -124,11 +128,13 @@ export function patch({
   breakOnConsoleErrors,
   showInlineWarningsAndErrors,
   hideConsoleLogsInStrictMode,
+  browserTheme,
 }: {
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   showInlineWarningsAndErrors: boolean,
   hideConsoleLogsInStrictMode: boolean,
+  browserTheme: BrowserTheme,
 }): void {
   // Settings may change after we've patched the console.
   // Using a shared ref allows the patch function to read the latest values.
@@ -248,14 +254,23 @@ export function patch({
               let color;
               switch (method) {
                 case 'warn':
-                  color = DIMMED_WARNING_COLOR;
+                  color =
+                    browserTheme === 'light'
+                      ? LIGHT_MODE_DIMMED_WARNING_COLOR
+                      : DARK_MODE_DIMMED_WARNING_COLOR;
                   break;
                 case 'error':
-                  color = DIMMED_ERROR_COLOR;
+                  color =
+                    browserTheme === 'light'
+                      ? LIGHT_MODE_DIMMED_ERROR_COLOR
+                      : DARK_MODE_DIMMED_ERROR_COLOR;
                   break;
                 case 'log':
                 default:
-                  color = DIMMED_LOG_COLOR;
+                  color =
+                    browserTheme === 'light'
+                      ? LIGHT_MODE_DIMMED_LOG_COLOR
+                      : DARK_MODE_DIMMED_LOG_COLOR;
                   break;
               }
 

packages/react-devtools-shared/src/backend/renderer.js

@@ -742,12 +742,14 @@ export function attach(
       window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
     const hideConsoleLogsInStrictMode =
       window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
+    const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
 
     patchConsole({
       appendComponentStack,
       breakOnConsoleErrors,
       showInlineWarningsAndErrors,
       hideConsoleLogsInStrictMode,
+      browserTheme,
     });
   }
 

packages/react-devtools-shared/src/bridge.js

@@ -165,6 +165,7 @@ type UpdateConsolePatchSettingsParams = {|
   breakOnConsoleErrors: boolean,
   showInlineWarningsAndErrors: boolean,
   hideConsoleLogsInStrictMode: boolean,
+  browserTheme: 'dark' | 'light',
 |};
 
 export type BackendEvents = {|

packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js

@@ -181,13 +181,15 @@ function SettingsContextController({
       breakOnConsoleErrors,
       showInlineWarningsAndErrors,
       hideConsoleLogsInStrictMode,
+      browserTheme,
     });
   }, [
     bridge,
     appendComponentStack,
     breakOnConsoleErrors,
     showInlineWarningsAndErrors,
     hideConsoleLogsInStrictMode,
+    browserTheme,
   ]);
 
   useEffect(() => {

packages/react-devtools-shared/src/hook.js

@@ -10,6 +10,7 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {ReactRenderer} from './backend/types';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 import {
   patch as patchConsole,
@@ -224,7 +225,10 @@ export function installHook(target: any): DevToolsHook | null {
   // NOTE: KEEP IN SYNC with src/backend/console.js:patch
   function patchConsoleForInitialRenderInExtension(
     renderer: ReactRenderer,
-    {hideConsoleLogsInStrictMode}: {hideConsoleLogsInStrictMode: boolean},
+    {
+      hideConsoleLogsInStrictMode,
+      browserTheme,
+    }: {hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme},
   ): void {
     const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
 
@@ -346,6 +350,7 @@ export function installHook(target: any): DevToolsHook | null {
           window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
         const hideConsoleLogsInStrictMode =
           window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
+        const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
 
         // The installHook() function is injected by being stringified in the browser,
         // so imports outside of this function do not get included.
@@ -361,10 +366,12 @@ export function installHook(target: any): DevToolsHook | null {
             breakOnConsoleErrors,
             showInlineWarningsAndErrors,
             hideConsoleLogsInStrictMode,
+            browserTheme,
           });
         } else {
           patchConsoleForInitialRenderInExtension(renderer, {
             hideConsoleLogsInStrictMode,
+            browserTheme,
           });
         }
       } catch (error) {}