10+ Themes

Beautiful Code Themes

From the iconic Dracula palette to the serene Tokyo Night — find the perfect theme for your code screenshots. Each theme is hand-crafted with carefully balanced syntax colors.

Preview All Themes

Dracula

#282A36
example.ts
1function fibonacci(n: number): number {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5
6// Calculate first 10 Fibonacci numbers
7const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(results); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Nord

#2E3440
example.ts
1function fibonacci(n: number): number {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5
6// Calculate first 10 Fibonacci numbers
7const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(results); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Monokai

#272822
example.ts
1function fibonacci(n: number): number {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5
6// Calculate first 10 Fibonacci numbers
7const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(results); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

GitHub Dark

#0D1117
example.ts
1function fibonacci(n: number): number {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5
6// Calculate first 10 Fibonacci numbers
7const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(results); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Tokyo Night

#1A1B26
example.ts
1function fibonacci(n: number): number {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5
6// Calculate first 10 Fibonacci numbers
7const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(results); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

One Dark

#282C34
example.ts
1function fibonacci(n: number): number {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5
6// Calculate first 10 Fibonacci numbers
7const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(results); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Material

#263238
example.ts
1function fibonacci(n: number): number {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5
6// Calculate first 10 Fibonacci numbers
7const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(results); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Solarized Dark

#002B36
example.ts
1function fibonacci(n: number): number {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5
6// Calculate first 10 Fibonacci numbers
7const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(results); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Cobalt

#193549
example.ts
1function fibonacci(n: number): number {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5
6// Calculate first 10 Fibonacci numbers
7const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(results); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Night Owl

#011627
example.ts
1function fibonacci(n: number): number {
2 if (n <= 1) return n;
3 return fibonacci(n - 1) + fibonacci(n - 2);
4}
5
6// Calculate first 10 Fibonacci numbers
7const results = Array.from({ length: 10 }, (_, i) => fibonacci(i));
8console.log(results); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Why the Right Theme Matters

Readability

A well-balanced theme makes code easier to read at a glance. The contrast between syntax colors and background determines how quickly developers can scan and understand your shared code.

Brand Identity

Consistent theming across your code screenshots creates a recognizable visual identity. Whether you share on Twitter, write a blog, or build documentation — your audience will recognize your style.

Accessibility

Some themes are better for color-blind developers, others for low-light environments. CodeSnap offers themes across the spectrum so everyone can find comfortable syntax highlighting.

Themes by Category

Classic Dark Themes

Time-tested palettes beloved by millions of developers worldwide.

DraculaMonokaiGitHub DarkOne Dark

Cool & Calm Themes

Blue-toned palettes designed for long coding sessions and low eye strain.

NordTokyo NightCobaltNight Owl

Nature-Inspired Themes

Warm greens and earthy tones that bring a natural feel to your code.

MaterialSolarized Dark

Language Support

All themes work seamlessly across every supported language.

jstspygorscsshtmljsonsqlshrbphp

Theme FAQ

What is the most popular code screenshot theme?

Dracula and Monokai are the most widely used themes across all code screenshot tools. Dracula's balanced purple-pink palette is especially popular for social media sharing.

Can I create custom themes?

Custom themes are available on the Pro plan. Pro users can define their own background, foreground, and syntax colors for a completely personalized look.

Which theme is best for dark mode screens?

GitHub Dark and Tokyo Night are optimized for dark mode displays. Their deep backgrounds and carefully chosen contrast ratios reduce eye strain during extended use.

Do all themes support all programming languages?

Yes. Every theme in CodeSnap works with all 12 supported languages — JavaScript, TypeScript, Python, Go, Rust, CSS, HTML, SQL, Bash, Ruby, PHP, and JSON.

Find Your Perfect Theme

Try all 10+ themes instantly — no signup required, free forever.

Open Editor & Pick a Theme →