Repository navigation
feat(extension): オンボーディング画面のダークモード対応 - #513
Merged
Merged
Conversation
Apply the theme to the onboarding page and add dark counterparts to its hard-coded colors next to the existing ones, so the light theme renders as before. The brand color (sky-950) gets a lighter shade that keeps buttons and progress pills visible on the dark background. The logo image has dark text on a transparent background, so a dark variant (wordmark lightness inverted, hue and icon kept) is added and chosen by theme. The page background uses the same token as the options page. Refs #495 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019DvJ25jdbq4pvn4K8Wk7Mx
- Paint the dark background from inline styles in onboarding_page.html and options_page.html, before scripts and styles load - Apply data-sc-theme in a layout effect so the first paint already uses the dark styles - Fix the noscript message typo in options_page.html Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Match the callout arrow fill to the callout body in dark mode - Use a darker selection demo highlight in dark mode so the light text stays readable - Brighten the "click anywhere" indicator in dark mode Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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
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.
概要
#495 のダークモード対応の第3段階です。オンボーディング画面をダークモードに対応しました。
変更内容
OnboardingPageでuseTheme(document.documentElement)を呼び、テーマを適用します。themeContextも配っているので、オンボーディング内のポップアップにもダーク用の既定色とアイコンの塗り替えが効きます。dark:付きのクラスを追加しました（約70箇所）。既存のクラスは消していないので、ライト時の見た目は変わりません。bg-sky-950→bg-sky-700、text-sky-950→text-sky-200などにしました。暗い背景でもボタンや進捗表示が埋もれないようにするためです。bg-backgroundを使います。バリアント D でウェルカム画面からステップへ切り替わるとき、背景が一致するようにしています。SelectionCommandLogo.pngは透過背景に暗い文字なので、暗い背景では読めません。そこでダーク用のSelectionCommandLogo_dark.pngを追加し、useLogoUrl()でテーマに応じて切り替えます。invertとhue-rotateでも試しましたが、アイコンの白い杖まで黒くなるため採用しませんでした。ABテストへの影響
オンボーディングは ABテスト中です（バリアント C / D）。ダークテーマは全バリアントに同じように効くので、バリアント間の比較は偏りません。ただし、OS がダークのユーザーでは見た目が変わるため、この変更をリリースした前後で指標を比べる際は注意してください。
確認
tsc -b、yarn lint（エラー0件）、vitest（全件成功）、yarn builduseLogoUrl?variant=?step=?phase=を使い、Playwright でダーク時の次の画面を撮影して確認しました。reducedMotion: reduceでピクセル比較しました。animate-pingを使っているので、撮影タイミングの差です。対象外（後続PRで対応）
Refs #495
🤖 Generated with Claude Code
https://claude.ai/code/session_019DvJ25jdbq4pvn4K8Wk7Mx