Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Patched Adaptive.sublime-theme for modifying the color of files in the sidebar based on their git status
[
// VCS badges
{
"class": "vcs_status_badge",
"parents": [{"class": "file_system_entry", "attributes": ["untracked"]}],
"layer0.texture": "Theme - Default/common/status_untracked.png",
"layer0.tint": "color(var(--yellowish) blend(rgb(255, 255, 255) 60%))",
"layer0.opacity": 1.0,
"content_margin": 6
},
{
"class": "vcs_status_badge",
"parents": [{"class": "file_system_entry", "attributes": ["modified"]}],
"layer0.texture": "Theme - Default/common/status_modified.png",
"layer0.tint": "color(var(--bluish) min-contrast(var(--background) 2.5))",
"layer0.opacity": 1.0,
"content_margin": 6
},
{
"class": "vcs_status_badge",
"parents": [{"class": "file_system_entry", "attributes": ["staged"]}],
"layer0.texture": "Theme - Default/common/status_staged.png",
"layer0.tint": "color(var(--purplish) min-contrast(var(--background) 2.5))",
"layer0.opacity": 1.0,
"content_margin": 6
},
{
"class": "vcs_status_badge",
"parents": [{"class": "file_system_entry", "attributes": ["added"]}],
"layer0.texture": "Theme - Default/common/status_staged.png",
"layer0.tint": "color(var(--greenish) min-contrast(var(--background) 2.5))",
"layer0.opacity": 1.0,
"content_margin": 6
},
{
"class": "vcs_status_badge",
"parents": [{"class": "file_system_entry", "attributes": ["unmerged"]}],
"layer0.texture": "Theme - Default/common/status_unmerged.png",
"layer0.tint": "color(var(--redish) min-contrast(var(--background) 2.5))",
"layer0.opacity": 1.0,
"content_margin": 6
},
{
"class": "vcs_status_badge",
"parents": [{"class": "file_system_entry", "attributes": ["deleted"]}],
"layer0.texture": "Theme - Default/common/status_staged.png",
"layer0.tint": "color(var(--pinkish) min-contrast(var(--background) 2.5))",
"layer0.opacity": 1.0,
"content_margin": 6
},
{
"class": "vcs_status_badge",
"parents": [{"class": "file_system_entry", "attributes": ["missing"]}],
"layer0.texture": "Theme - Default/common/status_modified.png",
"layer0.tint": "color(var(--pinkish) min-contrast(var(--background) 2.5))",
"layer0.opacity": 1.0,
"content_margin": 6
},
{
"class": "sidebar_label",
"parents": [{"class": "file_system_entry", "attributes": ["ignored"]}],
"color": "color(var(--background) blend(rgb(255, 255, 255) 70%))"
},
{
"class": "sidebar_label",
"parents": [
{"class": "window", "attributes": ["file_light"]},
{"class": "file_system_entry", "attributes": ["ignored"]}
],
"color": "color(var(--background) blend(rgb(0, 0, 0) 70%))"
},
// VCS Filenames.
{
"class": "sidebar_label",
"parents": [{"class": "file_system_entry", "attributes": ["untracked"]}],
"color": "color(var(--yellowish) blend(rgb(255, 255, 255) 75%))"
},
{
"class": "sidebar_label",
"parents": [{"class": "file_system_entry", "attributes": ["modified"]}],
"color": "color(var(--bluish) blend(rgb(255, 255, 255) 75%))"
},
{
"class": "sidebar_label",
"parents": [{"class": "file_system_entry", "attributes": ["staged"]}],
"color": "color(var(--purplish) blend(rgb(255, 255, 255) 75%))"
},
{
"class": "sidebar_label",
"parents": [{"class": "file_system_entry", "attributes": ["added"]}],
"color": "color(var(--greenish) blend(rgb(255, 255, 255) 75%))"
},
{
"class": "sidebar_label",
"parents": [{"class": "file_system_entry", "attributes": ["unmerged"]}],
"color": "color(var(--redish) blend(rgb(255, 255, 255) 75%))"
},
{
"class": "sidebar_label",
"parents": [{"class": "file_system_entry", "attributes": ["deleted"]}],
"color": "color(var(--pinkish) blend(rgb(255, 255, 255) 75%))"
},
{
"class": "sidebar_label",
"parents": [{"class": "file_system_entry", "attributes": ["missing"]}],
"color": "color(var(--pinkish) blend(rgb(255, 255, 255) 75%))"
},
]
@rudwolf

This comment has been minimized.

Copy link

rudwolf commented Mar 12, 2019

Hey man, could you help me on how to install / use this color scheme?

@arxeiss

This comment has been minimized.

Copy link

arxeiss commented Jul 2, 2019

Just download file and paste into User folder.

Win: C:\Users<acc>\AppData\Roaming\Sublime Text 3\Packages\User
Ubuntu: ~/.config/sublime-text-3/Packages/User

@OdatNurd

This comment has been minimized.

Copy link
Owner Author

OdatNurd commented Jul 2, 2019

Indeed, sorry @rudwolf for not responding to this back when you asked the question, I didn't get any notification that you asked.

As @arxeiss mentions, in order to use this you just need to place the file in your User package and it will immediately take effect. As a shortcut, you can find your User package by choosing Preferences: Browse Packages from the command palette or the main menu; the User folder inside of the file browser that opens is the place to put the file.

If you use a different theme you can rename the file to match your theme in order to have it take effect for that theme instead. The name of the file should match the name of your theme setting in your preferences.

Note also that you may or may not want to also adjust the color specifications as appropriate for your own theme/use case. Documentation on how colors work in Sublime Theme files is available here.

@arxeiss

This comment has been minimized.

Copy link

arxeiss commented Jul 3, 2019

Thank you @OdatNurd for this snippet, I currently changed it into Package with colors and icons of VS Code: https://github.com/arxeiss/Sublime-GitBadgesLikeVSCode

Hope you are OK with that 😇

@OdatNurd

This comment has been minimized.

Copy link
Owner Author

OdatNurd commented Jul 5, 2019

That's totally awesome, nice work! For sure I'm OK with that. 😁

@arxeiss

This comment has been minimized.

Copy link

arxeiss commented Aug 7, 2019

Thank you :) Plugin was already accepted by Sublime masters and it lives here: https://packagecontrol.io/packages/Git%20badges%20like%20VS%20Code

@michaelblyons

This comment has been minimized.

Copy link

michaelblyons commented Dec 6, 2019

Sometime in the past, I adapted lines from Toxin.sublime-theme into a set of Adaptive.sublime-theme overrides in /User. The thing I liked about Toxin was that expanded folders only showed the badge, without the label color at every level (but files and collapsed folders had the whole label colored).

I cannot for some reason get your file above to do that. Either all labels are colored or none of them are. I expect it has something to do with {"class": "tree_row", "attributes": ["!expanded"]}, but tinkering with it hasn't helped.

@OdatNurd

This comment has been minimized.

Copy link
Owner Author

OdatNurd commented Dec 6, 2019

Hmm interesting. I have to admit that this file represents about the most complex thing I've come up with on my own regarding theming. At some level it seems a little bit like a black art and I need to spend more time getting comfortable with it.

That sounds like an interesting idea; I'll try to carve out some time to play with that and see if I can figure out what's going on.

@arxeiss

This comment has been minimized.

Copy link

arxeiss commented May 2, 2020

@michaelblyons I think I was able to achieve what you were asking. Look at my package: https://github.com/arxeiss/Sublime-GitBadgesLikeVSCode and I added this piece of code as last entry to Adaptive.sublime-theme.

{
    "class": "sidebar_label",
    "parents": [{"class": "tree_row", "attributes": ["expandable", "expanded"]}],
    "color": "color(var(--white))"
},

See the picture, folder app is highlighted because is collapsed but routes is not, because is expanded. But both have the badge.
image

@michaelblyons

This comment has been minimized.

Copy link

michaelblyons commented May 2, 2020

@arxeiss Hahaha, cute! Assigning the color back to the default if it's an un-expanded folder. Thanks for the tip. 😉

I have a few questions about your package:

  1. Does it work with any color scheme? (It looks like it does, since the ReadMe screenshot is Monokai, and you have something different above.)
  2. Can I still use my own downstream overrides in Packages/User?

If yes, I think I'm sold. 👍

@arxeiss

This comment has been minimized.

Copy link

arxeiss commented May 2, 2020

Good questions

  1. It should work with any color schema. I created both Adaptive and Default theme, and it uses schema colors. It should be OK
  2. Yes, this is how Sublime works, it is merging all sources together. I created file Packages/User/Adaptive.sublime-theme and all I inserted is code below. After saving, Sublime immediately applied those changes you requested above.
{
    "rules": [
        {
            "class": "sidebar_label",
            "parents": [{"class": "tree_row", "attributes": ["expandable", "expanded"]}],
            "color": "color(var(--white))"
        }
    ]
}

@michaelblyons

This comment has been minimized.

Copy link

michaelblyons commented May 2, 2020

Whoa, this is great! I like it a lot. Thanks for the clarification, too. At first, I thought your package had the exception for expanded folders by default.

@michaelblyons

This comment has been minimized.

Copy link

michaelblyons commented May 8, 2020

@arxeiss There's a small bug that I cannot work out. Expanding a .gitignored folder now un-dims it. I tried making an exception with

    {
        "class": "sidebar_label",
        "parents": [{"class": "tree_row", "attributes": ["expandable", "expanded", "!ignored"]}],
        "color": "color(var(--white))"
    }

but that isn't working. Do you know what I'm doing wrong?

@arxeiss

This comment has been minimized.

Copy link

arxeiss commented May 9, 2020

@michaelblyons here:

{
    "rules": [
        {
            "class": "sidebar_label",
            "parents": [
            	{"class": "tree_row", "attributes": ["expandable", "expanded"]},
            	{"class": "file_system_entry", "attributes": ["!ignored"]}
            ],
            "color": "color(var(--white))"
        }
    ]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.