feat: add background-color and text-color parameters

- Add background-color (default: transparent) and text-color (default: black) inputs
- Render background rect in SVG output
- Apply text color to collision text paths
- Web app reads colors from trajectory response
- Update README (EN & ZH) with new parameters
- Add tests for custom colors

Author: flycran

README.md

@@ -37,6 +37,8 @@ Inspired by [Orta Therox](https://github.com/Orta). Thanks Orta for your outstan
 | `sample-rate` | ❌ | `4` | Trajectory sample rate (higher = smaller SVG, less smooth animation) |
 | `shape` | ❌ | `circle` | Shape of contribution blocks: `circle` or `square` |
 | `text-top` | ❌ | `50` | Distance from the top of the world to the text |
+| `background-color` | ❌ | `transparent` | Background color of the SVG (CSS color value) |
+| `text-color` | ❌ | `black` | Color of the collision text (CSS color value) |
 
 ### Outputs
 

README_zh.md

@@ -37,6 +37,8 @@
 | `sample-rate` | ❌ | `4` | 轨迹采样率（越大文件越小，动画越不流畅） |
 | `shape` | ❌ | `circle` | 贡献方块的形状（`circle` 或 `square`） |
 | `text-top` | ❌ | `50` | 文字距离世界顶部的距离，控制文字垂直位置 |
+| `background-color` | ❌ | `transparent` | SVG 背景颜色（CSS 颜色值） |
+| `text-color` | ❌ | `black` | 碰撞文字颜色（CSS 颜色值） |
 
 ### 输出
 

__tests__/integration.test.ts

@@ -55,6 +55,10 @@ describe('full pipeline integration', () => {
     expect(svg).toContain('<circle')
     expect(svg).toContain('animateTransform')
     expect(svg).toContain('<path d="')
+    // Default background is transparent
+    expect(svg).toContain('fill="transparent"')
+    // Default text color is black
+    expect(svg).toContain('fill="black"')
   })
 
   it('generates square-shaped contributions when shape is square', async () => {
@@ -113,4 +117,26 @@ describe('full pipeline integration', () => {
 
     expect(svg1).toBe(svg2)
   })
+
+  it('uses custom background color', async () => {
+    const svg = await gensvg({
+      username: 'testuser',
+      text: 'Hi',
+      fontSize: 40,
+      backgroundColor: '#1a1a2e'
+    })
+
+    expect(svg).toContain('fill="#1a1a2e"')
+  })
+
+  it('uses custom text color', async () => {
+    const svg = await gensvg({
+      username: 'testuser',
+      text: 'Hi',
+      fontSize: 40,
+      textColor: '#ff0000'
+    })
+
+    expect(svg).toContain('fill="#ff0000"')
+  })
 })

action.yml

@@ -33,6 +33,14 @@ inputs:
     description: Distance from the top of the world to the text (controls vertical text position)
     required: false
     default: '50'
+  background-color:
+    description: Background color of the SVG (CSS color value)
+    required: false
+    default: transparent
+  text-color:
+    description: Color of the collision text (CSS color value)
+    required: false
+    default: black
 
 outputs:
   svg-path:

src/app.ts

@@ -16,7 +16,9 @@ Bun.serve({
         await startSimulation({
           username: GITHUB_ID,
           text: TEXT,
-          sampleRate: 8
+          sampleRate: 8,
+          backgroundColor: '#fff',
+          textColor: '#eb510a'
         })
       )
     },

src/gensvg.ts

@@ -10,6 +10,8 @@ import { HEIGHT, SCALE, SIZE, WIDTH } from './utils'
  * @returns 完整的 SVG 字符串
  */
 export async function gensvg(options: SimulationOptions): Promise<string> {
+  const backgroundColor = options.backgroundColor || 'transparent'
+  const textColor = options.textColor || 'black'
   const result: SimulationResult = await startSimulation(options)
 
   const svgWidth = WIDTH * SCALE
@@ -57,7 +59,7 @@ export async function gensvg(options: SimulationOptions): Promise<string> {
   // 用 path 渲染文字路径，与物理碰撞体坐标对齐
   // opentype 坐标 → SVG 坐标: svgX = (opentypeX + offsetX) * SCALE, svgY = (HEIGHT - centerY + opentypeY) * SCALE
   const textPathsSvg = result.textPaths
-    .map(({ pathData }) => `    <path d="${pathData}" fill="black" />`)
+    .map(({ pathData }) => `    <path d="${pathData}" fill="${textColor}" />`)
     .join('\n')
 
   const textGroupSvg = `
@@ -71,6 +73,7 @@ ${textPathsSvg}
   height="${svgHeight}"
   viewBox="0 0 ${svgWidth} ${svgHeight}"
 >
+  <rect width="${svgWidth}" height="${svgHeight}" fill="${backgroundColor}" />
 ${contributionsSvg}
 ${textGroupSvg}
 </svg>`

src/main.ts

@@ -24,10 +24,13 @@ export async function run(): Promise<void> {
     const sampleRate: number = parseInt(core.getInput('sample-rate') || '4', 10)
     const shape: string = core.getInput('shape') || 'circle'
     const textTop: number = parseInt(core.getInput('text-top') || '50', 10)
+    const backgroundColor: string =
+      core.getInput('background-color') || 'transparent'
+    const textColor: string = core.getInput('text-color') || 'black'
 
     core.info(`Generating gravity SVG for user: ${username}`)
     core.info(
-      `Text: "${text}", Font size: ${fontSize}, Sample rate: ${sampleRate}, Shape: ${shape}, Text top: ${textTop}`
+      `Text: "${text}", Font size: ${fontSize}, Sample rate: ${sampleRate}, Shape: ${shape}, Text top: ${textTop}, Background: ${backgroundColor}, Text color: ${textColor}`
     )
 
     const svg = await gensvg({
@@ -36,7 +39,9 @@ export async function run(): Promise<void> {
       fontSize,
       sampleRate,
       shape,
-      textTop
+      textTop,
+      backgroundColor,
+      textColor
     })
 
     writeFileSync(outputPath, svg, 'utf-8')

src/physics.ts

@@ -113,6 +113,10 @@ export interface SimulationOptions {
   sampleRate?: number
   /** 贡献方块的形状：circle（圆形）或 square（方形）。圆形物理模拟更丝滑，不容易穿模。 */
   shape?: string
+  /** 背景颜色，默认透明 */
+  backgroundColor?: string
+  /** 文字颜色，默认黑色 */
+  textColor?: string
 }
 
 export async function startSimulation({
@@ -122,7 +126,9 @@ export async function startSimulation({
   fontSize = 80,
   stepTime = 8,
   sampleRate = 4,
-  shape = 'circle'
+  shape = 'circle',
+  backgroundColor = 'transparent',
+  textColor = 'black'
 }: SimulationOptions): Promise<SimulationResult> {
   const world = await createWord()
   const contributionsSet = new Set<Contribution>()
@@ -270,6 +276,8 @@ export async function startSimulation({
     textTriangles,
     offsetX,
     centerY,
-    stepTime
+    stepTime,
+    backgroundColor,
+    textColor
   }
 }

src/utils/index.ts

@@ -44,4 +44,8 @@ export interface SimulationResult {
   centerY: number
   /** 一步的时间（ms） */
   stepTime: number
+  /** 背景颜色 */
+  backgroundColor: string
+  /** 文字颜色 */
+  textColor: string
 }

src/web/index.html

@@ -23,7 +23,7 @@
 
   <body
     style="display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #ddd;margin:0;">
-    <div style="background-color: white;font-size: 0;">
+    <div style="font-size: 0;">
       <svg id="canvas"></svg>
     </div>
     <script type="module" src="./index.ts"></script>