diff --git a/packages/extension/public/SelectionCommandLogo_dark.png b/packages/extension/public/SelectionCommandLogo_dark.png
new file mode 100644
index 00000000..971b15b1
Binary files /dev/null and b/packages/extension/public/SelectionCommandLogo_dark.png differ
diff --git a/packages/extension/src/components/global.css b/packages/extension/src/components/global.css
index a483a216..31fe6419 100644
--- a/packages/extension/src/components/global.css
+++ b/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%;
diff --git a/packages/extension/src/components/onboarding/OnboardingLayout.tsx b/packages/extension/src/components/onboarding/OnboardingLayout.tsx
index eefe715a..903139a9 100644
--- a/packages/extension/src/components/onboarding/OnboardingLayout.tsx
+++ b/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>
diff --git a/packages/extension/src/components/onboarding/OnboardingPage.tsx b/packages/extension/src/components/onboarding/OnboardingPage.tsx
index a6843cf6..c123341f 100644
--- a/packages/extension/src/components/onboarding/OnboardingPage.tsx
+++ b/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 }) {
diff --git a/packages/extension/src/components/onboarding/OnboardingRail.tsx b/packages/extension/src/components/onboarding/OnboardingRail.tsx
index f87bda83..581c722c 100644
--- a/packages/extension/src/components/onboarding/OnboardingRail.tsx
+++ b/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>
diff --git a/packages/extension/src/components/onboarding/OnboardingTargetText.tsx b/packages/extension/src/components/onboarding/OnboardingTargetText.tsx
index 5ca3c32c..f1f50c6b 100644
--- a/packages/extension/src/components/onboarding/OnboardingTargetText.tsx
+++ b/packages/extension/src/components/onboarding/OnboardingTargetText.tsx
@@ -53,12 +53,12 @@ export function OnboardingTargetText({
       <div
         ref={setCardElm}
         className={cn(
-          "relative max-w-[560px] rounded-lg border px-[26px] py-5 text-left text-base leading-[1.9] text-slate-800 select-text",
-          "border-slate-200",
-          background === "glow" ? "bg-white" : "bg-muted/80",
+          "relative max-w-[560px] rounded-lg border px-[26px] py-5 text-left text-base leading-[1.9] text-slate-800 dark:text-slate-200 select-text",
+          "border-slate-200 dark:border-slate-800",
+          background === "glow" ? "bg-white dark:bg-gray-900" : "bg-muted/80",
           !selected &&
-            !runDemo &&
-            "[--onboarding-ring-color:rgba(8,47,73,0.16)] animate-onboarding-ring motion-reduce:animate-none",
+          !runDemo &&
+          "[--onboarding-ring-color:rgba(8,47,73,0.16)] animate-onboarding-ring motion-reduce:animate-none",
         )}
       >
         <span
@@ -68,7 +68,8 @@ export function OnboardingTargetText({
             // `runDemo` is already false when prefers-reduced-motion is on
             // (see usePrefersReducedMotion() above), so no motion-reduce:
             // variant is needed here.
-            runDemo && "animate-onboarding-highlight rounded-sm",
+            runDemo &&
+            "animate-onboarding-highlight rounded-sm dark:[--onboarding-highlight-color:var(--color-sky-900)]",
           )}
         >
           {text}
@@ -78,7 +79,7 @@ export function OnboardingTargetText({
           <span
             ref={cursorRef}
             aria-hidden
-            className="pointer-events-none absolute top-0 left-0 select-none text-slate-900 opacity-0 filter-[drop-shadow(0_0_2px_#fff)_drop-shadow(0_1px_3px_rgba(15,23,42,.35))]"
+            className="pointer-events-none absolute top-0 left-0 select-none text-slate-900 dark:text-slate-100 opacity-0 filter-[drop-shadow(0_0_2px_#fff)_drop-shadow(0_1px_3px_rgba(15,23,42,.35))]"
           >
             <TextCursor className="size-[18px]" strokeWidth={2} />
           </span>
diff --git a/packages/extension/src/components/onboarding/OnboardingWelcome.tsx b/packages/extension/src/components/onboarding/OnboardingWelcome.tsx
index ad75db20..8fbe5a2e 100644
--- a/packages/extension/src/components/onboarding/OnboardingWelcome.tsx
+++ b/packages/extension/src/components/onboarding/OnboardingWelcome.tsx
@@ -7,8 +7,7 @@ import {
   DEFAULT_WELCOME_UI,
   type OnboardingWelcomeUi,
 } from "./onboardingVariantUi"
-
-const ICON_URL = chrome.runtime.getURL("SelectionCommandLogo.png")
+import { useLogoUrl } from "./onboardingLogo"
 
 /** How long variant C's overlay stays up before advancing on its own. */
 export const WELCOME_DURATION_MS = DEFAULT_WELCOME_UI.durationMs
@@ -30,6 +29,7 @@ type Props = {
 // when the user clicks - there is nothing to read here, so making people
 // wait out the timer would just be a second thing to sit through.
 export function OnboardingWelcome({ onDone, ui = DEFAULT_WELCOME_UI }: Props) {
+  const logoUrl = useLogoUrl()
   const [exiting, setExiting] = useState(false)
   const timersRef = useRef<ReturnType<typeof setTimeout>[]>([])
   const finishedRef = useRef(false)
@@ -69,7 +69,7 @@ export function OnboardingWelcome({ onDone, ui = DEFAULT_WELCOME_UI }: Props) {
       aria-label={t("onboarding_welcomeContinue")}
       data-testid="onboarding-welcome"
       className={clsx(
-        "fixed inset-0 z-30 flex cursor-default flex-col items-center justify-center overflow-hidden bg-white",
+        "outline-none fixed inset-0 z-30 flex cursor-default flex-col items-center justify-center overflow-hidden bg-background",
         ui.gapClassName,
         exiting && "animate-onboarding-blur-out motion-reduce:animate-none",
       )}
@@ -87,15 +87,15 @@ export function OnboardingWelcome({ onDone, ui = DEFAULT_WELCOME_UI }: Props) {
         delay={ui.logoDelay}
         className={ui.logoClassName}
       >
-        <img src={ICON_URL} className="block h-12.5" alt="" aria-hidden />
+        <img src={logoUrl} className="block h-12.5" alt="" aria-hidden />
       </OnboardingFadeIn>
       <OnboardingFadeIn effect="blur" delay={ui.messageDelay}>
-        <p className="text-3xl font-bold tracking-tight text-slate-900">
+        <p className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
           {t("onboarding_welcomeMessage")}
         </p>
       </OnboardingFadeIn>
       <OnboardingFadeIn effect="blur" delay={ui.introductionDelay}>
-        <p className="text-2xl font-normal text-slate-900">
+        <p className="text-2xl font-normal text-slate-900 dark:text-slate-100">
           {t("onboarding_welcomeIntroduction")}
         </p>
       </OnboardingFadeIn>
diff --git a/packages/extension/src/components/onboarding/__tests__/onboardingLogo.test.tsx b/packages/extension/src/components/onboarding/__tests__/onboardingLogo.test.tsx
new file mode 100644
index 00000000..1f47bf56
--- /dev/null
+++ b/packages/extension/src/components/onboarding/__tests__/onboardingLogo.test.tsx
@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from "vitest"
+import { renderHook } from "@testing-library/react"
+import { themeContext, type ResolvedTheme } from "@/hooks/useTheme"
+import { useLogoUrl } from "../onboardingLogo"
+
+// The logo URLs are resolved when the module loads, before any test runs.
+vi.hoisted(() => {
+  vi.mocked(chrome.runtime.getURL).mockImplementation(
+    (path: string) => `chrome-extension://test/${path}`,
+  )
+})
+
+const renderWithTheme = (theme: ResolvedTheme) =>
+  renderHook(() => useLogoUrl(), {
+    wrapper: ({ children }) => (
+      <themeContext.Provider value={theme}>{children}</themeContext.Provider>
+    ),
+  })
+
+describe("useLogoUrl", () => {
+  it("OL-01: 正常系: ライトテーマでは通常のロゴを返す", () => {
+    const { result } = renderWithTheme("light")
+    expect(result.current).toContain("SelectionCommandLogo.png")
+  })
+
+  it("OL-02: 正常系: ダークテーマではダーク用のロゴを返す", () => {
+    const { result } = renderWithTheme("dark")
+    expect(result.current).toContain("SelectionCommandLogo_dark.png")
+  })
+})
diff --git a/packages/extension/src/components/onboarding/onboardingLogo.ts b/packages/extension/src/components/onboarding/onboardingLogo.ts
new file mode 100644
index 00000000..918aa12e
--- /dev/null
+++ b/packages/extension/src/components/onboarding/onboardingLogo.ts
@@ -0,0 +1,10 @@
+import { useThemeContext } from "@/hooks/useTheme"
+
+const LOGO_URL = chrome.runtime.getURL("SelectionCommandLogo.png")
+// The same logo with the wordmark's lightness inverted (hue kept) and the
+// icon untouched, since the original's dark text vanishes on a dark page.
+const LOGO_DARK_URL = chrome.runtime.getURL("SelectionCommandLogo_dark.png")
+
+/** Returns the logo image URL for the current theme. */
+export const useLogoUrl = (): string =>
+  useThemeContext() === "dark" ? LOGO_DARK_URL : LOGO_URL
diff --git a/packages/extension/src/components/onboarding/steps/StepAiPromptCommand.tsx b/packages/extension/src/components/onboarding/steps/StepAiPromptCommand.tsx
index 5786340c..51e23ebc 100644
--- a/packages/extension/src/components/onboarding/steps/StepAiPromptCommand.tsx
+++ b/packages/extension/src/components/onboarding/steps/StepAiPromptCommand.tsx
@@ -132,7 +132,7 @@ export function StepAiPromptCommand({ onboarding }: Props) {
   return (
     <div className={cn("flex flex-col items-center gap-10 select-none")}>
       <OnboardingFadeIn key={"command-type"} delay={phaseDelays.commandType}>
-        <h2 className="text-4xl font-bold text-slate-700 flex items-center">
+        <h2 className="text-4xl font-bold text-slate-700 dark:text-slate-300 flex items-center">
           <span className="font-mono">2.</span>{" "}
           {t("Option_commandType_aiPrompt_title")}
         </h2>
@@ -157,7 +157,7 @@ export function StepAiPromptCommand({ onboarding }: Props) {
           className="flex flex-col items-center gap-4"
           delay={phaseDelays.message}
         >
-          <p className="max-w-xl text-xl leading-[1.75] font-semibold text-slate-900">
+          <p className="max-w-xl text-xl leading-[1.75] font-semibold text-slate-900 dark:text-slate-100">
             {isValueShown ? (
               <>
                 <span>{t("onboarding_step2ValueMessage")}</span>
@@ -181,7 +181,7 @@ export function StepAiPromptCommand({ onboarding }: Props) {
             key="value-submessage"
             delay={phaseDelays.valueSubmessage}
           >
-            <p className="max-w-xl text-lg text-slate-700 text-pretty">
+            <p className="max-w-xl text-lg text-slate-700 dark:text-slate-300 text-pretty">
               {renderMultiline(t("onboarding_step2ValueSubmessage"))}
             </p>
           </OnboardingFadeIn>
@@ -236,7 +236,7 @@ export function StepAiPromptCommand({ onboarding }: Props) {
             type="button"
             onClick={() => onboarding.goToStep(OnboardingStep.LINK_PREVIEW)}
             className={cn(
-              "flex items-center gap-2 min-h-14 rounded-xl bg-sky-950 px-8 text-lg font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]",
+              "flex items-center gap-2 min-h-14 rounded-xl bg-sky-950 dark:bg-sky-700 px-8 text-lg font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]",
               !onboarding.ui.showRail && "mt-4",
             )}
           >
diff --git a/packages/extension/src/components/onboarding/steps/StepComplete.tsx b/packages/extension/src/components/onboarding/steps/StepComplete.tsx
index f16302eb..418626de 100644
--- a/packages/extension/src/components/onboarding/steps/StepComplete.tsx
+++ b/packages/extension/src/components/onboarding/steps/StepComplete.tsx
@@ -33,7 +33,7 @@ export function StepComplete({ onboarding }: Props) {
       <OnboardingConfetti />
       <div className="flex flex-col items-center gap-8">
         <span
-          className="flex size-19 animate-onboarding-pop items-center justify-center rounded-full bg-green-200 text-green-600 motion-reduce:animate-none motion-reduce:opacity-100"
+          className="flex size-19 animate-onboarding-pop items-center justify-center rounded-full bg-green-200 dark:bg-green-900 text-green-600 dark:text-green-400 motion-reduce:animate-none motion-reduce:opacity-100"
           style={{ animationDelay: `${delays[0]}ms` }}
         >
           <PartyPopper className="size-9" strokeWidth={1.8} />
@@ -43,7 +43,7 @@ export function StepComplete({ onboarding }: Props) {
           className="flex flex-col items-center gap-5"
           delay={delays[1]}
         >
-          <h1 className="mt-1 text-3xl font-bold tracking-tight text-slate-700">
+          <h1 className="mt-1 text-3xl font-bold tracking-tight text-slate-700 dark:text-slate-300">
             {t("onboarding_completeTitle")}
           </h1>
         </OnboardingFadeIn>
@@ -52,7 +52,7 @@ export function StepComplete({ onboarding }: Props) {
           className="flex flex-col items-center gap-5"
           delay={delays[2]}
         >
-          <p className="max-w-lg text-lg leading-[1.85] text-slate-700 text-pretty">
+          <p className="max-w-lg text-lg leading-[1.85] text-slate-700 dark:text-slate-300 text-pretty">
             {renderMultiline(t("onboarding_completeBody"))}
           </p>
         </OnboardingFadeIn>
@@ -64,7 +64,7 @@ export function StepComplete({ onboarding }: Props) {
           >
             <button
               type="button"
-              className="flex items-center gap-3 min-h-14 rounded-xl bg-sky-950 pl-6 pr-8 text-[15px] font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]"
+              className="flex items-center gap-3 min-h-14 rounded-xl bg-sky-950 dark:bg-sky-700 pl-6 pr-8 text-[15px] font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]"
               onClick={() => closeOnboardingTab()}
             >
               <MousePointerClick className="inline-block size-5" />
@@ -77,7 +77,7 @@ export function StepComplete({ onboarding }: Props) {
           >
             <button
               type="button"
-              className="flex items-center gap-3 min-h-14 rounded-xl px-5 text-[15px] font-medium text-slate-500 border border-slate-200 hover:bg-slate-50 hover:text-slate-700"
+              className="flex items-center gap-3 min-h-14 rounded-xl px-5 text-[15px] font-medium text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 hover:text-slate-700 dark:hover:text-slate-300"
               onClick={() => chrome.runtime.openOptionsPage()}
             >
               <Settings className="inline-block size-4" />
diff --git a/packages/extension/src/components/onboarding/steps/StepCustomize.tsx b/packages/extension/src/components/onboarding/steps/StepCustomize.tsx
index d2e7f10d..042c1d2e 100644
--- a/packages/extension/src/components/onboarding/steps/StepCustomize.tsx
+++ b/packages/extension/src/components/onboarding/steps/StepCustomize.tsx
@@ -20,13 +20,13 @@ export function StepCustomize({ onboarding }: Props) {
   return (
     <div className="flex flex-col items-center gap-10 h-[540px]!">
       <OnboardingFadeIn key="title" delay={100}>
-        <h2 className="text-4xl font-bold text-slate-700 flex items-center">
+        <h2 className="text-4xl font-bold text-slate-700 dark:text-slate-300 flex items-center">
           <span className="font-mono">4.</span> {t("onboarding_step4_title")}
         </h2>
       </OnboardingFadeIn>
 
       <OnboardingFadeIn key="explain" delay={300}>
-        <p className="max-w-xl text-xl leading-[1.75] font-semibold text-slate-900">
+        <p className="max-w-xl text-xl leading-[1.75] font-semibold text-slate-900 dark:text-slate-100">
           {t("onboarding_step4Explain")}
           <span
             className="ml-1 inline-block animate-onboarding-pop-2 motion-reduce:animate-none"
@@ -40,13 +40,13 @@ export function StepCustomize({ onboarding }: Props) {
       <div className="grid w-[884px] grid-cols-2 gap-12">
         <OnboardingFadeIn key="option-screen" delay={1000}>
           <div className="flex flex-col gap-2.5">
-            <div className="flex items-center gap-2 text-left text-sm font-bold text-slate-700">
-              <span className="flex size-6 items-center justify-center rounded-md bg-sky-950/10 text-sky-950">
+            <div className="flex items-center gap-2 text-left text-sm font-bold text-slate-700 dark:text-slate-300">
+              <span className="flex size-6 items-center justify-center rounded-md bg-sky-950/10 dark:bg-sky-400/15 text-sky-950 dark:text-sky-200">
                 <Settings className="size-4" strokeWidth={2} />
               </span>
               {t("onboarding_step4SettingsHeading")}
             </div>
-            <div className="h-[226px] overflow-hidden rounded-lg border border-slate-200 bg-white shadow-[0_1px_2px_rgba(15,23,42,.04),0_16px_32px_-26px_rgba(15,23,42,.35)]">
+            <div className="h-[226px] overflow-hidden rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-gray-900 shadow-[0_1px_2px_rgba(15,23,42,.04),0_16px_32px_-26px_rgba(15,23,42,.35)]">
               <img
                 src={OPTION_SCREEN_URL}
                 alt=""
@@ -58,13 +58,13 @@ export function StepCustomize({ onboarding }: Props) {
 
         <OnboardingFadeIn key="hub-screen" delay={1200}>
           <div className="flex flex-col gap-2.5">
-            <div className="flex items-center gap-2 text-left text-sm font-bold text-slate-700">
-              <span className="flex size-6 items-center justify-center rounded-md bg-sky-950/10 text-sky-950">
+            <div className="flex items-center gap-2 text-left text-sm font-bold text-slate-700 dark:text-slate-300">
+              <span className="flex size-6 items-center justify-center rounded-md bg-sky-950/10 dark:bg-sky-400/15 text-sky-950 dark:text-sky-200">
                 <Share2 className="size-4" strokeWidth={2} />
               </span>
               {t("onboarding_step4HubHeading")}
             </div>
-            <div className="h-[226px] overflow-hidden rounded-lg border border-slate-200 bg-white shadow-[0_1px_2px_rgba(15,23,42,.04),0_16px_32px_-26px_rgba(15,23,42,.35)]">
+            <div className="h-[226px] overflow-hidden rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-gray-900 shadow-[0_1px_2px_rgba(15,23,42,.04),0_16px_32px_-26px_rgba(15,23,42,.35)]">
               <img
                 src={HUB_SCREEN_URL}
                 alt=""
@@ -78,7 +78,7 @@ export function StepCustomize({ onboarding }: Props) {
       <OnboardingFadeIn key="next-button" delay={1400}>
         <button
           type="button"
-          className="mt-4 flex items-center gap-2 min-h-14 rounded-xl bg-sky-950 pl-8 pr-5 text-lg font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]"
+          className="mt-4 flex items-center gap-2 min-h-14 rounded-xl bg-sky-950 dark:bg-sky-700 pl-8 pr-5 text-lg font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]"
           onClick={() => onboarding.goToStep(OnboardingStep.COMPLETE)}
         >
           {t("onboarding_nextButton")}
diff --git a/packages/extension/src/components/onboarding/steps/StepIntro.tsx b/packages/extension/src/components/onboarding/steps/StepIntro.tsx
index 16428525..75e25c98 100644
--- a/packages/extension/src/components/onboarding/steps/StepIntro.tsx
+++ b/packages/extension/src/components/onboarding/steps/StepIntro.tsx
@@ -3,8 +3,7 @@ import { ChevronRight } from "lucide-react"
 import { OnboardingFadeIn } from "../OnboardingFadeIn"
 import { OnboardingStep } from "@/types/onboarding"
 import type { UseOnboardingState } from "../useOnboardingState"
-
-const ICON_URL = chrome.runtime.getURL("SelectionCommandLogo.png")
+import { useLogoUrl } from "../onboardingLogo"
 
 type Props = {
   onboarding: UseOnboardingState
@@ -12,11 +11,12 @@ type Props = {
 
 // Step0: the landing screen shown right after install.
 export function StepIntro({ onboarding }: Props) {
+  const logoUrl = useLogoUrl()
   return (
     <div className="flex flex-col items-center justify-center gap-16">
       <OnboardingFadeIn delay={200} className="flex items-center">
         <img
-          src={ICON_URL}
+          src={logoUrl}
           className={"block h-[50px]"}
           alt="Logo of selection command"
           aria-hidden
@@ -25,12 +25,12 @@ export function StepIntro({ onboarding }: Props) {
 
       <div>
         <OnboardingFadeIn delay={500}>
-          <h1 className="max-w-xl text-3xl font-bold tracking-tight text-slate-900">
+          <h1 className="max-w-xl text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
             {t("onboarding_step0Title")}
           </h1>
         </OnboardingFadeIn>
         <OnboardingFadeIn delay={600}>
-          <p className="max-w-xl mt-5 text-xl leading-[1.85] text-slate-600">
+          <p className="max-w-xl mt-5 text-xl leading-[1.85] text-slate-600 dark:text-slate-400">
             {t("onboarding_step0Body")}
           </p>
         </OnboardingFadeIn>
@@ -38,7 +38,7 @@ export function StepIntro({ onboarding }: Props) {
       <OnboardingFadeIn delay={800} className="flex justify-center">
         <button
           type="button"
-          className="flex items-center gap-2 min-h-14 rounded-xl bg-sky-950 pl-8 pr-5 text-lg font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]"
+          className="flex items-center gap-2 min-h-14 rounded-xl bg-sky-950 dark:bg-sky-700 pl-8 pr-5 text-lg font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]"
           onClick={() => onboarding.goToStep(OnboardingStep.SEARCH)}
         >
           {t("onboarding_startButton")}
diff --git a/packages/extension/src/components/onboarding/steps/StepLinkPreview.tsx b/packages/extension/src/components/onboarding/steps/StepLinkPreview.tsx
index 5a38a31e..bacc6b41 100644
--- a/packages/extension/src/components/onboarding/steps/StepLinkPreview.tsx
+++ b/packages/extension/src/components/onboarding/steps/StepLinkPreview.tsx
@@ -116,7 +116,7 @@ export function StepLinkPreview({ onboarding }: Props) {
   return (
     <div className="flex flex-col items-center gap-10">
       <OnboardingFadeIn key={"command-type"} delay={phaseDelays.commandType}>
-        <h2 className="text-4xl font-bold text-slate-700 flex items-center">
+        <h2 className="text-4xl font-bold text-slate-700 dark:text-slate-300 flex items-center">
           <span className="font-mono">3.</span> {t("Option_linkCommand")}
         </h2>
       </OnboardingFadeIn>
@@ -133,7 +133,7 @@ export function StepLinkPreview({ onboarding }: Props) {
           className="flex flex-col items-center gap-4"
           delay={phaseDelays.message}
         >
-          <p className="max-w-xl text-xl leading-[1.75] font-semibold text-slate-900">
+          <p className="max-w-xl text-xl leading-[1.75] font-semibold text-slate-900 dark:text-slate-100">
             {isValueShown ? (
               <>
                 <span>{t("onboarding_step3ValueMessage")}</span>
@@ -157,7 +157,7 @@ export function StepLinkPreview({ onboarding }: Props) {
             key="value-submessage"
             delay={phaseDelays.valueSubmessage}
           >
-            <p className="max-w-xl text-lg text-slate-700 text-pretty">
+            <p className="max-w-xl text-lg text-slate-700 dark:text-slate-300 text-pretty">
               {renderMultiline(t("onboarding_step3ValueSubmessage"))}
             </p>
           </OnboardingFadeIn>
@@ -189,12 +189,12 @@ export function StepLinkPreview({ onboarding }: Props) {
           delay={phaseDelays.targetText}
         >
           <div
-            className="flex animate-onboarding-ring items-center justify-center rounded-lg border border-slate-200 bg-white [--onboarding-ring-color:rgba(8,47,73,0.16)] motion-reduce:animate-none"
+            className="flex animate-onboarding-ring items-center justify-center rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-gray-900 [--onboarding-ring-color:rgba(8,47,73,0.16)] motion-reduce:animate-none"
             ref={setLinkElm}
           >
             <a
               href="https://www.aalto.fi/en/news/one-in-four-internet-users-are-overwhelmed-by-the-clutter-in-their-browser"
-              className="text-base px-6 py-3 text-sky-700 underline decoration-1 underline-offset-[3px] hover:text-sky-800"
+              className="text-base px-6 py-3 text-sky-700 dark:text-sky-300 underline decoration-1 underline-offset-[3px] hover:text-sky-800 dark:hover:text-sky-200"
               onClick={(e) => e.preventDefault()}
             >
               {t("onboarding_step3LinkLabel")}
@@ -210,12 +210,14 @@ export function StepLinkPreview({ onboarding }: Props) {
             <div className="flex flex-col items-center gap-2 pb-1">
               {t("onboarding_step3Callout")}
               <div className="flex items-center gap-2">
-                <span className="inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-b-2 border-slate-300 bg-white px-2.5 text-xs font-bold tracking-wide text-slate-700">
+                <span className="inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-b-2 border-slate-300 dark:border-slate-700 bg-white dark:bg-gray-900 px-2.5 text-xs font-bold tracking-wide text-slate-700 dark:text-slate-300">
                   <ArrowBigUp className="size-4" strokeWidth={2} />
                   Shift
                 </span>
-                <span className="text-xs font-semibold text-slate-500">+</span>
-                <span className="inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-b-2 border-slate-300 bg-white px-2.5 text-xs font-bold tracking-wide text-slate-700">
+                <span className="text-xs font-semibold text-slate-500 dark:text-slate-400">
+                  +
+                </span>
+                <span className="inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-b-2 border-slate-300 dark:border-slate-700 bg-white dark:bg-gray-900 px-2.5 text-xs font-bold tracking-wide text-slate-700 dark:text-slate-300">
                   <MousePointerClick className="size-4" strokeWidth={2} />
                   {t("onboarding_clickKeycap")}
                 </span>
@@ -228,7 +230,7 @@ export function StepLinkPreview({ onboarding }: Props) {
       {isWaitReturn && (
         <>
           <span
-            className="mt-10 size-8 shrink-0 rounded-full bg-sky-950/[0.14] text-sky-950 animate-onboarding-blink motion-reduce:animate-none"
+            className="mt-10 size-8 shrink-0 rounded-full bg-sky-950/[0.14] dark:bg-sky-200/25 text-sky-950 dark:text-sky-200 animate-onboarding-blink motion-reduce:animate-none"
             data-testid="onboarding-step3-callout-anchor"
           />
           <OnboardingCallout
@@ -248,7 +250,7 @@ export function StepLinkPreview({ onboarding }: Props) {
             type="button"
             onClick={() => onboarding.goToStep(OnboardingStep.CUSTOMIZE)}
             className={cn(
-              "flex items-center gap-2 min-h-14 rounded-xl bg-sky-950 px-8 text-lg font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]",
+              "flex items-center gap-2 min-h-14 rounded-xl bg-sky-950 dark:bg-sky-700 px-8 text-lg font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]",
               !onboarding.ui.showRail && "mt-4",
             )}
           >
diff --git a/packages/extension/src/components/onboarding/steps/StepSearchCommand.tsx b/packages/extension/src/components/onboarding/steps/StepSearchCommand.tsx
index a48fc9ca..0c63274a 100644
--- a/packages/extension/src/components/onboarding/steps/StepSearchCommand.tsx
+++ b/packages/extension/src/components/onboarding/steps/StepSearchCommand.tsx
@@ -178,7 +178,7 @@ export function StepSearchCommand({ onboarding }: Props) {
       )}
     >
       <OnboardingFadeIn key={"command-type"} delay={phaseDelays.commandType}>
-        <h2 className="text-4xl font-bold text-slate-700 flex items-center">
+        <h2 className="text-4xl font-bold text-slate-700 dark:text-slate-300 flex items-center">
           <span className="font-mono">1.</span>{" "}
           {t("Option_commandType_search_title")}
         </h2>
@@ -203,7 +203,7 @@ export function StepSearchCommand({ onboarding }: Props) {
           className="flex flex-col items-center gap-4"
           delay={phaseDelays.message}
         >
-          <p className="max-w-xl text-xl leading-[1.75] font-semibold text-slate-900">
+          <p className="max-w-xl text-xl leading-[1.75] font-semibold text-slate-900 dark:text-slate-100">
             {isValueShown ? (
               <>
                 <span>{t("onboarding_step1ValueMessage")}</span>
@@ -227,7 +227,7 @@ export function StepSearchCommand({ onboarding }: Props) {
             key="value-submessage"
             delay={phaseDelays.valueSubmessage}
           >
-            <p className="max-w-xl text-lg text-slate-700 text-pretty">
+            <p className="max-w-xl text-lg text-slate-700 dark:text-slate-300 text-pretty">
               {t("onboarding_step1ValueSubmessage")}
             </p>
           </OnboardingFadeIn>
@@ -278,7 +278,7 @@ export function StepSearchCommand({ onboarding }: Props) {
       {isWaitReturn && (
         <>
           <span
-            className="size-8 shrink-0 rounded-full bg-sky-950/[0.14] text-sky-950 animate-onboarding-blink motion-reduce:animate-none"
+            className="size-8 shrink-0 rounded-full bg-sky-950/[0.14] dark:bg-sky-200/25 text-sky-950 dark:text-sky-200 animate-onboarding-blink motion-reduce:animate-none"
             data-testid="onboarding-step1-callout-anchor"
           />
           <OnboardingCallout
@@ -298,7 +298,7 @@ export function StepSearchCommand({ onboarding }: Props) {
             type="button"
             onClick={() => onboarding.goToStep(OnboardingStep.AI_PROMPT)}
             className={cn(
-              "flex items-center gap-2 min-h-14 rounded-xl bg-sky-950 px-8 text-lg font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]",
+              "flex items-center gap-2 min-h-14 rounded-xl bg-sky-950 dark:bg-sky-700 px-8 text-lg font-semibold text-white shadow-[0_10px_20px_-14px_rgba(15,23,42,.7)] hover:brightness-[1.35]",
               !onboarding.ui.showRail && "mt-4",
             )}
           >
diff --git a/packages/extension/src/hooks/useTheme.ts b/packages/extension/src/hooks/useTheme.ts
index 61a20ce3..ee6887bb 100644
--- a/packages/extension/src/hooks/useTheme.ts
+++ b/packages/extension/src/hooks/useTheme.ts
@@ -1,4 +1,10 @@
-import { createContext, useContext, useEffect, useState } from "react"
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from "react"
 import { THEME, THEME_ATTRIBUTE } from "@/const"
 import { useUserSettings } from "@/hooks/useSettings"
 
@@ -59,7 +65,9 @@ export function useTheme(target: Element | null | undefined): ResolvedTheme {
   const prefersDark = usePrefersDarkScheme()
   const resolved = resolveTheme(userSettings.theme, prefersDark)
 
-  useEffect(() => {
+  // Layout effect: set the attribute before the first paint, so `dark:`
+  // styles never render a light frame first.
+  useLayoutEffect(() => {
     if (target == null) return
     target.setAttribute(THEME_ATTRIBUTE, resolved)
     return () => target.removeAttribute(THEME_ATTRIBUTE)
diff --git a/packages/extension/src/onboarding_page.html b/packages/extension/src/onboarding_page.html
index 44054244..ec9b726d 100644
--- a/packages/extension/src/onboarding_page.html
+++ b/packages/extension/src/onboarding_page.html
@@ -5,6 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <title>Onboarding</title>
+    <style>
+      /*
+       * Paint the dark background before the scripts and styles load, so a
+       * dark-mode user does not see a white flash. Once useTheme sets
+       * data-sc-theme, global.css takes over; an explicit light setting
+       * opts out here.
+       */
+      @media (prefers-color-scheme: dark) {
+        html:not([data-sc-theme="light"]) {
+          color-scheme: dark;
+          background-color: hsl(224 71% 4%);
+        }
+      }
+    </style>
   </head>
 
   <body>
diff --git a/packages/extension/src/options_page.html b/packages/extension/src/options_page.html
index 16ef9880..40b582e7 100644
--- a/packages/extension/src/options_page.html
+++ b/packages/extension/src/options_page.html
@@ -5,10 +5,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <title>Option Page</title>
+    <style>
+      /*
+       * Paint the dark background before the scripts and styles load, so a
+       * dark-mode user does not see a white flash. Once useTheme sets
+       * data-sc-theme, global.css takes over; an explicit light setting
+       * opts out here.
+       */
+      @media (prefers-color-scheme: dark) {
+        html:not([data-sc-theme="light"]) {
+          color-scheme: dark;
+          background-color: hsl(224 71% 4%);
+        }
+      }
+    </style>
   </head>
 
   <body>
-    <noscript>You need to enable ipt to run this app.</noscript>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/options_page.tsx"></script>
   </body>