search

joethei / obsidian-link-favicon

See the favicon for a linked website.
GNU General Public License v3.0
90 stars 3 forks source link

Document color inversion #27

Closed NomarCub closed 2 years ago

NomarCub commented 2 years ago

Favicon colors are now inverted depending on the background - see #5. But I can't find how this works and sometimes its results are unsatisfactory.

I wanted to manually adjust some domains in CSS and the DOM attributes lead me to a wrong conclusion about how this works. I thought data-is-dark elements won't be inverted in light mode, yet exactly this happens with the YouTube icon. Which attributes can I use in CSS? As far as I know only the Boolean ones are usable in CSS. There's data-is-dark, data-is-light, data-is-readable-a-a, data-is-readable-a-a-a, and I don't know what they do in relation to what icons the plugin actually inverts. Ideally I'd like an attribute that's true when an icon was too dark and was inverted in dark mode, and a separate one for when the icon was too bright and was inverted in light mode.

joethei commented 2 years ago

Is-light and is-dark are true if the average color is at least 50% black/white.

is-readable is calculated according to the W3C AA/AAA specs and does take the background color into account. The inversion is happening in the plugins css and uses the AA value.

All of these use the average color as as a basis, not the dominant color(which would be more accurate) because I could not get that library working when I implemented this.