Docs-css: Add invert-helper class for images

Use svg color filter matrix from @jix to invert brightness for images when using dark theme.

Co-authored-by: Jannis Harder <me@jix.one>
This commit is contained in:
Krystine Sherwin 2024-05-11 10:40:28 +12:00
parent 75f01ccee8
commit 9be7089f4f
No known key found for this signature in database
1 changed files with 14 additions and 0 deletions

View File

@ -24,3 +24,17 @@ a.external {
th {
text-align: left;
}
body[data-theme="dark"] {
.invert-helper {
filter: url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg'><filter id='f'><feColorMatrix color-interpolation-filters='sRGB' type='matrix' values='1.47 -1.73 -0.467 0 0.867 -0.733 0.467 -0.467 0 0.867 -0.667 -1.07 1.07 0 0.867 0 0 0 1.0 0'></feColorMatrix></filter></svg>#f");
}
}
@media (prefers-color-scheme: dark) {
body:not([data-theme="light"]) {
.invert-helper {
filter: url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg'><filter id='f'><feColorMatrix color-interpolation-filters='sRGB' type='matrix' values='1.47 -1.73 -0.467 0 0.867 -0.733 0.467 -0.467 0 0.867 -0.667 -1.07 1.07 0 0.867 0 0 0 1.0 0'></feColorMatrix></filter></svg>#f");
}
}
}