Show HN: I built a VS Code Theme Creator – easily make VS Code themes in browser(themes.vscode.one)
themes.vscode.one
Show HN: I built a VS Code Theme Creator – easily make VS Code themes in browser
https://themes.vscode.one
107 comments
yeah, after looking around some demo themes, was about to make a theme, got blocked by signup and closed tab
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.
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.
For sure, I would like to get a HN-type 'hot' algorithm with upvotes powering the list in the near future.
Save Theme should prompt to name if it's Untitled.
It's not super obvious that every theme is created as Untitled and rename icon only shows when you hover over the title.
It's not super obvious that every theme is created as Untitled and rename icon only shows when you hover over the title.
Thank you, these are great - I agree with all them. Going to add these to my list!
I think the worst part for me was that when I went to sign in to GitHub the only thing it asked me for was my private email address. Dude, what?
Same, closed tab the moment I saw a sign-in screen.
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)
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 great :) I didn't create a theme because of the soft login lock, but it seems like a really great tool.
As someone who spends FAR too much time on theming, this also might be a bit dangerous ;)
As someone who spends FAR too much time on theming, this also might be a bit dangerous ;)
It'd be nice to let people create themes anonymously and only save them to localStorage, then require an account if they want to do more from there.
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.
Can you remove sign up?
This is a popular request, so I might implement this moving forward.
As many others have said, as soon as the login came up, I closed. Nice idea though.
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?
Mike,
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 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.
It’d be neat if you could extend this to Windows Terminal as well. They both use very similar structures for themes.
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.
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.
Thanks, I agree, going to look into this.
Both the Terms of Service and Privacy Policy links 404. Why does this require an account?
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.
You can use anonymous firebase login option to log in users in the background and when they are finished, prompt them to use oauth login.
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.
Good idea, noted!
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.
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
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
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 :)
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 :)
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.
* 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?
Does anyone else see that as ridiculous?
Don't quite need to do that.
Follow https://themes.vscode.one/faq/publishing-theme to step 4. Then use VSCE to make a package file as shown on https://code.visualstudio.com/api/working-with-extensions/pu...
You can then distribute the VSIX file that you create any way you please and also do a VSIX file installation of the theme on your local copy of VSC.
Follow https://themes.vscode.one/faq/publishing-theme to step 4. Then use VSCE to make a package file as shown on https://code.visualstudio.com/api/working-with-extensions/pu...
You can then distribute the VSIX file that you create any way you please and also do a VSIX file installation of the theme on your local copy of VSC.
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!
Looks like a microsoft standard way to get things done to me
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.
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.
Yeah that's a nasty bug. I built the picker from scratch so it has not been battletested. Will fix this moving forward.
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.
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.
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.
"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.
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.
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.
Yeah this is a great idea, def going to look into this.
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 ;)
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 ;)
You could do that without ml by setting each color to a marker color and detecting the marker. In theory :). I'm sure it would be a PITA.
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)
1: https://shiki.matsu.io/
- 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)
1: https://shiki.matsu.io/
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.
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.
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.
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 :)
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 :)
Yeah the Firebase + GitHub auth seems to be broken across-the-board. Going to dig into this.
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.
"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.
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?
You can create an extension that does pretty much arbitrary JS, so I’d assume the answer is yes!
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.
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.
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.
Agreed, going to explore this, thanks!
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....
cheers! nice project!
[2] https://github.com/butuzov/vscode-theme-acid [3] https://marketplace.visualstudio.com/items?itemName=butuzov....
Going to implement an "import from json" feature soon... that would let you do this
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.
I specifically create light mode themes that work with my eye condition.
Thanks for sharing this, I will look into a light theme for a future iteration.
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.
I think, also, the amount of notifications/confirmations is a bit overkill.
[deleted]
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."
"This site is blocked due to a security threat."
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!
--- I think I figured it out. Someone mentioned "Cisco Umbrella" blocking it. This article explains the categories of 'threats' it blocks: https://support.umbrella.com/hc/en-us/articles/115004563666-...
One of the categories is "newly seen domains" and another is "dynamic DNS". I suspect one (or both) of those is the culprit because everything else appears clean on total scans like this: https://www.virustotal.com/gui/domain/themes.vscode.one/dete...
--- I think I figured it out. Someone mentioned "Cisco Umbrella" blocking it. This article explains the categories of 'threats' it blocks: https://support.umbrella.com/hc/en-us/articles/115004563666-...
One of the categories is "newly seen domains" and another is "dynamic DNS". I suspect one (or both) of those is the culprit because everything else appears clean on total scans like this: https://www.virustotal.com/gui/domain/themes.vscode.one/dete...
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.
Seems to be broken for now unfortunately; will have to figure this out.
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.
I can't tell you how many times while developing this I got sucked into designing themes hahaha.
This site is blocked for me due to malware threats. ??
Strange, do you know what's giving you that warning?
Likely a false positive. I'm on a corporate vpn and the Cisco CA cert is not trusted.
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 :(
[deleted]
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.