mylloon.fr/static/js/markdown.js

128 lines
3.1 KiB
JavaScript

const Mode = {
Light: 1,
Dark: 2,
};
/**
* Convert to grayscale
* @param {{r: number, g: number, b: number}} color
* @returns Number between 0 and 255
*/
const colorToGrayscale = (color) => {
return 0.3 * color.r + 0.59 * color.g + 0.11 * color.b;
};
/**
* Extract color using canvas2d
* @param {HTMLImageElement} image Image source
* @returns Colors represeting the image
*/
const extractColors = (image) => {
const canvas = document.createElement("canvas");
canvas.width = image.naturalWidth || image.width;
canvas.height = image.naturalHeight || image.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
const imageData = ctx.getImageData(
0,
0,
Math.max(1, canvas.width),
Math.max(1, canvas.height)
);
const pixelData = imageData.data;
const colors = [];
for (let i = 0; i < pixelData.length; i += 4) {
if (pixelData[i + 3] > 0) {
colors.push({
r: pixelData[i],
g: pixelData[i + 1],
b: pixelData[i + 2],
});
}
}
return colors;
};
/**
* Change the color theme based on the mode
* @param {Mode} mode
*/
const changeTheme = (mode) => {
for (const item of document.getElementsByTagName("svg")) {
const image = document.createElement("img");
image.src = `data:image/svg+xml;base64,${btoa(
new XMLSerializer().serializeToString(item)
)}`;
image.width = item.viewBox.baseVal.width;
image.height = item.viewBox.baseVal.height;
image.onload = () => {
applyFilter(mode, item, extractColors(image));
};
}
// SVG embedded in images as base64
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
continue;
}
applyFilter(mode, item, extractColors(item));
}
};
/**
* Apply the filter based on the selected mode
* @param {Mode} mode Current theme
* @param {HTMLImageElement | SVGSVGElement} item Element
* @param {{r: number, g: number, b: number}} colors Array of the colors of the element
* @returns
*/
const applyFilter = (mode, item, colors) => {
// Calculate the average grayscale value
const grayscaleValues = colors.map(colorToGrayscale);
const totalGrayscale = grayscaleValues.reduce((acc, val) => acc + val, 0);
const averageGrayscale = totalGrayscale / grayscaleValues.length;
const treshold = 128;
const style = "filter: ";
const dim = "brightness(0.8) contrast(1.2)";
if (averageGrayscale < treshold && mode === Mode.Dark) {
item.style = style + dim + " invert(1);";
return;
}
if (averageGrayscale > treshold && mode === Mode.Light) {
item.style = style + "invert(1);";
return;
}
if (mode === Mode.Dark) {
item.style = style + `${dim};`;
return;
}
item.style = "";
};
window.addEventListener("load", () => {
// Fix SVG images
changeTheme(
window.matchMedia("(prefers-color-scheme: dark)").matches
? Mode.Dark
: Mode.Light
);
});
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) =>
changeTheme(event.matches ? Mode.Dark : Mode.Light)
);