Javacript highlight colors not being displayed correctly

[TerrenceLJones]

I am experiencing an issue with the syntax highlight of my Javascript files. Here a before and after screen shot (the first screenshot is from a couple weeks ago...the second is from today). I have not knowingly changed anything. Does anyone know how this could have happened and how I could fix it?

[50Wliu]

Your Atom most likely updated to 1.4.0 which contains many language-javascript improvements. You can "fix" it by following the steps here: https://github.com/atom/one-dark-syntax/issues/60#issuecomment-172628426 (provided you're using a syntax theme that follows conventions).

See also #263, #258, and atom/atom#9562.

Though your issue title mentions "colors not being displayed correctly"...can you please elaborate on what you think is being colored incorrectly?

[TerrenceLJones]

@50Wliu Sorry I didn't know of any other way to describe what I meant. The EditTask.DurationDroplistComponent for my Marionette view has always had a white color...now it has a green color...So to me it is not displaying correctly (or as it has normally been displayed).

[50Wliu]

Yep, before that didn't have any specific scopes associated with it. Now it does, and your syntax theme picked up on that and decided to color it green.

[TerrenceLJones]

@50Wliu Will the suggested fix in https://github.com/atom/one-dark-syntax/issues/60#issuecomment-172628426 work for seti-syntax?

[TerrenceLJones]

Whelp this fix was the only thing that would override my colors:

atom-text-editor::shadow span.meta.method-call.js > span.variable.other.object.js,
atom-text-editor::shadow span.meta.method-call.js > span.entity.name.function.js,
atom-text-editor::shadow span.meta.method-call.js > span.variable.other.property.js,
atom-text-editor::shadow span.source.js > span.variable.other.property.js {
    color: #d4d7d6;
}

[TerrenceLJones]

@50Wliu The above worked briefly but, this is still an issue. I do not like the updates to the colors. Is there a specific way to change them in my stylesheet...as I've said before the suggestion in https://github.com/atom/one-dark-syntax/issues/60#issuecomment-172628426 did not work for me.

[MaximSokolov]

@TerrenceLJones replace theme-one-dark-syntax with theme-{syntax-name} (I suppose it's seti-syntax on the screenshot: theme-seti-syntax) or remove theme specific selector completely:

atom-text-editor::shadow .source.js { ... }

[TerrenceLJones]

Yep @MaximSokolov before reading your comment I removed the theme specific selector and was able to get my previous color by:

@import "syntax-variables";

atom-text-editor::shadow .source.js {
    .variable.other {
        &.property, &.object, &.readwrite {
            color: @syntax-text-color;
        }
    }

    .meta {
        &.function.body {
            .string.unquoted.js-label {
                color: @syntax-text-color;
            }

            .keyword.control.def.es {
                color: #E5CC69;
            }
        }

        &.function-call, .method-call, .function.body {
            & > .entity.name.function {
                color: @syntax-text-color;
            }
        }
    }
}

Thanks for the help!

[lijuenc]

Do we really have to keep adding these CSS hacks in our stylesheets to "fix" the new highlighting? It's obviously an issue as numerous reports have popped up in this repo and in the main atom repo. I've reverted to atom 1.3.3 just to not have to deal with this.

[marcelombc]

I agree with @durz

[stratigos]

I updated my atom packages. I now have no highlighting of any variable in any JavaScript file (all other highlighting works).

Not looking for a solution, just passing the info on that I spend more time figuring out what broke, then trying to fix it, than I can afford to spend.