From 0c13f83c67f010553ff1b7d2a3c1d99c00120b67 Mon Sep 17 00:00:00 2001 From: trilium-share-gruvbox Date: Mon, 7 Sep 2026 21:55:10 +0200 Subject: [PATCH] 3D viewer: model color via --model-viewer-color (Tokyo Night green); mindmap/excalidraw read theme variables --- scripts/3d_model_viewer.js | 4 ++-- scripts/note_fallback.js | 30 ++++++++++++--------------- theme/blog_share_theme_tokyonight.css | 2 ++ 3 files changed, 17 insertions(+), 19 deletions(-) diff --git a/scripts/3d_model_viewer.js b/scripts/3d_model_viewer.js index a09bff6..d36998d 100644 --- a/scripts/3d_model_viewer.js +++ b/scripts/3d_model_viewer.js @@ -310,7 +310,7 @@ geo.setAttribute("position", new THREE.Float32BufferAttribute(e.data.positions, 3)); if (e.data.indices) geo.setIndex(new THREE.BufferAttribute(e.data.indices, 1)); fixWinding(geo); - var mat = new THREE.MeshStandardMaterial({ color: cssVar("--background-active", "#e0a15c"), metalness: 0.2, roughness: 0.6, side: THREE.DoubleSide, flatShading: false }); + var mat = new THREE.MeshStandardMaterial({ color: cssVar("--model-viewer-color", cssVar("--background-active", "#e0a15c")), metalness: 0.2, roughness: 0.6, side: THREE.DoubleSide, flatShading: false }); chunkGeometry(geo, group, mat); var tris = (e.data.indices && e.data.indices.length) ? e.data.indices.length / 3 : e.data.positions.length / 9; fit(); @@ -332,7 +332,7 @@ } else { var geo = new THREE.STLLoader().parse(data.buffer); geo.computeVertexNormals(); - var mat = new THREE.MeshStandardMaterial({ color: cssVar("--background-active", "#e0a15c"), metalness: 0.25, roughness: 0.55, flatShading: true }); + var mat = new THREE.MeshStandardMaterial({ color: cssVar("--model-viewer-color", cssVar("--background-active", "#e0a15c")), metalness: 0.25, roughness: 0.55, flatShading: true }); group.add(new THREE.Mesh(geo, mat)); fit(); showCanvas(); diff --git a/scripts/note_fallback.js b/scripts/note_fallback.js index fcda49a..e6cdf16 100644 --- a/scripts/note_fallback.js +++ b/scripts/note_fallback.js @@ -189,25 +189,21 @@ } /* ---------- MindMap (MindElixir data) ---------- */ - var MIND_DARK = [ - { bg: "#458588", bd: "#3a6b70", text: "#fbf1c7" }, - { bg: "#b8bb26", bd: "#98971a", text: "#1d2021" }, - { bg: "#d3869b", bd: "#b16286", text: "#1d2021" }, - { bg: "#8ec07c", bd: "#689d6a", text: "#1d2021" }, - { bg: "#fe8019", bd: "#d65d0e", text: "#1d2021" } - ]; - var MIND_LIGHT = [ - { bg: "#83a598", bd: "#458588", text: "#1d2021" }, - { bg: "#98971a", bd: "#79740e", text: "#fbf1c7" }, - { bg: "#b16286", bd: "#8f3f71", text: "#fbf1c7" }, - { bg: "#427b58", bd: "#3a6350", text: "#fbf1c7" }, - { bg: "#af3a03", bd: "#8f3003", text: "#fbf1c7" } - ]; + function themeVar(n, fb) { + var v = (getComputedStyle(document.documentElement).getPropertyValue(n) || "").trim(); + return v || fb; + } function mindPalette() { - return document.documentElement.classList.contains("theme-light") ? MIND_LIGHT : MIND_DARK; + return [ + { bg: themeVar("--background-active", "#458588"), bd: themeVar("--text-link", "#3a6b70"), text: themeVar("--text-menu-active", "#fbf1c7") }, + { bg: themeVar("--background-highlight", "#b8bb26"), bd: themeVar("--background-highlight", "#98971a"), text: themeVar("--text-primary", "#1d2021") }, + { bg: themeVar("--text-link", "#d3869b"), bd: themeVar("--text-link", "#b16286"), text: themeVar("--text-menu-active", "#1d2021") }, + { bg: themeVar("--background-secondary", "#8ec07c"), bd: themeVar("--background-highlight", "#689d6a"), text: themeVar("--text-primary", "#1d2021") }, + { bg: themeVar("--text-menu", "#fe8019"), bd: themeVar("--text-menu", "#d65d0e"), text: themeVar("--background-primary", "#1d2021") } + ]; } function mindEdgeColor() { - return document.documentElement.classList.contains("theme-light") ? "#928374" : "#a89984"; + return themeVar("--text-menu", "#a89984"); } function mindSize(topic, fontSize) { var lines = String(topic || "").split("\n"); @@ -313,7 +309,7 @@ var g = svgEl("g"); if (e.angle) g.setAttribute("transform", "rotate(" + (e.angle * 180 / Math.PI) + " " + (e.x + e.width / 2) + " " + (e.y + e.height / 2) + ")"); if (typeof e.opacity === "number" && e.opacity < 100) g.setAttribute("opacity", e.opacity / 100); - var sc = e.strokeColor || "#282828", bg = e.backgroundColor || "transparent", sw = Math.max(1, e.strokeWidth || 2); + var sc = e.strokeColor || themeVar("--text-primary", "#282828"), bg = e.backgroundColor || "transparent", sw = Math.max(1, e.strokeWidth || 2); var filled = bg && bg !== "transparent"; var fillOp = e.fillStyle === "solid" ? 1 : 0.35; function strokeShape(shape) { diff --git a/theme/blog_share_theme_tokyonight.css b/theme/blog_share_theme_tokyonight.css index 4eb54d4..8581ccd 100644 --- a/theme/blog_share_theme_tokyonight.css +++ b/theme/blog_share_theme_tokyonight.css @@ -15,6 +15,7 @@ html.theme-light { --background-secondary: #cfc9c2; --background-highlight: #c4c6dd; --background-active: #2e7de9; + --model-viewer-color: #587539; --blog-card-bg: #cfc9c2; --scrollbar-thumb: #c4c6dd; --scrollbar-hover: #9aa5ce; @@ -32,6 +33,7 @@ html.theme-dark { --background-secondary: #1a1b26; --background-highlight: #292e42; --background-active: #7aa2f7; + --model-viewer-color: #9ece6a; --blog-card-bg: #1a1b26; --scrollbar-thumb: #292e42; --scrollbar-hover: #292e42;