svg theme changer
This commit is contained in:
parent
0f6f2f1fc4
commit
a3161d822d
1 changed files with 27 additions and 9 deletions
|
@ -80,11 +80,16 @@ const deepestNodeOpened = (path, options) => {
|
|||
}
|
||||
};
|
||||
|
||||
const svgDarkTheme = () => {
|
||||
const Mode = {
|
||||
Light: 1,
|
||||
Dark: 2,
|
||||
};
|
||||
|
||||
const svgChangeTheme = (mode) => {
|
||||
for (const item of document.getElementsByTagName("img")) {
|
||||
if (!item.src.startsWith("data:image/svg+xml;base64,")) {
|
||||
// Exclude image who aren't SVG and base64 encoded
|
||||
break;
|
||||
continue;
|
||||
}
|
||||
|
||||
/** Convert to grayscale */
|
||||
|
@ -129,9 +134,19 @@ const svgDarkTheme = () => {
|
|||
const totalGrayscale = grayscaleValues.reduce((acc, val) => acc + val, 0);
|
||||
const averageGrayscale = totalGrayscale / grayscaleValues.length;
|
||||
|
||||
if (averageGrayscale < 128) {
|
||||
const treshold = 128;
|
||||
|
||||
if (averageGrayscale < treshold && mode === Mode.Dark) {
|
||||
item.style = "filter: invert(1);";
|
||||
continue;
|
||||
}
|
||||
|
||||
if (averageGrayscale > treshold && mode === Mode.Light) {
|
||||
item.style = "filter: invert(1);";
|
||||
continue;
|
||||
}
|
||||
|
||||
item.style = "";
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -160,13 +175,16 @@ window.addEventListener("load", () => {
|
|||
uncollapse(last_openeded);
|
||||
}
|
||||
|
||||
// Fix SVG images in dark mode
|
||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
svgDarkTheme();
|
||||
}
|
||||
// Fix SVG images
|
||||
svgChangeTheme(
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? Mode.Dark
|
||||
: Mode.Light
|
||||
);
|
||||
});
|
||||
|
||||
// Is this working?
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", svgDarkTheme);
|
||||
.addEventListener("change", (event) =>
|
||||
svgChangeTheme(event.matches ? Mode.Dark : Mode.Light)
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue