Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File Diff Colour #1

Closed
TVProduction opened this issue Feb 9, 2023 · 3 comments
Closed

File Diff Colour #1

TVProduction opened this issue Feb 9, 2023 · 3 comments

Comments

@TVProduction
Copy link

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.

@friebetill
Copy link
Owner

friebetill commented Feb 10, 2023

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.

@Eusorph
Copy link

Eusorph commented Mar 20, 2024

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.

@Eusorph
Copy link

Eusorph commented Mar 20, 2024

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;
}

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants