friebetill/obsidian-file-diff

File Diff Colour

Closed this issue · 3 comments

File diff is fabulous; I can see it being one of those essential plugins. (Previously, I was comparing files outside of Obsidian.) A minor question: is there any way to adjust the colour of the changes. I tend to work in a dark theme and blue is washed out.

Thank you very much for your kind words! I released a new update with which you can easily update the colors.

To do this, you need to follow these steps:

  1. Create a new CSS file in the folder .obsidian/snippets, e.g. file-diff.css.
  2. Fill the CSS file with the following and update the colors accordingly:
@media (prefers-color-scheme: light) {
	.file-diff__top-line__bg {
		background-color: #d9f4ef;
	}

	.file-diff__bottom-line__bg {
		background-color: #d9edff;
	}
}

@media (prefers-color-scheme: dark) {
	.file-diff__top-line__bg {
		background-color: #25403b;
	}

	.file-diff__bottom-line__bg {
		background-color: #25394b;
	}
}
  1. Activate the CSS file in the settings under Appearance.

Absolutely fantastic and I discovered it works in real time as I type, so it basically a track changes that is very simple and useful to use. Thanks so much!
I have a question too. Is there a way to change the highlight color of the deleted text and may add a striketrough? Acqua and blue are too similar as colors. I am used to Work track changes where additions are in blue and deletions in red with strikethrough. That would be visually very helpful.

I was able do what I wanted with this snippet. Is it OK?

@media (prefers-color-scheme: light) {
.file-diff__top-line__bg {
background-color: #e6f5f2;
border-radius: 0.25rem; /* 4px */
}

.file-diff_top-line__character {
	background-color: #67c9f0;
	border-radius: 0.25rem; /* 4px */
	text-decoration: underline;
}

.file-diff__bottom-line__bg {
	background-color: #ecf6ff;
	border-radius: 0.25rem; /* 4px */
}

.file-diff_bottom-line__character {
	background-color: #f76767;
	border-radius: 0.25rem; /* 4px */
	text-decoration: line-through;
}

}