Use inline react-base16-styling themes

packages/react-base16-styling/src/themes/index.ts

@@ -25,6 +25,7 @@ import { default as isotope } from './isotope.js';
 import { default as marrakesh } from './marrakesh.js';
 import { default as mocha } from './mocha.js';
 import { default as monokai } from './monokai.js';
+import { default as nicinabox } from './nicinabox';
 import { default as ocean } from './ocean.js';
 import { default as paraiso } from './paraiso.js';
 import { default as pop } from './pop.js';
@@ -85,6 +86,7 @@ export const base16Themes = {
   marrakesh,
   mocha,
   monokai,
+  nicinabox,
   ocean,
   paraiso,
   pop,

packages/react-base16-styling/src/themes/nicinabox.ts

@@ -0,0 +1,20 @@
+export default {
+  scheme: 'nicinabox',
+  author: 'nicinabox (http://github.com/nicinabox)',
+  base00: '#2A2F3A',
+  base01: '#3C444F',
+  base02: '#4F5A65',
+  base03: '#BEBEBE',
+  base04: '#b0b0b0', // based on ocean theme
+  base05: '#d0d0d0', // based on ocean theme
+  base06: '#FFFFFF',
+  base07: '#f5f5f5', // based on ocean theme
+  base08: '#fb9fb1', // based on ocean theme
+  base09: '#FC6D24',
+  base0A: '#ddb26f', // based on ocean theme
+  base0B: '#A1C659',
+  base0C: '#12cfc0', // based on ocean theme
+  base0D: '#6FB3D2',
+  base0E: '#D381C3',
+  base0F: '#deaf8f'  // based on ocean theme
+};

packages/redux-devtools-chart-monitor/package.json

@@ -40,10 +40,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.1",
-    "@types/redux-devtools-themes": "^1.0.3",
     "d3-state-visualizer": "^3.0.0",
     "deepmerge": "^4.3.1",
-    "redux-devtools-themes": "^1.0.0"
+    "react-base16-styling": "^0.9.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.1",

packages/redux-devtools-chart-monitor/src/Chart.tsx

@@ -1,9 +1,10 @@
 import React, { Component, createRef } from 'react';
 import { tree } from 'd3-state-visualizer';
 import type { Options } from 'd3-state-visualizer';
+import { base16Themes } from 'react-base16-styling';
+import type { Base16Theme } from 'react-base16-styling';
 import { Action, Dispatch } from 'redux';
 import { LiftedAction, LiftedState } from '@redux-devtools/core';
-import * as themes from 'redux-devtools-themes';
 import { ChartMonitorState } from './reducers';
 
 const wrapperStyle = {
@@ -17,7 +18,7 @@ export interface Props<S, A extends Action<string>>
   dispatch: Dispatch<LiftedAction<S, A, ChartMonitorState>>;
   preserveScrollTop: boolean;
   select: (state: S) => unknown;
-  theme: keyof typeof themes | themes.Base16Theme;
+  theme: keyof typeof base16Themes | Base16Theme;
   invertTheme: boolean;
 
   state: S | null;

packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx

@@ -1,5 +1,6 @@
 import React, { CSSProperties, PureComponent } from 'react';
-import * as themes from 'redux-devtools-themes';
+import { base16Themes } from 'react-base16-styling';
+import type { Base16Theme } from 'react-base16-styling';
 import {
   ActionCreators,
   LiftedAction,
@@ -25,7 +26,7 @@ const styles: { container: CSSProperties } = {
   },
 };
 
-function invertColors(theme: themes.Base16Theme) {
+function invertColors(theme: Base16Theme) {
   return {
     ...theme,
     base00: theme.base07,
@@ -45,7 +46,7 @@ export interface ChartMonitorProps<S, A extends Action<string>>
   dispatch: Dispatch<LiftedAction<S, A, ChartMonitorState>>;
   preserveScrollTop: boolean;
   select: (state: S) => unknown;
-  theme: keyof typeof themes | themes.Base16Theme;
+  theme: keyof typeof base16Themes | Base16Theme;
   invertTheme: boolean;
 
   defaultIsVisible?: boolean;
@@ -89,14 +90,18 @@ class ChartMonitor<S, A extends Action<string>> extends PureComponent<
       return invertTheme ? invertColors(theme) : theme;
     }
 
-    if (typeof themes[theme] !== 'undefined') {
-      return invertTheme ? invertColors(themes[theme]) : themes[theme];
+    if (typeof base16Themes[theme] !== 'undefined') {
+      return invertTheme
+        ? invertColors(base16Themes[theme])
+        : base16Themes[theme];
     }
 
     console.warn(
       'DevTools theme ' + theme + ' not found, defaulting to nicinabox',
     );
-    return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox;
+    return invertTheme
+      ? invertColors(base16Themes.nicinabox)
+      : base16Themes.nicinabox;
   }
 
   getChartOptions(props = this.props): Props<S, A> {

packages/redux-devtools-inspector-monitor-trace-tab/package.json

@@ -36,7 +36,7 @@
     "anser": "^2.1.1",
     "html-entities": "^2.5.2",
     "path-browserify": "^1.0.1",
-    "redux-devtools-themes": "^1.0.0",
+    "react-base16-styling": "^0.9.1",
     "source-map": "^0.5.7"
   },
   "devDependencies": {
@@ -57,7 +57,6 @@
     "@types/node": "^20.11.30",
     "@types/path-browserify": "^1.0.2",
     "@types/react": "^18.2.72",
-    "@types/redux-devtools-themes": "^1.0.3",
     "@types/source-map": "0.5.2",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/components/Collapsible.tsx

@@ -6,7 +6,9 @@
  */
 
 import React, { Component, CSSProperties, ReactNode } from 'react';
-import { nicinabox as theme } from 'redux-devtools-themes';
+import { base16Themes } from 'react-base16-styling';
+
+const theme = base16Themes.nicinabox;
 
 const _collapsibleStyle: CSSProperties = {
   color: theme.base06,

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrame.tsx

@@ -8,11 +8,13 @@
 import React, { Component, CSSProperties } from 'react';
 import CodeBlock from './StackFrameCodeBlock';
 import { getPrettyURL } from '../utils/getPrettyURL';
-import { nicinabox as theme } from 'redux-devtools-themes';
+import { base16Themes } from 'react-base16-styling';
 
 import type { StackFrame as StackFrameType } from '../utils/stack-frame';
 import type { ErrorLocation } from '../utils/parseCompileError';
 
+const theme = base16Themes.nicinabox;
+
 const linkStyle: CSSProperties = {
   fontSize: '0.9em',
   marginBottom: '0.9em',

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrameCodeBlock.tsx

@@ -13,7 +13,9 @@ import { ScriptLine } from '../utils/stack-frame';
 import generateAnsiHTML from '../utils/generateAnsiHTML';
 
 import { codeFrameColumns } from '@babel/code-frame';
-import { nicinabox as theme } from 'redux-devtools-themes';
+import { base16Themes } from 'react-base16-styling';
+
+const theme = base16Themes.nicinabox;
 
 interface StackFrameCodeBlockPropsType {
   lines: ScriptLine[];

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/generateAnsiHTML.ts

@@ -6,9 +6,11 @@
  */
 
 import Anser from 'anser';
-import { nicinabox as theme } from 'redux-devtools-themes';
+import { base16Themes } from 'react-base16-styling';
 import { encode } from 'html-entities';
 
+const theme = base16Themes.nicinabox;
+
 const anserMap = {
   'ansi-bright-black': theme.base03,
   'ansi-bright-yellow': theme.base0A,

packages/redux-devtools-inspector-monitor/demo/package.json

@@ -14,10 +14,10 @@
     "@redux-devtools/core": "^4.0.0",
     "@redux-devtools/dock-monitor": "^4.0.0",
     "@redux-devtools/inspector-monitor": "^6.0.0",
-    "base16": "^1.0.0",
     "immutable": "^4.3.5",
     "lodash.shuffle": "^4.2.0",
     "react": "^18.2.0",
+    "react-base16-styling": "^0.9.1",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
@@ -30,7 +30,6 @@
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@types/base16": "^1.0.5",
     "@types/lodash.shuffle": "^4.2.9",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.72",

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

@@ -9,7 +9,7 @@ import Form from 'react-bootstrap/Form';
 import Col from 'react-bootstrap/Col';
 import InputGroup from 'react-bootstrap/InputGroup';
 import Row from 'react-bootstrap/Row';
-import * as base16 from 'base16';
+import { base16Themes } from 'react-base16-styling';
 import { inspectorThemes } from '@redux-devtools/inspector-monitor';
 import { useLocation, useNavigate } from 'react-router-dom';
 import getOptions, { Options } from './getOptions';
@@ -92,10 +92,10 @@ const themeOptions = [
     label: inspectorThemes[value as keyof typeof inspectorThemes].scheme,
   })),
   null,
-  ...Object.keys(base16)
+  ...Object.keys(base16Themes)
     .map((value) => ({
       value,
-      label: base16[value as keyof typeof base16].scheme,
+      label: base16Themes[value as keyof typeof base16Themes].scheme,
     }))
     .filter((opt) => opt.label),
 ];

packages/redux-devtools-inspector-monitor/package.json

@@ -41,7 +41,6 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@types/lodash": "^4.17.0",
-    "@types/redux-devtools-themes": "^1.0.3",
     "dateformat": "^5.0.3",
     "hex-rgba": "^1.0.2",
     "immutable": "^4.3.5",
@@ -49,8 +48,7 @@
     "jsondiffpatch": "^0.6.0",
     "lodash.debounce": "^4.0.8",
     "react-base16-styling": "^0.9.1",
-    "react-json-tree": "^0.18.0",
-    "redux-devtools-themes": "^1.0.0"
+    "react-json-tree": "^0.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.1",

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Base16Theme } from 'redux-devtools-themes';
+import type { Base16Theme } from 'react-base16-styling';
 import { Action } from 'redux';
 import type { LabelRenderer } from 'react-json-tree';
 import { PerformAction } from '@redux-devtools/core';

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Base16Theme } from 'redux-devtools-themes';
+import type { Base16Theme } from 'react-base16-styling';
 import {
   ActionCreators,
   LiftedAction,

packages/redux-devtools-inspector-monitor/src/tabs/JSONDiff.tsx

@@ -3,7 +3,7 @@ import { JSONTree } from 'react-json-tree';
 import type { LabelRenderer, ShouldExpandNodeInitially } from 'react-json-tree';
 import { stringify } from 'javascript-stringify';
 import type { Delta } from 'jsondiffpatch';
-import { Base16Theme } from 'redux-devtools-themes';
+import type { Base16Theme } from 'react-base16-styling';
 import { css } from '@emotion/react';
 import type { Interpolation, Theme } from '@emotion/react';
 import type { JSX } from '@emotion/react/jsx-runtime';

packages/redux-devtools-inspector-monitor/src/tabs/getJsonTreeTheme.ts

@@ -1,5 +1,4 @@
-import { Base16Theme } from 'redux-devtools-themes';
-import { StylingConfig } from 'react-base16-styling';
+import type { Base16Theme, StylingConfig } from 'react-base16-styling';
 
 export default function getJsonTreeTheme(
   base16Theme: Base16Theme,

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

@@ -1,6 +1,6 @@
 import rgba from 'hex-rgba';
-import { Base16Theme } from 'redux-devtools-themes';
-import * as reduxThemes from 'redux-devtools-themes';
+import type { Base16Theme } from 'react-base16-styling';
+import { base16Themes as reduxThemes } from 'react-base16-styling';
 import * as inspectorThemes from '../themes';
 import { getBase16Theme, invertBase16Theme } from 'react-base16-styling';
 

packages/redux-devtools-log-monitor/package.json

@@ -43,10 +43,9 @@
   "dependencies": {
     "@babel/runtime": "^7.24.1",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/redux-devtools-themes": "^1.0.3",
     "lodash.debounce": "^4.0.8",
-    "react-json-tree": "^0.18.0",
-    "redux-devtools-themes": "^1.0.0"
+    "react-base16-styling": "^0.9.1",
+    "react-json-tree": "^0.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.1",

packages/redux-devtools-log-monitor/src/LogMonitor.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Action, Dispatch } from 'redux';
-import * as themes from 'redux-devtools-themes';
-import { Base16Theme } from 'redux-devtools-themes';
+import { base16Themes } from 'react-base16-styling';
+import type { Base16Theme } from 'react-base16-styling';
 import {
   ActionCreators,
   LiftedAction,
@@ -48,7 +48,7 @@ interface ExternalProps<S, A extends Action<string>> {
 
   preserveScrollTop: boolean;
   select: (state: S) => unknown;
-  theme: keyof typeof themes | Base16Theme;
+  theme: keyof typeof base16Themes | Base16Theme;
   expandActionRoot: boolean;
   expandStateRoot: boolean;
   markStateDiff: boolean;
@@ -57,7 +57,7 @@ interface ExternalProps<S, A extends Action<string>> {
 
 interface DefaultProps<S> {
   select: (state: unknown) => unknown;
-  theme: keyof typeof themes | Base16Theme;
+  theme: keyof typeof base16Themes | Base16Theme;
   preserveScrollTop: boolean;
   expandActionRoot: boolean;
   expandStateRoot: boolean;
@@ -70,7 +70,7 @@ export interface LogMonitorProps<S, A extends Action<string>>
 
   preserveScrollTop: boolean;
   select: (state: S) => unknown;
-  theme: keyof typeof themes | Base16Theme;
+  theme: keyof typeof base16Themes | Base16Theme;
   expandActionRoot: boolean;
   expandStateRoot: boolean;
   markStateDiff: boolean;
@@ -178,15 +178,15 @@ class LogMonitor<S, A extends Action<string>> extends PureComponent<
       return theme;
     }
 
-    if (typeof themes[theme] !== 'undefined') {
-      return themes[theme];
+    if (typeof base16Themes[theme] !== 'undefined') {
+      return base16Themes[theme];
     }
 
     // eslint-disable-next-line no-console
     console.warn(
       'DevTools theme ' + theme + ' not found, defaulting to nicinabox',
     );
-    return themes.nicinabox;
+    return base16Themes.nicinabox;
   }
 
   getRef: React.RefCallback<HTMLDivElement> = (node) => {

packages/redux-devtools-log-monitor/src/LogMonitorButton.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { Base16Theme } from 'redux-devtools-themes';
+import type { Base16Theme } from 'react-base16-styling';
 import brighten from './brighten';
 
 const styles: { base: CSSProperties } = {

packages/redux-devtools-log-monitor/src/LogMonitorButtonBar.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, PureComponent } from 'react';
 import { ActionCreators, LiftedAction } from '@redux-devtools/core';
-import { Base16Theme } from 'redux-devtools-themes';
+import type { Base16Theme } from 'react-base16-styling';
 import { Action, Dispatch } from 'redux';
 import LogMonitorButton from './LogMonitorButton';
 import { LogMonitorAction } from './actions';

packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, MouseEventHandler, PureComponent } from 'react';
 import { JSONTree } from 'react-json-tree';
 import type { ShouldExpandNodeInitially, StylingValue } from 'react-json-tree';
-import { Base16Theme } from 'redux-devtools-themes';
+import type { Base16Theme } from 'react-base16-styling';
 import { Action } from 'redux';
 import LogMonitorEntryAction from './LogMonitorEntryAction';
 

packages/redux-devtools-log-monitor/src/LogMonitorEntryAction.tsx

@@ -1,7 +1,7 @@
 import React, { Component, CSSProperties, MouseEventHandler } from 'react';
 import { JSONTree } from 'react-json-tree';
 import type { ShouldExpandNodeInitially } from 'react-json-tree';
-import { Base16Theme } from 'redux-devtools-themes';
+import type { Base16Theme } from 'react-base16-styling';
 import { Action } from 'redux';
 
 const styles = {

packages/redux-devtools-log-monitor/src/LogMonitorEntryList.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Action } from 'redux';
 import { PerformAction } from '@redux-devtools/core';
-import { Base16Theme } from 'redux-devtools-themes';
+import type { Base16Theme } from 'react-base16-styling';
 import LogMonitorEntry from './LogMonitorEntry';
 
 interface Props<S, A extends Action<string>> {

packages/redux-devtools-rtk-query-monitor/package.json

@@ -47,13 +47,11 @@
     "@babel/runtime": "^7.24.1",
     "@redux-devtools/ui": "^1.3.1",
     "@types/lodash": "^4.17.0",
-    "@types/redux-devtools-themes": "^1.0.3",
     "hex-rgba": "^1.0.2",
     "immutable": "^4.3.5",
     "lodash.debounce": "^4.0.8",
     "react-base16-styling": "^0.9.1",
-    "react-json-tree": "^0.18.0",
-    "redux-devtools-themes": "^1.0.0"
+    "react-json-tree": "^0.18.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.1",

packages/redux-devtools-rtk-query-monitor/src/styles/themes.ts

@@ -1,14 +1,17 @@
-import { getBase16Theme, invertBase16Theme } from 'react-base16-styling';
+import {
+  base16Themes,
+  getBase16Theme,
+  invertBase16Theme,
+} from 'react-base16-styling';
 import type { Base16Theme, StylingConfig } from 'react-base16-styling';
 import rgba from 'hex-rgba';
-import * as reduxThemes from 'redux-devtools-themes';
 import { createContext } from 'react';
 import { StyleUtils } from '../types';
 
 export function resolveBase16Theme(
-  theme: keyof typeof reduxThemes | Base16Theme,
+  theme: keyof typeof base16Themes | Base16Theme,
 ) {
-  return getBase16Theme(theme, reduxThemes) ?? reduxThemes.nicinabox;
+  return getBase16Theme(theme, base16Themes) ?? base16Themes.nicinabox;
 }
 
 /**
@@ -49,7 +52,7 @@ declare module '@emotion/react' {
   }
 }
 
-export const colorMap = (theme: reduxThemes.Base16Theme) =>
+export const colorMap = (theme: Base16Theme) =>
   ({
     TEXT_COLOR: theme.base06,
     TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),
@@ -94,12 +97,12 @@ export function createRtkQueryMonitorThemeFromBase16Theme(
 }
 
 export const StyleUtilsContext = createContext<StyleUtils>({
-  base16Theme: reduxThemes.nicinabox,
+  base16Theme: base16Themes.nicinabox,
   invertTheme: false,
 });
 
 export function getJsonTreeTheme(
-  base16Theme: reduxThemes.Base16Theme,
+  base16Theme: base16Themes.Base16Theme,
 ): StylingConfig {
   return {
     extend: base16Theme,

packages/redux-devtools-rtk-query-monitor/src/types.ts

@@ -2,8 +2,8 @@ import type { LiftedAction, LiftedState } from '@redux-devtools/core';
 import type { createApi, QueryStatus } from '@reduxjs/toolkit/query';
 import type { Action, AnyAction, Dispatch } from '@reduxjs/toolkit';
 import type { ComponentType } from 'react';
-import type { Base16Theme, StylingFunction } from 'react-base16-styling';
-import type * as themes from 'redux-devtools-themes';
+import { base16Themes } from 'react-base16-styling';
+import type { Base16Theme } from 'react-base16-styling';
 import type { QueryComparators } from './utils/comparators';
 import type { QueryFilters } from './utils/filters';
 
@@ -34,7 +34,7 @@ export interface RtkQueryMonitorState {
 export interface RtkQueryMonitorProps<S, A extends Action<string>>
   extends LiftedState<S, A, RtkQueryMonitorState> {
   dispatch: Dispatch<Action | LiftedAction<S, A, RtkQueryMonitorState>>;
-  theme: keyof typeof themes | Base16Theme;
+  theme: keyof typeof base16Themes | Base16Theme;
   invertTheme: boolean;
 }
 
@@ -56,7 +56,7 @@ export type RtkQueryProvided = RtkQueryApiState['provided'];
 
 export interface ExternalProps<S, A extends Action<string>> {
   dispatch: Dispatch<Action | LiftedAction<S, A, RtkQueryMonitorState>>;
-  theme: keyof typeof themes | Base16Theme;
+  theme: keyof typeof base16Themes | Base16Theme;
   hideMainButtons?: boolean;
   invertTheme: boolean;
 }

packages/redux-devtools-slider-monitor/package.json

@@ -34,8 +34,7 @@
   "dependencies": {
     "@babel/runtime": "^7.24.1",
     "@redux-devtools/ui": "^1.3.1",
-    "@types/redux-devtools-themes": "^1.0.3",
-    "redux-devtools-themes": "^1.0.0"
+    "react-base16-styling": "^0.9.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.1",

packages/redux-devtools-slider-monitor/src/SliderButton.tsx

@@ -1,5 +1,5 @@
 import React, { Component, PureComponent } from 'react';
-import { Base16Theme } from 'redux-devtools-themes';
+import type { Base16Theme } from 'react-base16-styling';
 import { Button } from '@redux-devtools/ui';
 
 interface Props {

packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx

@@ -1,7 +1,7 @@
 import React, { Component, PureComponent } from 'react';
 import { Action, Dispatch } from 'redux';
-import * as themes from 'redux-devtools-themes';
-import { Base16Theme } from 'redux-devtools-themes';
+import { base16Themes } from 'react-base16-styling';
+import type { Base16Theme } from 'react-base16-styling';
 import {
   ActionCreators,
   LiftedAction,
@@ -25,14 +25,14 @@ interface ExternalProps<S, A extends Action<string>> {
   dispatch: Dispatch<LiftedAction<S, A, {}>>;
   preserveScrollTop: boolean;
   select: (state: S) => unknown;
-  theme: keyof typeof themes | Base16Theme;
+  theme: keyof typeof base16Themes | Base16Theme;
   keyboardEnabled: boolean;
   hideResetButton?: boolean;
 }
 
 interface DefaultProps {
   select: (state: unknown) => unknown;
-  theme: keyof typeof themes;
+  theme: keyof typeof base16Themes;
   preserveScrollTop: boolean;
   keyboardEnabled: boolean;
 }
@@ -84,10 +84,10 @@ class SliderMonitor<S, A extends Action<string>> extends (PureComponent ||
   setUpTheme = (): Base16Theme => {
     let theme;
     if (typeof this.props.theme === 'string') {
-      if (typeof themes[this.props.theme] !== 'undefined') {
-        theme = themes[this.props.theme];
+      if (typeof base16Themes[this.props.theme] !== 'undefined') {
+        theme = base16Themes[this.props.theme];
       } else {
-        theme = themes.nicinabox;
+        theme = base16Themes.nicinabox;
       }
     } else {
       theme = this.props.theme;

packages/redux-devtools-ui/package.json

@@ -44,17 +44,14 @@
   "dependencies": {
     "@babel/runtime": "^7.24.1",
     "@rjsf/core": "^4.2.3",
-    "@types/base16": "^1.0.5",
     "@types/codemirror": "^5.60.15",
     "@types/json-schema": "^7.0.15",
-    "@types/redux-devtools-themes": "^1.0.3",
     "@types/simple-element-resize-detector": "^1.3.3",
-    "base16": "^1.0.0",
     "codemirror": "^5.65.16",
     "color": "^4.2.3",
+    "react-base16-styling": "^0.9.1",
     "react-icons": "^5.0.1",
     "react-select": "^5.8.0",
-    "redux-devtools-themes": "^1.0.0",
     "simple-element-resize-detector": "^1.3.0"
   },
   "devDependencies": {

packages/redux-devtools-ui/src/utils/theme.ts

@@ -1,11 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
 import * as themes from '../themes';
-import { nicinabox as defaultDarkScheme } from 'redux-devtools-themes';
-import * as baseSchemes from 'base16';
+import { base16Themes as baseSchemes } from 'react-base16-styling';
 import * as additionalSchemes from '../colorSchemes';
 import invertColors from '../utils/invertColors';
 import { Theme as ThemeBase } from '../themes/default';
 
+const defaultDarkScheme = baseSchemes.nicinabox;
+
 export const schemes = { ...baseSchemes, ...additionalSchemes };
 export const listSchemes = () => Object.keys(schemes).slice(1).sort(); // remove `__esModule`
 export const listThemes = () => Object.keys(themes);

pnpm-lock.yaml

@@ -1138,18 +1138,15 @@ importers:
       '@babel/runtime':
         specifier: ^7.24.1
         version: 7.24.1
-      '@types/redux-devtools-themes':
-        specifier: ^1.0.3
-        version: 1.0.3
       d3-state-visualizer:
         specifier: ^3.0.0
         version: link:../d3-state-visualizer
       deepmerge:
         specifier: ^4.3.1
         version: 4.3.1
-      redux-devtools-themes:
-        specifier: ^1.0.0
-        version: 1.0.0
+      react-base16-styling:
+        specifier: ^0.9.1
+        version: link:../react-base16-styling
     devDependencies:
       '@babel/cli':
         specifier: ^7.24.1
@@ -1511,9 +1508,6 @@ importers:
       '@types/lodash':
         specifier: ^4.17.0
         version: 4.17.0
-      '@types/redux-devtools-themes':
-        specifier: ^1.0.3
-        version: 1.0.3
       dateformat:
         specifier: ^5.0.3
         version: 5.0.3
@@ -1541,9 +1535,6 @@ importers:
       react-json-tree:
         specifier: ^0.18.0
         version: link:../react-json-tree
-      redux-devtools-themes:
-        specifier: ^1.0.0
-        version: 1.0.0
     devDependencies:
       '@babel/cli':
         specifier: ^7.24.1
@@ -1901,9 +1892,9 @@ importers:
       path-browserify:
         specifier: ^1.0.1
         version: 1.0.1
-      redux-devtools-themes:
-        specifier: ^1.0.0
-        version: 1.0.0
+      react-base16-styling:
+        specifier: ^0.9.1
+        version: link:../react-base16-styling
       source-map:
         specifier: ^0.5.7
         version: 0.5.7
@@ -1959,9 +1950,6 @@ importers:
       '@types/react':
         specifier: ^18.2.72
         version: 18.2.72
-      '@types/redux-devtools-themes':
-        specifier: ^1.0.3
-        version: 1.0.3
       '@types/source-map':
         specifier: 0.5.2
         version: 0.5.2
@@ -2028,9 +2016,6 @@ importers:
       '@redux-devtools/inspector-monitor':
         specifier: ^6.0.0
         version: link:..
-      base16:
-        specifier: ^1.0.0
-        version: 1.0.0
       immutable:
         specifier: ^4.3.5
         version: 4.3.5
@@ -2040,6 +2025,9 @@ importers:
       react:
         specifier: ^18.2.0
         version: 18.2.0
+      react-base16-styling:
+        specifier: ^0.9.1
+        version: link:../../react-base16-styling
       react-bootstrap:
         specifier: ^2.10.2
         version: 2.10.2(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0)
@@ -2071,9 +2059,6 @@ importers:
       '@babel/preset-typescript':
         specifier: ^7.24.1
         version: 7.24.1(@babel/core@7.24.3)
-      '@types/base16':
-        specifier: ^1.0.5
-        version: 1.0.5
       '@types/lodash.shuffle':
         specifier: ^4.2.9
         version: 4.2.9
@@ -2216,18 +2201,15 @@ importers:
       '@types/lodash.debounce':
         specifier: ^4.0.9
         version: 4.0.9
-      '@types/redux-devtools-themes':
-        specifier: ^1.0.3
-        version: 1.0.3
       lodash.debounce:
         specifier: ^4.0.8
         version: 4.0.8
+      react-base16-styling:
+        specifier: ^0.9.1
+        version: link:../react-base16-styling
       react-json-tree:
         specifier: ^0.18.0
         version: link:../react-json-tree
-      redux-devtools-themes:
-        specifier: ^1.0.0
-        version: 1.0.0
     devDependencies:
       '@babel/cli':
         specifier: ^7.24.1
@@ -2374,9 +2356,6 @@ importers:
       '@types/lodash':
         specifier: ^4.17.0
         version: 4.17.0
-      '@types/redux-devtools-themes':
-        specifier: ^1.0.3
-        version: 1.0.3
       '@types/styled-components':
         specifier: ^5.1.34
         version: 5.1.34
@@ -2395,9 +2374,6 @@ importers:
       react-json-tree:
         specifier: ^0.18.0
         version: link:../react-json-tree
-      redux-devtools-themes:
-        specifier: ^1.0.0
-        version: 1.0.0
       styled-components:
         specifier: ^5.3.11
         version: 5.3.11(@babel/core@7.24.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
@@ -2713,15 +2689,12 @@ importers:
       '@redux-devtools/ui':
         specifier: ^1.3.1
         version: link:../redux-devtools-ui
-      '@types/redux-devtools-themes':
-        specifier: ^1.0.3
-        version: 1.0.3
       '@types/styled-components':
         specifier: ^5.1.34
         version: 5.1.34
-      redux-devtools-themes:
-        specifier: ^1.0.0
-        version: 1.0.0
+      react-base16-styling:
+        specifier: ^0.9.1
+        version: link:../react-base16-styling
       styled-components:
         specifier: ^5.3.11
         version: 5.3.11(@babel/core@7.24.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
@@ -2913,39 +2886,30 @@ importers:
       '@rjsf/core':
         specifier: ^4.2.3
         version: 4.2.3(react@18.2.0)
-      '@types/base16':
-        specifier: ^1.0.5
-        version: 1.0.5
       '@types/codemirror':
         specifier: ^5.60.15
         version: 5.60.15
       '@types/json-schema':
         specifier: ^7.0.15
         version: 7.0.15
-      '@types/redux-devtools-themes':
-        specifier: ^1.0.3
-        version: 1.0.3
       '@types/simple-element-resize-detector':
         specifier: ^1.3.3
         version: 1.3.3
-      base16:
-        specifier: ^1.0.0
-        version: 1.0.0
       codemirror:
         specifier: ^5.65.16
         version: 5.65.16
       color:
         specifier: ^4.2.3
         version: 4.2.3
+      react-base16-styling:
+        specifier: ^0.9.1
+        version: link:../react-base16-styling
       react-icons:
         specifier: ^5.0.1
         version: 5.0.1(react@18.2.0)
       react-select:
         specifier: ^5.8.0
         version: 5.8.0(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0)
-      redux-devtools-themes:
-        specifier: ^1.0.0
-        version: 1.0.0
       simple-element-resize-detector:
         specifier: ^1.3.0
         version: 1.3.0
@@ -9012,9 +8976,6 @@ packages:
       '@babel/types': 7.24.0
     dev: true
 
-  /@types/base16@1.0.5:
-    resolution: {integrity: sha512-OzOWrTluG9cwqidEzC/Q6FAmIPcnZfm8BFRlIx0+UIUqnuAmi5OS88O0RpT3Yz6qdmqObvUhasrbNsCofE4W9A==}
-
   /@types/body-parser@1.19.5:
     resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
     dependencies:
@@ -9600,11 +9561,6 @@ packages:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
 
-  /@types/redux-devtools-themes@1.0.3:
-    resolution: {integrity: sha512-KqiQ2+6VTb1Yn02+ZNQsB0XcoJTu/W4AhnIUaeTnkVFie5YWMoeSpW4IOFYJ2/HJ+wi1kLw+PHDgjZ3t+M6IRw==}
-    dependencies:
-      '@types/base16': 1.0.5
-
   /@types/redux-logger@3.0.12:
     resolution: {integrity: sha512-5vAlwokZi/Unb1eGoZfVVzIBTPNDflwXiDzPLT1SynP6hdJfsOEf+w6ZOySOyboLWciCRYeE5DGYUnwVCq+Uyg==}
     dependencies:
@@ -10919,10 +10875,6 @@ packages:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
     dev: true
 
-  /base16@1.0.0:
-    resolution: {integrity: sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==}
-    dev: false
-
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -18214,12 +18166,6 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
-  /redux-devtools-themes@1.0.0:
-    resolution: {integrity: sha512-hBWqdZX+dioMWnTjf8+uSm0q1wCdYO4kU5gERzHcMMbu0Qg7JDR42TnJ6GHJ6r7k/tIpsCSygc9U0ehAtR24TQ==}
-    dependencies:
-      base16: 1.0.0
-    dev: false
-
   /redux-logger@3.0.6:
     resolution: {integrity: sha512-JoCIok7bg/XpqA1JqCqXFypuqBbQzGQySrhFzewB7ThcnysTO30l4VCst86AuB9T9tuT03MAA56Jw2PNhRSNCg==}
     dependencies: