The frustration 😖
This story starts in your (at least mine) favorite code editor: VSCode.
What's great about VSCode is all the tools available to the community to enable you to make your code editor like your own little bubble.
✨ You can download a tons of extensions, add snippets, change the layout and of course, change the theme ! ✨
I used Material Theme Palenight High Contrast, really loved the colors but I had one problem:
Highlight selection was hard to see, when I wanted to quickly select a typo or change a name, I quickly selected the entire word and got frustrated from it.
Here is it while selecting 'commander' on line 15 with Material Theme Palenight High Contrast:
Here is it while selecting 'ander' on line 15 with Material Theme Palenight High Contrast:
As you can "see", the difference is very low and it's hard to notice what you are currently selecting. 🧐
To avoid this, I switched to the High Contrast theme built in VSCode and I know, you might criticize it and saying that your design eyes are bleeding but hey, at least I now can see what I was selecting.
Here is it while selecting 'commander' on line 15 with the High Contrast Theme:
Here is it while selecting 'ander' on line 15 with the High Contrast Theme:
After a while, you are accustomed to the theme and your eyes stop bleeding don't worry. 🤩
But what I mainly noticed, was that the High Contrast was very well made to avoid visual conflicts.
The research 💻
I had my highlight issue fixed but colors where not really my taste. So I looked on the marketplace for a nice theme with a great highlight contrast but couldn't find one that fit my taste.
Instead, I found an article from Sarah Drasner on how to create a VS Code theme.
Loved this article and so I decided to make my own theme: a nice looking High Contrast Theme.
So first I had some issues to register as a developer on the Azure DevOps platform.
So maybe it took me more 20-30 minutes to understand what I needed instead of 5-10min but here I am now, I can publish on it. ⏱
So if you follow the css-tricks article, you easely find how to generate a theme template and start to create.
Also, the VS Code documentation is really well made to customize everything and you can inspect VSCode like a browser, because it's just an Electron app ! 👌
I wanted my theme High Contrast and I picked the colors on colorsafe.com to have AAA level colors on WCAG Standard. Only one was AA level to make my theme prettier.
So here is it: Save Eyes HC Theme 👁!
You can find it here on the marketplace: Save Eyes HC Theme.
And of course, you can see what you are selecting ! 🔥
Here is it while selecting 'commander' on line 15 with the Save Eyes HC Theme:
Here is it while selecting 'ander' on line 15 with the Save Eyes HC Theme:
The light theme 💡
On a slack channel of my company, I saw a link about the dark side of dark mode where tldr; was: for most of us light themes are better
Well, I made one and use it now everyday and it's awesome !
Of course it's on the marketplace: Save Eyes Light 👁
Contribute 💪
Of course a theme is made to be used, improved for the needs.
If you use it, you may encounter issues in specific cases I didn't encounter so I would love an issue so I can fix it, or maybe you know want to tackle it a made a PR !
All repos are available in the theme page on the marketplace !
And yes, also if you don't like it, I would love to hear why so maybe I can make the theme of your dreams :)
Happy coding VSCode friends ! 💻✨
Top comments (2)
After reading the paper about light-mode, I just downloaded your save-eyes-light, I'll try to get used to it.
Thank for your work on it, it looks great !
Thanks for sharing! 🤗