Merged
Conversation
single ファイルで OS テーマに追従できるよう auto モードを導入した。 ライトとダークを別ファイルで管理する運用では、ページと JS の組み合わせを 誤ると文字が背景に埋もれる問題があったため、メディアクエリで動的に切り替える。 - src/styles.ts: buildThemeCSS() を export し、auto 時は DARK_COLORS を @media (prefers-color-scheme: dark) ブロックで囲んで出力 - esbuild.config.ts: --auto フラグを追加、デフォルト出力を git-code-embed.min.js (auto) に変更 - package.json: build を auto、build:light / build:all を整備 - test/styles.test.ts: buildThemeCSS の挙動を 6 ケースで検証
npm run build がオートテーマ出力に変わったため、ダークモードセクションと ビルドセクションを更新した。ライトモード固定・ダークモード固定の 各バリアントについても利用方法を明示した。
--gce-code-text 変数を追加し td.gce-code の基本テキスト色をテーマごとに定義。 highlight.js クラスが付かない変数名・括弧・演算子等がダーク背景で読めなかった問題を解消。
color: var(--gce-code-text) が td.gce-code セレクタより後ろに現れることを アサートし、誤ったセレクタへの記述を検出できるようにした。
セレクタより後ろにあるだけでなく、対象ブロックの閉じ括弧より前に color: var(--gce-code-text) が存在することを確認し、 誤ったセレクタへの配置を確実に検出できるようにした。
.gce-table td.gce-code ではなく .gce-container .gce-table td.gce-code で 完全なセレクタを検索するようにし、誤ったセレクタとの誤マッチを防いだ。
indexOf("}") による最初の閉じ括弧探索では将来ネストが追加された際に
誤検出するリスクがあるため、正規表現でブロック全体を正確に取得する方式に変更。
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
--gce-code-textをライト/ダークテーマの:rootブロックに追加（#24292f/#e6edf3）td.gce-codeセレクタにcolor: var(--gce-code-text)を追加し、highlight.js クラスが付かないプレーンテキストの基本色をテーマごとに制御test/styles.test.tsに追加・強化（セレクタブロック単位の正規表現検証、auto テーマの@mediaブロック内包確認を含む）Background
auto テーマ実装後、ダークモードで変数名・括弧・演算子などの hljs クラスが付かないプレーンテキストがダーク背景
#0d1117に対してブラウザデフォルト（黒）で表示されており、読めない状態だった。Test plan
npm testで全99テスト通過を確認npm run buildでビルド成功を確認dist/git-code-embed.min.jsに--gce-code-text変数とcolor: var(--gce-code-text)が含まれることを確認