diff --git a/miniapp/data/theme-presets.js b/miniapp/data/theme-presets.js
new file mode 100644
index 0000000..7f786cb
--- /dev/null
+++ b/miniapp/data/theme-presets.js
@@ -0,0 +1,777 @@
+module.exports = [
+  {
+    "id": "figma-aegean",
+    "name": "Figma-Aegean",
+    "colors": [
+      "#264653",
+      "#287271",
+      "#2A9D8F",
+      "#8AB17D",
+      "#E9C46A",
+      "#EFB366",
+      "#F4A261",
+      "#F1965D",
+      "#EE8959",
+      "#E76F51"
+    ]
+  },
+  {
+    "id": "figma-violet",
+    "name": "Figma-Violet",
+    "colors": [
+      "#F72585",
+      "#B5179E",
+      "#7209B7",
+      "#560BAD",
+      "#480CA8",
+      "#3A0CA3",
+      "#3F37C9",
+      "#4361EE",
+      "#4895EF",
+      "#4CC9F0"
+    ]
+  },
+  {
+    "id": "figma-1",
+    "name": "Figma-01",
+    "colors": [
+      "#322F4F",
+      "#433E71",
+      "#554C93",
+      "#98958C",
+      "#DBDD85",
+      "#D8DD7D",
+      "#D5DB74",
+      "#CED56E",
+      "#C8CF67",
+      "#BAC35A"
+    ]
+  },
+  {
+    "id": "figma-2",
+    "name": "Figma-02",
+    "colors": [
+      "#2B3B51",
+      "#355971",
+      "#3F7690",
+      "#91A483",
+      "#E2D075",
+      "#E4C66F",
+      "#E4BD69",
+      "#E0B464",
+      "#DBAA5F",
+      "#D19654"
+    ]
+  },
+  {
+    "id": "figma-3",
+    "name": "Figma-03",
+    "colors": [
+      "#274D4C",
+      "#2B7171",
+      "#2F9595",
+      "#8B9395",
+      "#E79094",
+      "#EC878A",
+      "#EF7D7F",
+      "#EC7578",
+      "#E86D6F",
+      "#E15D5F"
+    ]
+  },
+  {
+    "id": "figma-4",
+    "name": "Figma-04",
+    "colors": [
+      "#3D3D3D",
+      "#5B5B5B",
+      "#797979",
+      "#9F9F9F",
+      "#C4C4C4",
+      "#BCBCBC",
+      "#B3B3B3",
+      "#AAAAAA",
+      "#A1A1A1",
+      "#8F8F8F"
+    ]
+  },
+  {
+    "id": "figma-5",
+    "name": "Figma-05",
+    "colors": [
+      "#F4F1DE",
+      "#EAB69F",
+      "#E07A5F",
+      "#8F5D5D",
+      "#3D405B",
+      "#5F797B",
+      "#81B29A",
+      "#9EB998",
+      "#BABF95",
+      "#F2CC8F"
+    ]
+  },
+  {
+    "id": "figma-6",
+    "name": "Figma-06",
+    "colors": [
+      "#F2F3E3",
+      "#D6DAA5",
+      "#B9C167",
+      "#7C805D",
+      "#3E3D52",
+      "#68667A",
+      "#938FA1",
+      "#A8A6A1",
+      "#BBBBA1",
+      "#E3E6A1"
+    ]
+  },
+  {
+    "id": "figma-7",
+    "name": "Figma-07",
+    "colors": [
+      "#F3F1E0",
+      "#E0C7A1",
+      "#CD9B62",
+      "#856D5D",
+      "#3D3F57",
+      "#63707A",
+      "#89A19D",
+      "#A2B09C",
+      "#BABD9A",
+      "#EBD896"
+    ]
+  },
+  {
+    "id": "figma-8",
+    "name": "Figma-08",
+    "colors": [
+      "#F3E6E7",
+      "#E7A8A9",
+      "#DA6A6B",
+      "#8C5D5D",
+      "#3D4F4E",
+      "#607A7A",
+      "#83A4A5",
+      "#9FA6A7",
+      "#BAA7A8",
+      "#F0A9AB"
+    ]
+  },
+  {
+    "id": "figma-9",
+    "name": "Figma-09",
+    "colors": [
+      "#EFEFEF",
+      "#C2C2C2",
+      "#959595",
+      "#6B6B6B",
+      "#424242",
+      "#717171",
+      "#A0A0A0",
+      "#ADADAD",
+      "#B8B8B8",
+      "#D0D0D0"
+    ]
+  },
+  {
+    "id": "figma-10",
+    "name": "Figma-10",
+    "colors": [
+      "#A8B868",
+      "#798575",
+      "#4A5282",
+      "#393F7C",
+      "#313679",
+      "#282C75",
+      "#3C3C9D",
+      "#4E4CC3",
+      "#645FD4",
+      "#7A71E4"
+    ]
+  },
+  {
+    "id": "figma-11",
+    "name": "Figma-11",
+    "colors": [
+      "#EF476F",
+      "#F78C6B",
+      "#FFD166",
+      "#83D483",
+      "#06D6A0",
+      "#001914",
+      "#118AB2",
+      "#0F7799",
+      "#0C637F",
+      "#073B4C"
+    ]
+  },
+  {
+    "id": "figma-12",
+    "name": "Figma-12",
+    "colors": [
+      "#D06A79",
+      "#984B8D",
+      "#5E2BA1",
+      "#482398",
+      "#3D1F94",
+      "#311B90",
+      "#3D39B6",
+      "#4857DC",
+      "#567BE3",
+      "#629FEB"
+    ]
+  },
+  {
+    "id": "figma-13",
+    "name": "Figma-13",
+    "colors": [
+      "#B0BC63",
+      "#CED674",
+      "#EDF186",
+      "#A19B9B",
+      "#5444B0",
+      "#493DAB",
+      "#3E35A6",
+      "#362E8E",
+      "#2C2676",
+      "#1A1646"
+    ]
+  },
+  {
+    "id": "figma-14",
+    "name": "Figma-14",
+    "colors": [
+      "#D07E6A",
+      "#E3AF6F",
+      "#F6E073",
+      "#91B98D",
+      "#2C90A6",
+      "#2A79A9",
+      "#2761AD",
+      "#225494",
+      "#1B467B",
+      "#102949"
+    ]
+  },
+  {
+    "id": "figma-15",
+    "name": "Figma-15",
+    "colors": [
+      "#E65D5C",
+      "#F1797A",
+      "#FC9498",
+      "#87A6A9",
+      "#10B7B9",
+      "#14ACAC",
+      "#17A09F",
+      "#148A88",
+      "#107271",
+      "#094443"
+    ]
+  },
+  {
+    "id": "figma-16",
+    "name": "Figma-16",
+    "colors": [
+      "#7D7D7D",
+      "#A8A8A8",
+      "#D2D2D2",
+      "#B2B2B2",
+      "#919191",
+      "#7E7E7E",
+      "#6A6A6A",
+      "#5B5B5B",
+      "#4C4C4C",
+      "#2D2D2D"
+    ]
+  },
+  {
+    "id": "figma-17",
+    "name": "Figma-17",
+    "colors": [
+      "#5F0F40",
+      "#7D092F",
+      "#9A031E",
+      "#CB4721",
+      "#FB8B24",
+      "#EF781C",
+      "#E36414",
+      "#AE5E26",
+      "#795838",
+      "#0F4C5C"
+    ]
+  },
+  {
+    "id": "figma-18",
+    "name": "Figma-18",
+    "colors": [
+      "#414731",
+      "#515A23",
+      "#616C15",
+      "#99A32C",
+      "#D1D942",
+      "#C2CB37",
+      "#B3BC2C",
+      "#909636",
+      "#6C6F41",
+      "#252157"
+    ]
+  },
+  {
+    "id": "figma-19",
+    "name": "Figma-19",
+    "colors": [
+      "#502939",
+      "#672F2A",
+      "#7E351A",
+      "#B27225",
+      "#E6B030",
+      "#D99F27",
+      "#CB8E1E",
+      "#9F782D",
+      "#72623C",
+      "#1A375A"
+    ]
+  },
+  {
+    "id": "figma-20",
+    "name": "Figma-20",
+    "colors": [
+      "#5B2A28",
+      "#771E1C",
+      "#921211",
+      "#C43133",
+      "#F55054",
+      "#E94347",
+      "#DC363A",
+      "#AA3E40",
+      "#774547",
+      "#125554"
+    ]
+  },
+  {
+    "id": "figma-21",
+    "name": "Figma-21",
+    "colors": [
+      "#2C2C2C",
+      "#303030",
+      "#333333",
+      "#6A6A6A",
+      "#A0A0A0",
+      "#919191",
+      "#808080",
+      "#6F6F6F",
+      "#5E5E5E",
+      "#3B3B3B"
+    ]
+  },
+  {
+    "id": "figma-22",
+    "name": "Figma-22",
+    "colors": [
+      "#366260",
+      "#516765",
+      "#6C6B6A",
+      "#8E6D6C",
+      "#B16E6D",
+      "#C76E6D",
+      "#DE6D6D",
+      "#E38384",
+      "#E6999A"
+    ]
+  },
+  {
+    "id": "figma-23",
+    "name": "Figma-23",
+    "colors": [
+      "#39476C",
+      "#515371",
+      "#695F75",
+      "#876F74",
+      "#A67F73",
+      "#BA8971",
+      "#CE936E",
+      "#D7AA7E",
+      "#DEC08F"
+    ]
+  },
+  {
+    "id": "figma-24",
+    "name": "Figma-24",
+    "colors": [
+      "#3F3D66",
+      "#52526B",
+      "#656770",
+      "#7E8270",
+      "#979D70",
+      "#A7AE6F",
+      "#B7C06D",
+      "#C5CC81",
+      "#D2D794"
+    ]
+  },
+  {
+    "id": "figma-25",
+    "name": "Figma-25",
+    "colors": [
+      "#4B4B4B",
+      "#575757",
+      "#626262",
+      "#707070",
+      "#7E7E7E",
+      "#878787",
+      "#8F8F8F",
+      "#A5A5A5",
+      "#BABABA"
+    ]
+  },
+  {
+    "id": "figma-26",
+    "name": "Figma-26",
+    "colors": [
+      "#363636",
+      "#474747",
+      "#585858",
+      "#9C9C9C",
+      "#E0E0E0",
+      "#A5A5A5",
+      "#696969",
+      "#565656",
+      "#424242"
+    ]
+  },
+  {
+    "id": "figma-27",
+    "name": "Figma-27",
+    "colors": [
+      "#293B3B",
+      "#235959",
+      "#1D7575",
+      "#84A6A6",
+      "#ECD7D8",
+      "#D58A8A",
+      "#BD3C3D",
+      "#993333",
+      "#732829"
+    ]
+  },
+  {
+    "id": "figma-28",
+    "name": "Figma-28",
+    "colors": [
+      "#2B363B",
+      "#2B4559",
+      "#295477",
+      "#899BA6",
+      "#EAE2D5",
+      "#CBA886",
+      "#AC6F37",
+      "#8B5B2F",
+      "#694626"
+    ]
+  },
+  {
+    "id": "figma-29",
+    "name": "Figma-29",
+    "colors": [
+      "#2F2E3B",
+      "#353159",
+      "#3A3376",
+      "#908EA6",
+      "#E7E8D6",
+      "#BEC388",
+      "#949D3A",
+      "#788031",
+      "#5B6127"
+    ]
+  },
+  {
+    "id": "figma-30",
+    "name": "Figma-30",
+    "colors": [
+      "#283D3B",
+      "#21585A",
+      "#197278",
+      "#83A8A6",
+      "#EDDDD4",
+      "#D99185",
+      "#E9B5AF",
+      "#9E3A2E",
+      "#772E25"
+    ]
+  },
+  {
+    "id": "figma-31",
+    "name": "Figma-31",
+    "colors": [
+      "#BDBDBD",
+      "#9D9D9D",
+      "#7E7E7E",
+      "#6B6B6B",
+      "#585858",
+      "#5D5D5D",
+      "#606060",
+      "#626262",
+      "#707070",
+      "#7D7D7D"
+    ]
+  },
+  {
+    "id": "figma-32",
+    "name": "Figma-32",
+    "colors": [
+      "#FB5860",
+      "#F74046",
+      "#F2292C",
+      "#F23433",
+      "#F23E39",
+      "#B86E68",
+      "#9C867F",
+      "#7F9E96",
+      "#5FB4AE",
+      "#3DCAC5"
+    ]
+  },
+  {
+    "id": "figma-33",
+    "name": "Figma-33",
+    "colors": [
+      "#F3D321",
+      "#E7B019",
+      "#DC8C10",
+      "#D67039",
+      "#D05460",
+      "#A2529A",
+      "#8C51B8",
+      "#7550D5",
+      "#5F5FE3",
+      "#476CEF"
+    ]
+  },
+  {
+    "id": "figma-34",
+    "name": "Figma-34",
+    "colors": [
+      "#E6EB40",
+      "#D1DA2F",
+      "#BDC91E",
+      "#AEBE36",
+      "#9FB24D",
+      "#838F81",
+      "#757E9C",
+      "#666CB6",
+      "#5F5FC8",
+      "#5650DA"
+    ]
+  },
+  {
+    "id": "figma-35",
+    "name": "Figma-35",
+    "colors": [
+      "#FFBE0B",
+      "#FD8A09",
+      "#FB5607",
+      "#FD2B3B",
+      "#FF006E",
+      "#C11CAD",
+      "#A22ACD",
+      "#8338EC",
+      "#5F5FF6",
+      "#3A86FF"
+    ]
+  },
+  {
+    "id": "figma-36",
+    "name": "Figma-36",
+    "colors": [
+      "#6E6E6E",
+      "#555555",
+      "#3C3C3C",
+      "#333333",
+      "#2F2F2F",
+      "#2A2A2A",
+      "#4A4A4A",
+      "#686868",
+      "#888888",
+      "#A8A8A8"
+    ]
+  },
+  {
+    "id": "figma-37",
+    "name": "Figma-37",
+    "colors": [
+      "#EC5B57",
+      "#AD635D",
+      "#6C6B64",
+      "#526660",
+      "#45645D",
+      "#37615B",
+      "#3E8983",
+      "#44B0AB",
+      "#4BC8C4",
+      "#52DFDD"
+    ]
+  },
+  {
+    "id": "figma-38",
+    "name": "Figma-38",
+    "colors": [
+      "#05668D",
+      "#04738F",
+      "#028090",
+      "#019493",
+      "#00A896",
+      "#01B698",
+      "#02C39A",
+      "#79DBAC",
+      "#B5E7B5",
+      "#F0F3BD"
+    ]
+  },
+  {
+    "id": "figma-39",
+    "name": "Figma-39",
+    "colors": [
+      "#292281",
+      "#2D2586",
+      "#31278B",
+      "#382D93",
+      "#3F329B",
+      "#4437A1",
+      "#4A3BA6",
+      "#9D96BA",
+      "#C7C4C4",
+      "#F1F0CD"
+    ]
+  },
+  {
+    "id": "figma-40",
+    "name": "Figma-40",
+    "colors": [
+      "#164588",
+      "#184E8B",
+      "#19568E",
+      "#1B6393",
+      "#1E7098",
+      "#22799B",
+      "#25829F",
+      "#8ABAB1",
+      "#BED6BB",
+      "#F0F2C3"
+    ]
+  },
+  {
+    "id": "figma-41",
+    "name": "Figma-41",
+    "colors": [
+      "#097C7A",
+      "#098281",
+      "#088988",
+      "#089393",
+      "#089D9E",
+      "#0AA4A6",
+      "#0BABAD",
+      "#7DC0C2",
+      "#B7CACC",
+      "#F0D4D6"
+    ]
+  },
+  {
+    "id": "figma-42",
+    "name": "Figma-42",
+    "colors": [
+      "#4D4D4D",
+      "#555555",
+      "#5C5C5C",
+      "#676767",
+      "#737373",
+      "#7C7C7C",
+      "#848484",
+      "#B8B8B8",
+      "#D2D2D2",
+      "#EBEBEB"
+    ]
+  },
+  {
+    "id": "figma-43",
+    "name": "Figma-43",
+    "colors": [
+      "#16697A",
+      "#2F8498",
+      "#489FB5",
+      "#65B0C1",
+      "#9DCAD2",
+      "#B8D4D8",
+      "#EDE7E3",
+      "#F2D7B5",
+      "#F6C787",
+      "#FFA62B"
+    ]
+  },
+  {
+    "id": "figma-44",
+    "name": "Figma-44",
+    "colors": [
+      "#352E74",
+      "#4E4892",
+      "#6862AE",
+      "#817BBB",
+      "#ADAACF",
+      "#C2C0D6",
+      "#EAEBE4",
+      "#E7E9BF",
+      "#E4E79A",
+      "#DDE44F"
+    ]
+  },
+  {
+    "id": "figma-45",
+    "name": "Figma-45",
+    "colors": [
+      "#254D77",
+      "#3E6795",
+      "#5782B2",
+      "#7297BE",
+      "#A5BBD1",
+      "#BDCAD7",
+      "#EBE8E3",
+      "#EDDFB9",
+      "#EDD68F",
+      "#EEC33A"
+    ]
+  },
+  {
+    "id": "figma-46",
+    "name": "Figma-46",
+    "colors": [
+      "#1A7271",
+      "#338F8E",
+      "#4CABAA",
+      "#68B9B8",
+      "#9FCECE",
+      "#B9D6D6",
+      "#ECE4E4",
+      "#F0C3C5",
+      "#F3A2A5",
+      "#FA6065"
+    ]
+  },
+  {
+    "id": "figma-47",
+    "name": "Figma-47",
+    "colors": [
+      "#525252",
+      "#6C6C6C",
+      "#878787",
+      "#9B9B9B",
+      "#BDBDBD",
+      "#CCCCCC",
+      "#E8E8E8",
+      "#DBDBDB",
+      "#CDCDCD",
+      "#B2B2B2"
+    ]
+  }
+];
diff --git a/miniapp/pages/index/index.js b/miniapp/pages/index/index.js
index 4bfc039..015daaf 100644
--- a/miniapp/pages/index/index.js
+++ b/miniapp/pages/index/index.js
@@ -1,5 +1,6 @@
 const { parseTableByFileName, buildSankeyData } = require('../../utils/sankey');
 const defaultSankeyTable = require('../../data/sankey.default.js');
+const themePresets = require('../../data/theme-presets.js');
 
 /**
  * 将表头标准化，便于做中英文别名匹配。
@@ -65,11 +66,39 @@ function getFileExtension(fileName) {
   return lowerName.slice(lastDotIndex + 1);
 }
 
+const FALLBACK_THEME_COLORS = ['#9b6bc2', '#7e95f7', '#4cc9f0', '#f4a261'];
+
 /**
- * 节点配色：与当前画布渲染保持一致，双色交替。
+ * 节点配色：使用当前主题色带循环取色。
  */
-function getNodeColor(index) {
-  return index % 2 === 0 ? '#9b6bc2' : '#7e95f7';
+function getNodeColor(index, palette) {
+  const colors = Array.isArray(palette) && palette.length > 0 ? palette : FALLBACK_THEME_COLORS;
+  return colors[index % colors.length];
+}
+
+/**
+ * 将 16 进制颜色转换为 rgba，便于控制连线透明度。
+ */
+function toRgbaColor(color, alpha) {
+  const text = String(color || '').trim();
+  const safeAlpha = Number.isFinite(Number(alpha)) ? Math.max(0, Math.min(1, Number(alpha))) : 1;
+  const shortHex = /^#([0-9a-fA-F]{3})$/;
+  const longHex = /^#([0-9a-fA-F]{6})$/;
+
+  let hex = '';
+  if (shortHex.test(text)) {
+    const raw = text.slice(1);
+    hex = `${raw[0]}${raw[0]}${raw[1]}${raw[1]}${raw[2]}${raw[2]}`;
+  } else if (longHex.test(text)) {
+    hex = text.slice(1);
+  } else {
+    return text || `rgba(155,107,194,${safeAlpha})`;
+  }
+
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return `rgba(${r},${g},${b},${safeAlpha})`;
 }
 
 /**
@@ -137,6 +166,14 @@ const DEFAULT_SANKEY_FILE_PATHS = [
   'data/sankey.xlsx',
   'miniapp/data/sankey.xlsx'
 ];
+const DEFAULT_THEME_ID = 'figma-violet';
+const DEFAULT_THEME_INDEX = (() => {
+  if (!Array.isArray(themePresets) || themePresets.length === 0) {
+    return 0;
+  }
+  const index = themePresets.findIndex((item) => item && item.id === DEFAULT_THEME_ID);
+  return index >= 0 ? index : 0;
+})();
 
 /**
  * 数值限制，避免 UI 参数导致布局异常。
@@ -256,6 +293,10 @@ function buildSankeyLayout(links, width, height, renderOptions) {
 
   const sourceNames = Object.keys(sourceValueMap);
   const targetNames = Object.keys(targetValueMap);
+  const sourceIndexMap = {};
+  sourceNames.forEach((name, index) => {
+    sourceIndexMap[name] = index;
+  });
   const totalValue = sourceNames.reduce((sum, name) => sum + sourceValueMap[name], 0);
   if (totalValue <= 0) {
     return null;
@@ -329,7 +370,8 @@ function buildSankeyLayout(links, width, height, renderOptions) {
       controlX,
       sy,
       ty,
-      linkHeight
+      linkHeight,
+      sourceIndex: Number.isFinite(sourceIndexMap[link.source]) ? sourceIndexMap[link.source] : 0
     });
   });
 
@@ -354,6 +396,12 @@ function buildSankeySvgText(links, width, height, renderOptions) {
     return '';
   }
   const labelPositionMode = (renderOptions && renderOptions.labelPositionMode) || 'inner';
+  const themeColors =
+    renderOptions &&
+    Array.isArray(renderOptions.themeColors) &&
+    renderOptions.themeColors.length > 0
+      ? renderOptions.themeColors
+      : FALLBACK_THEME_COLORS;
 
   const segments = [];
   segments.push(
@@ -372,7 +420,10 @@ function buildSankeySvgText(links, width, height, renderOptions) {
       segment.endX
     )} ${formatSvgNumber(segment.ty)}`;
     segments.push(
-      `<path d="${pathData}" fill="none" stroke="#9b6bc2" stroke-opacity="0.35" stroke-width="${formatSvgNumber(
+      `<path d="${pathData}" fill="none" stroke="${toRgbaColor(
+        getNodeColor(segment.sourceIndex, themeColors),
+        0.35
+      )}" stroke-width="${formatSvgNumber(
         segment.linkHeight
       )}" stroke-linecap="round" />`
     );
@@ -385,7 +436,7 @@ function buildSankeySvgText(links, width, height, renderOptions) {
     segments.push(
       `<rect x="${formatSvgNumber(layout.leftX)}" y="${formatSvgNumber(node.y)}" width="${formatSvgNumber(
         layout.nodeWidth
-      )}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index)}" />`
+      )}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index, themeColors)}" />`
     );
     segments.push(
       `<text x="${formatSvgNumber(textPlacement.x)}" y="${formatSvgNumber(textY)}" fill="#4e5969" font-size="10" text-anchor="${
@@ -401,7 +452,7 @@ function buildSankeySvgText(links, width, height, renderOptions) {
     segments.push(
       `<rect x="${formatSvgNumber(layout.rightX)}" y="${formatSvgNumber(node.y)}" width="${formatSvgNumber(
         layout.nodeWidth
-      )}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index)}" />`
+      )}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index, themeColors)}" />`
     );
     segments.push(
       `<text x="${formatSvgNumber(textPlacement.x)}" y="${formatSvgNumber(textY)}" fill="#4e5969" font-size="10" text-anchor="${
@@ -416,7 +467,8 @@ function buildSankeySvgText(links, width, height, renderOptions) {
 
 Page({
   data: {
-    selectedThemeIndex: 1,
+    selectedThemeIndex: DEFAULT_THEME_INDEX,
+    themes: Array.isArray(themePresets) ? themePresets : [],
     showThemeSheet: false,
     uploadMessage: '默认加载 data/sankey.xlsx 中...',
     parseError: '',
@@ -525,6 +577,37 @@ Page({
     this.setData({ showThemeSheet: false });
   },
 
+  /**
+   * 返回当前选中主题色带。
+   */
+  getCurrentThemeColors() {
+    const themes = this.data.themes || [];
+    const selectedTheme = themes[this.data.selectedThemeIndex] || themes[0];
+    if (!selectedTheme || !Array.isArray(selectedTheme.colors) || selectedTheme.colors.length === 0) {
+      return FALLBACK_THEME_COLORS;
+    }
+    return selectedTheme.colors;
+  },
+
+  /**
+   * 选择主题后立即生效，并关闭底部主题弹层。
+   */
+  onSelectTheme(e) {
+    const index = Number(e.currentTarget.dataset.index);
+    if (Number.isNaN(index)) {
+      return;
+    }
+    this.setData(
+      {
+        selectedThemeIndex: index,
+        showThemeSheet: false
+      },
+      () => {
+        this.drawSankey();
+      }
+    );
+  },
+
   /**
    * 更新“节点间距”下拉值并立即重绘。
    */
@@ -931,6 +1014,7 @@ Page({
   drawSankey() {
     const rawLinks = this.data.sankeyLinks || [];
     const links = applyDirection(rawLinks, this.data.direction);
+    const themeColors = this.getCurrentThemeColors();
     const query = wx.createSelectorQuery().in(this);
     query.select('#sankeyCanvas').boundingClientRect();
     query.exec((res) => {
@@ -960,7 +1044,7 @@ Page({
       }
 
       layout.linkSegments.forEach((segment) => {
-        ctx.setStrokeStyle('rgba(155,107,194,0.35)');
+        ctx.setStrokeStyle(toRgbaColor(getNodeColor(segment.sourceIndex, themeColors), 0.35));
         ctx.setLineWidth(segment.linkHeight);
         ctx.setLineCap('round');
         ctx.beginPath();
@@ -979,7 +1063,7 @@ Page({
       layout.sourceNames.forEach((name, index) => {
         const node = layout.sourcePos[name];
         const labelPlacement = getCanvasLabelPlacement(layout, true, this.data.labelPositionMode);
-        ctx.setFillStyle(getNodeColor(index));
+        ctx.setFillStyle(getNodeColor(index, themeColors));
         ctx.fillRect(layout.leftX, node.y, layout.nodeWidth, node.h);
         ctx.setFillStyle('#4e5969');
         ctx.setFontSize(10);
@@ -991,7 +1075,7 @@ Page({
       layout.targetNames.forEach((name, index) => {
         const node = layout.targetPos[name];
         const labelPlacement = getCanvasLabelPlacement(layout, false, this.data.labelPositionMode);
-        ctx.setFillStyle(getNodeColor(index));
+        ctx.setFillStyle(getNodeColor(index, themeColors));
         ctx.fillRect(layout.rightX, node.y, layout.nodeWidth, node.h);
         ctx.setFillStyle('#4e5969');
         ctx.setFontSize(10);
@@ -1049,6 +1133,7 @@ Page({
   onExportSvg() {
     const rawLinks = this.data.sankeyLinks || [];
     const links = applyDirection(rawLinks, this.data.direction);
+    const themeColors = this.getCurrentThemeColors();
     if (!Array.isArray(links) || links.length === 0) {
       wx.showToast({
         title: '暂无可导出的数据',
@@ -1073,7 +1158,8 @@ Page({
         nodeGap: this.data.nodeGap,
         chartPadding: this.data.chartPadding,
         labelPositionMode: this.data.labelPositionMode,
-        targetAlignMode: this.data.targetAlignMode
+        targetAlignMode: this.data.targetAlignMode,
+        themeColors
       });
       if (!svgText) {
         wx.showToast({
diff --git a/miniapp/pages/index/index.wxml b/miniapp/pages/index/index.wxml
index 6956633..0d70d55 100644
--- a/miniapp/pages/index/index.wxml
+++ b/miniapp/pages/index/index.wxml
@@ -156,12 +156,30 @@
   <view class="theme-sheet-mask" wx:if="{{showThemeSheet}}" bindtap="onCloseThemeSheet" />
   <view class="theme-sheet" wx:if="{{showThemeSheet}}">
     <text class="theme-title">选择配色主题</text>
-    <view class="theme-row" wx:for="{{4}}" wx:key="index">
-      <image
-        src="{{selectedThemeIndex === index ? '../../assets/icons/radiobutton.svg' : '../../assets/icons/radiobutton-no.svg'}}"
-        mode="aspectFit"
-      />
-      <view class="theme-bar" />
-    </view>
+    <scroll-view class="theme-list" scroll-y enhanced show-scrollbar="true">
+      <view
+        class="theme-row"
+        wx:for="{{themes}}"
+        wx:key="id"
+        wx:for-item="theme"
+        wx:for-index="themeIndex"
+        data-index="{{themeIndex}}"
+        bindtap="onSelectTheme"
+      >
+        <image
+          src="{{selectedThemeIndex === themeIndex ? '../../assets/icons/radiobutton.svg' : '../../assets/icons/radiobutton-no.svg'}}"
+          mode="aspectFit"
+        />
+        <view class="theme-bar">
+          <view
+            class="theme-color"
+            wx:for="{{theme.colors}}"
+            wx:key="*this"
+            wx:for-item="color"
+            style="background-color: {{color}};"
+          />
+        </view>
+      </view>
+    </scroll-view>
   </view>
 </view>
diff --git a/miniapp/pages/index/index.wxss b/miniapp/pages/index/index.wxss
index c2cf72d..0027adc 100644
--- a/miniapp/pages/index/index.wxss
+++ b/miniapp/pages/index/index.wxss
@@ -385,8 +385,9 @@
   bottom: 0;
   background: #fff;
   border-radius: 16px 16px 0 0;
-  padding: 12px;
+  padding: 12px 12px 16px;
   z-index: 11;
+  box-sizing: border-box;
 }
 
 .theme-title {
@@ -395,11 +396,21 @@
   text-align: center;
 }
 
-.theme-row {
+.theme-list {
   margin-top: 8px;
+  height: 216px;
+  min-height: 216px;
+}
+
+.theme-row {
   display: flex;
   align-items: center;
   gap: 8px;
+  height: 36px;
+}
+
+.theme-row + .theme-row {
+  margin-top: 0;
 }
 
 .theme-row image {
@@ -411,5 +422,11 @@
   flex: 1;
   height: 20px;
   border-radius: 2px;
-  background: linear-gradient(90deg, #f72585, #3f37c9, #4cc9f0);
+  overflow: hidden;
+  display: flex;
+}
+
+.theme-color {
+  flex: 1;
+  height: 100%;
 }