feat(baoyu-markdown-to-html): rename themes and add color presets with theme defaults

Rename red→heritage and orange→warm themes. Add 13 named color presets,
serif-cjk font family, and per-theme style defaults with CLI override support.

skills/baoyu-markdown-to-html/SKILL.md

@@ -92,8 +92,8 @@ test -f "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" && grep -o 'default
 | `default` (Recommended) | 经典主题 - 传统排版，标题居中带底边，二级标题白字彩底 |
 | `grace` | 优雅主题 - 文字阴影，圆角卡片，精致引用块 |
 | `simple` | 简洁主题 - 现代极简风，不对称圆角，清爽留白 |
-| `red` | 红色主题 - 红金配色，宋体排版，传统书法风格 |
-| `orange` | 橙色主题 - 暖色调现代风，宽松行距，圆角装饰 |
+| `heritage` | 传统主题 - 宋体排版，传统书法风格，默认红金配色 |
+| `warm` | 温暖主题 - 暖色调现代风，宽松行距，圆角装饰 |
 
 ### Step 2: Convert
 
@@ -115,11 +115,32 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts <markdown_file> [options]
 
 | Option | Description | Default |
 |--------|-------------|---------|
-| `--theme <name>` | Theme name (default, grace, simple, red, orange) | default |
+| `--theme <name>` | Theme name (default, grace, simple, heritage, warm) | default |
+| `--color <name\|hex>` | Primary color: preset name or hex value | theme default |
+| `--font-family <name>` | Font: sans, serif, serif-cjk, mono, or CSS value | theme default |
+| `--font-size <N>` | Font size: 14px, 15px, 16px, 17px, 18px | 16px |
 | `--title <title>` | Override title from frontmatter | |
 | `--keep-title` | Keep the first heading in content | false (removed) |
 | `--help` | Show help | |
 
+**Color Presets:**
+
+| Name | Hex | Label |
+|------|-----|-------|
+| blue | #0F4C81 | 经典蓝 |
+| green | #009874 | 翡翠绿 |
+| vermilion | #FA5151 | 活力橘 |
+| yellow | #FECE00 | 柠檬黄 |
+| purple | #92617E | 薰衣紫 |
+| sky | #55C9EA | 天空蓝 |
+| rose | #B76E79 | 玫瑰金 |
+| olive | #556B2F | 橄榄绿 |
+| black | #333333 | 石墨黑 |
+| gray | #A9A9A9 | 雾烟灰 |
+| pink | #FFB7C5 | 樱花粉 |
+| red | #A93226 | 中国红 (heritage default) |
+| orange | #D97757 | 暖橘 (warm default) |
+
 **Examples:**
 
 ```bash
@@ -129,6 +150,9 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts article.md
 # With specific theme
 npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme grace
 
+# Theme with custom color
+npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --theme heritage --color green
+
 # Keep the first heading in content
 npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --keep-title
 
@@ -171,8 +195,8 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts article.md --title "My Article"
 | `default` | 经典主题 - 传统排版，标题居中带底边，二级标题白字彩底 |
 | `grace` | 优雅主题 - 文字阴影，圆角卡片，精致引用块 (by @brzhang) |
 | `simple` | 简洁主题 - 现代极简风，不对称圆角，清爽留白 (by @okooo5km) |
-| `red` | 红色主题 - 红金配色，宋体排版，传统书法风格 |
-| `orange` | 橙色主题 - 暖色调现代风，宽松行距，圆角装饰 |
+| `heritage` | 传统主题 - 宋体排版，传统书法风格，默认红金配色 |
+| `warm` | 温暖主题 - 暖色调现代风，宽松行距，圆角装饰 |
 
 ## Supported Markdown Features
 

skills/baoyu-markdown-to-html/scripts/md/render.ts

@@ -44,11 +44,28 @@ const FALLBACK_THEMES: ThemeName[] = ["default", "grace", "simple"];
 const FONT_FAMILY_MAP: Record<string, string> = {
   sans: `-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif`,
   serif: `Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif`,
+  "serif-cjk": `"Source Han Serif SC", "Noto Serif CJK SC", "Source Han Serif CN", STSong, SimSun, serif`,
   mono: `Menlo, Monaco, 'Courier New', monospace`,
 };
 
 const FONT_SIZE_OPTIONS = ["14px", "15px", "16px", "17px", "18px"];
 
+const COLOR_PRESETS: Record<string, string> = {
+  blue: "#0F4C81",
+  green: "#009874",
+  vermilion: "#FA5151",
+  yellow: "#FECE00",
+  purple: "#92617E",
+  sky: "#55C9EA",
+  rose: "#B76E79",
+  olive: "#556B2F",
+  black: "#333333",
+  gray: "#A9A9A9",
+  pink: "#FFB7C5",
+  red: "#A93226",
+  orange: "#D97757",
+};
+
 const CODE_BLOCK_THEMES = [
   "1c-light", "a11y-dark", "a11y-light", "agate", "an-old-hope",
   "androidstudio", "arduino-light", "arta", "ascetic",
@@ -77,6 +94,8 @@ interface StyleConfig {
   fontSize: string;
   foreground: string;
   blockquoteBackground: string;
+  accentColor: string;
+  containerBg: string;
 }
 
 const DEFAULT_STYLE: StyleConfig = {
@@ -85,6 +104,26 @@ const DEFAULT_STYLE: StyleConfig = {
   fontSize: "16px",
   foreground: "0 0% 3.9%",
   blockquoteBackground: "#f7f7f7",
+  accentColor: "#6B7280",
+  containerBg: "transparent",
+};
+
+const THEME_STYLE_DEFAULTS: Record<string, Partial<StyleConfig>> = {
+  heritage: {
+    primaryColor: COLOR_PRESETS.red,
+    accentColor: "#D4AC0D",
+    containerBg: "rgba(255, 251, 240, 1)",
+    fontFamily: FONT_FAMILY_MAP["serif-cjk"],
+    blockquoteBackground: "rgba(253, 237, 236, 1)",
+  },
+  warm: {
+    primaryColor: COLOR_PRESETS.orange,
+    accentColor: "#E4B1A0",
+    containerBg: "rgba(250, 249, 245, 1)",
+    fontFamily: FONT_FAMILY_MAP.sans,
+    fontSize: "15px",
+    blockquoteBackground: "rgba(255, 255, 255, 0.6)",
+  },
 };
 
 Object.entries(COMMON_LANGUAGES).forEach(([name, lang]) => {
@@ -532,8 +571,8 @@ function printUsage(): void {
       "",
       "Options:",
       `  --theme <name>        Theme (${THEME_NAMES.join(", ")})`,
-      `  --color <hex>         Primary color (default: ${DEFAULT_STYLE.primaryColor})`,
-      `  --font-family <name>  Font: sans, serif, mono, or CSS value`,
+      `  --color <name|hex>    Primary color: ${Object.keys(COLOR_PRESETS).join(", ")}, or hex`,
+      `  --font-family <name>  Font: ${Object.keys(FONT_FAMILY_MAP).join(", ")}, or CSS value`,
       `  --font-size <N>       Font size: ${FONT_SIZE_OPTIONS.join(", ")} (default: 16px)`,
       `  --code-theme <name>   Code highlight theme (default: github)`,
       `  --mac-code-block      Show Mac-style code block header`,
@@ -559,15 +598,19 @@ function resolveFontFamily(value: string): string {
   return FONT_FAMILY_MAP[value] ?? value;
 }
 
+function resolveColor(value: string): string {
+  return COLOR_PRESETS[value] ?? value;
+}
+
 function parseArgs(argv: string[]): CliOptions | null {
   const ext = loadExtendConfig();
 
   let inputPath = "";
   let theme: ThemeName = ext.default_theme ?? "default";
   let keepTitle = ext.keep_title ?? false;
-  let primaryColor = ext.default_color ?? DEFAULT_STYLE.primaryColor;
-  let fontFamily = ext.default_font_family ? resolveFontFamily(ext.default_font_family) : DEFAULT_STYLE.fontFamily;
-  let fontSize = ext.default_font_size ?? DEFAULT_STYLE.fontSize;
+  let primaryColor: string | undefined = ext.default_color ? resolveColor(ext.default_color) : undefined;
+  let fontFamily: string | undefined = ext.default_font_family ? resolveFontFamily(ext.default_font_family) : undefined;
+  let fontSize: string | undefined = ext.default_font_size ?? undefined;
   let codeTheme = ext.default_code_theme ?? "github";
   let isMacCodeBlock = ext.mac_code_block ?? true;
   let isShowLineNumber = ext.show_line_number ?? false;
@@ -605,7 +648,7 @@ function parseArgs(argv: string[]): CliOptions | null {
     if (arg === "--color" || arg.startsWith("--color=")) {
       const val = parseArgValue(argv, i, "--color");
       if (!val) { console.error("Missing value for --color"); return null; }
-      primaryColor = val;
+      primaryColor = resolveColor(val);
       if (!arg.includes("=")) i += 1;
       continue;
     }
@@ -678,9 +721,9 @@ interface CliOptions {
   inputPath: string;
   theme: ThemeName;
   keepTitle: boolean;
-  primaryColor: string;
-  fontFamily: string;
-  fontSize: string;
+  primaryColor?: string;
+  fontFamily?: string;
+  fontSize?: string;
   codeTheme: string;
   isMacCodeBlock: boolean;
   isShowLineNumber: boolean;
@@ -883,6 +926,8 @@ function buildCss(baseCss: string, themeCss: string, style: StyleConfig = DEFAUL
   --md-font-size: ${style.fontSize};
   --foreground: ${style.foreground};
   --blockquote-background: ${style.blockquoteBackground};
+  --md-accent-color: ${style.accentColor};
+  --md-container-bg: ${style.containerBg};
 }
 
 body {
@@ -978,11 +1023,15 @@ function normalizeCssText(cssText: string, style: StyleConfig = DEFAULT_STYLE):
     .replace(/var\(--md-font-family\)/g, style.fontFamily)
     .replace(/var\(--md-font-size\)/g, style.fontSize)
     .replace(/var\(--blockquote-background\)/g, style.blockquoteBackground)
+    .replace(/var\(--md-accent-color\)/g, style.accentColor)
+    .replace(/var\(--md-container-bg\)/g, style.containerBg)
     .replace(/hsl\(var\(--foreground\)\)/g, "#3f3f3f")
     .replace(/--md-primary-color:\s*[^;"']+;?/g, "")
     .replace(/--md-font-family:\s*[^;"']+;?/g, "")
     .replace(/--md-font-size:\s*[^;"']+;?/g, "")
     .replace(/--blockquote-background:\s*[^;"']+;?/g, "")
+    .replace(/--md-accent-color:\s*[^;"']+;?/g, "")
+    .replace(/--md-container-bg:\s*[^;"']+;?/g, "")
     .replace(/--foreground:\s*[^;"']+;?/g, "");
 }
 
@@ -1038,11 +1087,13 @@ async function main(): Promise<void> {
     options.inputPath.replace(/\.md$/i, ".html")
   );
 
+  const themeDefaults = THEME_STYLE_DEFAULTS[options.theme] ?? {};
   const style: StyleConfig = {
     ...DEFAULT_STYLE,
-    primaryColor: options.primaryColor,
-    fontFamily: options.fontFamily,
-    fontSize: options.fontSize,
+    ...themeDefaults,
+    ...(options.primaryColor !== undefined ? { primaryColor: options.primaryColor } : {}),
+    ...(options.fontFamily !== undefined ? { fontFamily: options.fontFamily } : {}),
+    ...(options.fontSize !== undefined ? { fontSize: options.fontSize } : {}),
   };
 
   const { baseCss, themeCss } = loadThemeCss(options.theme);

skills/baoyu-markdown-to-html/scripts/md/themes/heritage.css

@@ -1,23 +1,23 @@
 /**
- * MD 红色主题
- * 传统书法风格，红金配色，宋体排版
+ * MD 传统主题 (heritage)
+ * 传统书法风格，宋体排版，默认红金配色
  */
 
-/* ==================== 容器字体覆盖 ==================== */
+/* ==================== 容器样式覆盖 ==================== */
 section,
 container {
-  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "Source Han Serif CN", STSong, SimSun, serif;
-  font-size: 16px;
+  font-family: var(--md-font-family);
+  font-size: var(--md-font-size);
   line-height: 1.8;
-  background-color: rgba(255, 251, 240, 1);
-  border: 4px solid rgba(169, 50, 38, 1);
+  background-color: var(--md-container-bg);
+  border: 4px solid var(--md-primary-color);
   border-radius: 12px;
   padding: 6px 12px;
 }
 
 #output {
-  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "Source Han Serif CN", STSong, SimSun, serif;
-  font-size: 16px;
+  font-family: var(--md-font-family);
+  font-size: var(--md-font-size);
   line-height: 1.8;
 }
 
@@ -25,9 +25,9 @@ container {
 h1 {
   display: table;
   padding: 0 1em;
-  border-bottom: 2px solid #A93226;
+  border-bottom: 2px solid var(--md-primary-color);
   margin: 30px auto 20px;
-  color: #A93226;
+  color: var(--md-primary-color);
   font-size: 24px;
   font-weight: bold;
   text-align: center;
@@ -40,7 +40,7 @@ h2 {
   padding: 6px 20px;
   margin: 30px auto 20px;
   color: #FFFFFF;
-  background-color: #A93226;
+  background-color: var(--md-primary-color);
   font-size: 18px;
   font-weight: bold;
   text-align: center;
@@ -52,9 +52,9 @@ h2 {
 /* ==================== 三级标题 ==================== */
 h3 {
   padding-left: 8px;
-  border-left: 3px solid #A93226;
+  border-left: 3px solid var(--md-primary-color);
   margin: 20px 8px 10px 0;
-  color: #A93226;
+  color: var(--md-primary-color);
   font-size: 17px;
   font-weight: normal;
   line-height: 1.2;
@@ -63,7 +63,7 @@ h3 {
 /* ==================== 四级标题 ==================== */
 h4 {
   margin: 10px 8px;
-  color: #D4AC0D;
+  color: var(--md-accent-color);
   font-size: 16px;
   font-weight: normal;
 }
@@ -88,7 +88,7 @@ h6 {
 p {
   margin: 16px 0;
   letter-spacing: 0.5px;
-  color: #2C2C2C;
+  color: hsl(var(--foreground));
   line-height: 1.8;
 }
 
@@ -96,15 +96,15 @@ p {
 blockquote {
   font-style: normal;
   padding: 15px 12px;
-  border-left: 2px solid rgba(169, 50, 38, 0.8);
+  border-left: 2px solid color-mix(in srgb, var(--md-primary-color) 80%, transparent);
   border-radius: 4px;
-  color: #5D4037;
-  background-color: rgba(253, 237, 236, 1);
+  color: hsl(var(--foreground));
+  background-color: var(--blockquote-background);
   margin: 12px 0;
 }
 
 blockquote > p {
-  color: #5D4037;
+  color: hsl(var(--foreground));
   font-size: 14px;
   margin: 0;
 }
@@ -113,14 +113,14 @@ blockquote > p {
 pre.code__pre,
 .hljs.code__pre {
   font-size: 13px;
-  border: 1px solid #D4AC0D;
+  border: 1px solid var(--md-accent-color);
   box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
 }
 
 /* ==================== 图片 ==================== */
 img {
   border-radius: 4px;
-  border: 1px solid #D4AC0D;
+  border: 1px solid var(--md-accent-color);
   margin: 20px auto;
   padding: 5px;
 }
@@ -141,7 +141,7 @@ ul {
 
 li {
   margin: 0.2em 0;
-  color: #2C2C2C;
+  color: hsl(var(--foreground));
   font-size: 16px;
 }
 
@@ -149,35 +149,35 @@ li {
 hr {
   border-style: solid;
   border-width: 2px 0 0;
-  border-color: #D4AC0D;
+  border-color: var(--md-accent-color);
   margin: 40px 0;
 }
 
 /* ==================== 强调 ==================== */
 strong {
-  color: #A93226;
+  color: var(--md-primary-color);
   font-weight: bold;
 }
 
 /* ==================== 标记高亮 ==================== */
 .markup-highlight {
-  background-color: #FADBD8;
+  background-color: color-mix(in srgb, var(--md-primary-color) 15%, white);
   padding: 5px;
-  color: #A93226;
+  color: var(--md-primary-color);
 }
 
 .markup-underline {
   text-decoration: underline;
-  text-decoration-color: #D4AC0D;
+  text-decoration-color: var(--md-accent-color);
 }
 
 /* ==================== 链接 ==================== */
 a {
-  color: #A93226;
+  color: var(--md-primary-color);
   text-decoration: none;
 }
 
 /* ==================== 表格 ==================== */
 th {
-  background: rgba(169, 50, 38, 0.1);
+  background: color-mix(in srgb, var(--md-primary-color) 10%, transparent);
 }

skills/baoyu-markdown-to-html/scripts/md/themes/warm.css

@@ -1,23 +1,23 @@
 /**
- * MD 橙色主题
- * 暖色调现代风，橙色主色，宽松行距
+ * MD 温暖主题 (warm)
+ * 暖色调现代风，默认橙色主色，宽松行距
  */
 
 /* ==================== 容器样式覆盖 ==================== */
 section,
 container {
-  font-family: PingFang SC, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;
-  font-size: 15px;
+  font-family: var(--md-font-family);
+  font-size: var(--md-font-size);
   line-height: 2;
-  background-color: rgba(250, 249, 245, 1);
+  background-color: var(--md-container-bg);
   border: 1px solid rgba(255, 255, 255, 0.01);
   border-radius: 25px;
   padding: 12px 12px;
 }
 
 #output {
-  font-family: PingFang SC, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;
-  font-size: 15px;
+  font-family: var(--md-font-family);
+  font-size: var(--md-font-size);
   line-height: 2;
 }
 
@@ -26,8 +26,8 @@ h1 {
   display: table;
   padding: 0.3em 1em;
   margin: 20px auto;
-  color: #3B3B38;
-  background: #D97757;
+  color: hsl(var(--foreground));
+  background: var(--md-primary-color);
   border-radius: 15px;
   font-size: 28px;
   font-weight: bold;
@@ -41,16 +41,16 @@ h2 {
   padding-bottom: 0;
   margin: 0 auto 20px;
   width: 100%;
-  color: #D97757;
+  color: var(--md-primary-color);
   font-size: 20px;
   font-weight: bold;
-  border-bottom: 2px solid #E4B1A0;
+  border-bottom: 2px solid var(--md-accent-color);
 }
 
 /* ==================== 三级标题 ==================== */
 h3 {
   margin: 0 8px 10px;
-  color: #3B3B38;
+  color: hsl(var(--foreground));
   font-size: 18px;
   font-weight: bold;
 }
@@ -58,7 +58,7 @@ h3 {
 /* ==================== 四级标题 ==================== */
 h4 {
   margin: 0 8px 10px;
-  color: #D97757;
+  color: var(--md-primary-color);
   font-size: 16px;
   font-weight: bold;
 }
@@ -68,7 +68,7 @@ h5 {
   display: inline-block;
   margin: 0 8px 10px;
   padding: 4px 10px;
-  color: #3B3B38;
+  color: hsl(var(--foreground));
   background: rgba(255, 255, 255, 0.7);
   border: 1px solid rgb(189, 224, 254);
   border-radius: 20px;
@@ -79,7 +79,7 @@ h5 {
 /* ==================== 六级标题 ==================== */
 h6 {
   margin: 0 8px 10px;
-  color: #D97757;
+  color: var(--md-primary-color);
   font-size: 16px;
   font-weight: bold;
 }
@@ -87,7 +87,7 @@ h6 {
 /* ==================== 段落 ==================== */
 p {
   margin: 20px 0;
-  color: #3B3B38;
+  color: hsl(var(--foreground));
   line-height: 2;
   letter-spacing: 0px;
   font-size: 15px;
@@ -97,15 +97,15 @@ p {
 blockquote {
   font-style: normal;
   padding: 15px 12px;
-  border-left: 7px solid rgba(228, 177, 160, 1);
+  border-left: 7px solid var(--md-accent-color);
   border-radius: 10px;
-  color: #3B3B38;
-  background-color: rgba(255, 255, 255, 0.6);
+  color: hsl(var(--foreground));
+  background-color: var(--blockquote-background);
   margin: 12px 0;
 }
 
 blockquote > p {
-  color: #3B3B38;
+  color: hsl(var(--foreground));
   font-size: 14px;
   margin: 0;
 }
@@ -139,7 +139,7 @@ ul {
 
 li {
   margin: 0.2em 0;
-  color: #3B3B38;
+  color: hsl(var(--foreground));
   font-size: 15px;
 }
 
@@ -147,35 +147,35 @@ li {
 hr {
   border-style: solid;
   border-width: 1px 0 0;
-  border-color: #D97757;
+  border-color: var(--md-primary-color);
   margin: 0;
 }
 
 /* ==================== 强调 ==================== */
 strong {
-  color: #3B3B38;
+  color: hsl(var(--foreground));
   font-weight: bold;
 }
 
 /* ==================== 标记高亮 ==================== */
 .markup-highlight {
-  background-color: #3B3B3B;
+  background-color: hsl(var(--foreground));
   padding: 10px;
-  color: #FAF9F5;
+  color: var(--md-container-bg);
 }
 
 .markup-underline {
   text-decoration: underline;
-  text-decoration-color: #E4B1A0;
+  text-decoration-color: var(--md-accent-color);
 }
 
 /* ==================== 链接 ==================== */
 a {
-  color: #D97757;
+  color: var(--md-primary-color);
   text-decoration: none;
 }
 
 /* ==================== 表格 ==================== */
 th {
-  background: rgba(217, 119, 87, 0.1);
+  background: color-mix(in srgb, var(--md-primary-color) 10%, transparent);
 }