mirror of
https://github.com/Myriad-Dreamin/tinymist.git
synced 2025-08-04 18:28:02 +00:00
78f3893185
* feat: move featured components * feat: provide package view and local documentation * stage * fix: compile error by merged commits
160 lines
6.1 KiB
HTML
160 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- https://github.com/darkreader/darkreader/blob/main/CONTRIBUTING.md#disabling-dark-reader-on-your-site -->
|
|
<meta name="darkreader-lock" />
|
|
|
|
<title>Editor Tools</title>
|
|
<style id="preview-theme-styles"></style>
|
|
</head>
|
|
|
|
<body
|
|
style="
|
|
padding: 0;
|
|
margin: 0;
|
|
height: fit-content;
|
|
width: 100%;
|
|
background-color: var(--typst-preview-background-color, #888) !important;
|
|
"
|
|
>
|
|
<script>
|
|
{
|
|
/// https://stackoverflow.com/questions/13586999/color-difference-similarity-between-two-values-with-js
|
|
function deltaE(rgbA, rgbB) {
|
|
let labA = rgb2lab(rgbA);
|
|
let labB = rgb2lab(rgbB);
|
|
let deltaL = labA[0] - labB[0];
|
|
let deltaA = labA[1] - labB[1];
|
|
let deltaB = labA[2] - labB[2];
|
|
let c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
|
|
let c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
|
|
let deltaC = c1 - c2;
|
|
let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
|
|
deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
|
|
let sc = 1.0 + 0.045 * c1;
|
|
let sh = 1.0 + 0.015 * c1;
|
|
let deltaLKlsl = deltaL / 1.0;
|
|
let deltaCkcsc = deltaC / sc;
|
|
let deltaHkhsh = deltaH / sh;
|
|
let i =
|
|
deltaLKlsl * deltaLKlsl +
|
|
deltaCkcsc * deltaCkcsc +
|
|
deltaHkhsh * deltaHkhsh;
|
|
return i < 0 ? 0 : Math.sqrt(i);
|
|
}
|
|
|
|
function rgb2lab(rgb) {
|
|
let r = rgb[0] / 255,
|
|
g = rgb[1] / 255,
|
|
b = rgb[2] / 255,
|
|
x,
|
|
y,
|
|
z;
|
|
r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
|
|
g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
|
|
b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
|
|
x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
|
|
y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
|
|
z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
|
|
x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
|
|
y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
|
|
z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
|
|
return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
|
|
}
|
|
|
|
// https://stackoverflow.com/questions/26414770/getting-the-rgb-values-for-a-css-html-named-color-in-javascript
|
|
function cssColorToRgba(cssColor) {
|
|
var canvas = document.createElement("canvas");
|
|
var context = canvas.getContext("2d");
|
|
context.fillStyle = cssColor;
|
|
context.fillRect(0, 0, 1, 1);
|
|
return context.getImageData(0, 0, 1, 1).data;
|
|
}
|
|
|
|
const themeKind = document.body?.getAttribute("data-vscode-theme-kind");
|
|
const serverDark =
|
|
themeKind === "vscode-dark" ||
|
|
(typeof acquireVsCodeApi === "undefined" &&
|
|
window.matchMedia?.("(prefers-color-scheme: dark)").matches);
|
|
|
|
const defaultDarkBackgroundColor = "rgb(17, 17, 17)";
|
|
const defaultLightBackgroundColor = "rgb(255, 255, 255)";
|
|
const defaultBackgroundColor = serverDark
|
|
? defaultDarkBackgroundColor
|
|
: defaultLightBackgroundColor;
|
|
const defaultToolbarDarkFgColor = "#fff";
|
|
const defaultToolbarLightFgColor = "#000";
|
|
const defaultToolbarFgColor = serverDark
|
|
? defaultToolbarDarkFgColor
|
|
: defaultToolbarLightFgColor;
|
|
let previewBackgroundColor =
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
"--vscode-sideBar-background"
|
|
) || defaultBackgroundColor;
|
|
let previewToolbarFgColor =
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
"--vscode-menu-foreground"
|
|
) || defaultToolbarFgColor;
|
|
|
|
let preferColorScheme = "dark";
|
|
/// Perceptible distance between colors:
|
|
/// 0~1: cannot distinguish by human eyes
|
|
/// 1~2: perceptible through close observation
|
|
/// 2~10: perceptible at a glance
|
|
if (
|
|
deltaE(cssColorToRgba(previewBackgroundColor), [255, 255, 255]) < 5
|
|
) {
|
|
previewBackgroundColor = defaultLightBackgroundColor;
|
|
previewToolbarFgColor = defaultToolbarLightFgColor;
|
|
preferColorScheme = "light";
|
|
}
|
|
document.documentElement.style.colorScheme = preferColorScheme;
|
|
|
|
let previewForegroundColor = previewToolbarFgColor;
|
|
|
|
const defaultToolbarBorderColor = "rgba(0, 0, 0, 0)";
|
|
const previewToolbarBorderColor =
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
"--vscode-menu-border"
|
|
) || defaultToolbarBorderColor;
|
|
|
|
const defaultToolbarBgColor = "rgb(50, 54, 57)";
|
|
const previewToolbarBgColor =
|
|
getComputedStyle(document.documentElement).getPropertyValue(
|
|
"--vscode-menu-background"
|
|
) || defaultToolbarBgColor;
|
|
|
|
if (serverDark) {
|
|
document.body.classList.add("typst-preview-dark");
|
|
} else {
|
|
document.body.classList.add("typst-preview-light");
|
|
}
|
|
// append css variable --typst-preview-background-color
|
|
document.documentElement.style.setProperty(
|
|
"--typst-preview-background-color",
|
|
previewBackgroundColor
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
"--typst-preview-foreground-color",
|
|
previewForegroundColor
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
"--typst-preview-toolbar-fg-color",
|
|
previewToolbarFgColor
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
"--typst-preview-toolbar-border-color",
|
|
previewToolbarBorderColor
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
"--typst-preview-toolbar-bg-color",
|
|
previewToolbarBgColor
|
|
);
|
|
}
|
|
</script>
|
|
<script type="module" src="%VITE_ENTRY%"></script>
|
|
<div id="tinymist-app"></div>
|
|
</body>
|
|
</html>
|