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)
I considered this a little, but I want to optimize for a more robust set of features in the future that would require an account... E.g. eventually handling the submission to the marketplace for the user, etc. + I was worried about users potentially losing lots of work if LocalStorage gets wiped for some reason.
maybe make the changes they make in-memory-only and prompt them to sign up to persist. Like what piskelapp.com do - you can edit an image and save it locally, but if you want to save it to your gallery you need to create an account.
This seems like a fun project. I wanted to second my favorite Vue + Firebase combo. The purists may balk but it is super approachable for a luddite like myself.
Slick tool! Follow-up question: What limits a tool like this to VSCode? Is theming (across editors) standardized/similar enough that the same color variables could be exported to get the same theme in different editors?
Oooof just pushed a fix for that. It's a lot easier to make a theme in multiple 'sittings' instead of all at once. Your themes get stored under your account so you can come back to them later. Also used for posting the themes in the 'hub'. Localstorage seemed too flakey for theme data storage... it would be a really bad experience to lose an hours worth of theme data.
localStorage is fairly reliable. Far better than the login requirement. Maybe just make it clear to the user that their settings may be lost if they don't login? i.e. login to "hard save"
Agreed. I think localStorage is as well, but if that isn't the case then there's still other options. You can make login option, download the settings and upload later, save to Google Drive, Dropbox, iCloud, etc.
I actually experimented with this in earlier iterations of the Theme Studio, but I remember running into a bunch of limitations. I think the HTML/CSS simulation is similar enough to the real thing for now (prob 90-95% accurate), but like you said, it would be cool to interact with the theme in a real editor. (clicking buttons, hover states, etc)
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.
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.
Me too: I am unpleased by forced sign-up before I've had chance to try the thing I'm signing up for, so I didn't get beyond browsing demos. Some of them did look nice, but nah.
the smart way to do it is to allow you to make a theme, but to save it/share it, you need to sign up.
If the theme is just a throwaway, people won't sign up, but if the theme is really good and the person wants to save it, it makes the signing up easier to swallow (since you get value from saving it).
Otherwise, you end up with crappy noise in the sign up because people would just make a fake account to try it out.
Also, do at least some light curation (votes/ranking/popularity). Hitting a page full of Untitled themes that all look similar isn't good for browsing.
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.
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.
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.
Thanks for the suggestion! One feature that is somewhat close to this is the "Fork" feature that lets you clone an existing theme that is already within the hub. Another thing which I want to implement in the future is the ability to fork ANY VS Code theme that is on the marketplace... so E.g. if you like "Material Theme" you can instantly 1-click clone it into the theme studio.
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.
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.
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.
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.
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.
That's fair. In the future I'd like to implement features like: automatically handle publishing to the marketplace for the user (right now it's a pain), upvotes system, etc. Accounts are a good solution for these types of features + it makes the theme data persistence way more robust so you can comfortably / reliably start a theme and then come back later to finish it. There are many suggestions for making signing-in optional though, so will explore this.
2 emails in 3 days is too much. This is why we don't want to sign up for things. You spin us some crap about why you need it, and then use it to spam us.
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.
107 comments
[ 3.9 ms ] story [ 155 ms ] threadI 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)
As someone who spends FAR too much time on theming, this also might be a bit dangerous ;)
This seems like a fun project. I wanted to second my favorite Vue + Firebase combo. The purists may balk but it is super approachable for a luddite like myself.
I thought the website would at least explain what it is and show some screenshots before trying to load.
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.
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.
If the theme is just a throwaway, people won't sign up, but if the theme is really good and the person wants to save it, it makes the signing up easier to swallow (since you get value from saving it).
Otherwise, you end up with crappy noise in the sign up because people would just make a fake account to try it out.
It's not super obvious that every theme is created as Untitled and rename icon only shows when you hover over the title.
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.
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.
Often I love a theme except for one or two small details, and it'd be nice to edit them in this tool.
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.
So now I am at the point where I say, just leave it to the experts. They know better.