How to change insert, change, delete diff colors

[nevdelap]

Hi all,

I’m using paid Sublime Merge with the Dark theme and I want to change the colors for the background of inserted, changed, and deleted bits when diffing to make them stand out.

I’ve used PackageResourceView to extract the Merge Dark theme and the Mariana color scheme, and I can modify them to see that they are being used, including the light theme bits inherited by the dark theme, but I can’t figure out what to edit for inserted, changed, deleted specifically.

There are diff.deleted/inserted/changed in the color scheme, but modifying them only changes what is shown when you have a diff open in Sublime Text, like that shown when using ST for commits. It doesn’t affect SM for diffs, and anyway they only have foreground settings in the default - adding background settings doesn’t help.

It’s the background colors for inserted, changed, deleted that I’m needing to change in SM.

Thank you.

Update: I’ve set every color in the Merge theme and the color scheme and none of them affect the background color of inserted and deleted in the SM diff.

[jps]

These are defined in the color scheme, specifically in Default/Mariana.sublime-color-scheme when using the dark theme (note this is not the normal Mariana file, which lives under Color Scheme - Default. These rules live in an override file due to history, so we didn’t disturb the default color schemes during internal development.

I’ve attached a copy of the file below, so you don’t have to go digging around for it. If you want to customize the rules, place a file named Mariana.sublime-color-scheme in your User package (accessible via Browse Packages in the Preferences menu).

A minimal example:

{
    "rules":
    [
        {
            "scope": "diff.deleted",
            "background": "pink",
        }
    ]
}

What gets shipped with Sublime Merge, for reference:

{
   "rules":
    [
        {
            "scope": "diff.deleted",
            "background": "hsla(357, 25%, 60%, 0.15)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.deleted.side-by-side",
            "background": "hsl(210, 15%, 27%)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.deleted.char",
            "background": "hsla(357, 40%, 60%, 0.30)",
            "foreground_adjust": "l(+ 10%)"
        },
        {
            "scope": "diff.inserted",
            "background": "hsla(180, 25%, 60%, 0.15)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.inserted.side-by-side",
            "background": "hsl(210, 15%, 27%)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.inserted.char",
            "background": "hsla(180, 40%, 60%, 0.30)",
            "foreground_adjust": "l(+ 10%)"
        },
        {
            "scope": "diff.fill",
            "background": "hsl(210, 15%, 27%)",
        },

        {
            "scope": "diff.inserted.merge-left",
            "background": "hsla(180, 25%, 60%, 0.15)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.inserted.char.merge-left",
            "background": "hsla(180, 40%, 60%, 0.30)",
            "foreground_adjust": "l(+ 10%)"
        },
        {
            "scope": "diff.border.merge-left",
            "background": "hsla(180, 40%, 60%, 0.50)",
        },
        {
            "scope": "diff.inserted.merge-right",
            "background": "hsla(60, 25%, 40%, 0.15)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.inserted.char.merge-right",
            "background": "hsla(60, 40%, 60%, 0.30)",
            "foreground_adjust": "l(+ 10%)"
        },
        {
            "scope": "diff.border.merge-right",
            "background": "hsla(60, 60%, 60%, 0.50)",
        },
        {
            "scope": "diff.border.merge-conflict",
            "background": "hsla(357, 75%, 65%, 0.50)",
        },
        {
            "scope": "diff.border.merge-merged",
            "background": "hsla(180, 10%, 70%, 0.30)",
        },
        {
            "scope": "blame.border",
            "background": "hsl(210, 13%, 30%)",
        },
        {
            "scope": "blame.age-icon",
            "foreground": "white",
        },
    ]
}

[nevdelap]

Thank you so much. I turned up the saturation on each of the insert and delete entries and increased the alpha on the char entries, so they are more visible, but still consistent with and looking as great as the original.

Anyone wanting the same just put this in Packages/User/Mariana.sublime-color-scheme, as jps said. Cheers.

{
   "rules":
    [
        {
            "scope": "diff.deleted",
            "background": "hsla(357, 100%, 60%, 0.15)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.deleted.side-by-side",
            "background": "hsla(357, 100%, 60%, 0.15)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.deleted.char",
            "background": "hsla(357, 100%, 60%, 0.50)",
            "foreground_adjust": "l(+ 10%)"
        },
        {
            "scope": "diff.inserted",
            "background": "hsla(180, 100%, 60%, 0.15)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.inserted.side-by-side",
            "background": "hsla(180, 100%, 60%, 0.15)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.inserted.char",
            "background": "hsla(180, 100%, 60%, 0.40)",
            "foreground_adjust": "l(+ 10%)"
        },
        {
            "scope": "diff.fill",
            "background": "hsl(210, 15%, 27%)",
        },

        {
            "scope": "diff.inserted.merge-left",
            "background": "hsla(180, 100%, 60%, 0.15)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.inserted.char.merge-left",
            "background": "hsla(180, 100%, 60%, 0.30)",
            "foreground_adjust": "l(+ 10%)"
        },
        {
            "scope": "diff.border.merge-left",
            "background": "hsla(180, 40%, 60%, 0.50)",
        },
        {
            "scope": "diff.inserted.merge-right",
            "background": "hsla(60, 100%, 40%, 0.15)",
            "foreground_adjust": "l(+ 5%)"
        },
        {
            "scope": "diff.inserted.char.merge-right",
            "background": "hsla(60, 100%, 60%, 0.30)",
            "foreground_adjust": "l(+ 10%)"
        },
        {
            "scope": "diff.border.merge-right",
            "background": "hsla(60, 60%, 60%, 0.50)",
        },
        {
            "scope": "diff.border.merge-conflict",
            "background": "hsla(357, 75%, 65%, 0.50)",
        },
        {
            "scope": "diff.border.merge-merged",
            "background": "hsla(180, 10%, 70%, 0.30)",
        },
        {
            "scope": "blame.border",
            "background": "hsl(210, 13%, 30%)",
        },
        {
            "scope": "blame.age-icon",
            "foreground": "white",
        },
    ]
}

[djibarian]

That’s very cool. Just exactly what I was looking for. Anyway the app guys should spend some time reviewing the dark theme. After using the light one and buying the app and switching to dark mode it was a bit deceptive seeing that the paid theme is less legible. Your color tweak looks better, but definitely the dark color scheme needs a tweak not only for diffs.

Just a suggestion for a very great product @jps. And thank you again @nevdelap for the fix.

[michaelblyons]

Is there a reason that there is no corresponding background_adjust? I have a blue3_1 defined (the the same as blue3 but with 28% lightness instead of 24%), so that I can do

        {
            "name": "Embeds",
            "scope": "text source, source text, source source, text text",
            "background": "var(blue3_1)",
        }

but it’d be nice to just do a

        {
            "name": "Embeds",
            "scope": "text source, source text, source source, text text",
            "background_adjust": "l(+4%)",
        }

[csullivan]

Mariana.sublime-color-scheme

This is great! Thanks very much

[ctesmer]

I use the Mariana dark theme on Sublime Text 3 and LOVE it. I’m close to pulling the trigger and purchasing Sublime Merge, but your comment has me hesitating.

Does Sublime Merge support and look as good as Mariana on Sublime Text, now, three months after your comment? Or is it still relevant, and thus purchasing be avoided?

(The gifs of Sublime Merge in dark mode on their home page look pretty compelling.

Thanks! Don’t want to drop $100 and be disappointed…

[nevdelap]

Hey. On my setup they look identical, and look great, I use them in i3 with everything else dark and no window decorations or anything else around them.

I have this in my ST3 config:

"color_scheme": "Packages/Color Scheme - Default/Mariana.sublime-color-scheme",
"font_face": "Fira Code Medium",
"font_options": [ "subpixel_antialias" ],
"font_size": 9,
"theme": "Gravity One.sublime-theme",

and SM config:

"diff_style": "side-by-side",
"font_face": "Fira Code Medium",
"font_size": 9,
"theme": "Merge Dark.sublime-theme",

plus what I described for altering Mariana.sublime-color-scheme.

But I didn’t pay for SM to get the dark theme, a theme alone isn’t worth $100. I paid for it to support the devs and because I’ve gotten way more than $70 worth of value from Sublime Text over the more than five years that I’ve used it all day every working day. But the dark theme is a nice thank you for the purchase.

[ctesmer]

I’ve gotten way more than $70 worth of value from Sublime Text over the more than five years that I’ve used it all day every working day.

Same.

I used Text Mate for so so long, and finally switched to Sublime Text a year or so ago. It is leaps and bounds better than TM, and way more aesthetically pleasing. For something I use everyday, I want it to beautiful. ST definitely is. You’re totally right. The devs are worth the money.

I use them in i3

What is i3?

Regardless… thanks for the reply and the details. I’ll be pulling the trigger on SM thanks to you.