Hi HN,
I built the VS Code Theme Studio after realizing how hard and annoying it is to create a theme the standard way. You have to tweak tons of hex color codes in a huge JSON file... yuck. Most of the time you don't even know which settings to edit, or how they actually affect the UI. I wanted to build a much more intuitive and user-friendly way of designing VS Code themes, so that anyone could design a beautiful, polished theme in under an hour (instead of a week). In a future iteration, I want to make the theme studio even handle the process of publishing your theme to the VS Code marketplace for you. This way, all you'll have to do is design the theme, and click a single button... "Publish". I had a lot of fun building this and I look forward to seeing the themes you create :)
(Built with my favorites: Vue.js + Nuxt.js + Firebase)
This looks really really slick. The signup process only worked for me if I turned off tracking protection in Firefox.
One bug, entering hex code aggressively tries to convert 3 digit into 6 digit. So you can't actually type a 6-digit hex code because as soon as you type the first 3 digits, it expands it into 6, so you have to like backspace and mess around with it to get the color you want.
It would also be nice to have more flexibility in syntax highlighting section. Not everyone wants to group things in the same way for setting colors.
Looks cool, won't sign up ¯\_(ツ)_/¯
Both the Terms of Service and Privacy Policy links 404. Why does this require an account?
I've built themes before and one nice feature that I'm missing is color variables to avoid having to copy/paste the same RGB everywhere. It makes it much easier to play with various color schemes but also makes creating new themes from a template much easier.
This sign up thing is such a plague. I don't want to trade my digital identity for a theme, it's a bad deal. The only reason I would sign up is if you'd allow theme hosting and signing up would allow me to host my themes and gain notoriety.
Very nice tool. I don't have the patience to fully customise a theme, but i would really like to browse through the existing themes.
The only problem here is that there are a lot of themes (most of them) that were started just for checking the tool out, so they're not really finished or different from the default. Maybe you could add some kind of publish button - or as a quick fix, don't show the themes with "Untitled" in the title.
Otherwise great project. I really think this would be great for medium sized IT shops/companies for branding their tooling. Great job.
PS: found this gem https://themes.vscode.one/theme/rpetersen29/dOaUUtdW
VS Code One features:
* Clickable slide show, with 120 slides, each containing approximately 1/5th of any current sentence. Good for school presentations, family movie night, or mundane business meetings.
* Subdomains for everything. Excellent SEO utilization for preventing server downtime from user connection surges and spikes.
* Static sidebar buttons, such as "Create New Theme", that create irremovable forced registration overlay popups. Perfect for dimming screens. (Psst, a secret, you can think of the "Browse Themes" button as the "x" button because that's exactly what it does. Don't tell anyone.)
* Statistics of such prominency that require no citations!
* Absolute guarantees and claims of being the "fastest, easiest, most efficient way to master VS code". Keeps users safe by keeping them informed of their fantastic choice!
* World's first legitimate "shortcut to mastering VS Code". Now with 50% more rich in getting rich! (Or brain in this matter, get it?)
* Usage of proprietary and trademarked assets for commercial purposes. Having licensed logos on your product, as well as "VS Code" in its name, can't be cheap! Product shows commitment by following copyright laws.
Final thoughts: I felt as if I was with a constantly gasconading taxi driver, orating me his years of skill and knowledge, driving me around, showing me all the roads he knows, and then being charged for the hour, miles away from my destination.
In all seriousness, this is a scam. He is charging $150 (which is currently a sale discount from the normal $300) for his videos that teach you...basic introductory topics that already have an immense amount of free official educational resources.
So let me get this straight. I make a theme. In order to actually use that theme I must sign up with azure DevOps create my own organization then get a personal access token then publish it to an open marketplace with my information on it then and only then can I get it into my IDE.
Does anyone else see that as ridiculous?
As someone who's created their own theme for VSCode this could've saved a ton of time.
However after trying to just change a couple colors I'm already extremely frustrated since I can't actually type a hex code in the color picker without it hijacking what I'm typing and adding characters, even when I'm trying to delete. The only thing that works is if I paste in a hex code. I'm not sure if this is an attempt at autocompleting the hex codes but whatever it is, it's maddening.
How is this different from or better than themer? Themer can be ran locally or you can use the website and no login is required.
This is great; nice work. The only feature I see missing is the ability to edit the resulting JSON file. This would also allow users to base their theme off of existing themes, which would be my primary use case for something like this.
Often I love a theme except for one or two small details, and it'd be nice to edit them in this tool.
"Unfortunately, the VS Code Theme Studio is not optimized for mobile devices yet. If you want to check it out, please switch to a desktop device."
I thought the website would at least explain what it is and show some screenshots before trying to load.
Awesome.
I used such theme creators for WebStorm, back in the days, and I certainly missed them for VSCode.
Nit: it would be cool if I could click on an element in the UI and it would open the config option on the left. Currently it requires me to search for an option.
It would be so cool if you could change the colors directly in VS Code by just pointing to the pixel that you want to change. A color picker would pop up and the change would be applied immediately. (It would not only change the selected pixel but the entire color key)
Maybe with some machine learning the easy-to-compute function from colors -> VS Code UI Screenshots could be inversed, so that you know which color keys influence a certain pixel.
Sadly the color space is finite, otherwise the color key could be easily encoded in the color without changing the color much. Looking forward to high DPI CSS colors ;)
Can’t look now because I’m on mobile, but excited to check it out when I get back to my desk. I’ll give more feedback if I have any then, but before that a couple quick thoughts:
- if you’re not already aware of/using Shiki[1], it’s an excellent library for using VSCode/TextMate themes on the web, and another potential use case for a tool like this
- it would be nice if some mobile functionality was supported where it’s not a heavy lift (eg browse themes)
Signup = no thanks
Is there a way to upload a partial theme? I already noodle on one and sticking in this to validate or handle sections I didn't think I needed to care about would be great.
Any chance there can be a screensheet of the diff view? I've used a lot of Neo/Vim themes and this scenario is always where the theme falls down or really shines.
This is very nice, but it's still not simple enough for me. It's too much work to sift through every nook and cranny changing individual colors. I would love a way to pick a palette of a handful of colors and then be given ways of rolling different color combinations.
This would be a great experience: 1. Override the colors on elements I'm interested in (background for instance) 2. Click an Auto button to generate the remaining colors based on my manual selections.
An alternative - not just for VSCode, but a whole range of software - https://themer.dev/
One of VS Code's strengths is that it can entirely run without the browser. It would be cool to see actual real preview of the themes in action.
Hello, this is great to see. However, the site is not recognizing login on Brave browser even with lowered filters. I logged in via Github and can see your app is authorized. The site still thinks I am logged out.
Also, I block facebook pixels, reddit tracking and google tag manager that you have on the site. Could that be the reason. I don't want FAANG scum to get my data each time I lift my toilet lid :)
Anybody know something similar for phpstorm or intellij ide? I try to create custom theme using the plugin sdk route, I might be doing it terribly wrong, the result works weird on some place like there's white border around windows and missing colors.
Having great fun with this. Two things I thought worth mentioning ..
"How to actually use the resulting json file without publishing it" would make a really nice faq item. I still haven't figured this step out yet.
The downloaded files are named .json.json - a papercut to be sure, but I assume low-hanging fruit too.
This is wonderful.
As a related thought, what I really want is a point and click legend on what all the pieces of vscode's UI are called.
Many times I've had to guess wildly in google at what they call "that bar to the side|top|bottom" when I go looking for settings or plugins or bugs etc.
Wait, does this mean you could create a VSCode extension to create themes for VSCode within VSCode?
This is really cool and easy to use!
Recently I've been checking what can be customized in VS Code and my approach was to just check what was modified by the theme. This makes the whole process more intuitive as you can just tweak the settings and see how it would look like.
Had a bit of trouble changing the title/description. Something was triggering uBlock Origin in such a way that I had to disable it to be able to change the title and description so I could save it.
I am always excited when I get to customize an app, but I always end up with hating the final results. Picking right color combinations & fonts is not an easy task!
So now I am at the point where I say, just leave it to the experts. They know better.
Really nice. I've enjoyed playing around with the editor. As mentioned by others, color variables would be nice to group some values together. And i would love to import my own themes to adjust some colors or customize it.
hm.. nice! I made one theme for myself (github[1], vscode[2]) and wanted to try to upload my json to see how it looks like in your interface... (for a screenshot proposes).
cheers! nice project!
[2] https://github.com/butuzov/vscode-theme-acid [3] https://marketplace.visualstudio.com/items?itemName=butuzov....
It might make more sense to require users to create a title than to let them use the default 'untitled', if you're planning to continue showing these themes to users
Cool site but I'm not giving you my email address. Might use once that is removed. I'd use my Github if you weren't requesting to read my private email.
I like this but please add a light mode. I suffer from astigmatism and looking at a black screen gives me headaches.
I specifically create light mode themes that work with my eye condition.
Love it! Is there a github to issue PR's? Would love some sort of history panel.
I think, also, the amount of notifications/confirmations is a bit overkill.
If you're on Android and want to check it out, switch to desktop mode in your browser. It works more or less fine in Firefox for Android.
For some reason, this site is being blocked by our corporate security software
"This site is blocked due to a security threat."
Asking for signup first made me instant click away - You might want to think is that really needed...
Why do I need to sign up before playing with the theme creator? Closed the tab. What a shame.
Very cool. One feature that seems to be missing is an option to set various text bits to bold.
Project looks cool. "Sign in with Github" doesn't seem to be working though.
This is amazing - one of the best projects I've seen in a long time.
FYI both Firefox and Cisco Umbrella are reporting this site as a security threat.
This is great! Now I'm not going to get any real work done today.
This site is blocked for me due to malware threats. ??
I’d love to be able to use this without signing up!
Are you allowed to use the VS Code name and logo?
looks great! using hex values for color gets complicated. perhaps a color system like tailwind would be great to simplify choices
Do the themes work with Monaco editor ?
Rank them by number of installs.
it looks awesome, but I just always failed to sign in with Github :(
This is cool! I really enjoyed playing around. Some feedback:
1. Do not ask for signup before making a theme. There is so much power in allowing users play around without friction. You will get signups from users that are interested.
2. Make the editor preview itself a selection tool for various colors and other items. That would make it a whole lot easier to use
3. Allow grouping of colors. Some colors are always set to the same value. Allow setting the colors individually too. But users often want harmony.