Color Scheme Builder

[Francisc]

I wish there was a Color Scheme builder for Sublime Text.

[Francisc]

I would pay for it.

[SeanWcom]

Someone was working on a package to do this - but it's been months since we've heard anything. What would be really nice is a tool like this:

http://studiostyl.es/

That's for Visual Studio, but be sure to check out the "Create a scheme" tab. Notice how you can click on anything and get a color selector. Imagine something like this running at http://sublimestyl.es - that would be an awesome domain and if I had time I'd go register it and write this myself!

@facelessuser - if you're listening... you've got half the code you need in ExportHtml - probably wouldn't take much to take the logic you guys worked out and re-engineer that into a web app (import a color scheme, edit it, export it back out).

Pretty please?

[facelessuser]

@facelessuser - if you're listening... you've got half the code you need in ExportHtml - probably wouldn't take much to take the logic you guys worked out and re-engineer that into a web app (import a color scheme, edit it, export it back out).

Pretty please?

It is possible that I might consider this. I have no intentions into jumping into anything right now though; I am pretty busy right now. I am confident I could throw something together.

What do you imagine the interface to something like this to be? That I think is the most important question since it can make the project very complicated, or very simple depending on what is expected. I am just curious at this point. As mentioned earlier, I am not promising to make anything, I am just curious what people's expectations are of such an interface.

[SeanWcom]

What do you imagine the interface to something like this to be?

Someone else was building a complete UI for it - and that's cool, but probably more complicated than it needs to be.

Something like that StudioStyl.es website would be cool - then you could add that "social" aspect to it with ratings, most popular downloaded, etc. But the interface on that website is really nice. If you missed it, go here: http://studiostyl.es/schemes/create -- then click in any of the source code to change the coloring for that specific element. At the bottom of the page, you'll see the links to export the color scheme.

As mentioned earlier, I am not promising to make anything...

I know how that goes - I've got so much going on between my two contracts that I can only dream about writing this. Heheh..

[facelessuser]

What do you imagine the interface to something like this to be?

Someone else was building a complete UI for it - and that's cool, but probably more complicated than it needs to be.

Something like that StudioStyl.es website would be cool - then you could add that "social" aspect to it with ratings, most popular downloaded, etc. But the interface on that website is really nice. If you missed it, go here: http://studiostyl.es/schemes/create -- then click in any of the source code to change the coloring for that specific element. At the bottom of the page, you'll see the links to export the color scheme.

As mentioned earlier, I am not promising to make anything...

I know how that goes - I've got so much going on between my two contracts that I can only dream about writing this. Heheh..

Cool. That is definitely within my ability to do and more in the direction I was thinking. I will consider this for the future.

[agibsonsw]

I have thought about this before and am interested in how this might be approached. (Although I doubt that I will pursue it very far myself..)

a) ExportHtml could be borrowed to create an HTML doc with the scope-names added to each element as class-names. A JavaScript (or jQuery) colour-picker could then be invoked on double-click within the HTML. However, I doubt think this approach is viable, because it would not be possible to output a local file. (Although, the content for the file could be output in an iframe or textarea for copying and saving(?).)

b) A hosted web-site could be built a-la studiostyl.es. This could store some theme files, copy one of them, modify and export it. How would we/you approach the editing of the theme file? I suppose plistlib could be used to create a dictionary, modify it and write it out as a completely new file. Or would you use some other XML tool(s) to edit a theme file?

c) But it might also be possible to do it entirely in ST: there is a ColorPicker Package. I have an idea about this: Instead of trying to find the current scope, and colour, within the attached theme-file, just read the currrent scope, and inject this scope, and the chosen colour, directly at the beginning of the attached theme file. It would be a very specific scope (language specific) and it will be adopted first at it occurs very early in the file. What XML feature/extension could be used to directly insert a node into a file?

Andy.

[agibsonsw]

Actually, it may even be possible to borrow studiostyl.es entirely . It outputs XML like this:

Code: Select all

<?xml version="1.0"?>

<!-- How to use: 1. Make sure you've installed the Color Theme Manager extension (from within Web Matrix 2) 2. Click 'Import' in the toolbar and select this XML file. -->
-<Items>
<SurfaceBackground Background="FF1B1D1E"/>
<Classifications>
<Item Background="FF1B1D1E" BoldFont="No" Foreground="FFFFFFFF" Name="Default"/>
<Item Background="00FFFFFF" BoldFont="No" Foreground="FF4D5458" Name="CssComment"/>
<Item Background="00FFFFFF" BoldFont="No" Foreground="FFFFFFFF" Name="CssString"/>
<Item Background="00FFFFFF" BoldFont="No" Foreground="FFAE81FF" Name="CssNumber"/>
<Item Background="00FFFFFF" BoldFont="No" Foreground="FFA6E22E" Name="CssItemName"/>

What we need is an XML expert who can create an XLST (is that correct?) that will transform the above into an ST .tmTheme file

[facelessuser]

@agibsonsw
I don't think it would be nearly that complicated. Simply output theme file as JSON so Javascript can manipulate it easy. Style each bit of code with a class that links to the CSS representing the color.

Color picker is no big deal either. I actually have created my own already, not for this purpose, but for another one of my projects.

ColorPicker.png (12.96 KiB) Viewed 13704 times

When color changes are made you can modify the JSON object, and then at any time, you could convert it back XML. I am not at all worried about saving a file locally, this could be accomplished via HTML5, or other clever methods to download the file, or even just open a new window with the theme in plain text that can be copied.

Everything is very doable.

[agibsonsw]

@facelessuser Thank you.

For my own interest, what technology/extension can be used to directly edit, insert into, an XML file? I believe it's possible but haven't quite stumbled upon the technology that can do this. That is, without having to parse/load the whole file and then re-output it?

Andy.