feat(extension): オンボーディング画面のダークモード対応

packages/extension/src/components/global.css

@@ -18,6 +18,7 @@
   &:where([data-sc-theme="dark"], [data-sc-theme="dark"] *) {
     @slot;
   }
+
   :host([data-sc-theme="dark"]) & {
     @slot;
   }
@@ -78,164 +79,193 @@
   --animate-marquee2: marquee2 var(--marquee-duration) linear infinite;
   --animate-spin-slow: spin 3s linear infinite;
   --animate-popup: popup 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
-  --animate-onboarding-rise: onboarding-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1)
-    both;
-  --animate-onboarding-blur-in: onboarding-blur-in 0.8s
-    cubic-bezier(0.16, 1, 0.3, 1) both;
-  --animate-onboarding-blur-out: onboarding-blur-out 0.32s
-    cubic-bezier(0.4, 0, 1, 1) both;
-  --animate-onboarding-glow-in: onboarding-glow-in 1.6s
-    cubic-bezier(0.16, 1, 0.3, 1) both;
+  --animate-onboarding-rise: onboarding-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
+  --animate-onboarding-blur-in: onboarding-blur-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
+  --animate-onboarding-blur-out: onboarding-blur-out 0.32s cubic-bezier(0.4, 0, 1, 1) both;
+  --animate-onboarding-glow-in: onboarding-glow-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
   --animate-onboarding-ring: onboarding-ring 2.4s ease-in-out 0.6s infinite;
   --animate-onboarding-blink: onboarding-blink 1.5s ease-in-out 0.3s infinite;
   --animate-onboarding-highlight: onboarding-highlight 4s ease-in-out infinite;
-  --animate-onboarding-pop: onboarding-pop 0.36s
-    cubic-bezier(0.34, 1.4, 0.64, 1) both;
-  --animate-onboarding-pop-2: onboarding-pop-2 0.36s
-    cubic-bezier(0.34, 1.4, 0.64, 1) both;
+  --animate-onboarding-pop: onboarding-pop 0.36s cubic-bezier(0.34, 1.4, 0.64, 1) both;
+  --animate-onboarding-pop-2: onboarding-pop-2 0.36s cubic-bezier(0.34, 1.4, 0.64, 1) both;
   --animate-onboarding-float: onboarding-float 1.4s ease-in-out infinite;
 
   @keyframes accordion-down {
     from {
       height: 0;
     }
+
     to {
       height: var(--radix-accordion-content-height);
     }
   }
+
   @keyframes accordion-up {
     from {
       height: var(--radix-accordion-content-height);
     }
+
     to {
       height: 0;
     }
   }
+
   @keyframes marquee {
     0% {
       transform: translateX(0%);
     }
+
     100% {
       transform: translateX(-100%);
     }
   }
+
   @keyframes marquee2 {
     0% {
       transform: translateX(100%);
     }
+
     100% {
       transform: translateX(0%);
     }
   }
+
   @keyframes popup {
     0% {
       opacity: 0;
       transform: scale(0.5) translate(-10px, 10px);
     }
+
     100% {
       opacity: 1;
       transform: scale(1);
     }
   }
+
   @keyframes onboarding-rise {
     from {
       opacity: 0;
       transform: translateY(10px);
     }
+
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
+
   @keyframes onboarding-blur-in {
     from {
       opacity: 0;
       filter: blur(8px);
       transform: translateY(6px);
     }
+
     to {
       opacity: 1;
       filter: blur(0px);
       transform: translateY(0);
     }
   }
+
   @keyframes onboarding-blur-out {
     from {
       opacity: 1;
       filter: blur(0px);
     }
+
     to {
       opacity: 0;
       filter: blur(8px);
     }
   }
+
   @keyframes onboarding-glow-in {
     from {
       opacity: 0;
       transform: scale(0.6);
     }
+
     to {
       opacity: 1;
       transform: scale(1);
     }
   }
+
   @keyframes onboarding-ring {
+
     0%,
     100% {
       box-shadow: 0 0 0 0 var(--onboarding-ring-color);
     }
+
     50% {
       box-shadow: 0 0 0 6px var(--onboarding-ring-color);
     }
   }
+
   @keyframes onboarding-blink {
+
     0%,
     100% {
       opacity: 1;
     }
+
     50% {
       opacity: 0.45;
     }
   }
+
+  /* --onboarding-highlight-color lets dark mode use a darker highlight. */
   @keyframes onboarding-highlight {
+
     0%,
     10% {
-      background-color: rgb(191 219 254 / 0);
+      background-color: transparent;
     }
+
     44%,
     70% {
-      background-color: rgb(191 219 254 / 1);
+      background-color: var(--onboarding-highlight-color, rgb(191 219 254));
     }
+
     82%,
     100% {
-      background-color: rgb(191 219 254 / 0);
+      background-color: transparent;
     }
   }
+
   @keyframes onboarding-pop {
     0% {
       opacity: 0;
       transform: scale(0.72);
     }
+
     100% {
       opacity: 1;
       transform: scale(1);
     }
   }
+
   @keyframes onboarding-pop-2 {
     0% {
       opacity: 0;
       transform: scale(0.72) translate(-10px, 10px);
     }
+
     100% {
       opacity: 1;
       transform: scale(1);
     }
   }
+
   @keyframes onboarding-float {
+
     0%,
     100% {
       translate: 0 0;
     }
+
     50% {
       translate: 0 -4px;
     }
@@ -307,6 +337,7 @@
 
 /* Restore v3 defaults that the v4 preflight changed. */
 @layer base {
+
   input::placeholder,
   textarea::placeholder {
     color: var(--color-gray-400);
@@ -333,6 +364,7 @@
 }
 
 @layer base {
+
   :host,
   :root {
     --background: 0 0% 100%;

packages/extension/src/components/onboarding/OnboardingLayout.tsx

@@ -4,8 +4,7 @@ import { getProgress, showsSkip } from "./onboardingProgress"
 import { OnboardingGlow } from "./OnboardingGlow"
 import type { OnboardingBackground } from "./onboardingVariantUi"
 import type { OnboardingStep, StepPhase } from "@/types/onboarding"
-
-const ICON_URL = chrome.runtime.getURL("SelectionCommandLogo.png")
+import { useLogoUrl } from "./onboardingLogo"
 
 type Props = {
   step: OnboardingStep
@@ -29,10 +28,11 @@ export function OnboardingLayout({
   onSkip,
   children,
 }: Props) {
+  const logoUrl = useLogoUrl()
   const progress = getProgress(step, phase)
 
   return (
-    <div className="relative flex min-h-screen flex-col overflow-hidden bg-white">
+    <div className="relative flex min-h-screen flex-col overflow-hidden bg-background">
       {background === "glow" ? (
         // Fixed to the viewport, like the welcome overlay, so its center
         // lines up exactly with the overlay's glow during the handoff.
@@ -51,7 +51,7 @@ export function OnboardingLayout({
       <div className="relative z-10 flex items-center justify-between px-10 py-5">
         {progress && (
           <img
-            src={ICON_URL}
+            src={logoUrl}
             className="block h-7"
             alt="Logo of selection command"
             aria-hidden
@@ -65,13 +65,13 @@ export function OnboardingLayout({
                   key={i}
                   className={
                     pill === "todo"
-                      ? "h-1 w-6.5 rounded-full bg-slate-100"
-                      : "h-1 w-6.5 rounded-full bg-sky-950"
+                      ? "h-1 w-6.5 rounded-full bg-slate-100 dark:bg-slate-800"
+                      : "h-1 w-6.5 rounded-full bg-sky-950 dark:bg-sky-700"
                   }
                 />
               ))}
             </div>
-            <span className="text-xs font-bold tracking-wide text-slate-500 [font-variant-numeric:tabular-nums]">
+            <span className="text-xs font-bold tracking-wide text-slate-500 dark:text-slate-400 [font-variant-numeric:tabular-nums]">
               {progress.current} / {progress.total}
             </span>
           </div>
@@ -86,7 +86,7 @@ export function OnboardingLayout({
         <button
           type="button"
           onClick={onSkip}
-          className="absolute right-7.5 bottom-6 z-20 inline-flex min-h-11 items-center rounded-md px-3.5 text-sm font-medium text-slate-600 hover:bg-slate-100/80 hover:text-slate-700"
+          className="absolute right-7.5 bottom-6 z-20 inline-flex min-h-11 items-center rounded-md px-3.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-100/80 dark:hover:bg-slate-800/80 hover:text-slate-700 dark:hover:text-slate-300"
         >
           {t("onboarding_skipButton")}
         </button>

packages/extension/src/components/onboarding/OnboardingPage.tsx

@@ -5,6 +5,7 @@ import { Popup } from "@/components/Popup"
 import { LinkSelector } from "@/components/LinkSelector"
 import { useOnboardingState } from "./useOnboardingState"
 import { useOnboardingVariant } from "./useOnboardingVariant"
+import { useTheme, themeContext } from "@/hooks/useTheme"
 import { OnboardingLayout } from "./OnboardingLayout"
 import { OnboardingWelcome } from "./OnboardingWelcome"
 import { StepIntro } from "./steps/StepIntro"
@@ -20,15 +21,21 @@ import "@/components/App.css"
 
 export function OnboardingPage() {
   const variant = useOnboardingVariant()
+  const theme = useTheme(document.documentElement)
 
-  // Hold a blank canvas until the A/B assignment is known (normally a single
-  // chrome.storage.local read, since the service worker assigns on
-  // install). Rendering a default arm first would flash variant A's INTRO
-  // screen at variant C users.
-  if (variant == null) {
-    return <div className="min-h-screen bg-white" />
-  }
-  return <OnboardingFlow variant={variant} />
+  return (
+    <themeContext.Provider value={theme}>
+      {variant == null ? (
+        // Hold a blank canvas until the A/B assignment is known (normally a
+        // single chrome.storage.local read, since the service worker assigns
+        // on install). Rendering a default arm first would flash variant A's
+        // INTRO screen at variant C users.
+        <div className="min-h-screen bg-white dark:bg-background" />
+      ) : (
+        <OnboardingFlow variant={variant} />
+      )}
+    </themeContext.Provider>
+  )
 }
 
 function OnboardingFlow({ variant }: { variant: ExperimentVariant }) {

packages/extension/src/components/onboarding/OnboardingRail.tsx

@@ -60,7 +60,9 @@ export function OnboardingRail({
               <ChevronsRight
                 className={cn(
                   lg ? "size-[18px]" : "size-3.5",
-                  chevronWalked ? "text-sky-950" : "text-slate-300",
+                  chevronWalked
+                    ? "text-sky-950 dark:text-sky-200"
+                    : "text-slate-300",
                   lg && "animate-onboarding-rise motion-reduce:animate-none",
                 )}
                 style={lg ? { animationDelay: `${delayMs}ms` } : undefined}
@@ -69,7 +71,7 @@ export function OnboardingRail({
             )}
             <div
               className={cn(
-                "flex items-center font-semibold tracking-wide text-slate-500",
+                "flex items-center font-semibold tracking-wide text-slate-500 dark:text-slate-400",
                 lg ? "gap-2.5 text-[13px]" : "gap-1.5 text-xs",
                 lg && "animate-onboarding-rise motion-reduce:animate-none",
               )}
@@ -80,10 +82,10 @@ export function OnboardingRail({
                   "flex items-center justify-center rounded-full",
                   lg ? "size-6" : "size-[18px]",
                   state === "todo"
-                    ? "bg-slate-200"
+                    ? "bg-slate-200 dark:bg-slate-700"
                     : state === "done"
-                      ? "bg-blue-200 text-blue-800"
-                      : "bg-sky-950/[0.14] text-sky-950",
+                      ? "bg-blue-200 dark:bg-blue-900 text-blue-800 dark:text-blue-300"
+                      : "bg-sky-950/[0.14] text-sky-950 dark:text-sky-200",
                 )}
               >
                 {state === "done" && (
@@ -93,12 +95,16 @@ export function OnboardingRail({
                   />
                 )}
                 {state === "current" && (
-                  <span className="size-2.5 rounded-full bg-sky-950 inline-block">
-                    <span className="w-full h-full rounded-full bg-sky-950 block animate-ping opacity-70" />
+                  <span className="size-2.5 rounded-full bg-sky-950 dark:bg-sky-700 inline-block">
+                    <span className="w-full h-full rounded-full bg-sky-950 dark:bg-sky-700 block animate-ping opacity-70" />
                   </span>
                 )}
               </span>
-              <span className={state === "todo" ? "" : "text-sky-950"}>
+              <span
+                className={
+                  state === "todo" ? "" : "text-sky-950 dark:text-sky-200"
+                }
+              >
                 {label}
               </span>
             </div>