我的叫牌系統書都是用 mdBook 寫的。最近幾週先拿 polish.club 當試驗場，在版面上做了幾個小改動，改好再推到其他幾本。改動都繞著同一件事：♠♥♦♣ 四個花色符號要在每個主題、每個位置都看得清楚。整份 style.css 只有七十幾行，改動也都是幾行的事，但效果值得記一下。

下面這個 demo 把 mdBook 的五種主題和側欄、表格搬了過來，用的是同一份 CSS。切換主題，勾選「改動前」就能比較。

紅色依主題調整

原本 ♥♦ 寫死 #d33，淺色底還行，深色底就顯得暗沉。現在用一個 --red 變數，依主題給值：

• Light 用 #b22，比原本深一點，對白底的對比較好。
• Coal、Navy、Ayu 三個深色主題用 #f66，深底要亮紅才跳得出來。
• Rust 是淺褐底，用 #a21。但 Rust 的側欄是深色的，側欄另外給 #f77。

mdBook 的主題靠 JavaScript 切換，沒有 JavaScript 時會照系統偏好退回 Light 或 Coal。所以多一條 @media (prefers-color-scheme: dark) 配 html:not(.js)，讓沒腳本的深色模式也拿到亮紅。

側欄的黑花色

♠♣ 原本 color: var(--fg)，用的是內文的前景色。在 Rust 主題下，內文 --fg 是深色，側欄背景也是深色，側欄裡的 ♠♣ 就幾乎看不見。 Demo 切到 Rust 再勾「改動前」，「Polish 1♣」和「Natural 1♠」的花色就消失了。

第一版修法是在側欄把 --fg 覆寫成 --sidebar-fg。能看見了，但滑鼠移到連結上、或是目前章節的連結變色時，花色不跟著變，一行字兩種顏色。最後改成側欄的 ♠♣ 直接 color: inherit，跟著連結走；♥♦ 則在 :hover、.active 時把 --red 設成 --sidebar-active。這樣整行連結連花色一起變色，而且不用動 mdBook 自己的變數。

表格

瀏覽器預設把表頭置中，叫牌表格的表頭是「1♥ -」這類叫牌序列，置中反而和下面的叫品對不齊，改成靠左。

叫牌記法也順手統一：叫品之間留空格，對手的叫品加括號，pass 用 -，每一輪用 <br> 分開。有個 fmt.py 幫忙對齊 Markdown 表格，只動兩欄的叫牌表，其他表格留給手排。

網址

檔名原本有 COMP_1、CB_Gladiator、BTUVU 這種縮寫加底線的組合，現在拼成 Competition、CheckbackGladiator、BTUvsUnusual。各開叫下的兩個競叫頁面也合併成一頁。舊網址都在 book.toml 裡設了轉址。

姊妹系統書

在 polish.club 上試好的 style.css，接著推到 Blueberry Precision、Watermelon Dutch、Muscat Walsh 和橋牌入門。沒有共用的 theme 套件，就寫了個 sync-css.sh，把 style.css 的 commit 用 git format-patch 丟給姊妹 repo git apply。作者頁也補上各系統的 favicon 連結。