Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Coloured devicons out of the box #158

Open
zeorin opened this issue Jul 18, 2016 · 17 comments
Open

Coloured devicons out of the box #158

zeorin opened this issue Jul 18, 2016 · 17 comments

Comments

@zeorin
Copy link

zeorin commented Jul 18, 2016

It'd be a cool feature if coloured devicons worked out of the box. Perhaps include some colour maps for the stock shipped colorschemes and some popular 3rd party ones, a mechanism for users to define their own colour map for colorschemes, falling back to standard terminal colours for terminal vim and the actual colours as per filetype's official colour for GUI vim (e.g. Gulp's #cf4646 for the Gulp icon).

By reading and adapting the section in the README, I've got coloured devicons set up.
I'm using the Solarized colorscheme, so I've chosen the colors that match the palette. You can look at https://github.com/zeorin/dotfiles/blob/e01cebf/.vimrc#L864-L900 for how I did this in my .vimrc.

screenshot from 2016-07-18 09-18-35

screenshot from 2016-07-18 09-19-22

screenshot from 2016-07-18 09-29-37

screenshot from 2016-07-18 09-29-28

@ryanoasis
Copy link
Owner

Hey @zeorin I remember you mentioned this previously on chat. I really like how that looks and I wanted to add something like this to vimdevicons however @tiagofumo has created something since then that might make that work redundant, he wanted to do a separate repo it is here: https://github.com/tiagofumo/vim-nerdtree-syntax-highlight

What do you think?

Btw, I like your implementation it is very clean

@zeorin
Copy link
Author

zeorin commented Jul 20, 2016

That would work only with NERDTree, I assume?

As you can see on line https://github.com/zeorin/dotfiles/blob/e01cebf/.vimrc#L870, my addition allows you to choose the file types in which the highlighting happens. To add Startify highlighting I added a comma and a word.

Also, I think having this as standard would be more appropriate than a separate repo/plugin.

It's your call. I've got what I want already 😄

@tiagofumo
Copy link
Contributor

@zeorin your code looks very clean.

When I created my solution for this I really didn't put much time to think where and how I would do it. I think I just got upset with the fact there was no syntax identifier for specific file types and I started by trying to add it. I also couldn't find anyone who cared enough about it at the time, so I just did whatever I thought was a good idea.

There is one tiny little difference in your solution though. Your code focuses on adding the color to the icon, so the same icon cannot have different color for different files. Even though I do have same icons with different color sometimes (like the html5 icon is orange for html and red for rails' .html.erb, as one can see on the screenshot at my repo), I could just add different icons if needed (like the rails symbol to .html.erb files similar to other editors).

I don't try at any point to justify my solution to this feature. Like I said, your code looks much better and clean, and I also think would be better if vim-devicons had this functionality by itself. But I just feel like you: "It's your call. I've got what I want already 😄"

@ryanoasis
Copy link
Owner

That would work only with NERDTree, I assume?

Ah sorry I did not know that!

Also, I think having this as standard would be more appropriate than a separate repo/plugin.

I would be up for that actually.

If either of you want to submit a PR I would be happy to get something merged in (even if https://github.com/tiagofumo/vim-nerdtree-syntax-highlight is around)

Linking to https://github.com/tiagofumo/vim-nerdtree-syntax-highlight will/should still be done in the readme

@0phoff
Copy link
Contributor

0phoff commented Jan 5, 2017

Sorry to bump this thread but I wanted to know if you are any close to implementing this?
If not, then I will implement Zeorin's code to work for a Unite Buffer, whilst waiting for your implementation! :)

Could this also work for lightline (or any other statusbar, but I use lightline...)?
Do statusbar have their own filetype defined for highlighting?

Thank you in advance for answering my (maybe silly) question! :)

@zeorin
Copy link
Author

zeorin commented Jan 5, 2017

I've not worked on this because it's working fine for me with my setup. However, it'd be really nice to have it in the plugin by default.

I'll have a look at it, but don't expect anything right away ;-)

@0phoff
Copy link
Contributor

0phoff commented Jan 10, 2017

Here is what I came up with
I think I took the best of both @zeorin's and @tiagofumo's solution...
It is RGB-based like tiagofumu's solution, but uses vim syntax highlighting like zeorin.

I also got colored icons working for the lightline plugin HereI use it in my filenameMod component
My implementation has a few things that need to be fixed if you want to make it work with all the different colorschemes (currently doesnt work if the icon is in a part with a background that changes color)

Do whatever you want with the code... I'm not sending a pull request as I have never done that before and I'm just a beginner in VimL, so I wouldn't really know where to put the code...

ps: While testing my code, I found a small bug. svg-files should get the same icon as images imo!

llimg

ntimg

@ryanoasis
Copy link
Owner

Sorry for the delayed responses all.

@0phoff Looks pretty cool thanks. I understand your reasons for not sending a PR so no worries but feel free to change your mind as well 😉

Good catch on the svg icons! Yes you are correct those should be the same as the other images or some similar image icon.

@cmartinio
Copy link

Hi zeorin , Great job. Is there a way you can write the installation procedure? How can i go about accomplishing what you have done with your .vimrc

@basicBrogrammer
Copy link

This worked great for me. I had to add the elixir icon but the DeviconsColors was super easy to read so that was simple 👍

@mawkler
Copy link

mawkler commented Jun 11, 2020

How would I go about to get this feature? The links by @0phoff no longer work.

@polyzen
Copy link

polyzen commented Jun 11, 2020

https://github.com/tiagofumo/vim-nerdtree-syntax-highlight

Edit: Nvm misread.

@0phoff
Copy link
Contributor

0phoff commented Jun 12, 2020

How would I go about to get this feature? The links by @0phoff no longer work.

Sorry, I completely overhauled my VIM settings since and got rid of these icons, in favor for a more minimal look ... 🤷‍♂️

Here are both links, which I took from previous commits of my DotFiles repo:

@Shatur
Copy link

Shatur commented Jul 21, 2020

Thanks, I wrote a similar solution but in lua (Neovim 0.5+) and I am reusing already existing groups.

Funtion itself in lua/devicons.lua:

local M = {}

function M.set_icon_colors(config, filetypes)
  local joined_filetypes = table.concat(filetypes, ",")
  vim.api.nvim_command('augroup DeviconsColors')
  vim.api.nvim_command('autocmd!')
  for group, icons in pairs(config) do
    vim.api.nvim_command(string.format('autocmd FileType %s syntax match %s /\\v%s./ containedin=ALL', joined_filetypes, group, table.concat(icons, '.|')))
  end
  vim.api.nvim_command('augroup END')
end

return M

Then you can use the following inside your configuration:

let g:devicons_colors = {
      \ 'String': [''],
      \ 'Type': ['', '', ''],
      \ 'Statement': ['', '', ''],
      \ 'Number': ['', '', ''],
      \ 'Function': ['', ''],
      \ 'Identifier': [''],
      \ 'Normal': ['', '', '', '', '', '', '', ''],
      \}

lua require'devicons'.set_icon_colors(vim.g.devicons_colors, {'startify', 'fern'})

@lambdalisue
Copy link

lambdalisue commented Jul 28, 2020

Thanks for the code. I've made a plugin for this which use a similar approach.
The default palette of the plugin is not enough compared to the vim-nerdtree-syntax-highlight so any help would be welcome.

https://github.com/lambdalisue/glyph-palette.vim

@bryanmylee
Copy link

bryanmylee commented Dec 1, 2020

I recently got introduced to vim-devicons and stumbled upon this thread.

As a follow up to @Shatur95 and @lambdalisue 's solutions, I've written a pure Vimscript plugin to generate and highlight the icons with the current colorscheme's common highlight groups.

https://github.com/bryanmylee/vim-colorscheme-icons

While there is not much customizability, it should allow you to instantly get decent colorization of the icons that match the current theme.

@poetaman
Copy link

poetaman commented Feb 4, 2021

@zeorin I used your code snippet you reference in this thread. Though when I change colorscheme, the devicon colors disappear. How would you go about resolving that.

Update:
For @zeorin's solution, adding the following updates the devicons colors correctly after changing colorscheme.

	augroup devicons_updatecolors
		autocmd!
		exec 'autocmd ColorScheme * doautoall devicons_colors FileType'
	augroup END

Further question:
Is there a faster option, or perhaps is this a heavy hammer?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests