Skip to content

fix(ratewise): RW-3 PWA manifest 主題色 SSOT（#514 拆分 3/7） #518

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
s123104 wants to merge 1 commit into from
Closed

fix(ratewise): RW-3 PWA manifest 主題色 SSOT（#514 拆分 3/7） #518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/rw3-manifest-theme-color-ssot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@app/ratewise': patch
---

PWA 安裝/狀態列顏色改用實際主題色（移除硬編 hex），並修正 zen 主色 themes.ts 與 CSS 漂移。
4 changes: 2 additions & 2 deletions apps/ratewise/public/manifest.webmanifest
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"name": "HaoRate 匯率好工具",
"short_name": "HaoRate",
"description": "HaoRate 匯率好工具顯示臺灣銀行牌告實際買賣價（非中間價），支援 18 種貨幣換算，每 5 分鐘同步，離線可用的 PWA 匯率工具。",
"theme_color": "#8B5CF6",
"background_color": "#E8ECF4",
"theme_color": "#7C3AED",
"background_color": "#F8FAFC",
"display": "standalone",
"scope": "https://app.haotool.org/ratewise/",
"start_url": "https://app.haotool.org/ratewise/",
Expand Down
17 changes: 15 additions & 2 deletions apps/ratewise/scripts/generate-manifest.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,19 @@ import { readFileSync, writeFileSync } from 'node:fs';
import { resolve, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import { APP_INFO, APP_MANIFEST } from '../src/config/app-info.ts';
import { STYLE_DEFINITIONS } from '../src/config/themes.ts';

// manifest 為靜態單一色，取預設 zen 主題的主色/背景作 SSOT，避免硬編 hex 漂移
const zenColors = STYLE_DEFINITIONS.zen.colors;

function rgbTripletToHex(rgbTriplet) {
return `#${rgbTriplet
.trim()
.split(/\s+/)
.map((value) => Number.parseInt(value, 10).toString(16).padStart(2, '0'))
.join('')
.toUpperCase()}`;
}

const __dirname = dirname(fileURLToPath(import.meta.url));
const ROOT = resolve(__dirname, '..');
Expand All @@ -21,8 +34,8 @@ const manifest = {
name: APP_INFO.name,
short_name: APP_MANIFEST.shortName,
description: `${APP_INFO.name}顯示臺灣銀行牌告實際買賣價（非中間價），支援 ${currencyCount} 種貨幣換算，每 5 分鐘同步，離線可用的 PWA 匯率工具。`,
theme_color: '#8B5CF6',
background_color: '#E8ECF4',
theme_color: rgbTripletToHex(zenColors.primary),
background_color: rgbTripletToHex(zenColors.background),
display: 'standalone',
// 絕對 HTTPS scope/start_url：避免獨立 PWA partition + Chrome HTTPS-First 在啟動時以 http 語意解析。
// id 維持相對（id 變更會被視為新 PWA 身分，破壞既有安裝更新連續性）。
Expand Down
2 changes: 1 addition & 1 deletion apps/ratewise/src/config/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const zenStyle: StyleDefinition = {
surface: '255 255 255',
text: '15 23 42', // slate-900
textMuted: '100 116 139', // slate-500
primary: '99 102 241', // indigo-500 - 專業紫藍
primary: '124 58 237', // violet-600（與 index.css 渲染值同步，修 TS↔CSS 漂移）
secondary: '71 85 105', // slate-600
accent: '59 130 246', // blue-500
border: '226 232 240', // slate-200
Expand Down
7 changes: 6 additions & 1 deletion docs/dev/002_development_reward_penalty_log.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

> 版本：outline-v2-ultra
> 原則：每筆只保留日期、ID、原因、解法。
> 本次分數變化：+1（reward 1、penalty 0、neutral 0）｜累計總分：+89
> 本次分數變化：+1（reward 1、penalty 0、neutral 0）｜累計總分：+90

## 新增模板（4 行）

Expand All @@ -13,6 +13,11 @@

## 條目（新→舊）

- 日期：2026-06-30
- ID：reward-rw3-manifest-theme-color-ssot
- 原因：PWA manifest theme_color/background 硬編 #8B5CF6/#E8ECF4，與實際 zen 主題色不符；themes.ts zen primary(99 102 241) 與 index.css(124 58 237) 漂移
- 解法：manifest 改讀 STYLE_DEFINITIONS.zen 經 rgbTripletToHex 轉換；同步 themes.ts zen primary 至 124 58 237 修漂移（離線模板主題化屬高風險 #508 合併，列 RW-3b）

- 日期：2026-06-30
- ID：reward-rw2-nitro-theme-contrast-fix
- 原因：Nitro 深色主題 textMuted 為 slate-500（深底對比過低，次要文字看不清）、primary 為過亮 cyan（按鈕白字對比不足）；themes.ts chartLine 與 index.css 漂移
Expand Down
Loading