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.
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)
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.
Does anyone else see that as ridiculous?
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.
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.
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 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 :)
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.
Often I love a theme except for one or two small details, and it'd be nice to edit them in this tool.
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.
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 ;)
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 :)
cheers! nice project!
[2] https://github.com/butuzov/vscode-theme-acid [3] https://marketplace.visualstudio.com/items?itemName=butuzov....
I specifically create light mode themes that work with my eye condition.
"This site is blocked due to a security threat."
--- 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...
* 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.
I thought the website would at least explain what it is and show some screenshots before trying to load.
- 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)
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.
"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.
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.
So now I am at the point where I say, just leave it to the experts. They know better.
I think, also, the amount of notifications/confirmations is a bit overkill.
