Sublime Forum

Theme not displaying as created

#1

created a theme using @Aziz’s webapp. for the most part it works well, but i am seeing that a LOT of sub-sections aren’t rendering as expected. here’s an example:

theme-created-vs-displayed.jpg800×600 113 KB

what i’m wondering is whether or not the specificity needs to be dialed in more exactly for the colours to work properly in ST3. i noticed, for example, the yellow function variables (fn, context) are scoped

source.js meta.function.js variable.parameter.function.js

in @Aziz’s webapp, but are scoped

source.js meta.function.declaration.js variable.parameter.function.js

in ST3. does not the most specific scope declaration determine colouring?? in otherwords, wouldn’t

variable.parameter.function.js

be all that is required? at any rate, any help here would be welcome.

0 Likes
#2

It would help greatly if you would post a link to the theme.

0 Likes
#3

it looks like that editor creates a rule for variable.parameter so it seems odd that it wouldn’t work. As @ThomSmith says, sharing your theme file could help us identify where it is going wrong.

that what was created is in a cool font btw, what font is it? :slight_smile:

0 Likes
#4

font is called Slackey. :slight_smile:

1 Like
#5

okay. here the theme: https://goo.gl/FnTsja please respect the copyright.

0 Likes
#6

Your scopes are too specific. For instance, here:

		<dict>
			<key>name</key>
			<string>JS Parameter</string>
			<key>scope</key>
			<string>source.js meta.function.js variable.parameter.function.js</string>
			<key>settings</key>
			<dict>
				<key>foreground</key>
				<string>#BFD64D</string>
			</dict>
		</dict>

You should instead specify variable.parameter. There’s no need to include the parent scopes. There’s certainly no need to make is JavaScript-specific. The way you’re doing it, your color scheme would only work for the specific languages you specify. In addition, the excessive specificity is causing it not to work. Your selector source.js meta.function.js variable.parameter.function.js does not match source.js meta.function.declaration.js variable.parameter.function.js, because meta.function.js does not match meta.function.declaration.js. The slightly looser meta.function would match meta.function.declaration.js, but you don’t need to match the meta scope at all.

Look at the selectors that other color schemes use. For example, Monokai matches function parameters with variable.parameter.

Are you serious?

2 Likes
#8

i’ll take a look and revamp. but i DO want it language specific… so that part is required. i hated Monokai because it didn’t differentiate (among other things) but can i dump the middle parts and just do something like this:

source.js variable.parameter.function.js

would that work okay? i’ll give it a shot later tonight and see, but in the meantime, if this passes, i’d appreciate a go-noGo to save me some time. :slight_smile:

thanks for the pointer, regardless…

0 Likes
#9

What, exactly, do you want?

0 Likes
#10

what i have works…ish. i can tell just by looking if i’m working with a specific language. i just want more specific colouring, as i designed with the webtool, because i’m . that’s all. i know a lot of coders use the same colouring regardless of language. i’m not that way. the thing that irritates a little bit, is that in ST2, it worked exactly as designed. since i bit the bullet and upgraded to ST3, it took me a bit to realize the niggly bits that were missing. so now i’m trying to get those bits back because they make a HUGE difference in how i process my code. so. to sum up: what i want is to see in ST3 the colouring i designed in @Aziz’s webapp. i’m going to tinker with adjusting the scope specificity, which surprises me. i would never have thought that clearer specificity would be a handicap! :stuck_out_tongue:

0 Likes
#11

The more specific your target is described, the less flexible it will be regaring potential changes of that target. The JavaScript syntax has undergone quite a lot of changes and improvements since ST2 and JavaScript in general is evolving at an incredible pace compared to others. When trying to draft scope selectors, try to make them only as specific as necessary to leave room for flexibility, as outlined by this issue.

Another way to bind certain colors to certain syntaxes would be to just prefix them with e.g. source.js to build source.js variable.parameter. That way they will keep working for the foreseeable future, since these scopes have been standardized in conventions, but still allow for changes to the precise scope name in case something like variable.parameter.keyword.js gets added for name-anchored parameter values (which is a current draft for JS iirc). The downside is that any code embeded within JavaScript (which is none) would also be matched by this selector.

3 Likes
#12

@FichteFoll thankyou for the explanation. in digging deeper, i now see what you’re talking about. truthfully, i never thought of this sort of thing even though i am aware of the rapid evolution of JavaScript. it’s a layer that i took for granted. :stuck_out_tongue: thanks for taking the time to lay it out. i truly appreciate it. :smiley:

@ThomSmith i also appreciate your efforts to put my nose on the right trail. i am seeing what i need to do and honestly wouldn’t have gotten there without your help. thanks again. :slight_smile:

if you like, when i get it working as i designed it, i’d be happy to post the working version if anyone likes it. i realize it’s not to most people’s taste… but what the heck. :slight_smile:

0 Likes
#13

i do have one remaining thing i’d like to ask before i button this up. other than declaring syntax, can i skip the intermediate definitions and just do something like:

source.js entity.name.function.js

instead of the ‘complete’ scope of this:

source.js meta.function.js entity.name.function.js

if that’s doable and more friendly, i’d like to know because it actually makes this all a heck of a lot easier… TIA!

0 Likes
#14

Yes, in fact, if you want to make the rule JavaScript-specific, I would just use source.js entity.name.function. This way, it would also match scopes like entity.name.function.async.js. (I don’t recall off the top of my head which such scopes are used in the JavaScript syntax definition.)

0 Likes