Merged
Conversation
OS の prefers-color-scheme への追従をやめ、html/body 要素の data-theme 属性の値に基づいてテーマを切り替えるよう auto モードを再設計した。 これにより、ライト固定デザインのブログで OS がダーク設定でも コードビューだけダークになる問題を解消できる。 テーマ切り替えなしのブログには -light/-dark バリアントを、 テーマ切り替えありのブログには auto (デフォルト) を使う形に 責務を整理した。
scopeToSelector 内部関数に変換ロジックを集約して htmlVersion/bodyVersion の 重複を排除した。また、body[data-theme="light"] の存在確認、 data-theme 未設定時のデフォルト動作、hljs セレクタ変換の正確性を テストに追加した。
auto モードの挙動変更（@media → data-theme 追従）は既存ユーザーへの 破壊的変更であるため、SemVer に従い 0.3.0 に更新した。 また、css.slice(idx) の検索範囲が広すぎて実装の順序変更時に 偽陽性になるリスクを排除するため、各ブロックの終端位置でスライスを 絞るよう修正した。:root の残存チェックと body[data-theme="dark"] ブロック内の変数検証テストも追加した。
dark/light の対称性を完結させるため、body[data-theme="light"] 側の CSS 変数値（ライト色の包含とダーク色の非混入）を検証するテストを追加した。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
autoビルド（git-code-embed.min.js）のテーマ判定を@media (prefers-color-scheme: dark)からdata-theme属性への追従に変更withDataTheme()ヘルパーを追加し、:root→html/body[data-theme="..."]、.gce-containerにセレクタプレフィックスを付与して CSS 特異性を確保背景
ライト固定デザインのブログで OS がダーク設定の場合、コードビューだけがダークになりブログの色彩が統一されない問題があった。
用途を以下のように整理した:
git-code-embed.min.jsdata-theme属性でテーマ切り替えするブログgit-code-embed-light.min.jsgit-code-embed-dark.min.jsTest plan
npm test— 全 104 テストがパスすることnpm run build:all— 全バリアントのビルドが通ることtest-page.htmlを開き<html data-theme="dark">でダークテーマになることdata-theme未設定時はライトテーマになること