Git Diff more visible



I’ve just made this. Maybe this can interest someone.

Just add this code in your stylesheet:

.editor .gutter .line-number {
    &[class*="git"] {
        padding-left: 0 !important;
        border-left: none !important;
        color: #ffffff;
        opacity: 1;

    &.git-line-added {
        background-color: rgba(168, 255, 96, 0.6);

    &.git-line-modified {
        background-color: rgba(233, 192, 98, 0.6);

    &.git-line-removed {
        background-color: rgba(204, 102, 102, 0.6);

You can improve it. Thanks to read me.


There is an option in the git-diff package settings to turn on icons, which will show icons next to each line number.


I use both of them together :grinning:


It could be great (no, very, very great ! ) to have a real visual diff inline, with a button to revert the difference with before (like Intellij does). But I do not know if it is really possible.


I am still looking for a real diff at all, even in a separate buffer (like magit). I’m puzzled that this is not even mentioned in, as if this was not interesting — inline diffs are simply essential to my workflow.
Update: this question gives some hints on the why: What’s the relationship of Atom to GitHub and Git?