Colored file list items

[SonOfDiablo]

trafficstars

Describe the change you'd like Coloring the file names in the file list of a repo based on the extension.

Additional context Some like this userscript GitHub file list beautifier

Here is a screenshot of how it looks like with the GitHub Dark theme and the Userscript (The icons are from this browser extension and not part of this feature request)

[the-j0k3r]

Hello @SonOfDiablo

I'm not sure this is possible with just CSS, given the selectors are pretty much the same. If it is possible, it would be a massive addition and great deal of work to color by file type and this would likely be a Feature Override Style.

Also I have no interest in this personally, too much work for something that for better or worst already exists in script form for those who like yourself prefer this...

IF you do really want this, feel free to submit a PR to Feature Override Style. I'll be glad to help wherever possible, but wont take on this job myself otherwise.

Second opinion @Mottie @xt0rted.

[xt0rted]

With github's current html setup this is possible in css, but it's not something that should ever be part of this theme. The html also makes no distinction between file and folder links so folders will be a little harder to style, but files should be nothing more than:

.files a[title="authors" i] {
  color: lime;
}

.files a[title$=".js" i] {
  color: yellow;
}

[the-j0k3r]

Well easy is relative, all the file types alone is no easy ask.

[the-j0k3r]

Here is a list for reference of file types https://en.wikipedia.org/wiki/List_of_file_formats#Physical_recordable_media_archiving

The best way to go about this, would be to do it in groups of like files as link indicates and each group would be colored individually that way you dont run out of colors or use too similar colors, although the latter would be minimized by allowing group color customization.

To be of any use this feature style would need to be at least a the most common file types entries long and would have a dedicated developer to add more in order to get to completion.

Just looking at the Wikipedia page is a daunting list.

Hope this info is of help.

[SonOfDiablo]

I do agree that this would probably fit better as a Feature Override Style as @the-j0k3r said. And yes there is a quite a lot of extensions, but, there is also no need to reinvent the wheel.

Other people has worked on with the same "issue" on different platforms and so far the most comprehensive work I have stumbled upon is the LS_COLORS project by trapd00r and a whole lot of contributors.

The main branch has about 590 extensions neatly sorted and already color coded with 256 Xterm colors. And the motherofgod branch has a what seems like (at a quick glance) a few thousands, not neatly sorted, but all color coded.

I would be happy to give a swing at converting from one of these lists to CSS in the format that @xt0rted suggested, however I probably wouldn't be able to keep the list up to date (personal issues currently prevents me from any long term commitments such as that)

[the-j0k3r]

If you look at this style you would be able to do something like

/* ==UserStyle==
@name        GitHub Colored File Types
@namespace   StylishThemes
@version     1.0.0
@description A GitHub style with customizable file type colors
@author      StylishThemes and contributors
@homepageURL https://github.com/StylishThemes/Feature-Override-Styles/
@supportURL  https://github.com/StylishThemes/Feature-Override-Styles/issues
@license     CC-BY-SA-4.0

@var color    color-1                     "Text file" blue
@var color    color-2         "Programming languages" yellow
@var color    color-3  "Markup languages and formats" lime

@preprocessor stylus
==/UserStyle== */

@-moz-document domain("github.com") {
  /* text based colors */
 .files a[title="authors" i], .files a[title*="LIC" i] {
    color: color-1;
  }
  /* Programming languages and scripts */
  .files a[title$=".js" i] {
    color: color-2;
  }
  /* Markup languages and other web standards-based formats */
  .files a[title$=".md" i] {
    color: color-3;
  }
}

That follows the https://en.wikipedia.org/wiki/List_of_file_formats grouping them as documented with specific assign and customizable colors. This could be default xterm or any other suitable, because its customizable doesn't matter beyond what the designer decides.

[SonOfDiablo]

I'm sorry for not responding sooner.

I started working on this yesterday, I have already added a fair bit of extensions, I just need to tweak it all a bit.

Should I submit a pull request to Feature Override Styles once done?

[the-j0k3r]

Should I submit a pull request to Feature Override Styles once done?

Sure, can we have a sneak peek?

[SonOfDiablo]

Here is what I got so far: https://gist.github.com/SonOfDiablo/efa52b784404444cfe93ba18f1684dc6

I'm planning to change the colors (at least make sure they follow the WCAG Guidelines) and maybe move some file types to other groups.

[the-j0k3r]

Looking very good indeed =)

Its a hell of a long config menu though lol but thats if we want the colors to be customized, mmm

[the-j0k3r]

I see that youre duplicating many colors, I wonder if its worth thinking about reusing the same color so as to make this long list a bit smaller, else it will be impossibly long menu to configure

like

@var color    color-11                          "Powerpoint With Enabled Macros" #000080
@var color    color-12                     "Powerpoint Show With Enabled Macros" #000080

Youre assigning colors per file it seems, I would consider assigning colors per groups of like files,

Also I would suggest more generic option titles maximum 3/4 not so long words

What do you think?

[SonOfDiablo]

Yea that's the next thing I'm going to look at. I just did a pretty rough first draft yesterday.

As for the groupings, some of them (like with the two you used as examples) should probably be grouped together, however, I would personally prefer if other (example being css and html) be colored differently. They might be related, but if we color all related types the same it would kind of defeat the purpose, as I see it as being a way to easily differ between related, but different types.

That being said, I do hope to lower the number of groups when I go through the list a few more times tidying up. I will probably also add some missing types and remove some types that isn't typically seen on GitHub (like the .r0..99 extensions for split rar files)

[the-j0k3r]

Ive just re-stumbled into this thread @SonOfDiablo any advances?

I have other ideas regarding coloring, but instead of assigning a different color to each you can lighten/darken a given existing defined color based on differences so as being a way to easily differ between related like you want.

So you define say 10 customizable colors so people dont have to scroll and assign accordingly.

/* ==UserStyle==
@name        GitHub Colored File Types
@namespace   StylishThemes
@version     1.0.0
@description A GitHub style with customizable file type colors
@author      StylishThemes and contributors
@homepageURL https://github.com/StylishThemes/Feature-Override-Styles/
@supportURL  https://github.com/StylishThemes/Feature-Override-Styles/issues
@license     MIT

@var color    blueC   "Text file"                    blue
@var color    yellowC "Programming languages"        yellow
@var color    redC    "Markup languages and formats" red
@var color    greenC  "Some title"                   green

@preprocessor stylus
==/UserStyle== */

@-moz-document domain("github.com") {
  /* text based colors */
 i = !important
  [aria-labelledby*="files"] a[title="authors" i],
  [aria-labelledby*="files"] a[title*="LIC" i] {
    color: lighten(blueC, 30%) i;
  }
  [aria-labelledby*="files"] a[title$=".js" i] {
    color: yellowC i
  }
  [aria-labelledby*="files"] a[title$=".html" i] {
    color: redC i
  }
  [aria-labelledby*="files"] a[title$=".css" i] {
    color: lighten(redC, 30%) i
  }
  [aria-labelledby*="files"] a[title*=".json" i] {
     color: darken(yellowC, 50%) i
  }
  [aria-labelledby*="files"] a[title*=".sh" i] {
     color: darken(greenC, 10%) i
  }
  [aria-labelledby*="files"] a[title*=".lock" i] {
     color: lighten(greenC, 40%) i
  }
  [aria-labelledby*="files"] a[title*=".md" i] {
     color: greenC i
  }
}

You can even mix colors but with user customizable colors, you will hit a limit unless using advanced color mixins

In any case if you're sensible with your choices you will be able to make the usercss menu a much simpler and not scrolling fro 100 colors while keeping them different enough.

The option names for the color in usercss menu have to be max 3/4 words always strife to make it as short as possible

Also the selectors are now completely different from .files a[title="authors" i] its now [aria-labelledby*="files"] a[title="authors" i]

preview

[SonOfDiablo]

@the-j0k3r Sounds like a good idea, however some personal stuff has come up and I haven't had much time to work on this sadly. I don't think I will be able to do anything for a while either :/