0
# Themes
1

2
Theming system for customizing the appearance of all inspector components. Provides pre-built Chrome DevTools themes and supports custom theme creation.
3

4
## Capabilities
5

6
### Pre-built Themes
7

8
Two preset themes matching Chrome DevTools appearance.
9

10
```typescript { .api }
11
/**
12
 * Chrome DevTools light theme
13
 * Default theme with light background and dark text
14
 */
15
const chromeLight: ThemeObject;
16

17
/**
18
 * Chrome DevTools dark theme  
19
 * Dark background with light text for dark mode interfaces
20
 */
21
const chromeDark: ThemeObject;
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
import React from "react";
28
import { Inspector, chromeLight, chromeDark } from "react-inspector";
29

30
function ThemedInspectors() {
31
  const data = { name: "Alice", age: 30, hobbies: ["reading", "coding"] };
32
  
33
  return (
34
    <div>
35
      {/* Light theme (default) */}
36
      <Inspector data={data} theme="chromeLight" />
37
      
38
      {/* Dark theme */}
39
      <Inspector data={data} theme="chromeDark" />
40
      
41
      {/* Using theme objects directly */}
42
      <Inspector data={data} theme={chromeLight} />
43
      <Inspector data={data} theme={chromeDark} />
44
    </div>
45
  );
46
}
47
```
48

49
### Theme Object Structure
50

51
Complete theme interface with all customizable properties.
52

53
```typescript { .api }
54
interface ThemeObject {
55
  // Base typography and layout
56
  /** Base font family for all text */
57
  BASE_FONT_FAMILY?: string;
58
  /** Base font size */
59
  BASE_FONT_SIZE?: string;
60
  /** Base line height */
61
  BASE_LINE_HEIGHT?: number;
62
  /** Background color for inspector containers */
63
  BASE_BACKGROUND_COLOR?: string;
64
  /** Default text color */
65
  BASE_COLOR?: string;
66
  
67
  // Object preview settings
68
  /** Max properties shown in array previews */
69
  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES?: number;
70
  /** Max properties shown in object previews */
71
  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES?: number;
72
  
73
  // Object and property styling
74
  /** Color for property names */
75
  OBJECT_NAME_COLOR?: string;
76
  /** Color for null values */
77
  OBJECT_VALUE_NULL_COLOR?: string;
78
  /** Color for undefined values */
79
  OBJECT_VALUE_UNDEFINED_COLOR?: string;
80
  /** Color for regular expressions */
81
  OBJECT_VALUE_REGEXP_COLOR?: string;
82
  /** Color for string values */
83
  OBJECT_VALUE_STRING_COLOR?: string;
84
  /** Color for symbol values */
85
  OBJECT_VALUE_SYMBOL_COLOR?: string;
86
  /** Color for number values */
87
  OBJECT_VALUE_NUMBER_COLOR?: string;
88
  /** Color for boolean values */
89
  OBJECT_VALUE_BOOLEAN_COLOR?: string;
90
  /** Color for function prefix (ƒ symbol) */
91
  OBJECT_VALUE_FUNCTION_PREFIX_COLOR?: string;
92
  
93
  // HTML/DOM element styling
94
  /** Color for HTML tag brackets < > */
95
  HTML_TAG_COLOR?: string;
96
  /** Color for HTML tag names (div, span, etc.) */
97
  HTML_TAGNAME_COLOR?: string;
98
  /** Text transform for tag names (uppercase, lowercase, none) */
99
  HTML_TAGNAME_TEXT_TRANSFORM?: string;
100
  /** Color for HTML attribute names */
101
  HTML_ATTRIBUTE_NAME_COLOR?: string;
102
  /** Color for HTML attribute values */
103
  HTML_ATTRIBUTE_VALUE_COLOR?: string;
104
  /** Color for HTML comments */
105
  HTML_COMMENT_COLOR?: string;
106
  /** Color for DOCTYPE declarations */
107
  HTML_DOCTYPE_COLOR?: string;
108
  
109
  // Tree view controls
110
  /** Color for expand/collapse arrows */
111
  ARROW_COLOR?: string;
112
  /** Right margin for arrows */
113
  ARROW_MARGIN_RIGHT?: number;
114
  /** Font size for arrows */
115
  ARROW_FONT_SIZE?: number;
116
  /** CSS animation duration for arrow animations */
117
  ARROW_ANIMATION_DURATION?: string;
118
  
119
  // Tree node styling
120
  /** Font family for tree nodes */
121
  TREENODE_FONT_FAMILY?: string;
122
  /** Font size for tree nodes */
123
  TREENODE_FONT_SIZE?: string;
124
  /** Line height for tree nodes */
125
  TREENODE_LINE_HEIGHT?: number;
126
  /** Left padding for tree indentation */
127
  TREENODE_PADDING_LEFT?: number;
128
  
129
  // Table styling
130
  /** Border color for table elements */
131
  TABLE_BORDER_COLOR?: string;
132
  /** Background color for table headers */
133
  TABLE_TH_BACKGROUND_COLOR?: string;
134
  /** Hover color for table headers */
135
  TABLE_TH_HOVER_COLOR?: string;
136
  /** Color for table sort icons */
137
  TABLE_SORT_ICON_COLOR?: string;
138
  /** Background image pattern for table data cells */
139
  TABLE_DATA_BACKGROUND_IMAGE?: string;
140
  /** Background size for table data cells */
141
  TABLE_DATA_BACKGROUND_SIZE?: string;
142
}
143
```
144

145
### Custom Theme Creation
146

147
Create custom themes by providing a theme object with desired overrides.
148

149
**Complete Custom Theme:**
150

151
```typescript
152
import React from "react";
153
import { Inspector, chromeLight } from "react-inspector";
154

155
const customTheme = {
156
  BASE_FONT_FAMILY: 'Monaco, "Lucida Console", monospace',
157
  BASE_FONT_SIZE: '12px',
158
  BASE_BACKGROUND_COLOR: '#f8f9fa',
159
  BASE_COLOR: '#212529',
160
  
161
  // Custom colors for different value types
162
  OBJECT_VALUE_STRING_COLOR: '#d63384',
163
  OBJECT_VALUE_NUMBER_COLOR: '#6f42c1',
164
  OBJECT_VALUE_BOOLEAN_COLOR: '#198754',
165
  OBJECT_VALUE_NULL_COLOR: '#6c757d',
166
  OBJECT_VALUE_UNDEFINED_COLOR: '#6c757d',
167
  
168
  // Custom tree styling
169
  TREENODE_PADDING_LEFT: 16,
170
  ARROW_COLOR: '#495057',
171
  
172
  // Custom table styling
173
  TABLE_BORDER_COLOR: '#dee2e6',
174
  TABLE_TH_BACKGROUND_COLOR: '#e9ecef',
175
  TABLE_TH_HOVER_COLOR: '#adb5bd'
176
};
177

178
function CustomThemeExample() {
179
  const data = {
180
    message: "Hello World",
181
    count: 42,
182
    isActive: true,
183
    items: null,
184
    config: undefined
185
  };
186
  
187
  return <Inspector data={data} theme={customTheme} />;
188
}
189
```
190

191
**Extending Existing Themes:**
192

193
```typescript
194
import { chromeLight, chromeDark } from "react-inspector";
195

196
// Extend light theme with custom colors
197
const customLight = {
198
  ...chromeLight,
199
  OBJECT_VALUE_STRING_COLOR: '#e74c3c',
200
  OBJECT_VALUE_NUMBER_COLOR: '#3498db',
201
  TREENODE_PADDING_LEFT: 20
202
};
203

204
// Extend dark theme with custom font
205
const customDark = {
206
  ...chromeDark,
207
  BASE_FONT_FAMILY: 'Fira Code, monospace',
208
  BASE_FONT_SIZE: '13px'
209
};
210
```
211

212
### Theme Application
213

214
Themes can be applied at different levels with inheritance.
215

216
**Component-Level Theming:**
217

218
```typescript
219
// Apply theme to individual inspector
220
<Inspector data={data} theme="chromeDark" />
221
<ObjectInspector data={data} theme={customTheme} />
222
<TableInspector data={data} theme="chromeLight" />
223
```
224

225
**Multiple Components with Same Theme:**
226

227
```typescript
228
function ThemedApp() {
229
  const theme = {
230
    ...chromeLight,
231
    BASE_FONT_SIZE: '14px',
232
    TREENODE_PADDING_LEFT: 18
233
  };
234
  
235
  return (
236
    <div>
237
      <h2>User Data</h2>
238
      <Inspector data={userData} theme={theme} />
239
      
240
      <h2>Configuration</h2>
241
      <Inspector data={configData} theme={theme} />
242
      
243
      <h2>Table View</h2>
244
      <Inspector data={tableData} table theme={theme} />
245
    </div>
246
  );
247
}
248
```
249

250
### Chrome Light Theme Values
251

252
Default values for the light theme:
253

254
```typescript
255
const chromeLight = {
256
  BASE_FONT_FAMILY: 'Menlo, monospace',
257
  BASE_FONT_SIZE: '11px',
258
  BASE_LINE_HEIGHT: 1.2,
259
  BASE_BACKGROUND_COLOR: 'white',
260
  BASE_COLOR: 'black',
261
  
262
  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
263
  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
264
  
265
  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
266
  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
267
  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
268
  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
269
  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
270
  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
271
  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
272
  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
273
  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
274
  
275
  HTML_TAG_COLOR: 'rgb(168, 148, 166)',
276
  HTML_TAGNAME_COLOR: 'rgb(136, 18, 128)',
277
  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(153, 69, 0)',
278
  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(26, 26, 166)',
279
  HTML_COMMENT_COLOR: 'rgb(35, 110, 37)',
280
  
281
  ARROW_COLOR: '#6e6e6e',
282
  ARROW_MARGIN_RIGHT: 3,
283
  ARROW_FONT_SIZE: 12,
284
  ARROW_ANIMATION_DURATION: '0',
285
  
286
  TREENODE_FONT_FAMILY: 'Menlo, monospace',
287
  TREENODE_FONT_SIZE: '11px',
288
  TREENODE_LINE_HEIGHT: 1.2,
289
  TREENODE_PADDING_LEFT: 12,
290
  
291
  TABLE_BORDER_COLOR: '#aaa',
292
  TABLE_TH_BACKGROUND_COLOR: '#eee',
293
  TABLE_TH_HOVER_COLOR: 'hsla(0, 0%, 90%, 1)',
294
  TABLE_SORT_ICON_COLOR: '#6e6e6e'
295
};
296
```
297

298
### Chrome Dark Theme Values
299

300
Key differences in the dark theme:
301

302
```typescript
303
const chromeDark = {
304
  BASE_BACKGROUND_COLOR: 'rgb(36, 36, 36)',
305
  BASE_COLOR: 'rgb(213, 213, 213)',
306
  
307
  OBJECT_NAME_COLOR: 'rgb(227, 110, 236)',
308
  OBJECT_VALUE_STRING_COLOR: 'rgb(233, 63, 59)',
309
  OBJECT_VALUE_NUMBER_COLOR: 'rgb(102, 153, 255)',
310
  // ... other dark theme color adjustments
311
};
312
```
313

314
### Theme Performance
315

316
Themes are applied through CSS-in-JS with minimal performance impact:
317

318
- **Static Themes**: Pre-built themes are optimized objects
319
- **Custom Themes**: Merged once per component instance  
320
- **Style Caching**: Styles are memoized within components
321
- **Inheritance**: Only specified properties override defaults
322

323
### Best Practices
324

325
**Theme Consistency:**
326
```typescript
327
// Define app-wide theme constants
328
const APP_THEMES = {
329
  light: { ...chromeLight, BASE_FONT_SIZE: '12px' },
330
  dark: { ...chromeDark, BASE_FONT_SIZE: '12px' },
331
  compact: { ...chromeLight, TREENODE_PADDING_LEFT: 8 }
332
};
333

334
// Use consistent themes across app
335
<Inspector data={data} theme={APP_THEMES.light} />
336
```
337

338
**Accessibility Considerations:**
339
```typescript
340
const accessibleTheme = {
341
  ...chromeLight,
342
  BASE_FONT_SIZE: '14px',           // Larger text
343
  BASE_LINE_HEIGHT: 1.4,           // Better line spacing
344
  OBJECT_VALUE_STRING_COLOR: '#c7254e',  // Higher contrast
345
  OBJECT_VALUE_NUMBER_COLOR: '#0066cc'    // Sufficient contrast ratio
346
};
347
```
348

349
**Performance Optimization:**
350
```typescript
351
// Avoid creating theme objects in render
352
const STATIC_THEME = { ...chromeLight, BASE_FONT_SIZE: '13px' };
353

354
function OptimizedComponent() {
355
  return <Inspector data={data} theme={STATIC_THEME} />;
356
}
357
```