Rework theme resolution

packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { createDevTools } from '@redux-devtools/core';
-import {
-  InspectorMonitor,
-  base16Themes,
-  Tab,
-} from '@redux-devtools/inspector-monitor';
+import { InspectorMonitor, Tab } from '@redux-devtools/inspector-monitor';
+import type { Base16ThemeName } from '@redux-devtools/inspector-monitor';
 import { DockMonitor } from '@redux-devtools/dock-monitor';
 import { useLocation } from 'react-router-dom';
 import getOptions from './getOptions';
@@ -20,7 +17,7 @@ export const getDevTools = (location: { search: string }) =>
       changeMonitorKey="ctrl-m"
     >
       <InspectorMonitor
-        theme={getOptions(location).theme as keyof typeof base16Themes}
+        theme={getOptions(location).theme as Base16ThemeName}
         invertTheme={!getOptions(location).dark}
         supportImmutable={getOptions(location).supportImmutable}
         tabs={(defaultTabs) =>

packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { createDevTools } from '@redux-devtools/core';
 import { DockMonitor } from '@redux-devtools/dock-monitor';
-import {
-  InspectorMonitor,
-  base16Themes,
-} from '@redux-devtools/inspector-monitor';
+import { InspectorMonitor } from '@redux-devtools/inspector-monitor';
+import type { Base16ThemeName } from '@redux-devtools/inspector-monitor';
 import { useLocation } from 'react-router-dom';
 import getOptions from './getOptions';
 
@@ -32,7 +30,7 @@ export const getDevTools = (location: { search: string }) =>
       changeMonitorKey="ctrl-m"
     >
       <InspectorMonitor
-        theme={getOptions(location).theme as keyof typeof base16Themes}
+        theme={getOptions(location).theme as Base16ThemeName}
         invertTheme={!getOptions(location).dark}
         supportImmutable={getOptions(location).supportImmutable}
         tabs={(defaultTabs) => [

packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import { Base16Theme } from 'redux-devtools-themes';
-import { getBase16Theme, invertBase16Theme } from 'react-base16-styling';
 import {
   ActionCreators,
   LiftedAction,
@@ -9,10 +8,11 @@ import {
 import { Action, Dispatch } from 'redux';
 import { Delta, DiffContext } from 'jsondiffpatch';
 import {
-  base16Themes,
-  colorMap,
+  Base16ThemeName,
+  createInspectorMonitorThemeFromBase16Theme,
   inspectorCss,
   inspectorWideCss,
+  resolveBase16Theme,
 } from './utils/createStylingFromTheme';
 import ActionList from './ActionList';
 import ActionPreview, { Tab } from './ActionPreview';
@@ -131,7 +131,7 @@ export interface ExternalProps<S, A extends Action<string>> {
   preserveScrollTop?: boolean;
   draggableActions: boolean;
   select: (state: S) => unknown;
-  theme: keyof typeof base16Themes | Base16Theme;
+  theme: Base16ThemeName | Base16Theme;
   supportImmutable: boolean;
   diffObjectHash?: (item: unknown, index: number) => string;
   diffPropertyFilter?: (name: string, context: DiffContext) => boolean;
@@ -148,7 +148,7 @@ interface DefaultProps {
   select: (state: unknown) => unknown;
   supportImmutable: boolean;
   draggableActions: boolean;
-  theme: keyof typeof base16Themes;
+  theme: Base16ThemeName;
   invertTheme: boolean;
 }
 
@@ -160,7 +160,7 @@ export interface DevtoolsInspectorProps<S, A extends Action<string>>
   preserveScrollTop?: boolean;
   draggableActions: boolean;
   select: (state: S) => unknown;
-  theme: keyof typeof base16Themes | Base16Theme;
+  theme: Base16ThemeName | Base16Theme;
   supportImmutable: boolean;
   diffObjectHash?: (item: unknown, index: number) => string;
   diffPropertyFilter?: (name: string, context: DiffContext) => boolean;
@@ -273,12 +273,13 @@ class DevtoolsInspector<S, A extends Action<string>> extends PureComponent<
       tabName === 'Action' ? 'inspectedActionPath' : 'inspectedStatePath';
     const { isWideLayout, action, nextState, delta, error } = this.state;
 
-    const base16Theme = getBase16Theme(theme, base16Themes)!;
-    const finalBase16Theme = invertTheme
-      ? invertBase16Theme(base16Theme)
-      : base16Theme;
+    const base16Theme = resolveBase16Theme(theme)!;
+    const inspectorMonitorTheme = createInspectorMonitorThemeFromBase16Theme(
+      base16Theme,
+      invertTheme,
+    );
     return (
-      <ThemeProvider theme={colorMap(finalBase16Theme)}>
+      <ThemeProvider theme={inspectorMonitorTheme}>
         <div
           key="inspector"
           data-testid="inspector"

packages/redux-devtools-inspector-monitor/src/index.ts

@@ -3,7 +3,7 @@ export type { LabelRenderer } from 'react-json-tree';
 export { default as InspectorMonitor } from './DevtoolsInspector';
 export type { Tab, TabComponentProps } from './ActionPreview';
 export type { DevtoolsInspectorState } from './redux';
-export { base16Themes } from './utils/createStylingFromTheme';
+export type { Base16ThemeName } from './utils/createStylingFromTheme';
 export * as inspectorThemes from './themes/index';
 export { default as ActionTab } from './tabs/ActionTab';
 export { default as DiffTab } from './tabs/DiffTab';

packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts

@@ -4,6 +4,7 @@ import rgba from 'hex-rgba';
 import { Base16Theme } from 'redux-devtools-themes';
 import * as reduxThemes from 'redux-devtools-themes';
 import * as inspectorThemes from '../themes';
+import { getBase16Theme, invertBase16Theme } from 'react-base16-styling';
 
 declare module '@emotion/react' {
   export interface Theme {
@@ -365,4 +366,19 @@ export const rightSliderRotateShownCss = css({
   transition: 'transform 0.2s ease-in-out 0.18s',
 });
 
-export const base16Themes = { ...reduxThemes, ...inspectorThemes };
+const base16Themes = { ...reduxThemes, ...inspectorThemes };
+export type Base16ThemeName = keyof typeof base16Themes;
+
+export function resolveBase16Theme(theme: Base16ThemeName | Base16Theme) {
+  return getBase16Theme(theme, base16Themes);
+}
+
+export function createInspectorMonitorThemeFromBase16Theme(
+  base16Theme: Base16Theme,
+  invertTheme: boolean,
+) {
+  const finalBase16Theme = invertTheme
+    ? invertBase16Theme(base16Theme)
+    : base16Theme;
+  return colorMap(finalBase16Theme);
+}