search

xndcn / symbols-tree-view

A symbols view like taglist for Atom.io
MIT License
116 stars 45 forks source link

Colors for the Symbol icons (and/or) names #90

Open tabascoeye opened 8 years ago

tabascoeye commented 8 years ago

How about coloring the icons in the view so that it's even easier to distiguish between what types of symbols the user is looking at?

Options for coloring:

in a second step, the colors could even be taken from the used syntax highlight theme (kind of like "minimap" does it) and then the symbol icon colors would match each user's custom settings. That would also limit complaints like "why not choose $color instead of $color for $symbol-type?".

Example: symbols-tree-view-colors

[note: this example was not matched to my syntax highlighting. Just added colors in the CSS]

DangerBlack commented 8 years ago

You can edit the styles.less

in this way

span.icon-variable{
    color: red;

}
span.icon-function{
    color: green;
}

Not the same but is a start point...

tabascoeye commented 8 years ago

That is what I did for the mockup screenshot above. But it would make much more sense to have it bound to the syntax theme so that it is "right" for everybody.

DangerBlack commented 8 years ago

yeah you're right! I just posted here for who will come here like me and want a quick and dirt solution...

rubenwardy commented 7 years ago

Dear future reader:

  1. Edit > Stylesheet

  2. Paste this template. My preferences, based on one dark theme

    span.icon-class, span.icon-struct, span.icon-typedef {
    color: #c678dd;
}
span.icon-variable, span.icon-member {
    color: #e06c75;
}
span.icon-function {
    color: #61afef;
}
span.icon-macro {
    // color: green;
}

  3. Modify to will. You can use the chrome console to get colors of existing text (View > Developer > Toggle Developer Tools)

  4. You'll may need to restart Atom to see changes.