Compare commits

..

No commits in common. "a3161d822ddacf38978145f7cb74356d54e85a6a" and "aed4fa2bffacac41e112d49e9445a0f238759256" have entirely different histories.

3 changed files with 9 additions and 36 deletions

View file

@ -1,13 +1,5 @@
@import "markdown.css"; @import "markdown.css";
:root {
--max-width: 900px;
}
main {
max-width: var(--max-width);
}
/* Filetree */ /* Filetree */
aside { aside {
float: left; float: left;

View file

@ -182,7 +182,6 @@ pre:has(code.language-mermaid) {
/* Tables */ /* Tables */
table { table {
border-collapse: collapse; border-collapse: collapse;
margin-inline: auto;
} }
th, th,

View file

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