quick fix to dark mode support

welldone-software · Dec 29, 2024 · 1562bfc · 1562bfc
1 parent 5e927f2
commit 1562bfc
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -244,6 +244,7 @@ Optionally you can pass in `options` as the second parameter. The following opti
 - `titleColor`
 - `diffNameColor`
 - `diffPathColor`
+- `textBackgroundColor`
 - `notifier: ({Component, displayName, hookName, prevProps, prevState, prevHookResult, nextProps, nextState, nextHookResult, reason, options, ownerDataMap}) => void`
 - `getAdditionalOwnerData: (element) => {...}`
 
@@ -328,10 +329,11 @@ If you don't want to use `console.group` to group logs you can print them as sim
 
 Grouped logs can be collapsed.
 
-#### titleColor / diffNameColor / diffPathColor
+#### titleColor / diffNameColor / diffPathColor / textBackgroundColor
 ##### (default titleColor: `'#058'`)
 ##### (default diffNameColor: `'blue'`)
 ##### (default diffPathColor: `'red'`)
+##### (default textBackgroundColor: `'white`)
 
 Controls the colors used in the console notifications
 

diff --git a/src/defaultNotifier.js b/src/defaultNotifier.js
@@ -44,7 +44,9 @@ function logDifference({Component, displayName, hookName, prefixMessage, diffObj
       }
       wdyrStore.options.consoleGroup(
         `%c${diffObjType === 'hook' ? `[hook ${hookName} result]` : `${diffObjType}.`}%c${pathString}%c`,
-        `color:${wdyrStore.options.diffNameColor};`, `color:${wdyrStore.options.diffPathColor};`, 'color:default;'
+        `background-color: ${wdyrStore.options.textBackgroundColor};color:${wdyrStore.options.diffNameColor};`,
+        `background-color: ${wdyrStore.options.textBackgroundColor};color:${wdyrStore.options.diffPathColor};`,
+        'background-color: ${wdyrStore.options.textBackgroundColor};color:default;'
       );
       wdyrStore.options.consoleLog(
         `${diffTypesDescriptions[diffType]}. (more info at ${hookName ? moreInfoHooksUrl : moreInfoUrl})`,
@@ -76,7 +78,7 @@ export default function defaultNotifier(updateInfo) {
     return;
   }
 
-  wdyrStore.options.consoleGroup(`%c${displayName}`, `color: ${wdyrStore.options.titleColor};`);
+  wdyrStore.options.consoleGroup(`%c${displayName}`, `background-color: ${wdyrStore.options.textBackgroundColor};color: ${wdyrStore.options.titleColor};`);
 
   let prefixMessage = 'Re-rendered because';
 

diff --git a/src/normalizeOptions.js b/src/normalizeOptions.js
@@ -35,6 +35,7 @@ export default function normalizeOptions(userOptions = {}) {
     titleColor: '#058',
     diffNameColor: 'blue',
     diffPathColor: 'red',
+    textBackgroundColor: 'white',
     trackExtraHooks: [],
     trackAllPureComponents: false,
     ...userOptions,

diff --git a/types.d.ts b/types.d.ts
@@ -43,11 +43,12 @@ export interface WhyDidYouRenderOptions {
   titleColor?: string;
   diffNameColor?: string;
   diffPathColor?: string;
+  textBackgroundColor?: string;
   notifier?: Notifier;
   customName?: string;
 }
 
-export type WhyDidYouRenderComponentMember = WhyDidYouRenderOptions|boolean
+export type WhyDidYouRenderComponentMember = WhyDidYouRenderOptions | boolean
 
 export type Notifier = (options: UpdateInfo) => void