Sublime Forum

Color Scheme Builder

#14

viewtopic.php?f=2&t=7621&start=0

0 Likes

#15

[quote=“agibsonsw”]@facelessuser. Thank you but I don’t quite follow - I’m a bit under the weather :cry: so maybe my brains’ not firing on all cylinders…

What I’m looking at is injecting a node such as

<dict> <key>name</key> <string>Magic Functions (Python)</string> <key>scope</key> <string>support.function.magic.python</string> <key>settings</key> <dict> <key>fontStyle</key> <string></string> <key>foreground</key> <string>#00F5FF</string> </dict> </dict>
directly into a theme-file, at a suitable location, without having to parse or load the whole XML? I think your example demonstrates building the XML node, but how do I “inject” it…? Ta, Andy.

@Francisc. Sorry to side-step your post :smile: . But isn’t it better to see some sample code - like studiostyl.es - so that you can see precisely how your colour will impact the code? It will also be easier for someone to create, as they can (effectively) copy some sample code, stick it in ST, and read the scope at each character/word position.[/quote]

You always have to parse an entire file. You can never just insert something into a file on disk, you have to rewrite the file with the node inserted in. The code I provided takes the text content of the XML and creates an XML object that you can use to insert a node. When you are done inserting nodes you can extract the content from the object. The XML object has methods for inserting new nodes etc. I don’t really have time right now to go through the XML methods but here is showing how you can create a node w3schools.com/dom/dom_nodes_create.asp, but it is pretty well documented online.

0 Likes

#16

@facelessuser. Thank you.

That’s the detail I was looking for :smiley: . Thanks for the link (… although, I don’t really need it :wink: )

An interesting, or debatable, read - depending on your point of view: w3fools

0 Likes

#17

[quote=“agibsonsw”]@facelessuser. Thank you.

That’s the detail I was looking for :smiley: . Thanks for the link (… although, I don’t really need it :wink: )

An interesting, or debatable, read - depending on your point of view: w3fools[/quote]

Interesting link. Though I only provided a link to them because it was one of the first to show up in google :wink:. Wasn’t exactly sure what you were asking, so I was trying to cover all the bases.

0 Likes

#18

@facelessuser

I still refer to w3schools because it always appears earliest from a Google search, and it’s a familiar site to navigate. But I also try to dig a little deeper as well - I have myself occasionally noticed incomplete or out-of-date information on that site.

Regards, Andy.

0 Likes

#19

Sorry if I’m being OT.

As far as I can tell the biggest difficulty with editing sublime colour schemes has to do with finding out how to write it out so that it cascades properly for the various language (rather than defining everything with very specific scopes) and that as the file grows, fiddling with hex values becomes rather infuriating*.

This issue would not be greately helped by a UI. On the other hand, it would be great if one were able to define and reuse values and, closely related to this, the ability to define colors programatically. For example, in LESS one might write something like:

@blue-color: #0066cc;

some.div {
	background:@blue-color;
	border:1px solid darken(@blue-color, 10);
}

@other-color: desaturate(spin(@blue-color, 30), 10);

Now that I’m thinking about it, it would also be nice to be able to nest scopes:

string {
	foreground: @orange;
	punctuation {
		foreground: lighten(@orange, 15);
	}
}
  • The “solution” I currently use, is to create very dense scope definitions:
{
    "name": "Green",
    "scope": "entity.name.class, entity.other.inherited-class, entity.name.function, entity.other.attribute-name, markup.inserted",
    "settings": {
        "foreground": "#A6E22E"
    }
}
0 Likes

#20

Doesn’t a theme file already, effectively, use a cascade? If you colour “entity.other” and also colour “entity.other.class” then this creates a cascade?

0 Likes

#21

Yes, you’re right. But I was talking about nesting two different scopes. (I’ve been tinkering with punctuation recently, so that’s what I was thinking about specifically.) For example, if you take the following CSS:

.someclass

“someclass” has a scope of: “source.css meta.selector.css entity.other.attribute-name.class.css”

While the dot has a scope of: “source.css meta.selector.css entity.other.attribute-name.class.css punctuation.definition.entity.css”

The way to style the punctuation in this case is to use a scope like “entity.other punctuation”.

In practice, this gets quite cumbersome. Here’s an example from one of my (probably misguided) styles:

{
    "name": "Green",
    "scope": "entity.name.class, entity.other.inherited-class, entity.name.function, entity.other.attribute-name, markup.inserted, at.tag.workflow, hash.tag.workflow, meta.task.completed.workflow punctuation",
    "settings": {
    	"background": "#99cc0005",
        "foreground": "#669900"
    }
},
{
    "name": "Green Punctuation",
    "scope": "entity.name.class punctuation, entity.other.inherited-class punctuation, entity.name.function punctuation, entity.other.attribute-name punctuation, markup.inserted punctuation",
    "settings": {
        "foreground": "#99cc00"
    }
},

I could be wrong, but this seemed to me to be the least painful way to write this out.

I would have preferred something like:

entity.name.class, entity.other.inherited-class, entity.name.function, entity.other.attribute-name, markup.inserted {
	background:lighten(@green, 100);
	foreground:@green;
	punctuation {
		foreground:lighten(@green,20);
	}
}

Does this make sense? :confused:

0 Likes

CSScheme - Create Color Schemes using CSS, SCSS or stylus
#22

While conceding that I haven’t explored this in detail, it still seems to me that your theme-colouring could be simplified as indicated in my previous post. But I may be wrong :smile:

It is a shame, though, that we can’t use variables in a theme-file (I think TextMate can, if I recall correctly?).

0 Likes

#23

I’m not entirely sure, either. That’s one of the reasons I wanted to raise the issue. If I’m simply going about this the wrong way, my hope is that someone would correct me. Also, editing the punctuation in this dogged manner is an experiment more than anything else. My original interest in this particular aspect came out of a legitimate question for styling Markdown. (See: Matching multiple scopes in color syntax ). What I think I am doing is using the cascade.

I just spent a couple minutes looking at the Espresso Soda theme, which tinkers with the punctuation of strings and they do it by editing (separately) the scopes for “string” and “string punctuation”. So I suspect there’s no better fix.

Edit: yes, variables would be great.

0 Likes

#24

The only other suggestion I have it to explore the idea of stating the scope from the end, rather than the beginning :question:. So, for example, just scope “punctuation” and then also “something.punctuation”. I would try skipping parts of the scope: “firstbit.lastbit”, but I don’t how this would work without experimenting - I suspect it would need careful (strategic!) planning.

If I ever do this again I might consider:
Opening a large file for my chosen language;
Create a command to extract ALL of the scopes into a view;
Sort this list and remove duplicates.

Actually, I would perhaps go a stage further and create a dictionary from this list of scopes :smiley:. But I know that this doesn’t help you at this point… Soz.

Andy.

0 Likes

#25

[quote=“quodlibet”]

entity.name.class, entity.other.inherited-class, entity.name.function, entity.other.attribute-name, markup.inserted {
	background:lighten(@green, 100);
	foreground:@green;
	punctuation {
		foreground:lighten(@green,20);
	}
}

Does this make sense? :?[/quote]

I like that. It’s (S)CSS, it’s human readable and more importantly it’s parsable. You can do it just like SaneSnippets. Make a tmLanguage definition for this type of a theme, write the parser in Python and now you have your tmTheme. It could even be automatically parsed when saving a file with a specifix extension (see SaneSnippets). Yeah, I already have concepts for that, but no time I’m afraid.

0 Likes

#26

Is this project still going on? Did anything ever come of it? I might be able to help out if progress has stalled. I’d really love to see this reach the finish line. :smile:

0 Likes

#27

Maybe I’m being a bit naive, but…

I’ve been using “TextMate’s Built-in Theme Editor” to create my own custom color schemes. This saves as a “.tmtheme” file which is interpreted / compatible with Sublime Text 2 when placed in the “packages” folder.

Right???

0 Likes

#28

Yes, Textmate themes work (for the most part) just fine in ST2… but that doesn’t help those of us using Windows. :wink:

0 Likes

#29

If you’re talking about a scheme builder in general I doubt that someone has started with that. I am still planning to write the CSS-like language including a parser as I mentioned above but apparently I want to finish my ongoing projects first. You are free to start with that on your own and when I have some time again I might help you out with that.

However, you can try using AAAPackageDev (more specifically this fork which I’m currently developing as a pull request) to write the definition in YAML and then convert it into plist. I recommend you to read the comments in that pull request for instructions on how to use, though.

0 Likes

#30

You might want to try my color scheme editor here:

https://a248.e.akamai.net/camo.github.com/41173d7778f610ef3cc0e73ecb5f684a9f438eaf/687474703a2f2f662e636c2e6c792f6974656d732f314c317530423252327832363148335a343031562f53637265656e25323053686f742e706e67

0 Likes

#31

the theme builder is great if you know the list of scopes or their construction method. i, for one, have no idea how to determine what part of my code fits what scope, and, unlike Aptana (for all it’s ridiculous faults), there is no command in SB2 to determine text… at least not that i can find.

so. how the heck to we determine scope such that we can build a theme around it?

thanks!

WR!

0 Likes

#32

[quote=“DubRBang”]so. how the heck to we determine scope such that we can build a theme around it?
[/quote]

github.com/facelessuser/ScopeHunter

There also other, less fancy plugins around the forums.

0 Likes

#33

“ctrl-alt-shift-p” works well for most cases. If the covered scope is too long (and exceeds the statusbar) or you want to copy it/use multiple cursors:

import sublime_plugin

class PrintScopeCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        for sel in self.view.sel():
            if sel.empty():
                row, col = self.view.rowcol(sel.a)
                print("line %d, col %d: %s" % (row + 1, col + 1, self.view.scope_name(sel.a)))
0 Likes