docs: 补充主题功能引导文档中背景和网格的应用优先级说明

Author: DymoneLewis

sites/docs/docs/tutorial/basic/theme.en.md

@@ -112,9 +112,43 @@ lf.setTheme({}, 'customTheme')
 ### Theme Style Priority
 
 The priority of theme styles (from low to high):
+
+#### Node, Edge, Text and Other Element Style Priority
 1. Built-in base styles (defaultTheme)
 2. Applied theme mode styles (specified via `themeMode` or second parameter of `setTheme`)
 3. Custom styles (specified via `style` or first parameter of `setTheme`)
 
+#### Background and Grid Style Priority
+Background and grid configurations have independent update mechanisms, with priority divided into two phases:
+
+**Initialization Phase Priority** (from low to high):
+1. Configuration in style: `background` and `grid` configurations in the constructor's `style` parameter
+2. Direct Parameter Configuration: Values set through `background` and `grid` parameters in the constructor (overrides configurations in style)
+
+**Runtime Phase Priority** (from low to high):
+1. Current Configuration: `background` and `grid` configurations after initialization
+2. Theme Mode Configuration: When calling `setTheme(style, themeMode)`, background and grid configurations in themeMode will override current configuration
+3. Custom Configuration: `background` and `grid` configurations in the style parameter of `setTheme(style, themeMode)` will override theme mode configuration
+
+```tsx | pure
+// Example: Priority application of background and grid
+
+// Initialization: Direct parameters > style parameters
+const lf = new LogicFlow({
+  style: {
+    background: { color: '#f0f0f0' }, // Lower priority
+    grid: { size: 15 }                // Lower priority
+  },
+  background: { color: '#f5f5f5' },   // Final effective (overrides style configuration)
+  grid: { size: 20 },                 // Final effective (overrides style configuration)
+})
+
+// Runtime: style parameters > themeMode parameters > current configuration
+lf.setTheme({
+  background: { color: '#ffffff' },   // Final effective background configuration
+  grid: { size: 10, visible: true },  // Final effective grid configuration
+}, 'dark') // Background and grid configurations in dark theme mode will be overridden by style parameters
+```
+
 ## Usage Example
 <code id="graphData" src="../../../src/tutorial/basic/instance/theme"></code>

sites/docs/docs/tutorial/basic/theme.zh.md

@@ -113,10 +113,44 @@ lf.setTheme({}, 'customTheme')
 ### 主题样式优先级
 
 主题样式的应用优先级（从低到高）：
+
+#### 节点、边、文本等元素样式优先级
 1. 内置基础样式（defaultTheme）
 2. 应用的主题模式样式（通过 `themeMode` 或 `setTheme` 的第二个参数设置）
 3. 自定义样式（通过 `style` 或 `setTheme` 的第一个参数设置）
 
+#### 背景和网格样式优先级
+背景（background）和网格（grid）配置具有独立的更新机制，其优先级分为两个阶段：
+
+**初始化阶段优先级**（从低到高）：
+1. style 中的配置：通过构造函数 `style` 参数中的 `background` 和 `grid` 配置
+2. 直接参数配置：通过构造函数中的 `background` 和 `grid` 参数设置的值（会覆盖 style 中的配置）
+
+**运行时阶段优先级**（从低到高）：
+1. 当前配置：初始化后的 `background` 和 `grid` 配置
+2. 主题模式配置：调用 `setTheme(style, themeMode)` 时，themeMode 中的背景和网格配置会覆盖当前配置
+3. 自定义配置：`setTheme(style, themeMode)` 中 style 参数的 `background` 和 `grid` 配置会覆盖主题模式配置
+
+```tsx | pure
+// 示例：背景和网格的优先级应用
+
+// 初始化时：直接参数 > style 参数
+const lf = new LogicFlow({
+  style: {
+    background: { color: '#f0f0f0' }, // 优先级较低
+    grid: { size: 15 }                // 优先级较低
+  },
+  background: { color: '#f5f5f5' },   // 最终生效（覆盖 style 中的配置）
+  grid: { size: 20 },                 // 最终生效（覆盖 style 中的配置）
+})
+
+// 运行时：style 参数 > themeMode 参数 > 当前配置
+lf.setTheme({
+  background: { color: '#ffffff' },   // 最终生效的背景配置
+  grid: { size: 10, visible: true },  // 最终生效的网格配置
+}, 'dark') // dark 主题模式的背景和网格配置会被 style 参数覆盖
+```
+
 ## 使用示例
 <code id="graphData" src="../../../src/tutorial/basic/instance/theme"></code>