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.
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.
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.
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.
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.
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?
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.
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.
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'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.
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.
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.
Yeah, this needs some curation / clean-up features for sure.
The Gem made me laugh. In game design there's some concept of '4 different player archetypes' and I forget the details but I remember one of them is like... that player that just likes to break stuff. Respect to whoever made that :)
* 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.
Thanks! It's still a lot of hoops to jump through coming from visual studio perspective where all settings can be imported or exported to a file. But this is workable!
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.
I like Themer. I think Themer is awesome for creating less-detailed but still great 'umbrella' themes that you can bring with you to lots of different programs. This is for creating more detailed / robust VS Code-specific themes.
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.
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)
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.
Good idea. The screenshot generation system is a bit limited at the moment just because of the quantity of images that need to be generated on the server-side every time someone updates their theme. This does seem like an important one, so I will add this to my list, thanks!
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 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)
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.
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.
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).
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.
Third time I'm hearing this... I think it might have something to do with: a) newish domain, b) uncommon TLD ".one" or c) cloudflare DNS setup pointed to netlify with cname flattening. I'm a noob when it comes to DNS stuff, so I'm not sure if/why that would cause problems, but who knows. If anyone else has an idea, let me know!
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.