0
# Themes
1

2
Collection of 20 built-in syntax highlighting themes inspired by popular code editors. All themes are VSCode-compatible and support language-specific styling rules.
3

4
## Capabilities
5

6
### Built-in Themes
7

8
Pre-configured themes that can be used directly with the Highlight component or custom implementations.
9

10
```typescript { .api }
11
/**
12
 * Collection of built-in syntax highlighting themes
13
 * Each theme follows the PrismTheme interface with consistent styling
14
 */
15
declare const themes: {
16
  /** Dracula theme - dark theme with purple and pink accents */
17
  dracula: PrismTheme;
18
  /** Duotone dark theme - minimalist dark theme with two-tone color scheme */
19
  duotoneDark: PrismTheme;
20
  /** Duotone light theme - minimalist light theme with two-tone color scheme */
21
  duotoneLight: PrismTheme;
22
  /** GitHub theme - light theme matching GitHub's syntax highlighting */
23
  github: PrismTheme;
24
  /** Night Owl theme - dark theme optimized for nighttime coding */
25
  nightOwl: PrismTheme;
26
  /** Night Owl Light theme - light variant of Night Owl */
27
  nightOwlLight: PrismTheme;
28
  /** Oceanic Next theme - dark theme with ocean-inspired colors */
29
  oceanicNext: PrismTheme;
30
  /** Okaidia theme - dark theme with vibrant colors */
31
  okaidia: PrismTheme;
32
  /** Palenight theme - dark theme with soft purple tones */
33
  palenight: PrismTheme;
34
  /** Shades of Purple theme - dark theme with various purple shades */
35
  shadesOfPurple: PrismTheme;
36
  /** Synthwave '84 theme - neon-inspired retro theme */
37
  synthwave84: PrismTheme;
38
  /** Ultramin theme - minimal high-contrast theme */
39
  ultramin: PrismTheme;
40
  /** VS Dark theme - default dark theme matching VSCode (default) */
41
  vsDark: PrismTheme;
42
  /** VS Light theme - light theme matching VSCode */
43
  vsLight: PrismTheme;
44
  /** Jettwave Dark theme - dark theme with blue accents */
45
  jettwaveDark: PrismTheme;
46
  /** Jettwave Light theme - light theme with blue accents */
47
  jettwaveLight: PrismTheme;
48
  /** One Dark theme - dark theme from Atom editor */
49
  oneDark: PrismTheme;
50
  /** One Light theme - light theme from Atom editor */
51
  oneLight: PrismTheme;
52
  /** Gruvbox Material Dark theme - dark variant of Material Gruvbox */
53
  gruvboxMaterialDark: PrismTheme;
54
  /** Gruvbox Material Light theme - light variant of Material Gruvbox */
55
  gruvboxMaterialLight: PrismTheme;
56
};
57
```
58

59
**Usage Examples:**
60

61
```typescript
62
import { Highlight, themes } from "prism-react-renderer";
63

64
// Using different themes
65
const DarkCodeBlock = ({ code, language }) => (
66
  <Highlight theme={themes.vsDark} code={code} language={language}>
67
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
68
      <pre className={className} style={style}>
69
        {/* render implementation */}
70
      </pre>
71
    )}
72
  </Highlight>
73
);
74

75
const LightCodeBlock = ({ code, language }) => (
76
  <Highlight theme={themes.github} code={code} language={language}>
77
    {/* render implementation */}
78
  </Highlight>
79
);
80

81
// Theme switching
82
function ThemedCodeBlock({ code, language, isDark }) {
83
  const theme = isDark ? themes.dracula : themes.vsLight;
84
  
85
  return (
86
    <Highlight theme={theme} code={code} language={language}>
87
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
88
        <pre className={className} style={style}>
89
          {tokens.map((line, i) => (
90
            <div key={i} {...getLineProps({ line })}>
91
              {line.map((token, key) => (
92
                <span key={key} {...getTokenProps({ token })} />
93
              ))}
94
            </div>
95
          ))}
96
        </pre>
97
      )}
98
    </Highlight>
99
  );
100
}
101

102
// Accessing specific theme properties
103
const customStyle = {
104
  ...themes.oceanicNext.plain,
105
  fontSize: '14px',
106
  lineHeight: '1.5'
107
};
108
```
109

110
### Theme Categories
111

112
**Dark Themes:**
113
- `dracula` - Purple and pink accents on dark background
114
- `duotoneDark` - Two-tone minimalist dark
115
- `nightOwl` - Optimized for nighttime coding
116
- `oceanicNext` - Ocean-inspired colors
117
- `okaidia` - Vibrant colors on dark background
118
- `palenight` - Soft purple tones
119
- `shadesOfPurple` - Various purple shades
120
- `synthwave84` - Neon retro aesthetic
121
- `vsDark` - VSCode default dark (library default)
122
- `jettwaveDark` - Blue accents on dark
123
- `oneDark` - Atom editor dark theme
124
- `gruvboxMaterialDark` - Material design Gruvbox dark
125

126
**Light Themes:**
127
- `duotoneLight` - Two-tone minimalist light
128
- `github` - GitHub-style light theme
129
- `nightOwlLight` - Light variant of Night Owl
130
- `ultramin` - High-contrast minimal
131
- `vsLight` - VSCode light theme
132
- `jettwaveLight` - Blue accents on light
133
- `oneLight` - Atom editor light theme
134
- `gruvboxMaterialLight` - Material design Gruvbox light
135

136
### Custom Theme Creation
137

138
You can create custom themes following the PrismTheme interface:
139

140
```typescript
141
import { PrismTheme } from "prism-react-renderer";
142

143
const customTheme: PrismTheme = {
144
  plain: {
145
    color: "#393A34",
146
    backgroundColor: "#f6f8fa"
147
  },
148
  styles: [
149
    {
150
      types: ["comment", "prolog", "doctype", "cdata"],
151
      style: {
152
        color: "#999988",
153
        fontStyle: "italic"
154
      }
155
    },
156
    {
157
      types: ["namespace"],
158
      style: {
159
        opacity: 0.7
160
      }
161
    },
162
    {
163
      types: ["string", "attr-value"],
164
      style: {
165
        color: "#e3116c"
166
      }
167
    },
168
    {
169
      types: ["punctuation", "operator"],
170
      style: {
171
        color: "#393A34"
172
      }
173
    },
174
    {
175
      types: ["entity", "url", "symbol", "number", "boolean", "variable", "constant", "property", "regex", "inserted"],
176
      style: {
177
        color: "#36acaa"
178
      }
179
    },
180
    {
181
      types: ["atrule", "keyword", "attr-name", "selector"],
182
      style: {
183
        color: "#00a4db"
184
      }
185
    },
186
    {
187
      types: ["function", "deleted", "tag"],
188
      style: {
189
        color: "#d73a49"
190
      }
191
    },
192
    {
193
      types: ["function-variable"],
194
      style: {
195
        color: "#6f42c1"
196
      }
197
    },
198
    {
199
      types: ["tag", "selector", "keyword"],
200
      style: {
201
        color: "#00009f"
202
      }
203
    }
204
  ]
205
};
206

207
// Language-specific styling
208
const customThemeWithLanguageSupport: PrismTheme = {
209
  plain: {
210
    color: "#393A34",
211
    backgroundColor: "#f6f8fa"
212
  },
213
  styles: [
214
    {
215
      types: ["tag"],
216
      style: {
217
        color: "#d73a49"
218
      }
219
    },
220
    {
221
      types: ["tag"],
222
      languages: ["markup"],
223
      style: {
224
        color: "#22863a"  // Different color for HTML tags
225
      }
226
    }
227
  ]
228
};
229
```
230

231
## Theme Structure
232

233
```typescript { .api }
234
interface PrismTheme {
235
  /** Base styling applied to the root container */
236
  plain: PrismThemeEntry;
237
  /** Array of styling rules for different token types */
238
  styles: Array<{
239
    /** Token types this style applies to */
240
    types: string[];
241
    /** CSS properties for these token types */
242
    style: PrismThemeEntry;
243
    /** Optional: restrict this style to specific languages */
244
    languages?: Language[];
245
  }>;
246
}
247

248
interface PrismThemeEntry {
249
  /** Text color */
250
  color?: string;
251
  /** Cursor style */
252
  cursor?: string;
253
  /** Background color (shorthand) */
254
  background?: string;
255
  /** Background image */
256
  backgroundImage?: string;
257
  /** Background color (explicit) */
258
  backgroundColor?: string;
259
  /** Text shadow effect */
260
  textShadow?: string;
261
  /** Font style (normal or italic) */
262
  fontStyle?: "normal" | "italic";
263
  /** Font weight */
264
  fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
265
  /** Text decoration */
266
  textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through";
267
  /** Opacity level */
268
  opacity?: number;
269
}
270
```