DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Show me your editor theme! 🎨
Ben Halpern
Ben Halpern

Posted on

Show me your editor theme! 🎨

Light theme? Dark theme? What fonts?

Let's hear it. Comment below.

Top comments (141)

Collapse
janeori profile image
Jane Ori

Can't beat synthwave x fluoromachine for VSCode
Image description

Collapse
ben profile image
Ben Halpern Author

😈

Collapse
dvarmstrong profile image
DVA

Trtrerrr

Collapse
michaeltharrington profile image
Michael Tharrington

Wow! I'm totally getting synthwave vibes from these colors β€” awesome. πŸ™Œ That's an aptly named editor theme right there.

Collapse
saifbechan profile image
Saif Bechan

This is πŸ”₯

Collapse
poisonintheink profile image
poisonintheink

ive been using synthwave but not that background. gonna sort that right out! thanks for bettering my life.

Collapse
desireebyrd profile image
desireebyrd

Oh nice! I'm a Sublime girl myself, but this is pretty and the colors make my heart happy. I wonder if there's something similar for Sublime?

Collapse
hasnainghazna0101 profile image
Muhammad Hasnain

Uploading image

Collapse
revoltez profile image
revoltez

nice but too distracting, i prefer material theme ocean

Collapse
pyrsmk profile image
AurΓ©lien Delogu

Is it simple to set up? Isn't it too harsh for the eyes?

Collapse
janeori profile image
Jane Ori

mmmm no, not really. It's got some hoops to jump through... and a lot of the highlighting colors need to be overwritten manually w/o instruction so they're visible at all. Also VSCode will tell you it's corrupt every time it opens a new window...

But it looks great!

Thread Thread
pyrsmk profile image
AurΓ©lien Delogu • Edited on

Well... So the set up is still the same after the few years I took a look at it. So bad ^^

Thread Thread
pyrsmk profile image
AurΓ©lien Delogu

But it does look great!

Collapse
poisonintheink profile image
poisonintheink

you're not half wrong. its quite 'aggressive' but i find a chop/change between colour schemes is really helpful with motivation (i mean you're staring at this a fair bit)

really looking forward to a good 'forest' kinda theme but havent found one just yet. bring on the green.

Collapse
dendihandian profile image
Dendi Handian

bookmarked this comment

Collapse
missamarakay profile image
Amara Graham

VS Code using synthwave theme (dark background with neon colors) and Stardew Valley themed icons for each of the different file types with a markdown page open

Synthwave + Stardew Valley icons

Collapse
sansseryph profile image
Kyla

Whaaaaaat, Stardew icons? That's awesome!

Collapse
missamarakay profile image
Amara Graham

marketplace.visualstudio.com/items...

Has a winter and autumn mode too! Totally forgot about that, so now I'm running autumn for pumpkins and sunflowers!

Thread Thread
amiceli profile image
amiceli

Awesome, I love that video game ! Thanks for sharing.

Collapse
jahkamso profile image
Jahkamso

Awesome theme, I use coder coder theme. Please how do you get your code to look so neat and organized?

Collapse
okkdev profile image
Jen Stehlik • Edited on

vscode with rosΓ© pine dawn
edit: font is fira code and I usually switch between dark and light mode on os level depending on my surroundings. For dark mode I'm on rosΓ© pine moon.
vscode with rosΓ© pine dawn

Collapse
ben profile image
Ben Halpern Author

Whoa

Collapse
ianbromwich profile image
Mr Rager

So clean, I love it

Collapse
pkcarreno profile image
Pedro CarreΓ±o

Awesome, can you share your editor settings?

Collapse
okkdev profile image
Jen Stehlik

Unfortunelty a bit of a mess. These should be the most relevant ones:

{
  "telemetry.enableTelemetry": false,
  "explorer.confirmDelete": false,
  "editor.formatOnSave": true,
  "editor.lineHeight": 35,
  "workbench.colorTheme": "RosΓ© Pine Dawn",
  "editor.fontLigatures": true,
  "workbench.editor.untitled.hint": "hidden",
  "editor.fontSize": 14,
  "workbench.iconTheme": "file-icons-colourless",
  "breadcrumbs.enabled": false,
  "editor.padding.top": 10,
  "editor.minimap.enabled": false,
  "workbench.activityBar.visible": false,
  "workbench.editor.showTabs": false,
  "vim.useSystemClipboard": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "workbench.preferredDarkColorTheme": "RosΓ© Pine Moon",
  "workbench.preferredLightColorTheme": "RosΓ© Pine Dawn",
  "window.autoDetectColorScheme": true,
  "workbench.sideBar.location": "right",
  "editor.codeLens": false,
  "editor.fontFamily": "Fira Code, JetBrains Mono, Hasklig, 'Courier New', monospace",
  "explorer.confirmDragAndDrop": false,
  "editor.cursorBlinking": "phase",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.smoothScrolling": true,
  "editor.tabSize": 2,
  "vim.smartRelativeLine": true,
  "workbench.layoutControl.enabled": false,
  "editor.inlineSuggest.enabled": true
}

Enter fullscreen mode Exit fullscreen mode
Thread Thread
pkcarreno profile image
Pedro CarreΓ±o

Cool, I'll check it out and see how it looks in my vscode.

Thanks!!!

Collapse
esareynor profile image
Rachman Esa

no way xD

Collapse
lukeshiru profile image
Luke Shiru • Edited on

I have quite a few that I made. I use a script to get a Dark+ based theme out of popular color palettes such as Bootstrap, Tailwind and Material:

Dark+ Material:
Screenshot of Dark+ Material Theme

Dark+ Tailwind (this is the one I'm currently using):
Screenshot of Dark+ Material Theme

Dark+ Bootstrap:
Screenshot of Dark+ Material Theme

You can fork any of them and spin your own theme if you want ^_^

Cheers!

Collapse
jackrobert0220 profile image
Jack Glazer

This is what I've been looking for! Thank you!

Collapse
darkwiiplayer profile image
π’Š©Wii πŸ’–πŸ’›πŸ’šπŸ’™πŸ’œπŸ’πŸ’Ÿ

I generally switch back and forth between these two (four?) themes whenever I get bored of the one I'm looking at.

Arcadia (Dark)

Image description

Arcadia (Light)

Image description

Papercolor (Dark)

Image description

Papercolor (Light)

Image description

Collapse
waylonwalker profile image
Waylon Walker

These screenshots are sooo crisp. really making vim look good here!

Collapse
darkwiiplayer profile image
π’Š©Wii πŸ’–πŸ’›πŸ’šπŸ’™πŸ’œπŸ’πŸ’Ÿ

The light ones would look better on my linux mint setup because there the window borders actually change when I switch themes:

Image description

Image description

The other ones were quickly taken on my work PC during lunch break, where I haven't really wasted that much time making everything just perfect :D

Collapse
3009aksingh profile image
Ankitkumar Santosh Singh

Please share some editorial, how did you do customize vim. Looks very beautiful and eye catchy.

Collapse
darkwiiplayer profile image

I actually didn't add all that much, it's really just standard neovim with some colour themes in a terminal with some padding.

Collapse
sahibalejandro profile image
Sahib J. Leo

That Papercolor Dark looks nice!
I love your super minimalistic vim

Collapse
darkwiiplayer profile image
π’Š©Wii πŸ’–πŸ’›πŸ’šπŸ’™πŸ’œπŸ’πŸ’Ÿ

I put it in zen mode for the screenshots; most of the time it actually looks like this:

Image description

Collapse
sansseryph profile image
Kyla • Edited on

Lately I've been using Catpuccin on just about everything the have a plugin for and love it so much!

Image description

Collapse
fawlid profile image
fawlid

How nice theme i got! (solarized dark)
Image description

Collapse
ben profile image
Ben Halpern Author

How do you like the low-ish contrast personally?

Collapse
fawlid profile image
fawlid

I tried many themes but for 2 weeks I use my VSCode on this theme! I dont know why I like it πŸ€·πŸΌβ€β™‚οΈ

Collapse
wjplatformer profile image
Wj

I was considering that too!

Collapse
jahkamso profile image
Jahkamso

Please how do you make your code look so neat and organized?
Is there an extension you use?

Collapse
fawlid profile image
fawlid

i just write my codes clean, there isnt any extension
in every line i wrote, i put a comment for that and it makes my code more beautiful

Collapse
nickytonline profile image
Nick Taylor

I'm using the Fortnite theme with the Dank Mono font.

Fortnite theme in VS Code

Collapse
mishmanners profile image
Michelle Mannering

Me too! I love this theme πŸ˜„

Collapse
waylonwalker profile image
Waylon Walker

Love that dark purple!

Collapse
warwait profile image
Parker Waiters

I go with Merko for VSCode.

merko

Collapse
ben profile image
Ben Halpern Author

That's a vibe

green lantern

Collapse
esareynor profile image
Rachman Esa

Deprecated hero xD

Collapse
valentinesean22 profile image
valentinesean • Edited on

Ayu Mirage PowerUp (VS Code)

Image description

Collapse
s_aitchison profile image
Suzanne Aitchison

FairyFloss on VSCode, Dank Mono font ✨

Editor open on some JSX code. The editor theme colours are primarily light purple, mint green, yellow, and coral red.

Collapse
moopet profile image
Ben Sinclair

I really want to like FairyFloss but I found I was having to tweak too many things to make it fit my eyes. It looks great in certain screenshots but as soon as I edit something different it becomes a splodge!

Collapse
s_aitchison profile image
Suzanne Aitchison

That's very fair - the most important thing is for your eyes to like it πŸ˜„ Maybe it depends what kind of files you're in most often.

Collapse
spikeysanju profile image
Spikey sanju

I use Tokyo Night + Cascadia Code Font and I'm loving it 🀍
Image description

Collapse
mrepol742 profile image
Melvin Jones Repol

I used synthwave in vscode

Synthwave

Collapse
nikolovlazar profile image
Lazar Nikolov • Edited on
Collapse
hasanthesyrian profile image
HasanTheSyrian

Image description

Collapse
chadalen profile image
Chad Adams

I recently started using One Dark Theme by Mark Skelton. Loving it so far.

Font: Jetbrains Mono
Shell prompt: Starship.rs
Icon theme: Seti

Image description

Collapse
waylonwalker profile image
Waylon Walker

I also run one dark, oddly I never used atom, but have used one-dark for years.

Collapse
imagineeeinc profile image
Imagineee

my theme

I have my custom theme called Moon Purple. The unique feature I like about my theme is that it has seamless colours, which is a problem when you try pulling up the terminal.

With the best icon pack: Material Icon

I also use the recursive font (not visible in the screenshot as its old)

Collapse
karandpr profile image
Karan Gandhi

Meanwhile me ...

Image description

Collapse
joshwcorbett profile image
Josh Corbett
Collapse
anishde12020 profile image
Anish De

Currently using Orbi on VSCode, and it is made by me :D

Image description

Collapse
psypher1 profile image
James 'Dante' Midzi

While Aurora X is my home

Aurora X

Halcyon is one I found recently and really like

IHalcyon

Collapse
spectacularsloth profile image
πŸ¦₯

Nothing beats the default Vim theme for me.

default vim theme

Collapse
zoreankit profile image
ZoreAnkit

Image description

I like it minimal.

Theme : Night owl

Icon: Material icon

Product: El minimalist

Collapse
ashsimmonds profile image
AshSimmonds

Tweaks with Customize UI and Monkey Patch:

ashsimmonds vscode theme

"editor.fontSize": 16,
"editor.fontFamily": "'CPMono_v07', Space Mono, Consolas, 'Courier New', monospace",
"customizeUI.font.regular": "WW Digital",
"customizeUI.fontSizeMap": {
"13px": "20px",
"monospace": "12px",
"tab-title": "12px",
"menu": "20px",
"window-title": "40px",
},
"workbench.colorCustomizations": {
"editor.background": "#000211",
"editor.foreground": "#ffffff",
"editor.selectionBackground": "#0000ff",
"editorCursor.background": "#d3d3da",
"editorCursor.foreground": "#B19EFF",
"editorLineNumber.foreground": "#42ff00",
"editorIndentGuide.background": "#224400",
"editorIndentGuide.activeBackground": "#aaff00",
"editor.lineHighlightBackground": "#000012",
"editor.lineHighlightBorder": "#6666cc",
"editor.findMatchHighlightBorder": "#ffaa55",
"editor.findMatchHighlightBackground": "#000000",
"editor.findMatchBorder": "#ffffff",
"editor.findMatchBackground": "#0000ff",
"editor.selectionHighlightBorder": "#0000ff",
"editor.selectionHighlightBackground": "#000000",
"activityBar.background": "#6953F5",
"activityBar.foreground": "#eeeeff",
"editorOverviewRuler.background": "#6953F5",
"terminal.background": "#000534",
"terminal.foreground": "#ffffff",
"minimap.background": "#3b0677",
"minimapSlider.background": "#0000ff",
"sideBar.background": "#002633",
"sideBar.foreground": "#00f9ff",
},
"editor.tokenColorCustomizations": {
"comments": "#00ff00",
"functions": "#ffaacc",
"keywords": "#bbff00",
"numbers": "#6666ff",
"strings": "#ccccff",
"textMateRules": [],
"types": "#FFff00",
"variables": "#00ffff",
},

Collapse
horrorofpartybeach profile image
Emma

I've got Synthwave '84 but unfortunately the glow seems to not work on Mac or something to do with a VS Code update (workarounds didn't fix it for me), so I may end up switching to one of the other Synthwave themes and using custom CSS.

I used to get comments from other devs that the colours and glow are too harsh on the eyes, but I love it. I can't do light themes at all; I have Irlen Syndrome and for me, reading off white backgrounds is definitely NOT fun!

Image description

Collapse
erbanku profile image
Erban Ku

MacOS Modern Theme - Big Sur Xcode
Image description

Collapse
pbnj profile image
Peter Benjamin (they/them) • Edited on

Theme: Night Owl

nightowl


Theme: SynthWave

synthwave


Terminal Emulator: cool-retro-term
Font: FixedSys Excelsior

Collapse
thomasstep profile image
Thomas Step

I use lichen for vim. It's based on Nord but substitute blue for green.

lichen vim theme

Collapse
waylonwalker profile image
Waylon Walker

Do I smell the only image of an editor other than vscode here?

Collapse
manthanbhatt profile image
Manthan Bhatt

Theme: GitHub Theme
Accent: Peacock

Image description

Collapse
hssan profile image
YungDash

Let me flex my setup real quick

Theme => Gruvbox
Image description

Font => Fantasque Sans

Collapse
thehalfbloodprince profile image
Manish

One I made myself Rasengan Glacier

Image description

Collapse
wjplatformer profile image
Wj

I don't know. I just randomly scrolled through some previews of themes and chose my favorite color. Military Green. Image description

Collapse
ergenekonyigit profile image
Ergenekon Yigit

Image description

Collapse
yk_at_daiquiri_team profile image
Yevgeniy Kosmak

Just a default Darcula theme on PyCharm. Looks delightful to me :)

Image description

Collapse
pyrsmk profile image
AurΓ©lien Delogu

I'm working on a synthwave theme derived from the Night Rider VSCode theme. Since it's not maintained anymore and some languages had not a good color/contrast balance, I wanted to give a shot and improve things. Still a work in progress though.

Image description

Collapse
mrdanishsaleem profile image
Danish Saleem
Collapse
sudokunym profile image
Andrea

I love me a good light theme, but after many hours, eye drops and glasses, I fell into the pretty Codel theme.
Image description

Collapse
ziterz profile image
Ziady Mubaraq • Edited on

Beat my theme!πŸš€
theme: CodeSandbox Black
icon: Material Icon
font: MonoLisa
CodeSanbox Black

Collapse
mrcaidev profile image
Yuwang Cai

One Dark Pro for code highlight palette, and DIY for the whole UI
My theme

Collapse
sibouras profile image
sibouras

i like this one! can you pastebin your config pls

Collapse
mrcaidev profile image
Yuwang Cai

Pasted my theme config here

Collapse
joelmturner profile image
Joel Turner

I've been running Night Owl with Material Icon Theme and Indent Rainbow. I use Peacock add a pop of color so I know which repo I'm in at a glance.

Image description

Collapse
abutahermuhammad profile image
AbuTaherMuhammad

Using Dark Pie that made by me. Not a rich one. but has satisfaction 😎. So long thinking about some updates on syntax highlighter , some minor corrections, etc ✨.

Would love to have feedbacks from you guys. Let's give it a try!πŸ˜…

Image description

Collapse
heatherw profile image
HeatherW

Default light+ theme with some tweaks to increase font sizes for accessibility (my eyesight is quite bad).
editor

Collapse
larswaechter profile image
Lars WΓ€chter
Collapse
posandu profile image
Posandu |πŸ”₯| • Edited on

image

Tokyo Night 😍

Collapse
waylonwalker profile image
Waylon Walker

this looks pretty πŸ’…

Collapse
georgoulis profile image
georgoulis

Something super simple, but it works for me! GlassIT-VS extension for background. Dark Theme from VS defaults.
Image description

Collapse