hz4th_coder/data-chart-tool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增5种主题风格 + 风格快速切换按钮

Browse Source 
新增主题：
- cherry 樱花粉：甜美可爱
- midnight 午夜：深紫高端
- gold 金色：奢华典雅
- coral 珊瑚：时尚活泼
- mint 薄荷：清新凉爽

UI改进：
- 在图表展示区下方添加15种风格快速切换按钮
- 每个按钮带渐变色预览，点击即切换
- 图表模式和表格模式都支持全部15种主题
- 下拉框和按钮状态双向同步
This commit is contained in:
hz4th_coder
2026-07-17 13:10:03 +08:00
parent 13abdea15b
commit 3833742d4d
4 changed files with 260 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+83 -2
View File
@@ -65,12 +65,22 @@ C, 20, 30, 40</pre>
<div class="config-group">
<label>主题风格</label>
<select id="themeStyle" onchange="updateChart()">
<select id="themeStyle" onchange="syncThemeButtons(this.value); updateChart()">
<option value="default">默认</option>
<option value="dark">深色</option>
<option value="macarons">马卡龙</option>
<option value="gradient">渐变</option>
<option value="retro">复古</option>
<option value="ocean">海洋</option>
<option value="forest">森林</option>
<option value="sunset">日落</option>
<option value="lavender">薰衣草</option>
<option value="minimal">极简</option>
<option value="cherry">樱花</option>
<option value="midnight">午夜</option>
<option value="gold">金色</option>
<option value="coral">珊瑚</option>
<option value="mint">薄荷</option>
</select>
</div>
@@ -97,7 +107,7 @@ C, 20, 30, 40</pre>
<div class="config-group">
<label>主题风格</label>
<select id="tableTheme" onchange="updateTable()">
<select id="tableTheme" onchange="syncThemeButtons(this.value); updateTable()">
<option value="default">默认</option>
<option value="dark">深色</option>
<option value="macarons">马卡龙</option>
@@ -108,6 +118,11 @@ C, 20, 30, 40</pre>
<option value="sunset">日落</option>
<option value="lavender">薰衣草</option>
<option value="minimal">极简</option>
<option value="cherry">樱花</option>
<option value="midnight">午夜</option>
<option value="gold">金色</option>
<option value="coral">珊瑚</option>
<option value="mint">薄荷</option>
</select>
</div>
@@ -181,6 +196,72 @@ C, 20, 30, 40</pre>
</div>
</div>
</div>
<!-- 风格快速切换按钮 -->
<div class="theme-buttons-section">
<h3>🎨 快速切换风格</h3>
<div class="theme-buttons-grid" id="themeButtonsGrid">
<button class="theme-btn" data-theme="default" onclick="quickSwitchTheme('default')">
<span class="theme-preview" style="background: linear-gradient(135deg, #5470c6, #91cc75)"></span>
<span class="theme-name">默认</span>
</button>
<button class="theme-btn" data-theme="dark" onclick="quickSwitchTheme('dark')">
<span class="theme-preview" style="background: linear-gradient(135deg, #4fc3f7, #81c784)"></span>
<span class="theme-name">深色</span>
</button>
<button class="theme-btn" data-theme="macarons" onclick="quickSwitchTheme('macarons')">
<span class="theme-preview" style="background: linear-gradient(135deg, #2ec7c9, #b6a2de)"></span>
<span class="theme-name">马卡龙</span>
</button>
<button class="theme-btn" data-theme="gradient" onclick="quickSwitchTheme('gradient')">
<span class="theme-preview" style="background: linear-gradient(135deg, #7f7fd5, #91eae4)"></span>
<span class="theme-name">渐变</span>
</button>
<button class="theme-btn" data-theme="retro" onclick="quickSwitchTheme('retro')">
<span class="theme-preview" style="background: linear-gradient(135deg, #d4a5a5, #95b9c7)"></span>
<span class="theme-name">复古</span>
</button>
<button class="theme-btn" data-theme="ocean" onclick="quickSwitchTheme('ocean')">
<span class="theme-preview" style="background: linear-gradient(135deg, #0077b6, #90e0ef)"></span>
<span class="theme-name">海洋</span>
</button>
<button class="theme-btn" data-theme="forest" onclick="quickSwitchTheme('forest')">
<span class="theme-preview" style="background: linear-gradient(135deg, #2d6a4f, #95d5b2)"></span>
<span class="theme-name">森林</span>
</button>
<button class="theme-btn" data-theme="sunset" onclick="quickSwitchTheme('sunset')">
<span class="theme-preview" style="background: linear-gradient(135deg, #e85d04, #ffba08)"></span>
<span class="theme-name">日落</span>
</button>
<button class="theme-btn" data-theme="lavender" onclick="quickSwitchTheme('lavender')">
<span class="theme-preview" style="background: linear-gradient(135deg, #7c3aed, #c4b5fd)"></span>
<span class="theme-name">薰衣草</span>
</button>
<button class="theme-btn" data-theme="minimal" onclick="quickSwitchTheme('minimal')">
<span class="theme-preview" style="background: linear-gradient(135deg, #6b7280, #d1d5db)"></span>
<span class="theme-name">极简</span>
</button>
<button class="theme-btn" data-theme="cherry" onclick="quickSwitchTheme('cherry')">
<span class="theme-preview" style="background: linear-gradient(135deg, #e91e63, #f48fb1)"></span>
<span class="theme-name">樱花</span>
</button>
<button class="theme-btn" data-theme="midnight" onclick="quickSwitchTheme('midnight')">
<span class="theme-preview" style="background: linear-gradient(135deg, #6c63ff, #3d3d5c)"></span>
<span class="theme-name">午夜</span>
</button>
<button class="theme-btn" data-theme="gold" onclick="quickSwitchTheme('gold')">
<span class="theme-preview" style="background: linear-gradient(135deg, #b8860b, #daa520)"></span>
<span class="theme-name">金色</span>
</button>
<button class="theme-btn" data-theme="coral" onclick="quickSwitchTheme('coral')">
<span class="theme-preview" style="background: linear-gradient(135deg, #ff6f61, #ffab91)"></span>
<span class="theme-name">珊瑚</span>
</button>
<button class="theme-btn" data-theme="mint" onclick="quickSwitchTheme('mint')">
<span class="theme-preview" style="background: linear-gradient(135deg, #00bfa5, #80cbc4)"></span>
<span class="theme-name">薄荷</span>
</button>
</div>
</div>
</div>
</div>
</div>