Hi there, welcome to Atom!
In Atom (and Sublime Text I believe) syntax highlighting is a two part process. For effective syntax colours, you need:
- A grammar package (ones with the name
- A theme
The grammar package is responsible for giving each character a set of scopes. These scopes represent information about the character. For example, characters in a JS comment might have the scope
comment.line.js. You can check the scope of a character by running
Editor: Log Cursor Scope in the command palette.
By themselves, scopes don’t do anything. However, your theme will have a bunch of rules that link colours to specific sets of scopes. For example, there may be a rule that says comments (scopes that start with
comment) should be italicised grey. Likewise, there could be a rule that colours the
entity.name.function scope a certain way.
In fact, the built in
one-dark-syntax theme has a rule for this.
It’s a little hard to read, but basically just ignore the
syntax-- parts and see that it’s giving the
@hue-2 colour (defined elsewhere) to
With your code, this theme makes it look like the following (regular text colour is white):
In your case, (assuming you are using
language-js) it seems the theme you are using does not have support for this scope. As I’ve shown,
one-dark-syntax supports it quite well. If you prefer light themes, there is
one-light-syntax (also a builtin). I have not tested with
language-typescript, but I believe it also has scopes for the function names.
Check your current theme to see if the author intentionally limited the variety of colours (so-called ‘minimalistic’ themes). If not, you might want to raise an issue on their GitHub repo, and let them respond.