diff --git a/src/components/MindMapViewer.vue b/src/components/MindMapViewer.vue index 4be3aa3..e53cc9b 100644 --- a/src/components/MindMapViewer.vue +++ b/src/components/MindMapViewer.vue @@ -57,6 +57,31 @@ const countAllDescendants = (node: MindMapTreeNode): number => { const COLOR_MATCHED = { background: "#c8e6c9", color: "#1b5e20" }; const COLOR_MISSED = { background: "#ffcdd2", color: "#b71c1c" }; +/** + * 浅色主题:基于内置 Latte,画布/节点配色对齐全站薄荷绿主题(base.css 变量值)。 + * 注意:mind-elixir 主题只接受字面量,不能引用 CSS 变量,此处保留字面量。 + */ +const LPT_LIGHT_THEME = { + ...MindElixir.THEME, + name: "LPT Light", + palette: ["#237556", "#2f8f68", "#43a879", "#1a5a42", "#5cb88a", "#7cc9a3"], + cssVar: { + ...MindElixir.THEME.cssVar, + "--bgcolor": "#f7fbf8", + "--color": "#4b6156", + "--root-bgcolor": "#237556", + "--root-color": "#ffffff", + "--main-color": "#1b2a23", + "--main-bgcolor": "#ffffff", + "--main-bgcolor-transparent": "rgba(255, 255, 255, 0.85)", + "--selected": "#43a879", + "--accent-color": "#237556", + "--panel-color": "#1b2a23", + "--panel-bgcolor": "#ffffff", + "--panel-border-color": "#d6e6dc", + }, +}; + const compareStatus = (notes?: string): "MATCHED" | "MISSED" | null => { if (!notes) return null; if (notes.startsWith("MATCHED|")) return "MATCHED"; @@ -149,6 +174,7 @@ const render = () => { contextMenu: !!props.editable, toolBar: true, keypress: !!props.editable, + theme: LPT_LIGHT_THEME, }); instance.init(toElixirData(props.tree));