Custom link color in checkbox done: reduce or remove diamond link / wikilinks darker / semi-transparent effect

[huulong]

In order to make my completed tasks to be more readable on dark background, I customized done task text to remove strikethrough and look brighter on dark theme:

body {
  --checklist-done-decoration: none;
}
.theme-dark {
  --checklist-done-color: #ced5ff;
}

Example Markdown:

- [ ] Task todo with link to https://example.com/
- [ ] Task todo with link in diamond brackets `<>` to <https://example.com/>
- [ ] Task done with link to [[Temp]]
- [x] Task done with link to https://example.com/
- [x] Task done with link diamond brackets `<>` to <https://example.com/>
- [x] Task done with link to [[Temp]]

Before

After

However, as you can see, both URLs surrounding with diamond brackets and internal wikilinks [[relative/path]] appear in a slightly darker / more transparent color in completed tasks (checkbox done).

I tried to override the link color properties:

  --link-color: #a68af9;
  --link-color-hover: #c5b6fc;
  --link-external-color: #a68af9;
  --link-external-color-hover: #c5b6fc;

but to no avail, the colors would still change in checked boxes text (and I don’t even have a property to specify I want a color for links in completed tasks like --checklist-done-color for normal text). However, I noticed that changing the base link colors would also affect the completed task link color.

I’ve also been debugging actual colors with Ctrl+Shift+I but the colors shown in the Computed section were the same.

This all suggests that an extra tint or opacity is applied on top of the base color, but I could find no Opacity < 100% in the Computed section of the style debugger. Although I did see a transition-property: "opacity" but I’m not sure what to do with that.

Where is the checkbox effect on diamond links and wikilinks defined, and which property should I override in custom CSS to cancel / diminish this opacity reduction / darker tint effect?

[dawni]

The default theme (sandbox) with your snippet:

… isn’t giving me the color difference that you screenshots show

Do you have other CSS snippets, a theme, or plugins that could be affecting it? And/or is your installer up to date?

(Unresolved links are dimmer, similar to in your image, but that ought to be the same between your checked and unchecked tasks presuming no other add-ons are in play.)

You can independently set link colors in checked items with this CSS:

[data-task="x"] a {
	--link-external-color: yellow;
	--link-color: yellow;
	--link-unresolved-color: yellow;
}

Add the hover variables too, if you like.

Hopefully that works for you, but if other add-ons are interfering, you might still have to find out whence.