From 27c7550f283ce70add2568e045080b218cdd69c4 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 22 Oct 2026 12:29:12 +0900
Subject: [PATCH 1/2] feat(extension): support dark mode on the options page

Apply the theme to the options page and add dark counterparts to its
hard-coded neutral colors. The `dark:` classes are added next to the
existing ones, so the light theme renders exactly as before.

Monochrome icons (generic glyphs, folder SVGs) are drawn in black and
vanished on dark backgrounds. In the dark theme they are now recolored
like the global icon color setting does, keeping favicons, brand icons
and icons excluded from recoloring as they are. This also applies to the
popup menu when no popup color is customized. The resolved theme is
shared through a context so that each icon does not load the settings.

Refs #495

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019DvJ25jdbq4pvn4K8Wk7Mx
---
 packages/extension/src/components/App.tsx     |  36 +++---
 .../src/components/Common.module.css          |  18 +++
 .../extension/src/components/Popup.module.css |   3 +-
 packages/extension/src/components/Popup.tsx   |  17 +--
 .../src/components/help/PageActionHelp.tsx    |  10 +-
 .../src/components/menu/MenuImage.tsx         |  10 +-
 .../menu/__tests__/MenuImage.test.tsx         |  34 ++++++
 .../src/components/option/CopyButton.tsx      |   4 +-
 .../src/components/option/DevTools.tsx        |  16 ++-
 .../components/option/DeveloperSupport.tsx    |   7 +-
 .../src/components/option/Dialog.module.css   |  10 ++
 .../src/components/option/EditButton.tsx      |   4 +-
 .../components/option/HubBanner.module.css    |   6 +-
 .../src/components/option/HubBanner.tsx       |   5 +-
 .../src/components/option/HubShareToast.tsx   |   4 +-
 .../src/components/option/HubUserInfo.tsx     |   8 +-
 .../src/components/option/ImportExport.tsx    |  22 +++-
 .../src/components/option/Option.module.css   |  19 +++-
 .../src/components/option/Option.tsx          | 105 +++++++++---------
 .../src/components/option/OptionMenuImage.tsx |  29 +++++
 .../components/option/PromptHistoryBanner.tsx |   6 +-
 .../src/components/option/RemoveButton.tsx    |   2 +-
 .../src/components/option/SettingForm.tsx     |  32 ++++--
 .../src/components/option/ShareButton.tsx     |   6 +-
 .../src/components/option/SortableItem.tsx    |   9 +-
 .../src/components/option/StorageUsage.tsx    |  72 ++++++++----
 .../option/TableOfContents.module.css         |   2 +-
 .../src/components/option/TableOfContents.tsx |   6 +-
 .../src/components/option/UserSupport.tsx     |   7 +-
 .../option/__tests__/OptionMenuImage.test.tsx |  53 +++++++++
 .../option/editor/CommandEditDialog.tsx       |   8 +-
 .../option/editor/CommandListMenu.tsx         |   8 +-
 .../option/editor/CommandTreeRenderer.tsx     |  10 +-
 .../components/option/editor/CommandType.tsx  |  17 +--
 .../editor/CommandTypeSelectionDialog.tsx     |   6 +-
 .../option/editor/PageActionSection.tsx       |   7 +-
 .../components/option/editor/PageRuleList.tsx |  32 +++---
 .../option/editor/PopupAnimation.tsx          |   2 +-
 .../option/editor/PopupPlacement.tsx          |   2 +-
 .../components/option/editor/ShortcutList.tsx |   7 +-
 .../option/editor/UserStyleList.tsx           |   4 +-
 .../src/components/option/field/IconField.tsx |   9 +-
 .../components/option/field/InfoTooltip.tsx   |   2 +-
 .../components/option/field/InputField.tsx    |   4 +-
 .../option/field/OpenModeToggleField.tsx      |  12 +-
 .../option/field/PopupPlacementField.tsx      |   4 +-
 .../components/option/field/SelectField.tsx   |   6 +-
 .../option/field/UserVariablesField.tsx       |  17 ++-
 .../extension/src/components/ui/button.tsx    |   3 +-
 packages/extension/src/components/ui/form.tsx |   2 +-
 .../extension/src/components/ui/input.tsx     |   2 +-
 .../extension/src/components/ui/textarea.tsx  |   2 +-
 packages/extension/src/hooks/useTheme.ts      |  11 +-
 53 files changed, 517 insertions(+), 222 deletions(-)
 create mode 100644 packages/extension/src/components/option/OptionMenuImage.tsx
 create mode 100644 packages/extension/src/components/option/__tests__/OptionMenuImage.test.tsx

diff --git a/packages/extension/src/components/App.tsx b/packages/extension/src/components/App.tsx
index a86907b2c..1f2803e03 100644
--- a/packages/extension/src/components/App.tsx
+++ b/packages/extension/src/components/App.tsx
@@ -17,7 +17,7 @@ import { TabContextProvider } from "@/providers/TabContextProvider"
 import { Ipc, TabCommand } from "@/services/ipc"
 import { Settings } from "@/services/settings/settings"
 import { ServiceWorkerData } from "@/services/serviceWorkerData"
-import { useTheme } from "@/hooks/useTheme"
+import { useTheme, themeContext } from "@/hooks/useTheme"
 import type { ShowToastParam } from "@/types"
 
 ServiceWorkerData.init()
@@ -31,7 +31,7 @@ export function App({ rootElm }: Props) {
 
   // rootElm is the shadow root; the theme attribute goes on its host so that
   // the `:host()` selectors in the stylesheets can match it.
-  useTheme(rootElm instanceof ShadowRoot ? rootElm.host : rootElm)
+  const theme = useTheme(rootElm instanceof ShadowRoot ? rootElm.host : rootElm)
 
   useEffect(() => {
     const handleShowToast = (
@@ -75,20 +75,22 @@ export function App({ rootElm }: Props) {
   }, [])
 
   return (
-    <TabContextProvider>
-      <PageActionContextProvider>
-        <SelectContextProvider>
-          <SelectAnchor ref={setPositionElm} />
-          <Popup positionElm={positionElm} />
-          <InvisibleItem positionElm={positionElm} />
-          <LinkSelector />
-          <OpenInTab />
-          <PageActionRunner />
-          <PageActionRecorder />
-          <CommandUpdateConfirmDialog />
-          <Toaster cssContainer={rootElm} />
-        </SelectContextProvider>
-      </PageActionContextProvider>
-    </TabContextProvider>
+    <themeContext.Provider value={theme}>
+      <TabContextProvider>
+        <PageActionContextProvider>
+          <SelectContextProvider>
+            <SelectAnchor ref={setPositionElm} />
+            <Popup positionElm={positionElm} />
+            <InvisibleItem positionElm={positionElm} />
+            <LinkSelector />
+            <OpenInTab />
+            <PageActionRunner />
+            <PageActionRecorder />
+            <CommandUpdateConfirmDialog />
+            <Toaster cssContainer={rootElm} />
+          </SelectContextProvider>
+        </PageActionContextProvider>
+      </TabContextProvider>
+    </themeContext.Provider>
   )
 }
diff --git a/packages/extension/src/components/Common.module.css b/packages/extension/src/components/Common.module.css
index 43c8932aa..05ae2b32e 100644
--- a/packages/extension/src/components/Common.module.css
+++ b/packages/extension/src/components/Common.module.css
@@ -13,6 +13,24 @@
   }
 }
 
+/*
+ * Composed from other CSS modules (`composes`), which bypasses Tailwind, so
+ * the dark theme selectors are spelled out instead of `@variant dark`.
+ */
+:host([data-sc-theme="dark"]) .button,
+[data-sc-theme="dark"] .button {
+  border-color: #4b5563; /* gray-600 */
+  background-color: #1f2937; /* gray-800 */
+
+  &:hover {
+    background-color: #374151; /* gray-700 */
+  }
+
+  svg {
+    fill: #d1d5db; /* gray-300 */
+  }
+}
+
 .shadow-xl {
   box-shadow:
     0 20px 25px -5px rgb(0 0 0 / 0.1),
diff --git a/packages/extension/src/components/Popup.module.css b/packages/extension/src/components/Popup.module.css
index 59724e2bc..2e4735336 100644
--- a/packages/extension/src/components/Popup.module.css
+++ b/packages/extension/src/components/Popup.module.css
@@ -41,6 +41,7 @@
       --sc-bd-color-s: 10%;
       --sc-bd-color-l: 26%;
       --sc-font-color: #e2e8f0;
+      --sc-icon-color: #e2e8f0;
 
       --foreground: 213 31% 91%;
       /* Hover color: lighter than the background, unlike the light theme. */
@@ -68,7 +69,7 @@
 }
 
 .previewLabel {
-  @apply font-mono text-gray-800;
+  @apply font-mono text-gray-800 dark:text-gray-200;
   font-size: 19.2px;
 }
 
diff --git a/packages/extension/src/components/Popup.tsx b/packages/extension/src/components/Popup.tsx
index 516d9e63b..78b22ca0b 100644
--- a/packages/extension/src/components/Popup.tsx
+++ b/packages/extension/src/components/Popup.tsx
@@ -8,6 +8,7 @@ import { useSidePanelNavigation } from "@/hooks/useSidePanelNavigation"
 import { useSidePanelAutoClose } from "@/hooks/useSidePanelAutoClose"
 import { useSelectContext } from "@/hooks/useSelectContext"
 import { popupContext } from "@/hooks/usePopupContext"
+import { useThemeContext } from "@/hooks/useTheme"
 import { isMac, onHover, cn } from "@/lib/utils"
 import {
   findUserStyleValue,
@@ -102,10 +103,14 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(
       setDetectSelectionEnabled(!hover)
     }
 
-    const hasIconColor = hasUserStyle(
-      userSettings?.userStyles,
-      STYLE_VARIABLE.ICON_COLOR,
-    )
+    const hasCustomColors = hasUserColors(userSettings?.userStyles)
+    // The dark theme paints recolorable icons (not favicons or brand icons)
+    // in its own icon color, as the global icon color setting would: they
+    // are mostly black glyphs that would vanish on the dark background.
+    const isDarkDefault = useThemeContext() === "dark" && !hasCustomColors
+    const hasIconColor =
+      hasUserStyle(userSettings?.userStyles, STYLE_VARIABLE.ICON_COLOR) ||
+      isDarkDefault
 
     return (
       <popupContext.Provider
@@ -130,9 +135,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(
               alignOffset={alignOffset}
               className={cn(css.popup, isPreview && "z-10 mt-2")}
               style={userStyles}
-              data-custom-colors={
-                hasUserColors(userSettings?.userStyles) || undefined
-              }
+              data-custom-colors={hasCustomColors || undefined}
               {...onHover(handleOnHover, true)}
             >
               {!isContextMenu ? <Menu /> : null}
diff --git a/packages/extension/src/components/help/PageActionHelp.tsx b/packages/extension/src/components/help/PageActionHelp.tsx
index 1f4059e7e..191c9f1f0 100644
--- a/packages/extension/src/components/help/PageActionHelp.tsx
+++ b/packages/extension/src/components/help/PageActionHelp.tsx
@@ -44,7 +44,7 @@ export const PageActionHelp = ({ className }: Props) => {
       <button
         type="button"
         className={cn(
-          "inline-flex items-center gap-1 text-sm text-gray-600 outline-gray-200 p-1 px-1.5 rounded-md transition hover:bg-gray-100 hover:scale-[110%] hover:text-sky-500 group/button",
+          "inline-flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400 outline-gray-200 dark:outline-gray-800 p-1 px-1.5 rounded-md transition hover:bg-gray-100 dark:hover:bg-gray-800 hover:scale-[110%] hover:text-sky-500 group/button",
           className,
         )}
         onClick={() => {
@@ -60,7 +60,7 @@ export const PageActionHelp = ({ className }: Props) => {
         ref={buttonRef}
       >
         <CircleHelp
-          className="stroke-gray-500 group-hover/button:stroke-sky-500"
+          className="stroke-gray-500 dark:stroke-gray-400 group-hover/button:stroke-sky-500"
           size={20}
         />
         <span className="leading-none pb-0.5">Help</span>
@@ -107,7 +107,7 @@ const HelpDialog = ({ open, onOpenChange }: HelpDialogProps) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogPortal>
         <DialogContent
-          className="pageActionHelp w-184 max-w-4xl text-gray-700"
+          className="pageActionHelp w-184 max-w-4xl text-gray-700 dark:text-gray-300"
           onOpenAutoFocus={handleOpenAutoFocus}
         >
           <DialogHeader>
@@ -182,7 +182,7 @@ const HelpDialog = ({ open, onOpenChange }: HelpDialogProps) => {
                 <div className={css.carouselContent}>
                   <table className={css.table}>
                     <thead>
-                      <tr className="bg-gray-200">
+                      <tr className="bg-gray-200 dark:bg-gray-700">
                         <th className={css.tableCell}>
                           {t("help_pageAction_action")}
                         </th>
@@ -308,7 +308,7 @@ const HelpDialog = ({ open, onOpenChange }: HelpDialogProps) => {
                   <button
                     type="button"
                     className={cn(
-                      "bg-gray-200 h-2 w-full hover:bg-sky-300 rounded-sm transition",
+                      "bg-gray-200 dark:bg-gray-700 h-2 w-full hover:bg-sky-300 rounded-sm transition",
                       i === current - 1 ? "bg-sky-700" : "",
                     )}
                     onClick={() => scrollTo(i)}
diff --git a/packages/extension/src/components/menu/MenuImage.tsx b/packages/extension/src/components/menu/MenuImage.tsx
index b8d4c600c..325560339 100644
--- a/packages/extension/src/components/menu/MenuImage.tsx
+++ b/packages/extension/src/components/menu/MenuImage.tsx
@@ -2,7 +2,7 @@ import { isEmpty, isValidSVG, cn } from "@/lib/utils"
 import { usePopupContext } from "@/hooks/usePopupContext"
 import css from "./Menu.module.css"
 
-type MenuImageProps = {
+export type MenuImageProps = {
   src?: string
   svg?: string
   alt?: string
@@ -14,6 +14,12 @@ type MenuImageProps = {
    * List into every page the content script runs on.
    */
   preserveOriginalColor?: boolean
+  /**
+   * Whether to recolor the icon, for icons rendered outside the popup.
+   * Defaults to the popup's decision. Excluded and preserved icons are never
+   * recolored.
+   */
+  recolor?: boolean
 }
 
 /** An icon without a meaningful alt is decorative and hidden from screen readers. */
@@ -37,7 +43,7 @@ export function MenuImage(props: MenuImageProps): JSX.Element {
   const { hasIconColor } = usePopupContext()
 
   const recolor = Boolean(
-    hasIconColor &&
+    (props.recolor ?? hasIconColor) &&
     !props.excludeFromGlobalIconColor &&
     !props.preserveOriginalColor,
   )
diff --git a/packages/extension/src/components/menu/__tests__/MenuImage.test.tsx b/packages/extension/src/components/menu/__tests__/MenuImage.test.tsx
index 55b055594..5a0811385 100644
--- a/packages/extension/src/components/menu/__tests__/MenuImage.test.tsx
+++ b/packages/extension/src/components/menu/__tests__/MenuImage.test.tsx
@@ -309,3 +309,37 @@ describe("MenuImage - Global Icon Color Exclusion", () => {
     })
   })
 })
+
+describe("MenuImage - recolor prop", () => {
+  const testUiUrl =
+    "https://cdn3.iconfinder.com/data/icons/feather-5/24/search-1024.png"
+
+  it("recolors when recolor is true even if the popup does not", () => {
+    const { container } = renderWithContext(
+      <MenuImage src={testUiUrl} alt="test-icon" recolor={true} />,
+      { hasIconColor: false },
+    )
+    expect(container.querySelector("span[role='img']")).not.toBeNull()
+    expect(container.querySelector("img")).toBeNull()
+  })
+
+  it("does not recolor when recolor is false even if the popup does", () => {
+    const { container } = renderWithContext(
+      <MenuImage src={testUiUrl} alt="test-icon" recolor={false} />,
+      { hasIconColor: true },
+    )
+    expect(container.querySelector("img")).not.toBeNull()
+  })
+
+  it("keeps preserved icons even when recolor is true", () => {
+    const { container } = renderWithContext(
+      <MenuImage
+        src={testUiUrl}
+        alt="test-icon"
+        recolor={true}
+        preserveOriginalColor={true}
+      />,
+    )
+    expect(container.querySelector("img")).not.toBeNull()
+  })
+})
diff --git a/packages/extension/src/components/option/CopyButton.tsx b/packages/extension/src/components/option/CopyButton.tsx
index f6e703e12..8aa22fed9 100644
--- a/packages/extension/src/components/option/CopyButton.tsx
+++ b/packages/extension/src/components/option/CopyButton.tsx
@@ -40,13 +40,13 @@ export const CopyButton = ({
         type="button"
         ref={buttonRef}
         className={cn(
-          "outline-gray-200 p-2 rounded-md transition hover:bg-gray-100 hover:scale-125 group/edit-button",
+          "outline-gray-200 dark:outline-gray-800 p-2 rounded-md transition hover:bg-gray-100 dark:hover:bg-gray-800 hover:scale-125 group/edit-button",
           className,
         )}
         onClick={() => setOpen(true)}
       >
         <Copy
-          className="stroke-gray-500 group-hover/edit-button:stroke-gray-500"
+          className="stroke-gray-500 dark:stroke-gray-400 group-hover/edit-button:stroke-gray-500"
           size={size}
         />
       </button>
diff --git a/packages/extension/src/components/option/DevTools.tsx b/packages/extension/src/components/option/DevTools.tsx
index 4856eba49..8363023b9 100644
--- a/packages/extension/src/components/option/DevTools.tsx
+++ b/packages/extension/src/components/option/DevTools.tsx
@@ -49,7 +49,10 @@ export function DevTools() {
         disabled={running}
         title="Results are logged to the console"
       >
-        <ScanSearch size={18} className="mr-2 stroke-gray-600" />
+        <ScanSearch
+          size={18}
+          className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+        />
         AI Selector Check
       </button>
       <button
@@ -58,10 +61,17 @@ export function DevTools() {
         disabled={running}
         title="Checks in a new incognito window (no login session). Results are logged to the console"
       >
-        <VenetianMask size={18} className="mr-2 stroke-gray-600" />
+        <VenetianMask
+          size={18}
+          className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+        />
         AI Selector Check (Incognito)
       </button>
-      {running && <p className="text-sm text-gray-600 ml-2">Checking…</p>}
+      {running && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 ml-2">
+          Checking…
+        </p>
+      )}
     </div>
   )
 }
diff --git a/packages/extension/src/components/option/DeveloperSupport.tsx b/packages/extension/src/components/option/DeveloperSupport.tsx
index 788ae0635..835fbfb92 100644
--- a/packages/extension/src/components/option/DeveloperSupport.tsx
+++ b/packages/extension/src/components/option/DeveloperSupport.tsx
@@ -31,7 +31,7 @@ export function DeveloperSupport() {
         rel="noopener noreferrer"
         className={css.menuButton}
       >
-        <Star size={18} className="mr-2 stroke-gray-600" />
+        <Star size={18} className="mr-2 stroke-gray-600 dark:stroke-gray-400" />
         {t("developersupport_review")}
       </a>
       <a
@@ -40,7 +40,10 @@ export function DeveloperSupport() {
         rel="noopener noreferrer"
         className={css.menuButton}
       >
-        <Coffee size={18} className="mr-2 stroke-gray-600" />
+        <Coffee
+          size={18}
+          className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+        />
         {t("developersupport_coffee")}
       </a>
     </div>
diff --git a/packages/extension/src/components/option/Dialog.module.css b/packages/extension/src/components/option/Dialog.module.css
index 8e89f5fcd..0fc2bb7e5 100644
--- a/packages/extension/src/components/option/Dialog.module.css
+++ b/packages/extension/src/components/option/Dialog.module.css
@@ -1,7 +1,13 @@
+@reference "../global.css";
+
 .dialog {
   color: var(--font-color);
   background: #fff;
   padding: 30px 40px;
+
+  @variant dark {
+    background: var(--color-gray-900);
+  }
   font-family: var(--font-family);
 }
 
@@ -17,6 +23,10 @@
     display: inline;
     background: #eee;
     padding: 4px 6px;
+
+    @variant dark {
+      background: var(--color-gray-700);
+    }
     border-radius: 6px;
     font-size: 0.9em;
   }
diff --git a/packages/extension/src/components/option/EditButton.tsx b/packages/extension/src/components/option/EditButton.tsx
index 46e8a6e52..27df4d6f0 100644
--- a/packages/extension/src/components/option/EditButton.tsx
+++ b/packages/extension/src/components/option/EditButton.tsx
@@ -29,7 +29,7 @@ export const EditButton = ({
       <button
         ref={buttonRef}
         className={cn(
-          "outline-gray-200 p-2 rounded-md transition hover:bg-sky-100 hover:scale-125 group/edit-button",
+          "outline-gray-200 dark:outline-gray-800 p-2 rounded-md transition hover:bg-sky-100 hover:scale-125 group/edit-button",
           className,
         )}
         onClick={handleClick}
@@ -37,7 +37,7 @@ export const EditButton = ({
       >
         <Pencil
           className={cn(
-            "stroke-gray-500 group-hover/edit-button:stroke-sky-500",
+            "stroke-gray-500 dark:stroke-gray-400 group-hover/edit-button:stroke-sky-500",
             classNameIcon,
           )}
           size={size}
diff --git a/packages/extension/src/components/option/HubBanner.module.css b/packages/extension/src/components/option/HubBanner.module.css
index e7c630ea6..28fb7a05e 100644
--- a/packages/extension/src/components/option/HubBanner.module.css
+++ b/packages/extension/src/components/option/HubBanner.module.css
@@ -1,7 +1,7 @@
 @reference "../global.css";
 
 .menuLabel {
-  @apply font-mono text-gray-800;
+  @apply font-mono text-gray-800 dark:text-gray-200;
   font-size: 1.2rem;
 }
 
@@ -17,7 +17,7 @@
 }
 
 .description {
-  @apply font-mono text-gray-800;
+  @apply font-mono text-gray-800 dark:text-gray-200;
   font-size: 0.8rem;
   padding-left: 4px;
 }
@@ -32,6 +32,6 @@
 }
 
 .userName {
-  @apply font-mono text-gray-700;
+  @apply font-mono text-gray-700 dark:text-gray-300;
   font-size: 0.85rem;
 }
diff --git a/packages/extension/src/components/option/HubBanner.tsx b/packages/extension/src/components/option/HubBanner.tsx
index cf19ce98f..da2a9a573 100644
--- a/packages/extension/src/components/option/HubBanner.tsx
+++ b/packages/extension/src/components/option/HubBanner.tsx
@@ -32,7 +32,10 @@ export function HubBanner() {
         onClick={() => sendHubLinkClick(HUB_LINK_ROUTE.BANNER)}
       >
         <img
-          className={cn(css2.banner, "shadow-xl rounded-md px-4 pt-2 pb-1")}
+          className={cn(
+            css2.banner, // The banner image has a transparent background and dark text.
+            "shadow-xl rounded-md px-4 pt-2 pb-1 dark:bg-white",
+          )}
           src="/SelectionCommandHub.png"
           alt="Selection Command"
           width="230"
diff --git a/packages/extension/src/components/option/HubShareToast.tsx b/packages/extension/src/components/option/HubShareToast.tsx
index a2637b763..195cb7e08 100644
--- a/packages/extension/src/components/option/HubShareToast.tsx
+++ b/packages/extension/src/components/option/HubShareToast.tsx
@@ -45,7 +45,7 @@ function showHubShareToastNow(
 
   toast.custom(
     (toastId) => (
-      <div className="bg-white border border-gray-200 rounded-lg shadow-lg px-5 py-4 text-gray-800">
+      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-lg px-5 py-4 text-gray-800 dark:text-gray-200">
         <div className="flex flex-row gap-2 items-center mb-4">
           <img
             src="/party_popper.png"
@@ -63,7 +63,7 @@ function showHubShareToastNow(
         </div>
         <div className="flex flex-row gap-3">
           <button
-            className="flex-1 h-9 px-3 rounded-lg border border-gray-300 bg-white text-sm font-medium transition hover:bg-gray-50"
+            className="flex-1 h-9 px-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-sm font-medium transition hover:bg-gray-50 dark:hover:bg-gray-900"
             onClick={() => {
               toast.dismiss(toastId)
               onShown()
diff --git a/packages/extension/src/components/option/HubUserInfo.tsx b/packages/extension/src/components/option/HubUserInfo.tsx
index b893d6e01..24287bbc2 100644
--- a/packages/extension/src/components/option/HubUserInfo.tsx
+++ b/packages/extension/src/components/option/HubUserInfo.tsx
@@ -26,7 +26,9 @@ export function HubUserInfo() {
             e.currentTarget.style.display = "none"
           }}
         />
-        <span className="font-mono text-sm text-gray-700">{hubUser.name}</span>
+        <span className="font-mono text-sm text-gray-700 dark:text-gray-300">
+          {hubUser.name}
+        </span>
       </div>
     )
   }
@@ -37,9 +39,9 @@ export function HubUserInfo() {
       target="_blank"
       rel="noopener noreferrer"
       onClick={() => sendHubLinkClick(HUB_LINK_ROUTE.LOGIN)}
-      className="inline-flex items-center px-2 py-1 rounded-lg text-xs text-gray-600 border border-gray-300 hover:bg-gray-100 hover:scale-105 transition"
+      className="inline-flex items-center px-2 py-1 rounded-lg text-xs text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 hover:scale-105 transition"
     >
-      <LogIn size={16} className="mr-2 stroke-gray-600" />
+      <LogIn size={16} className="mr-2 stroke-gray-600 dark:stroke-gray-400" />
       {t("hub_login")}
     </a>
   )
diff --git a/packages/extension/src/components/option/ImportExport.tsx b/packages/extension/src/components/option/ImportExport.tsx
index 1eb478a9a..cbf11ceaa 100644
--- a/packages/extension/src/components/option/ImportExport.tsx
+++ b/packages/extension/src/components/option/ImportExport.tsx
@@ -77,7 +77,10 @@ export function ImportExport() {
           type="button"
           data-testid={TEST_IDS.importButton}
         >
-          <Download size={18} className="mr-2 stroke-gray-600" />
+          <Download
+            size={18}
+            className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+          />
           {t("Option_Import")}
         </button>
         <button
@@ -86,7 +89,10 @@ export function ImportExport() {
           type="button"
           data-testid={TEST_IDS.exportButton}
         >
-          <Upload size={18} className="mr-2 stroke-gray-600" />
+          <Upload
+            size={18}
+            className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+          />
           {t("Option_Export")}
         </button>
         <button
@@ -101,7 +107,10 @@ export function ImportExport() {
                 : t("Option_RestoreFromBackup_tooltip")
           }
         >
-          <RotateCcw size={18} className="mr-2 stroke-gray-600" />
+          <RotateCcw
+            size={18}
+            className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+          />
           {t("Option_RestoreFromBackup")}
         </button>
         <button
@@ -110,7 +119,10 @@ export function ImportExport() {
           type="button"
           data-testid={TEST_IDS.resetButton}
         >
-          <Undo2 size={18} className="mr-2 stroke-gray-600" />
+          <Undo2
+            size={18}
+            className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+          />
           {t("Option_Reset")}
         </button>
       </div>
@@ -179,7 +191,7 @@ export function ImportExport() {
                       {getBackupTypeLabel(type)}
                     </label>
                     {backup.info && (
-                      <div className="text-xs text-gray-600 mt-1">
+                      <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
                         <div>
                           {t("Option_RestoreFromBackup_created")}{" "}
                           {new Date(backup.info.timestamp).toLocaleString()}
diff --git a/packages/extension/src/components/option/Option.module.css b/packages/extension/src/components/option/Option.module.css
index 14610f904..bf0b4a959 100644
--- a/packages/extension/src/components/option/Option.module.css
+++ b/packages/extension/src/components/option/Option.module.css
@@ -6,6 +6,12 @@
     Arial, sans-serif;
   --font-color: #333;
   --menu-top: 150px;
+
+  @variant dark {
+    --font-color: #e5e7eb;
+    /* Icon color for OptionMenuImage, see there. */
+    --sc-icon-color: var(--color-gray-300);
+  }
 }
 
 :global body {
@@ -18,7 +24,7 @@
 }
 
 .title {
-  @apply tracking-tight text-gray-700;
+  @apply tracking-tight text-gray-700 dark:text-gray-300;
   font-weight: 600;
   font-size: 1.2rem;
   margin: 0;
@@ -29,7 +35,7 @@
 }
 
 .version {
-  @apply mt-0.5 text-gray-500;
+  @apply mt-0.5 text-gray-500 dark:text-gray-400;
   font-size: 0.8rem;
 }
 
@@ -47,7 +53,7 @@
 }
 
 .menuLabel {
-  @apply font-mono text-gray-800;
+  @apply font-mono text-gray-800 dark:text-gray-200;
   font-size: 1.2rem;
   margin-bottom: 16px;
 }
@@ -59,7 +65,7 @@
 
 .menuButton {
   @apply flex items-center;
-  @apply font-mono text-gray-800;
+  @apply font-mono text-gray-800 dark:text-gray-200;
   border: none;
   background: none;
   font-size: 0.9rem;
@@ -72,7 +78,7 @@
   cursor: pointer;
 
   &:hover {
-    @apply bg-gray-200;
+    @apply bg-gray-200 dark:bg-gray-700;
     @apply scale-[110%];
   }
 }
@@ -94,6 +100,9 @@
 
 .bgHatching {
   background-color: #fff;
+  @variant dark {
+    background-color: var(--color-gray-900);
+  }
   background-image: repeating-linear-gradient(
     45deg,
     #6b7280,
diff --git a/packages/extension/src/components/option/Option.tsx b/packages/extension/src/components/option/Option.tsx
index 44a925c79..583f73dac 100644
--- a/packages/extension/src/components/option/Option.tsx
+++ b/packages/extension/src/components/option/Option.tsx
@@ -4,6 +4,7 @@ import { Toaster } from "sonner"
 import { Settings } from "@/services/settings/settings"
 import { capitalize, scrollToSelector } from "@/lib/utils"
 import { APP_ID, VERSION, SCREEN } from "@/const"
+import { useTheme, themeContext } from "@/hooks/useTheme"
 import { ANALYTICS_EVENTS, sendEvent } from "@/services/analytics"
 
 import { Popup } from "@/components/Popup"
@@ -26,6 +27,8 @@ export function Option() {
   const [popupHeight, setPopupHeight] = useState(0)
   const hasSentScreenOpenedRef = useRef(false)
 
+  const theme = useTheme(document.documentElement)
+
   useEffect(() => {
     const updateHeight = () => {
       if (popupElm == null) return
@@ -60,59 +63,61 @@ export function Option() {
   }
 
   return (
-    <div>
-      <Toaster />
-      <header className={css.titleHeader}>
-        <h1 className={css.title}>
-          {APP_ID.split("-").map((n) => {
-            return (
-              <span key={n} className={css.titleSpan}>
-                {capitalize(n)}
-              </span>
-            )
-          })}
-        </h1>
-        <span className={css.version}>Version: {VERSION}</span>
-        <div className="ml-auto">
-          <HubUserInfo />
-        </div>
-      </header>
-      <div className="flex m-auto gap-4 justify-center">
-        <aside className="min-w-60">
-          <div className="sticky top-20">
-            <TableOfContents onClick={onClickMenu} />
-            <ImportExport />
-            <UserSupport />
-            <DeveloperSupport />
-            <DevTools />
+    <themeContext.Provider value={theme}>
+      <div>
+        <Toaster theme={theme} />
+        <header className={css.titleHeader}>
+          <h1 className={css.title}>
+            {APP_ID.split("-").map((n) => {
+              return (
+                <span key={n} className={css.titleSpan}>
+                  {capitalize(n)}
+                </span>
+              )
+            })}
+          </h1>
+          <span className={css.version}>Version: {VERSION}</span>
+          <div className="ml-auto">
+            <HubUserInfo />
           </div>
-        </aside>
-        <main>
-          <SettingForm className="pt-10" />
-        </main>
-        <aside className="pl-10 font-mono min-w-70">
-          <div className="sticky top-20">
-            <div
-              ref={setPreviewElm}
-              style={{ marginBottom: Math.max(popupHeight + 5, 30) }}
-            >
-              <SelectContextProvider>
-                <Popup
-                  positionElm={previewElm}
-                  isPreview={true}
-                  ref={setPopupElm}
-                />
-              </SelectContextProvider>
-            </div>
-            <div className="pt-3">
-              <HubBanner />
+        </header>
+        <div className="flex m-auto gap-4 justify-center">
+          <aside className="min-w-60">
+            <div className="sticky top-20">
+              <TableOfContents onClick={onClickMenu} />
+              <ImportExport />
+              <UserSupport />
+              <DeveloperSupport />
+              <DevTools />
             </div>
-            <div>
-              <StorageUsage />
+          </aside>
+          <main>
+            <SettingForm className="pt-10" />
+          </main>
+          <aside className="pl-10 font-mono min-w-70">
+            <div className="sticky top-20">
+              <div
+                ref={setPreviewElm}
+                style={{ marginBottom: Math.max(popupHeight + 5, 30) }}
+              >
+                <SelectContextProvider>
+                  <Popup
+                    positionElm={previewElm}
+                    isPreview={true}
+                    ref={setPopupElm}
+                  />
+                </SelectContextProvider>
+              </div>
+              <div className="pt-3">
+                <HubBanner />
+              </div>
+              <div>
+                <StorageUsage />
+              </div>
             </div>
-          </div>
-        </aside>
+          </aside>
+        </div>
       </div>
-    </div>
+    </themeContext.Provider>
   )
 }
diff --git a/packages/extension/src/components/option/OptionMenuImage.tsx b/packages/extension/src/components/option/OptionMenuImage.tsx
new file mode 100644
index 000000000..caf977806
--- /dev/null
+++ b/packages/extension/src/components/option/OptionMenuImage.tsx
@@ -0,0 +1,29 @@
+import { MenuImage, type MenuImageProps } from "@/components/menu/MenuImage"
+import { useThemeContext } from "@/hooks/useTheme"
+import { shouldPreserveIconColor } from "@/lib/favicon"
+import type { Command } from "@/types"
+
+type Props = MenuImageProps & {
+  /** The command the icon belongs to, to keep its website's own icons. */
+  command?: Command
+}
+
+/**
+ * MenuImage for the option page, outside the popup. In the dark theme it
+ * recolors icons like the popup does (see Popup), since the black glyph icons
+ * would vanish on the dark background. Favicons and brand icons keep their
+ * colors.
+ */
+export function OptionMenuImage({ command, ...props }: Props): JSX.Element {
+  const isDark = useThemeContext() === "dark"
+  const preserveOriginalColor =
+    props.preserveOriginalColor ??
+    shouldPreserveIconColor({ url: props.src, command })
+  return (
+    <MenuImage
+      {...props}
+      recolor={isDark}
+      preserveOriginalColor={preserveOriginalColor}
+    />
+  )
+}
diff --git a/packages/extension/src/components/option/PromptHistoryBanner.tsx b/packages/extension/src/components/option/PromptHistoryBanner.tsx
index 797b72a2a..534862447 100644
--- a/packages/extension/src/components/option/PromptHistoryBanner.tsx
+++ b/packages/extension/src/components/option/PromptHistoryBanner.tsx
@@ -47,7 +47,7 @@ export function PromptHistoryBanner() {
       rel="noopener noreferrer"
       className={cn(
         "fixed bottom-5 right-5 z-1000 p-5 max-w-[300px]",
-        "bg-white shadow-2xl rounded-lg",
+        "bg-white dark:bg-gray-900 shadow-2xl rounded-lg",
         "cursor-pointer transition-all duration-300 ease-in-out",
         "no-underline text-inherit",
         "hover:-translate-y-0.5 hover:shadow-xl",
@@ -58,7 +58,7 @@ export function PromptHistoryBanner() {
         className={cn(
           "absolute top-2 right-2 p-1 rounded-full",
           "bg-transparent border-none cursor-pointer",
-          "text-gray-600 hover:text-gray-800 hover:bg-gray-100",
+          "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800",
           "transition-colors z-1001",
           "focus:outline-2 focus:outline-blue-500 focus:outline-offset-2",
         )}
@@ -73,7 +73,7 @@ export function PromptHistoryBanner() {
         alt="Prompt History"
         className="w-full h-auto rounded-lg mb-3"
       />
-      <p className="font-mono text-gray-800 text-sm leading-relaxed m-0">
+      <p className="font-mono text-gray-800 dark:text-gray-200 text-sm leading-relaxed m-0">
         {t("prompthistory_banner_description")}
       </p>
     </a>
diff --git a/packages/extension/src/components/option/RemoveButton.tsx b/packages/extension/src/components/option/RemoveButton.tsx
index 9fe931f98..f007900d7 100644
--- a/packages/extension/src/components/option/RemoveButton.tsx
+++ b/packages/extension/src/components/option/RemoveButton.tsx
@@ -43,7 +43,7 @@ export const RemoveButton = ({
         data-testid={dataTestId}
       >
         <Trash2
-          className="stroke-gray-500 group-hover/remove-button:stroke-red-500"
+          className="stroke-gray-500 dark:stroke-gray-400 group-hover/remove-button:stroke-red-500"
           size={size}
         />
       </button>
diff --git a/packages/extension/src/components/option/SettingForm.tsx b/packages/extension/src/components/option/SettingForm.tsx
index 4bd095348..550f83900 100644
--- a/packages/extension/src/components/option/SettingForm.tsx
+++ b/packages/extension/src/components/option/SettingForm.tsx
@@ -424,13 +424,16 @@ export function SettingForm({ className }: { className?: string }) {
       <form
         id="InputForm"
         className={cn(
-          "space-y-10 w-[600px] mx-auto pb-20 text-gray-700",
+          "space-y-10 w-[600px] mx-auto pb-20 text-gray-700 dark:text-gray-300",
           className,
         )}
       >
         <section id="startupMethod" className="space-y-3">
           <h3 className="text-xl font-semibold flex items-center">
-            <MessageSquareMore size={22} className="mr-2 stroke-gray-600" />
+            <MessageSquareMore
+              size={22}
+              className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+            />
             {t("startupMethod")}
           </h3>
           <p className="text-base">{t("startupMethod_desc")}</p>
@@ -512,7 +515,10 @@ export function SettingForm({ className }: { className?: string }) {
         <hr />
         <section id="commands" className="space-y-3">
           <h3 className="text-xl font-semibold flex items-center">
-            <SquareTerminal size={22} className="mr-2 stroke-gray-600" />
+            <SquareTerminal
+              size={22}
+              className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+            />
             {t("commands")}
           </h3>
           <p className="text-base">{t("commands_desc")}</p>
@@ -527,7 +533,10 @@ export function SettingForm({ className }: { className?: string }) {
 
         <section id="linkCommand" className="space-y-3">
           <h3 className="text-xl font-semibold flex items-center">
-            <Eye size={22} className="mr-2 stroke-gray-600" />
+            <Eye
+              size={22}
+              className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+            />
             {t("linkCommand")}
           </h3>
           <p className="text-base">{t("linkCommand_desc")}</p>
@@ -640,7 +649,10 @@ export function SettingForm({ className }: { className?: string }) {
 
         <section id="windowSettings" className="space-y-3">
           <h3 className="text-xl font-semibold flex items-center">
-            <AppWindow size={22} className="mr-2 stroke-gray-600" />
+            <AppWindow
+              size={22}
+              className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+            />
             {t("windowSettings")}
           </h3>
           <p className="text-base">{t("windowSettings_desc")}</p>
@@ -676,7 +688,10 @@ export function SettingForm({ className }: { className?: string }) {
 
         <section id="pageRules" className="space-y-3">
           <h3 className="text-xl font-semibold flex items-center">
-            <BookOpen size={22} className="mr-2 stroke-gray-600" />
+            <BookOpen
+              size={22}
+              className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+            />
             {t("pageRules")}
           </h3>
           <p className="text-base">{t("pageRules_desc")}</p>
@@ -688,7 +703,10 @@ export function SettingForm({ className }: { className?: string }) {
         <hr />
         <section id="userStyles" className="space-y-3">
           <h3 className="text-xl font-semibold flex items-center">
-            <Paintbrush size={22} className="mr-2 stroke-gray-600" />
+            <Paintbrush
+              size={22}
+              className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+            />
             {t("userStyles")}
           </h3>
           <p className="text-base">{t("userStyles_desc")}</p>
diff --git a/packages/extension/src/components/option/ShareButton.tsx b/packages/extension/src/components/option/ShareButton.tsx
index 4a5ff5f21..13a9f425c 100644
--- a/packages/extension/src/components/option/ShareButton.tsx
+++ b/packages/extension/src/components/option/ShareButton.tsx
@@ -100,7 +100,7 @@ export const ShareButton = ({
         type="button"
         disabled={status !== "idle"}
         className={cn(
-          "outline-gray-200 p-2 rounded-md transition hover:bg-green-100 hover:scale-125 group/share-btn",
+          "outline-gray-200 dark:outline-gray-800 p-2 rounded-md transition hover:bg-green-100 hover:scale-125 group/share-btn",
           "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none",
         )}
         onClick={handleClick}
@@ -112,7 +112,7 @@ export const ShareButton = ({
         {!isShared ? (
           <Share
             className={cn(
-              "stroke-gray-500 group-hover/share-btn:stroke-green-600",
+              "stroke-gray-500 dark:stroke-gray-400 group-hover/share-btn:stroke-green-600",
               status === "error" && "stroke-red-500",
             )}
             size={16}
@@ -120,7 +120,7 @@ export const ShareButton = ({
         ) : (
           <CloudCheck
             className={cn(
-              "stroke-gray-500 group-hover/share-btn:stroke-green-600",
+              "stroke-gray-500 dark:stroke-gray-400 group-hover/share-btn:stroke-green-600",
               status === "error" && "stroke-red-500",
             )}
             size={16}
diff --git a/packages/extension/src/components/option/SortableItem.tsx b/packages/extension/src/components/option/SortableItem.tsx
index 3e4f42e4a..f5ee1465d 100644
--- a/packages/extension/src/components/option/SortableItem.tsx
+++ b/packages/extension/src/components/option/SortableItem.tsx
@@ -52,7 +52,7 @@ export function SortableItem(props: SrotabelItemProps) {
         "pl-1 flex items-center cursor-auto",
         props.index === 0 ? "" : "border-t",
         props.index === activeIndex
-          ? "border-y bg-gray-100/80 shadow-lg relative z-10"
+          ? "border-y bg-gray-100/80 dark:bg-gray-800/80 shadow-lg relative z-10"
           : "",
         props.className,
       )}
@@ -60,13 +60,16 @@ export function SortableItem(props: SrotabelItemProps) {
     >
       <div
         className={cn(
-          "p-1 py-2 mr-1 hover:bg-gray-100 cursor-grab rounded-md transition duration-200",
+          "p-1 py-2 mr-1 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-grab rounded-md transition duration-200",
           isDragging && "cursor-grabbing",
         )}
         ref={setActivatorNodeRef}
         {...listeners}
       >
-        <GripVertical size={18} className="stroke-gray-400" />
+        <GripVertical
+          size={18}
+          className="stroke-gray-400 dark:stroke-gray-500"
+        />
       </div>
       {props.children}
     </li>
diff --git a/packages/extension/src/components/option/StorageUsage.tsx b/packages/extension/src/components/option/StorageUsage.tsx
index b6bc99ec1..13c7b123b 100644
--- a/packages/extension/src/components/option/StorageUsage.tsx
+++ b/packages/extension/src/components/option/StorageUsage.tsx
@@ -6,10 +6,30 @@ import {
   StorageUsageData,
 } from "@/services/storage/storageUsage"
 import { cn } from "@/lib/utils"
+import { useThemeContext } from "@/hooks/useTheme"
 
 import s from "./Option.module.css"
 
+// Bar colors, passed inline to MultiProgress. Must match the legend's classes.
+const BAR_COLORS = {
+  light: {
+    system: "#4b5563", // gray-600
+    commands: "#9ca3af", // gray-400
+    hatching: "#fff", // Background under bgHatching's stripes
+    free: "#e5e7eb", // gray-200
+    track: "#f3f4f6", // gray-100
+  },
+  dark: {
+    system: "#d1d5db", // gray-300
+    commands: "#6b7280", // gray-500
+    hatching: "#111827", // gray-900
+    free: "#374151", // gray-700
+    track: "#1f2937", // gray-800
+  },
+}
+
 const StorageUsage: React.FC = () => {
+  const colors = BAR_COLORS[useThemeContext()]
   const [storageData, setStorageData] = useState<StorageUsageData | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -34,7 +54,7 @@ const StorageUsage: React.FC = () => {
     return (
       <div className={cn(s.menu, "w-[240px]")}>
         <h3 className={s.menuLabel}>Storage Usage</h3>
-        <p className="text-sm text-gray-600 font-medium font-mono mb-2">
+        <p className="text-sm text-gray-600 dark:text-gray-400 font-medium font-mono mb-2">
           Loading...
         </p>
       </div>
@@ -53,23 +73,23 @@ const StorageUsage: React.FC = () => {
   const syncElements = [
     {
       value: storageData.sync.systemPercent,
-      color: "#4b5563", // gray-600
+      color: colors.system,
       name: "System",
     },
     {
       value: storageData.sync.commandsPercent,
-      color: "#9ca3af", // gray-400
+      color: colors.commands,
       name: "Commands",
     },
     {
       value: storageData.sync.reservedPercent,
-      color: "#fff",
+      color: colors.hatching,
       name: "Reserved",
       className: s.bgHatching,
     },
     {
       value: storageData.sync.freePercent,
-      color: "#e5e7eb", // gray-200
+      color: colors.free,
       name: "Free",
     },
   ]
@@ -77,23 +97,23 @@ const StorageUsage: React.FC = () => {
   const localElements = [
     {
       value: storageData.local.systemPercent,
-      color: "#4b5563", // gray-600
+      color: colors.system,
       name: "System",
     },
     {
       value: storageData.local.commandsPercent,
-      color: "#9ca3af", // gray-400
+      color: colors.commands,
       name: "Commands",
     },
     {
       value: storageData.local.backupPercent,
-      color: "#fff",
+      color: colors.hatching,
       name: "Backup",
       className: s.bgHatching,
     },
     {
       value: storageData.local.freePercent,
-      color: "#e5e7eb", // gray-200
+      color: colors.free,
       name: "Free",
     },
   ]
@@ -102,23 +122,26 @@ const StorageUsage: React.FC = () => {
     <div className={cn(s.menu, "w-[240px]")}>
       <h3 className={s.menuLabel}>Storage Usage</h3>
       <div className="pl-2 mb-6 w-full">
-        <h4 className="flex items-center text-sm text-gray-600 font-medium font-mono my-2">
-          <Cloud className="inline mr-2 stroke-gray-500" size={17} />
+        <h4 className="flex items-center text-sm text-gray-600 dark:text-gray-400 font-medium font-mono my-2">
+          <Cloud
+            className="inline mr-2 stroke-gray-500 dark:stroke-gray-400"
+            size={17}
+          />
           Sync Area
         </h4>
         <MultiProgress
           elements={syncElements}
           height={8}
-          backgroundColor="#f3f4f6"
+          backgroundColor={colors.track}
           className="w-full"
         />
-        <div className="text-[11px] text-gray-600 mt-3 pl-1 grid grid-cols-2 gap-2">
+        <div className="text-[11px] text-gray-600 dark:text-gray-400 mt-3 pl-1 grid grid-cols-2 gap-2">
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-600 rounded-sm mr-1"></div>
+            <div className="w-3 h-3 bg-gray-600 dark:bg-gray-300 rounded-sm mr-1"></div>
             <span>System: {storageData.sync.systemPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-400 rounded-sm mr-1"></div>
+            <div className="w-3 h-3 bg-gray-400 dark:bg-gray-500 rounded-sm mr-1"></div>
             <span>Commands: {storageData.sync.commandsPercent}%</span>
           </div>
           <div className="flex items-center">
@@ -128,30 +151,33 @@ const StorageUsage: React.FC = () => {
             <span>Reserved: {storageData.sync.reservedPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-200 rounded-sm mr-1"></div>
+            <div className="w-3 h-3 bg-gray-200 dark:bg-gray-700 rounded-sm mr-1"></div>
             <span>Free: {storageData.sync.freePercent}%</span>
           </div>
         </div>
       </div>
 
       <div className="pl-2 w-full">
-        <h4 className="flex items-center text-sm text-gray-600 font-medium font-mono my-2">
-          <Monitor className="inline mr-2 stroke-gray-500" size={17} />
+        <h4 className="flex items-center text-sm text-gray-600 dark:text-gray-400 font-medium font-mono my-2">
+          <Monitor
+            className="inline mr-2 stroke-gray-500 dark:stroke-gray-400"
+            size={17}
+          />
           Local Area
         </h4>
         <MultiProgress
           elements={localElements}
           height={8}
-          backgroundColor="#f3f4f6"
+          backgroundColor={colors.track}
           className="w-full"
         />
-        <div className="text-[11px] text-gray-600 mt-3 pl-1 grid grid-cols-2 gap-2">
+        <div className="text-[11px] text-gray-600 dark:text-gray-400 mt-3 pl-1 grid grid-cols-2 gap-2">
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-600 rounded-sm mr-1"></div>
+            <div className="w-3 h-3 bg-gray-600 dark:bg-gray-300 rounded-sm mr-1"></div>
             <span>System: {storageData.local.systemPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-400 rounded-sm mr-1"></div>
+            <div className="w-3 h-3 bg-gray-400 dark:bg-gray-500 rounded-sm mr-1"></div>
             <span>Commands: {storageData.local.commandsPercent}%</span>
           </div>
           <div className="flex items-center">
@@ -161,7 +187,7 @@ const StorageUsage: React.FC = () => {
             <span>Backup: {storageData.local.backupPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-200 rounded-sm mr-1"></div>
+            <div className="w-3 h-3 bg-gray-200 dark:bg-gray-700 rounded-sm mr-1"></div>
             <span>Free: {storageData.local.freePercent}%</span>
           </div>
         </div>
diff --git a/packages/extension/src/components/option/TableOfContents.module.css b/packages/extension/src/components/option/TableOfContents.module.css
index e2e888fa7..602a7e69c 100644
--- a/packages/extension/src/components/option/TableOfContents.module.css
+++ b/packages/extension/src/components/option/TableOfContents.module.css
@@ -1,7 +1,7 @@
 @reference "../global.css";
 
 .container {
-  @apply text-gray-800;
+  @apply text-gray-800 dark:text-gray-200;
   margin: 0;
   padding: 0;
 }
diff --git a/packages/extension/src/components/option/TableOfContents.tsx b/packages/extension/src/components/option/TableOfContents.tsx
index 8d5be705d..bd0d8b97d 100644
--- a/packages/extension/src/components/option/TableOfContents.tsx
+++ b/packages/extension/src/components/option/TableOfContents.tsx
@@ -48,7 +48,11 @@ export const TableOfContents = (props: Props) => {
             onClick={onClick}
             data-target={p}
           >
-            <Icon name={p} size={18} className="mr-2 stroke-gray-600" />
+            <Icon
+              name={p}
+              size={18}
+              className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+            />
             <span>{labels[p]}</span>
           </button>
         </li>
diff --git a/packages/extension/src/components/option/UserSupport.tsx b/packages/extension/src/components/option/UserSupport.tsx
index 5bb705129..4a038ae17 100644
--- a/packages/extension/src/components/option/UserSupport.tsx
+++ b/packages/extension/src/components/option/UserSupport.tsx
@@ -26,10 +26,13 @@ export function UserSupport() {
         rel="noopener noreferrer"
         className={css.menuButton}
       >
-        <HelpCircle size={18} className="mr-2 stroke-gray-600" />
+        <HelpCircle
+          size={18}
+          className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+        />
         {t("usersupport_contact")}
       </a>
-      <p className="text-sm text-gray-800 mt-1 ml-2 max-w-60">
+      <p className="text-sm text-gray-800 dark:text-gray-200 mt-1 ml-2 max-w-60">
         {t("usersupport_description")}
       </p>
     </div>
diff --git a/packages/extension/src/components/option/__tests__/OptionMenuImage.test.tsx b/packages/extension/src/components/option/__tests__/OptionMenuImage.test.tsx
new file mode 100644
index 000000000..45167a861
--- /dev/null
+++ b/packages/extension/src/components/option/__tests__/OptionMenuImage.test.tsx
@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest"
+import { render } from "@testing-library/react"
+import { OptionMenuImage } from "../OptionMenuImage"
+import { themeContext, type ResolvedTheme } from "@/hooks/useTheme"
+
+const UI_ICON_URL =
+  "https://cdn3.iconfinder.com/data/icons/feather-5/24/search-1024.png"
+const FAVICON_URL = "https://www.google.com/favicon.ico"
+
+const renderWithTheme = (ui: React.ReactElement, theme: ResolvedTheme) =>
+  render(<themeContext.Provider value={theme}>{ui}</themeContext.Provider>)
+
+const isMasked = (container: HTMLElement) =>
+  container.querySelector("span[role='img']") != null
+
+describe("OptionMenuImage", () => {
+  it("OMI-01: 正常系: ライトテーマではアイコンを塗り替えない", () => {
+    const { container } = renderWithTheme(
+      <OptionMenuImage src={UI_ICON_URL} alt="icon" />,
+      "light",
+    )
+    expect(isMasked(container)).toBe(false)
+    expect(container.querySelector("img")).not.toBeNull()
+  })
+
+  it("OMI-02: 正常系: ダークテーマでは汎用アイコンを塗り替える", () => {
+    const { container } = renderWithTheme(
+      <OptionMenuImage src={UI_ICON_URL} alt="icon" />,
+      "dark",
+    )
+    expect(isMasked(container)).toBe(true)
+  })
+
+  it("OMI-03: 正常系: ダークテーマでも favicon は元の色のまま表示する", () => {
+    const { container } = renderWithTheme(
+      <OptionMenuImage src={FAVICON_URL} alt="icon" />,
+      "dark",
+    )
+    expect(isMasked(container)).toBe(false)
+  })
+
+  it("OMI-04: 正常系: ダークテーマでも塗り替え除外のアイコンは元の色のまま表示する", () => {
+    const { container } = renderWithTheme(
+      <OptionMenuImage
+        src={UI_ICON_URL}
+        alt="icon"
+        excludeFromGlobalIconColor={true}
+      />,
+      "dark",
+    )
+    expect(isMasked(container)).toBe(false)
+  })
+})
diff --git a/packages/extension/src/components/option/editor/CommandEditDialog.tsx b/packages/extension/src/components/option/editor/CommandEditDialog.tsx
index 651281de2..8bd466a22 100644
--- a/packages/extension/src/components/option/editor/CommandEditDialog.tsx
+++ b/packages/extension/src/components/option/editor/CommandEditDialog.tsx
@@ -53,7 +53,7 @@ import { CommandType } from "@/components/option/editor/CommandType"
 import { SearchUrlAssistButton } from "@/components/option/editor/SearchUrlAssistButton"
 import { SearchUrlAssistDialog } from "@/components/option/editor/SearchUrlAssistDialog"
 import { hasCommandChanged } from "@/components/option/editor/commandChangedDetector"
-import { MenuImage } from "@/components/menu/MenuImage"
+import { OptionMenuImage } from "@/components/option/OptionMenuImage"
 import { Tooltip } from "@/components/Tooltip"
 import { PageActionStep } from "@/types/schema"
 import { TEST_IDS } from "@/testIds"
@@ -593,7 +593,7 @@ const CommandEditDialogInner = ({
                         <div className="w-4/6 relative">
                           <div className="flex-1 relative">
                             {!isEmpty(getValues("iconUrl")) && (
-                              <MenuImage
+                              <OptionMenuImage
                                 className="absolute top-[0.7em] left-[0.8em] w-6 h-6 rounded-sm"
                                 src={getValues("iconUrl")}
                                 alt="Preview of image"
@@ -742,7 +742,7 @@ const CommandEditDialogInner = ({
                                       }
                                     >
                                       <Trash2
-                                        className="stroke-gray-500 group-hover:stroke-red-500"
+                                        className="stroke-gray-500 dark:stroke-gray-400 group-hover:stroke-red-500"
                                         size={16}
                                       />
                                     </button>
@@ -790,7 +790,7 @@ const CommandEditDialogInner = ({
                     "flex flex-col items-end",
                   )}
                 >
-                  <CollapsibleTrigger className="flex items-center hover:bg-gray-200 p-2 py-1.5 rounded-lg text-sm">
+                  <CollapsibleTrigger className="flex items-center hover:bg-gray-200 dark:hover:bg-gray-700 p-2 py-1.5 rounded-lg text-sm">
                     <ChevronsUpDown
                       size={18}
                       className={cn(css.icon, collapsibleCss.iconUpDown)}
diff --git a/packages/extension/src/components/option/editor/CommandListMenu.tsx b/packages/extension/src/components/option/editor/CommandListMenu.tsx
index 7c83b5fed..96d4a5148 100644
--- a/packages/extension/src/components/option/editor/CommandListMenu.tsx
+++ b/packages/extension/src/components/option/editor/CommandListMenu.tsx
@@ -24,7 +24,7 @@ export const CommandListMenu: React.FC<Props> = ({
 }) => {
   return (
     <div className="relative h-10 flex items-end justify-between pr-2">
-      <span className="text-sm bg-gray-100 px-2 py-0.5 rounded-sm font-mono tracking-tight">
+      <span className="text-sm bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded-sm font-mono tracking-tight">
         {commandCount ?? 0}
         {t("commands_desc_count")}
       </span>
@@ -33,7 +33,7 @@ export const CommandListMenu: React.FC<Props> = ({
           type="button"
           ref={addFolderButtonRef}
           variant="outline"
-          className="px-3 gap-0.5 rounded-md transition hover:bg-gray-100 hover:scale-[110%] group font-mono"
+          className="px-3 gap-0.5 rounded-md transition hover:bg-gray-100 dark:hover:bg-gray-800 hover:scale-[110%] group font-mono"
           onClick={onAddFolder}
           data-testid={TEST_IDS.addFolderButton}
         >
@@ -48,11 +48,11 @@ export const CommandListMenu: React.FC<Props> = ({
           type="button"
           ref={addCommandButtonRef}
           variant="outline"
-          className="px-3 gap-0.5 rounded-md transition hover:bg-gray-100 hover:scale-[110%] group font-mono"
+          className="px-3 gap-0.5 rounded-md transition hover:bg-gray-100 dark:hover:bg-gray-800 hover:scale-[110%] group font-mono"
           onClick={onAddCommand}
           data-testid={TEST_IDS.addCommandButton}
         >
-          <Terminal className="stroke-gray-600 group-hover:stroke-gray-700" />
+          <Terminal className="stroke-gray-600 dark:stroke-gray-400 group-hover:stroke-gray-700 dark:group-hover:stroke-gray-300" />
           {t("Command")}
         </Button>
         <Tooltip
diff --git a/packages/extension/src/components/option/editor/CommandTreeRenderer.tsx b/packages/extension/src/components/option/editor/CommandTreeRenderer.tsx
index 6f4ce7327..8d8318b7c 100644
--- a/packages/extension/src/components/option/editor/CommandTreeRenderer.tsx
+++ b/packages/extension/src/components/option/editor/CommandTreeRenderer.tsx
@@ -4,7 +4,7 @@ import { EditButton } from "@/components/option/EditButton"
 import { CopyButton } from "@/components/option/CopyButton"
 import { RemoveButton } from "@/components/option/RemoveButton"
 import { ShareButton } from "@/components/option/ShareButton"
-import { MenuImage } from "@/components/menu/MenuImage"
+import { OptionMenuImage } from "@/components/option/OptionMenuImage"
 import type { FlattenNode } from "@/services/option/commandTree"
 import type { CommandFolder } from "@/types"
 import {
@@ -51,13 +51,17 @@ export const CommandTreeRenderer: React.FC<Props> = ({
         >
           <div className="h-14 pr-2 pl-0 flex-1 flex items-center overflow-hidden">
             <div className="flex-1 flex items-center overflow-hidden pr-2">
-              <MenuImage
+              <OptionMenuImage
                 src={field.content.iconUrl}
                 svg={
                   isFolder(field.content) ? field.content.iconSvg : undefined
                 }
                 alt={field.content.title}
                 className="inline-block w-7 h-7 mr-3"
+                command={isCommand(field.content) ? field.content : undefined}
+                excludeFromGlobalIconColor={
+                  field.content.excludeFromGlobalIconColor
+                }
               />
               <div className="overflow-hidden">
                 <p className="text-lg flex flex-row">
@@ -66,7 +70,7 @@ export const CommandTreeRenderer: React.FC<Props> = ({
                   </span>
                 </p>
                 {isCommand(field.content) && (
-                  <p className="text-xs sm:text-sm text-gray-400 truncate">
+                  <p className="text-xs sm:text-sm text-gray-400 dark:text-gray-500 truncate">
                     {field.content.searchUrl}
                   </p>
                 )}
diff --git a/packages/extension/src/components/option/editor/CommandType.tsx b/packages/extension/src/components/option/editor/CommandType.tsx
index b9d99d089..a68cffb87 100644
--- a/packages/extension/src/components/option/editor/CommandType.tsx
+++ b/packages/extension/src/components/option/editor/CommandType.tsx
@@ -47,7 +47,8 @@ export const CommandType = forwardRef<HTMLButtonElement, CommandTypeProps>(
         type="button"
         className={cn(
           "group px-4 py-2 border rounded-lg transition-all duration-200 text-left",
-          !disabled && "hover:bg-gray-50 hover:border-gray-300",
+          !disabled &&
+            "hover:bg-gray-50 dark:hover:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700",
           !compact && "hover:shadow-md",
         )}
         onClick={() => onClick(type)}
@@ -63,25 +64,27 @@ export const CommandType = forwardRef<HTMLButtonElement, CommandTypeProps>(
         >
           <div
             className={cn(
-              "rounded-full bg-gray-100 transition-colors",
-              !disabled && "group-hover:bg-gray-200",
+              "rounded-full bg-gray-100 dark:bg-gray-800 transition-colors",
+              !disabled &&
+                "group-hover:bg-gray-200 dark:group-hover:bg-gray-700",
               compact ? "p-2" : "p-3",
             )}
           >
             <IconComponent
               size={compact ? 16 : 20}
               className={cn(
-                "text-gray-600 ",
-                !disabled && "group-hover:text-gray-700",
+                "text-gray-600 dark:text-gray-400 ",
+                !disabled &&
+                  "group-hover:text-gray-700 dark:group-hover:text-gray-300",
               )}
             />
           </div>
           <div className="text-center space-y-1">
-            <h4 className="text-sm font-semibold text-gray-900">
+            <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
               {t(metadata.titleKey)}
             </h4>
             {!compact && (
-              <p className="text-xs text-gray-600 line-clamp-3">
+              <p className="text-xs text-gray-600 dark:text-gray-400 line-clamp-3">
                 {t(metadata.descKey)}
               </p>
             )}
diff --git a/packages/extension/src/components/option/editor/CommandTypeSelectionDialog.tsx b/packages/extension/src/components/option/editor/CommandTypeSelectionDialog.tsx
index 6e6378efa..a82cf259e 100644
--- a/packages/extension/src/components/option/editor/CommandTypeSelectionDialog.tsx
+++ b/packages/extension/src/components/option/editor/CommandTypeSelectionDialog.tsx
@@ -69,16 +69,18 @@ export const CommandTypeSelectionDialog = ({
                 onClick={() =>
                   sendHubLinkClick(HUB_LINK_ROUTE.COMMAND_TYPE_DIALOG)
                 }
-                className="inline-block rounded-lg border px-3 pt-2 pb-1 transition hover:shadow-md hover:bg-gray-50 hover:border-gray-300"
+                className="inline-block rounded-lg border px-3 pt-2 pb-1 transition hover:shadow-md hover:bg-gray-50 dark:hover:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700"
               >
                 <span className="text-sm inline-flex items-center gap-1">
                   <Search className="inline size-4" />
                   {t("commandType_hubLink")}
                 </span>
+                {/* Transparent background with dark text, like HubBanner. */}
                 <img
                   src="/SelectionCommandHub_new.png"
                   alt="Selection Command Hub"
                   width="200"
+                  className="dark:bg-white dark:rounded-sm"
                 />
               </a>
             </div>
@@ -86,7 +88,7 @@ export const CommandTypeSelectionDialog = ({
           <div className="space-y-6 py-4">
             {COMMAND_TYPE_GROUPS.map((group) => (
               <div key={group.titleKey}>
-                <h3 className="text-lg font-semibold text-gray-800 mb-3">
+                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">
                   {t(group.titleKey)}
                 </h3>
                 <div className="grid grid-cols-3 gap-4">
diff --git a/packages/extension/src/components/option/editor/PageActionSection.tsx b/packages/extension/src/components/option/editor/PageActionSection.tsx
index d4925285c..493edb0d4 100644
--- a/packages/extension/src/components/option/editor/PageActionSection.tsx
+++ b/packages/extension/src/components/option/editor/PageActionSection.tsx
@@ -194,7 +194,8 @@ export const PageActionSection = ({
               "relative left-[50%] translate-x-[-50%] mt-4 px-3 py-1 bg-rose-600 font-mono text-base font-medium text-white inline-flex items-center justify-center gap-0.5 rounded-lg",
               !recDisabled &&
                 "group/record transition hover:opacity-80 hover:scale-[1.05]",
-              recDisabled && "opacity-50 cursor-not-allowed bg-gray-400",
+              recDisabled &&
+                "opacity-50 cursor-not-allowed bg-gray-400 dark:bg-gray-500",
             )}
             disabled={recDisabled}
             onClick={openRecorder}
@@ -227,13 +228,13 @@ export const PageActionSection = ({
             <p className="text-base font-medium font-mono flex items-center gap-1.5">
               <TypeIcon
                 type={removeStep.param.type}
-                className="stroke-gray-700"
+                className="stroke-gray-700 dark:stroke-gray-300"
                 size={20}
               />
               {capitalize(removeStep.param.type)}
             </p>
             {hasLabel && (
-              <p className="mt-2 px-3 py-2 rounded-md text-balance whitespace-pre-line text-sm max-h-80 overflow-x-hidden overflow-y-auto bg-gray-100">
+              <p className="mt-2 px-3 py-2 rounded-md text-balance whitespace-pre-line text-sm max-h-80 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-800">
                 <span>{removeStep.param.label}</span>
               </p>
             )}
diff --git a/packages/extension/src/components/option/editor/PageRuleList.tsx b/packages/extension/src/components/option/editor/PageRuleList.tsx
index a63834c84..7596a6440 100644
--- a/packages/extension/src/components/option/editor/PageRuleList.tsx
+++ b/packages/extension/src/components/option/editor/PageRuleList.tsx
@@ -89,21 +89,27 @@ const SortByArrow = ({
 }) => {
   if (sortBy === "domain") {
     return sortOrder === "asc" ? (
-      <ArrowUpAZ size={18} className="stroke-gray-500" />
+      <ArrowUpAZ size={18} className="stroke-gray-500 dark:stroke-gray-400" />
     ) : (
-      <ArrowDownZA size={18} className="stroke-gray-500" />
+      <ArrowDownZA size={18} className="stroke-gray-500 dark:stroke-gray-400" />
     )
   } else if (sortBy === "createdAt") {
     return sortOrder === "asc" ? (
-      <CalendarArrowUp size={18} className="stroke-gray-500" />
+      <CalendarArrowUp
+        size={18}
+        className="stroke-gray-500 dark:stroke-gray-400"
+      />
     ) : (
-      <CalendarArrowDown size={18} className="stroke-gray-500" />
+      <CalendarArrowDown
+        size={18}
+        className="stroke-gray-500 dark:stroke-gray-400"
+      />
     )
   }
   return sortOrder === "asc" ? (
-    <ArrowUp10 size={18} className="stroke-gray-500" />
+    <ArrowUp10 size={18} className="stroke-gray-500 dark:stroke-gray-400" />
   ) : (
-    <ArrowDown01 size={18} className="stroke-gray-500" />
+    <ArrowDown01 size={18} className="stroke-gray-500 dark:stroke-gray-400" />
   )
 }
 
@@ -262,7 +268,7 @@ export const PageRuleList = ({
             <Button
               type="button"
               variant="outline"
-              className="px-2 rounded-md transition font-mono hover:bg-gray-100 hover:mr-1 hover:scale-[110%] group"
+              className="px-2 rounded-md transition font-mono hover:bg-gray-100 dark:hover:bg-gray-800 hover:mr-1 hover:scale-[110%] group"
               onClick={() => setDialogOpen(true)}
               ref={addButtonRef}
               data-testid={TEST_IDS.pageRuleAddButton}
@@ -283,18 +289,18 @@ export const PageRuleList = ({
             <div className="relative flex-1">
               <Search
                 size={14}
-                className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"
+                className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 pointer-events-none"
               />
               <input
                 type="text"
                 value={urlPatternQuery}
                 onChange={(e) => setUrlPatternQuery(e.target.value)}
                 placeholder={t("pageRules_filter_placeholder")}
-                className="w-full pl-7 pr-3 h-8 text-sm rounded-md border border-input bg-white focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
+                className="w-full pl-7 pr-3 h-8 text-sm rounded-md border border-input bg-white dark:bg-gray-900 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
               />
             </div>
             <div className="flex items-center gap-1">
-              <span className="text-sm text-gray-600 mr-1 shrink-0">
+              <span className="text-sm text-gray-600 dark:text-gray-400 mr-1 shrink-0">
                 {t("pageRules_sortBy")}
               </span>
               <Select onValueChange={handleSortByChange} value={sortBy}>
@@ -316,7 +322,7 @@ export const PageRuleList = ({
               <button
                 type="button"
                 onClick={handleSortOrderToggle}
-                className="px-1.5 py-1 border border-input shadow-xs bg-white rounded-lg hover:bg-accent transition duration-50 leading-none"
+                className="px-1.5 py-1 border border-input shadow-xs bg-white dark:bg-gray-900 rounded-lg hover:bg-accent transition duration-50 leading-none"
               >
                 <SortByArrow sortBy={sortBy} sortOrder={sortOrder} />
               </button>
@@ -345,7 +351,7 @@ export const PageRuleList = ({
                           {field.urlPattern}
                         </span>
                       </p>
-                      <ul className="mt-1 text-gray-500 flex flex-wrap gap-x-3 gap-y-1">
+                      <ul className="mt-1 text-gray-500 dark:text-gray-400 flex flex-wrap gap-x-3 gap-y-1">
                         <li>
                           {t("popupEnabled")}: {t(`${field.popupEnabled}`)}
                         </li>
@@ -497,7 +503,7 @@ export const PageRuleDialog = ({
                     id="inheritPopupPlacement"
                     checked={popupPlacement === INHERIT}
                     onChange={(e) => handleInheritChange(e.target.checked)}
-                    className="rounded-sm border-gray-300 cursor-pointer"
+                    className="rounded-sm border-gray-300 dark:border-gray-700 cursor-pointer"
                   />
                   <label
                     htmlFor="inheritPopupPlacement"
diff --git a/packages/extension/src/components/option/editor/PopupAnimation.tsx b/packages/extension/src/components/option/editor/PopupAnimation.tsx
index 92bc025b8..64fe461d0 100644
--- a/packages/extension/src/components/option/editor/PopupAnimation.tsx
+++ b/packages/extension/src/components/option/editor/PopupAnimation.tsx
@@ -96,7 +96,7 @@ export const PopupAnimation = ({ onSubmit, defaultValues }: Props) => {
 
   return (
     <Collapsible className={cn(collapsibleCss.collapse, "flex flex-col")}>
-      <CollapsibleTrigger className="flex items-center justify-between hover:bg-gray-100 -ml-2 px-2 w-[100% + 8px] h-[40px] rounded-lg text-sm font-semibold transition">
+      <CollapsibleTrigger className="flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-800 -ml-2 px-2 w-[100% + 8px] h-[40px] rounded-lg text-sm font-semibold transition">
         <span className="mr-1">{t("Option_popupAnimation")}</span>
         <ChevronRight size={18} className={cn(collapsibleCss.iconRight)} />
       </CollapsibleTrigger>
diff --git a/packages/extension/src/components/option/editor/PopupPlacement.tsx b/packages/extension/src/components/option/editor/PopupPlacement.tsx
index ffe2d0312..56c9f4dca 100644
--- a/packages/extension/src/components/option/editor/PopupPlacement.tsx
+++ b/packages/extension/src/components/option/editor/PopupPlacement.tsx
@@ -19,7 +19,7 @@ import collapsibleCss from "@/components/ui/collapsible.module.css"
 export const PopupPlacement = (param: PopupPlacementFieldType) => {
   return (
     <Collapsible className={cn(collapsibleCss.collapse, "flex flex-col")}>
-      <CollapsibleTrigger className="flex items-center justify-between hover:bg-gray-100 -ml-2 px-2 w-[100% + 8px] h-[40px] rounded-lg text-sm font-semibold transition">
+      <CollapsibleTrigger className="flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-800 -ml-2 px-2 w-[100% + 8px] h-[40px] rounded-lg text-sm font-semibold transition">
         <span className="mr-1">{t("popupPlacement")}</span>
         <ChevronRight size={18} className={cn(collapsibleCss.iconRight)} />
       </CollapsibleTrigger>
diff --git a/packages/extension/src/components/option/editor/ShortcutList.tsx b/packages/extension/src/components/option/editor/ShortcutList.tsx
index c18913d9e..62a07654d 100644
--- a/packages/extension/src/components/option/editor/ShortcutList.tsx
+++ b/packages/extension/src/components/option/editor/ShortcutList.tsx
@@ -104,7 +104,7 @@ const createNameRender = (command: Command) => {
           {name}
           <span
             className={cn(
-              "absolute right-4 border rounded-lg px-2 py-0.5 text-[10px] text-gray-600 bg-gray-100 whitespace-nowrap",
+              "absolute right-4 border rounded-lg px-2 py-0.5 text-[10px] text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 whitespace-nowrap",
               css.tag,
             )}
           >
@@ -264,7 +264,10 @@ export function ShortcutList({ control }: ShortcutListProps) {
   return (
     <div className="space-y-3">
       <div className="flex items-center">
-        <Keyboard size={22} className="mr-2 stroke-gray-600" />
+        <Keyboard
+          size={22}
+          className="mr-2 stroke-gray-600 dark:stroke-gray-400"
+        />
         <h3 className="text-xl font-semibold">{t("shortcuts")}</h3>
       </div>
       <p className="text-base">
diff --git a/packages/extension/src/components/option/editor/UserStyleList.tsx b/packages/extension/src/components/option/editor/UserStyleList.tsx
index e13354403..46506be35 100644
--- a/packages/extension/src/components/option/editor/UserStyleList.tsx
+++ b/packages/extension/src/components/option/editor/UserStyleList.tsx
@@ -124,7 +124,7 @@ export const UserStyleList = ({ control }: UserStyleListProps) => {
             <Button
               type="button"
               variant="outline"
-              className="absolute bottom-0 left-full translate-x-[-105%] px-2 rounded-md transition font-mono hover:bg-gray-100 hover:mr-1 hover:scale-[110%] group"
+              className="absolute bottom-0 left-full translate-x-[-105%] px-2 rounded-md transition font-mono hover:bg-gray-100 dark:hover:bg-gray-800 hover:mr-1 hover:scale-[110%] group"
               onClick={() => {
                 editorRef.current = {
                   name: defaultName,
@@ -291,7 +291,7 @@ export const UserStyleDialog = ({
                               <SelectItem
                                 value={opt}
                                 key={opt}
-                                className="hover:bg-gray-100"
+                                className="hover:bg-gray-100 dark:hover:bg-gray-800"
                                 data-value={opt}
                               >
                                 {t(
diff --git a/packages/extension/src/components/option/field/IconField.tsx b/packages/extension/src/components/option/field/IconField.tsx
index acfc7794c..b8347a95a 100644
--- a/packages/extension/src/components/option/field/IconField.tsx
+++ b/packages/extension/src/components/option/field/IconField.tsx
@@ -5,6 +5,7 @@ import { FormLabel, FormMessage, FormDescription } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { Switch } from "@/components/ui/switch"
 import { MenuImage } from "@/components/menu/MenuImage"
+import { useThemeContext } from "@/hooks/useTheme"
 import { InfoTooltip } from "./InfoTooltip"
 import { useFavicon } from "@/hooks/option/useFavicon"
 import { useGlobalIconColor } from "@/hooks/option/useGlobalIconColor"
@@ -166,6 +167,8 @@ const IconUrlInput = ({
   const { isLoading } = useFavicon()
   const popup = usePopupContext()
   const { iconColor, hasIconColor } = useGlobalIconColor()
+  // Recolor in the dark theme as OptionMenuImage does.
+  const isDark = useThemeContext() === "dark"
   const hasUrl = !isEmpty(fieldUrl.value)
   const value = hasUrl ? fieldUrl.value : fieldSvg.value
 
@@ -175,7 +178,9 @@ const IconUrlInput = ({
     // The preview is rendered outside the popup, so the icon color variable
     // MenuImage paints with has to be provided here.
     <div style={{ "--sc-icon-color": iconColor } as CSSProperties}>
-      <popupContext.Provider value={{ ...popup, hasIconColor }}>
+      <popupContext.Provider
+        value={{ ...popup, hasIconColor: hasIconColor || isDark }}
+      >
         <MenuImage
           className="absolute top-[0.7em] left-[0.8em] w-6 h-6 rounded-sm"
           src={fieldUrl.value}
@@ -198,7 +203,7 @@ const IconUrlInput = ({
 }
 
 const Loading = () => (
-  <div className="cursor-wait w-full h-10 border border-input shadow-xs bg-gray-100 animate-pulse rounded-md" />
+  <div className="cursor-wait w-full h-10 border border-input shadow-xs bg-gray-100 dark:bg-gray-800 animate-pulse rounded-md" />
 )
 
 function isValidUrl(urlString: string): boolean {
diff --git a/packages/extension/src/components/option/field/InfoTooltip.tsx b/packages/extension/src/components/option/field/InfoTooltip.tsx
index 7ea5369d4..5b297a8c5 100644
--- a/packages/extension/src/components/option/field/InfoTooltip.tsx
+++ b/packages/extension/src/components/option/field/InfoTooltip.tsx
@@ -22,7 +22,7 @@ export const InfoTooltip = ({ text, testId }: InfoTooltipProps) => {
       <span
         ref={setTriggerElm}
         data-testid={testId}
-        className="cursor-pointer p-1 rounded-sm hover:bg-gray-100 transition-background"
+        className="cursor-pointer p-1 rounded-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-background"
       >
         <Info className="size-4 text-foreground/60" />
       </span>
diff --git a/packages/extension/src/components/option/field/InputField.tsx b/packages/extension/src/components/option/field/InputField.tsx
index e8a7db44c..60262a5b5 100644
--- a/packages/extension/src/components/option/field/InputField.tsx
+++ b/packages/extension/src/components/option/field/InputField.tsx
@@ -7,7 +7,7 @@ import {
   FormMessage,
   FormDescription,
 } from "@/components/ui/form"
-import { MenuImage } from "@/components/menu/MenuImage"
+import { OptionMenuImage } from "@/components/option/OptionMenuImage"
 import { InfoTooltip } from "./InfoTooltip"
 
 type InputFieldType = {
@@ -54,7 +54,7 @@ export const InputField = ({
           </div>
           <div className="w-4/6 relative">
             {hasPreview && (
-              <MenuImage
+              <OptionMenuImage
                 className="absolute top-[0.7em] left-[0.8em] w-6 h-6 rounded-sm"
                 src={previewUrl}
                 alt="Preview of image"
diff --git a/packages/extension/src/components/option/field/OpenModeToggleField.tsx b/packages/extension/src/components/option/field/OpenModeToggleField.tsx
index 7d2ae03d7..a7d8ffdfb 100644
--- a/packages/extension/src/components/option/field/OpenModeToggleField.tsx
+++ b/packages/extension/src/components/option/field/OpenModeToggleField.tsx
@@ -161,19 +161,19 @@ const OpenModeItem = ({
             disabled={disabled}
             aria-label={t(`openMode_${mode}`)}
             className={cn(
-              "relative flex-col gap-0.5 h-full w-full py-1.5 shadow-xs text-xs font-medium text-gray-600 hover:text-gray-700",
+              "relative flex-col gap-0.5 h-full w-full py-1.5 shadow-xs text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300",
               "border transition-all duration-200",
-              checked && "bg-gray-50",
+              checked && "bg-gray-50 dark:bg-gray-900",
               disabled &&
                 // Override toggleVariants' `disabled:pointer-events-none` so hover
                 // still reaches this element and the reason tooltip can show.
-                "opacity-40 cursor-not-allowed hover:text-gray-600 disabled:pointer-events-auto",
+                "opacity-40 cursor-not-allowed hover:text-gray-600 dark:hover:text-gray-400 disabled:pointer-events-auto",
             )}
           >
             {checked && (
               <Check
                 size={18}
-                className="absolute top-2 left-2 text-gray-700"
+                className="absolute top-2 left-2 text-gray-700 dark:text-gray-300"
               />
             )}
             <img
@@ -182,7 +182,9 @@ const OpenModeItem = ({
               className={cn("h-8 w-8 object-contain")}
             />
             <span
-              className={cn("text-xs font-normal leading-tight text-gray-600")}
+              className={cn(
+                "text-xs font-normal leading-tight text-gray-600 dark:text-gray-400",
+              )}
             >
               {t(`openMode_${mode}`)}
             </span>
diff --git a/packages/extension/src/components/option/field/PopupPlacementField.tsx b/packages/extension/src/components/option/field/PopupPlacementField.tsx
index 776c3ec9b..789087570 100644
--- a/packages/extension/src/components/option/field/PopupPlacementField.tsx
+++ b/packages/extension/src/components/option/field/PopupPlacementField.tsx
@@ -198,7 +198,7 @@ const SideItem = ({ side, current }: { side: SIDE; current: SIDE }) => {
           value={side}
           aria-label={t(`popupPlacement_${side}`)}
           className={cn(
-            "relative w-full h-9 shadow-xs text-xs font-mono text-gray-600",
+            "relative w-full h-9 shadow-xs text-xs font-mono text-gray-600 dark:text-gray-400",
           )}
         >
           {checked && <Check size={16} className="absolute left-5" />}
@@ -229,7 +229,7 @@ const AlignItem = ({
           aria-label={t(`popupPlacement_${align}`)}
           className={cn(
             "relative",
-            "flex-col gap-0 h-auto w-full py-1 shadow-xs text-xs font-mono text-gray-600",
+            "flex-col gap-0 h-auto w-full py-1 shadow-xs text-xs font-mono text-gray-600 dark:text-gray-400",
           )}
         >
           {checked && <Check size={16} className="absolute left-2" />}
diff --git a/packages/extension/src/components/option/field/SelectField.tsx b/packages/extension/src/components/option/field/SelectField.tsx
index cca68957c..c30af2627 100644
--- a/packages/extension/src/components/option/field/SelectField.tsx
+++ b/packages/extension/src/components/option/field/SelectField.tsx
@@ -14,7 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { MenuImage } from "@/components/menu/MenuImage"
+import { OptionMenuImage } from "@/components/option/OptionMenuImage"
 import { TEST_IDS } from "@/testIds"
 import { InfoTooltip } from "./InfoTooltip"
 
@@ -51,7 +51,7 @@ const renderOptionContent = (opt: SelectOptionType) => {
 
   return (
     <span className="flex items-center gap-1 truncate max-w-[400px]">
-      <MenuImage
+      <OptionMenuImage
         src={opt.iconUrl}
         svg={opt.iconSvg}
         alt={opt.name}
@@ -70,7 +70,7 @@ const renderOption = (opt: SelectOptionType) => {
       value={opt.value}
       key={opt.value}
       disabled={opt.disabled}
-      className={`${opt.isGroup ? "pointer-events-none" : "hover:bg-gray-100"}`}
+      className={`${opt.isGroup ? "pointer-events-none" : "hover:bg-gray-100 dark:hover:bg-gray-800"}`}
       style={{ paddingLeft }}
       data-testid={TEST_IDS.selectItem(`${opt.value}`)}
     >
diff --git a/packages/extension/src/components/option/field/UserVariablesField.tsx b/packages/extension/src/components/option/field/UserVariablesField.tsx
index aa7869483..6a1c964b0 100644
--- a/packages/extension/src/components/option/field/UserVariablesField.tsx
+++ b/packages/extension/src/components/option/field/UserVariablesField.tsx
@@ -240,7 +240,7 @@ export const UserVariablesField = ({
                 <button
                   type="button"
                   onClick={() => addVariable()}
-                  className="inline-flex h-9 items-center gap-1.5 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 px-3 font-mono text-sm text-gray-900 transition hover:border-gray-300 hover:bg-gray-100"
+                  className="inline-flex h-9 items-center gap-1.5 rounded-xl border-2 border-dashed border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 px-3 font-mono text-sm text-gray-900 dark:text-gray-100 transition hover:border-gray-300 dark:hover:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800"
                 >
                   <Plus size={14} />
                   {t("userVariable_add")}
@@ -249,7 +249,7 @@ export const UserVariablesField = ({
             </div>
 
             {isFull && (
-              <p className="text-sm text-gray-500 text-center">
+              <p className="text-sm text-gray-500 dark:text-gray-400 text-center">
                 {t("userVariable_max_reached", [`${MAX_VARIABLES}`])}
               </p>
             )}
@@ -264,7 +264,7 @@ export const UserVariablesField = ({
               description={t("userVariable_remove_inUse", [`${removeCount}`])}
               portal
             >
-              <p className="font-mono text-base text-gray-700">{`{{${removeName}}}`}</p>
+              <p className="font-mono text-base text-gray-700 dark:text-gray-300">{`{{${removeName}}}`}</p>
             </RemoveDialog>
           </div>
         </FormItem>
@@ -332,13 +332,15 @@ const VariableBadge = ({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <div className="group/variable inline-flex h-9 px-1 max-w-full items-center rounded-xl border border-gray-300 bg-white shadow-xs transition hover:border-gray-400 hover:shadow-sm">
+      <div className="group/variable inline-flex h-9 px-1 max-w-full items-center rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-xs transition hover:border-gray-400 dark:hover:border-gray-600 hover:shadow-sm">
         <DialogTrigger asChild>
           <button
             type="button"
             className={cn(
               "min-w-0 truncate py-1 pl-3 font-mono text-sm flex-1",
-              variableName ? "text-gray-700" : "text-gray-400",
+              variableName
+                ? "text-gray-700 dark:text-gray-300"
+                : "text-gray-400 dark:text-gray-500",
             )}
           >
             {variableName ? `{{${variableName}}}` : t("userVariable_unnamed")}
@@ -356,7 +358,10 @@ const VariableBadge = ({
             "group-hover/variable:basis-auto",
           )}
         >
-          <Trash2 size={14} className="stroke-gray-500 hover:stroke-red-500" />
+          <Trash2
+            size={14}
+            className="stroke-gray-500 dark:stroke-gray-400 hover:stroke-red-500"
+          />
         </button>
       </div>
 
diff --git a/packages/extension/src/components/ui/button.tsx b/packages/extension/src/components/ui/button.tsx
index 3066ef8c0..cd802b4c3 100644
--- a/packages/extension/src/components/ui/button.tsx
+++ b/packages/extension/src/components/ui/button.tsx
@@ -14,7 +14,8 @@ const buttonVariants = cva(
           "bg-destructive text-destructive-foreground hover:bg-destructive/70",
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-gray-200",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-gray-200 dark:hover:bg-gray-700",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
diff --git a/packages/extension/src/components/ui/form.tsx b/packages/extension/src/components/ui/form.tsx
index f4a764597..1762ae26a 100644
--- a/packages/extension/src/components/ui/form.tsx
+++ b/packages/extension/src/components/ui/form.tsx
@@ -140,7 +140,7 @@ const FormDescription = React.forwardRef<
       ref={ref}
       id={formDescriptionId}
       className={cn(
-        "text-[12.8px] text-gray-800 whitespace-pre-wrap",
+        "text-[12.8px] text-gray-800 dark:text-gray-200 whitespace-pre-wrap",
         className,
       )}
       {...props}
diff --git a/packages/extension/src/components/ui/input.tsx b/packages/extension/src/components/ui/input.tsx
index 2be014eb6..855cf0f9b 100644
--- a/packages/extension/src/components/ui/input.tsx
+++ b/packages/extension/src/components/ui/input.tsx
@@ -44,7 +44,7 @@ const Input = React.forwardRef<
         <input
           type={type}
           className={cn(
-            "flex h-10 w-full rounded-md border border-input bg-white px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm lg:text-base",
+            "flex h-10 w-full rounded-md border border-input bg-white dark:bg-gray-900 px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm lg:text-base",
             remainingCount != null && "pr-24",
             inputClassName,
           )}
diff --git a/packages/extension/src/components/ui/textarea.tsx b/packages/extension/src/components/ui/textarea.tsx
index 66190da59..140e8545e 100644
--- a/packages/extension/src/components/ui/textarea.tsx
+++ b/packages/extension/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[66px] w-full rounded-md border border-input bg-white px-3 py-2 text-base shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm lg:text-base",
+        "flex min-h-[66px] w-full rounded-md border border-input bg-white dark:bg-gray-900 px-3 py-2 text-base shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm lg:text-base",
         className,
       )}
       ref={ref}
diff --git a/packages/extension/src/hooks/useTheme.ts b/packages/extension/src/hooks/useTheme.ts
index 8fb4bb06e..5bfb50688 100644
--- a/packages/extension/src/hooks/useTheme.ts
+++ b/packages/extension/src/hooks/useTheme.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { createContext, useContext, useEffect, useState } from "react"
 import { THEME, THEME_ATTRIBUTE } from "@/const"
 import { useUserSettings } from "@/hooks/useSettings"
 
@@ -6,6 +6,15 @@ const QUERY = "(prefers-color-scheme: dark)"
 
 export type ResolvedTheme = "light" | "dark"
 
+/**
+ * The resolved theme, provided by the root that calls useTheme. Lets deeply
+ * nested components (e.g. every menu icon) read it without each one loading
+ * the settings.
+ */
+export const themeContext = createContext<ResolvedTheme>("light")
+
+export const useThemeContext = (): ResolvedTheme => useContext(themeContext)
+
 // Tracks the OS / browser level color scheme preference.
 export function usePrefersDarkScheme(): boolean {
   const [prefersDark, setPrefersDark] = useState(

From 855a7310ce9d9051373aaf1b8d3eb31375522e12 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Fri, 23 Oct 2026 12:01:47 +0900
Subject: [PATCH 2/2] fix(extension): address review feedback on options page
 dark mode

- Exclude recolor from OptionMenuImage props since the theme decides it
- Draw StorageUsage legend swatches from BAR_COLORS to keep one source
- Derive the dark popup icon color from the font color variable
- Remove the theme attribute on useTheme cleanup
- Note that themeContext falls back to light outside a provider
- Extract usesIconColor from Popup and cover it with tests

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../extension/src/components/Popup.module.css |  2 +-
 packages/extension/src/components/Popup.tsx   | 10 +++---
 .../src/components/option/OptionMenuImage.tsx |  3 +-
 .../src/components/option/StorageUsage.tsx    | 32 +++++++++++++++----
 .../src/hooks/__tests__/useTheme.test.ts      | 10 ++++++
 packages/extension/src/hooks/useTheme.ts      |  3 ++
 .../option/__tests__/userStyles.test.ts       | 26 ++++++++++++++-
 .../src/services/option/userStyles.ts         | 15 +++++++++
 8 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/packages/extension/src/components/Popup.module.css b/packages/extension/src/components/Popup.module.css
index 2e4735336..40d461175 100644
--- a/packages/extension/src/components/Popup.module.css
+++ b/packages/extension/src/components/Popup.module.css
@@ -41,7 +41,7 @@
       --sc-bd-color-s: 10%;
       --sc-bd-color-l: 26%;
       --sc-font-color: #e2e8f0;
-      --sc-icon-color: #e2e8f0;
+      --sc-icon-color: var(--sc-font-color);
 
       --foreground: 213 31% 91%;
       /* Hover color: lighter than the background, unlike the light theme. */
diff --git a/packages/extension/src/components/Popup.tsx b/packages/extension/src/components/Popup.tsx
index 78b22ca0b..659dda5c0 100644
--- a/packages/extension/src/components/Popup.tsx
+++ b/packages/extension/src/components/Popup.tsx
@@ -12,8 +12,8 @@ import { useThemeContext } from "@/hooks/useTheme"
 import { isMac, onHover, cn } from "@/lib/utils"
 import {
   findUserStyleValue,
-  hasUserStyle,
   hasUserColors,
+  usesIconColor,
   toCssVariables,
 } from "@/services/option/userStyles"
 import { t } from "@/services/i18n"
@@ -107,10 +107,10 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(
     // The dark theme paints recolorable icons (not favicons or brand icons)
     // in its own icon color, as the global icon color setting would: they
     // are mostly black glyphs that would vanish on the dark background.
-    const isDarkDefault = useThemeContext() === "dark" && !hasCustomColors
-    const hasIconColor =
-      hasUserStyle(userSettings?.userStyles, STYLE_VARIABLE.ICON_COLOR) ||
-      isDarkDefault
+    const hasIconColor = usesIconColor(
+      userSettings?.userStyles,
+      useThemeContext() === "dark",
+    )
 
     return (
       <popupContext.Provider
diff --git a/packages/extension/src/components/option/OptionMenuImage.tsx b/packages/extension/src/components/option/OptionMenuImage.tsx
index caf977806..937248d26 100644
--- a/packages/extension/src/components/option/OptionMenuImage.tsx
+++ b/packages/extension/src/components/option/OptionMenuImage.tsx
@@ -3,7 +3,8 @@ import { useThemeContext } from "@/hooks/useTheme"
 import { shouldPreserveIconColor } from "@/lib/favicon"
 import type { Command } from "@/types"
 
-type Props = MenuImageProps & {
+// recolor is decided by the theme, so callers cannot pass it.
+type Props = Omit<MenuImageProps, "recolor"> & {
   /** The command the icon belongs to, to keep its website's own icons. */
   command?: Command
 }
diff --git a/packages/extension/src/components/option/StorageUsage.tsx b/packages/extension/src/components/option/StorageUsage.tsx
index 13c7b123b..7b0881f5b 100644
--- a/packages/extension/src/components/option/StorageUsage.tsx
+++ b/packages/extension/src/components/option/StorageUsage.tsx
@@ -10,7 +10,7 @@ import { useThemeContext } from "@/hooks/useTheme"
 
 import s from "./Option.module.css"
 
-// Bar colors, passed inline to MultiProgress. Must match the legend's classes.
+// Colors of the bars and their legend swatches, applied inline.
 const BAR_COLORS = {
   light: {
     system: "#4b5563", // gray-600
@@ -137,11 +137,17 @@ const StorageUsage: React.FC = () => {
         />
         <div className="text-[11px] text-gray-600 dark:text-gray-400 mt-3 pl-1 grid grid-cols-2 gap-2">
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-600 dark:bg-gray-300 rounded-sm mr-1"></div>
+            <div
+              className="w-3 h-3 rounded-sm mr-1"
+              style={{ backgroundColor: colors.system }}
+            ></div>
             <span>System: {storageData.sync.systemPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-400 dark:bg-gray-500 rounded-sm mr-1"></div>
+            <div
+              className="w-3 h-3 rounded-sm mr-1"
+              style={{ backgroundColor: colors.commands }}
+            ></div>
             <span>Commands: {storageData.sync.commandsPercent}%</span>
           </div>
           <div className="flex items-center">
@@ -151,7 +157,10 @@ const StorageUsage: React.FC = () => {
             <span>Reserved: {storageData.sync.reservedPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-200 dark:bg-gray-700 rounded-sm mr-1"></div>
+            <div
+              className="w-3 h-3 rounded-sm mr-1"
+              style={{ backgroundColor: colors.free }}
+            ></div>
             <span>Free: {storageData.sync.freePercent}%</span>
           </div>
         </div>
@@ -173,11 +182,17 @@ const StorageUsage: React.FC = () => {
         />
         <div className="text-[11px] text-gray-600 dark:text-gray-400 mt-3 pl-1 grid grid-cols-2 gap-2">
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-600 dark:bg-gray-300 rounded-sm mr-1"></div>
+            <div
+              className="w-3 h-3 rounded-sm mr-1"
+              style={{ backgroundColor: colors.system }}
+            ></div>
             <span>System: {storageData.local.systemPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-400 dark:bg-gray-500 rounded-sm mr-1"></div>
+            <div
+              className="w-3 h-3 rounded-sm mr-1"
+              style={{ backgroundColor: colors.commands }}
+            ></div>
             <span>Commands: {storageData.local.commandsPercent}%</span>
           </div>
           <div className="flex items-center">
@@ -187,7 +202,10 @@ const StorageUsage: React.FC = () => {
             <span>Backup: {storageData.local.backupPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-200 dark:bg-gray-700 rounded-sm mr-1"></div>
+            <div
+              className="w-3 h-3 rounded-sm mr-1"
+              style={{ backgroundColor: colors.free }}
+            ></div>
             <span>Free: {storageData.local.freePercent}%</span>
           </div>
         </div>
diff --git a/packages/extension/src/hooks/__tests__/useTheme.test.ts b/packages/extension/src/hooks/__tests__/useTheme.test.ts
index 1d7ee27d0..4441b369d 100644
--- a/packages/extension/src/hooks/__tests__/useTheme.test.ts
+++ b/packages/extension/src/hooks/__tests__/useTheme.test.ts
@@ -90,4 +90,14 @@ describe("useTheme", () => {
     const { result } = renderHook(() => useTheme(null))
     expect(result.current).toBe("dark")
   })
+
+  it("THM-08: 正常系: アンマウント時に対象要素の属性を削除する", () => {
+    mockColorScheme(false)
+    mockUserSettings.current = { theme: THEME.DARK }
+    const { unmount } = renderHook(() => useTheme(target))
+    expect(target.getAttribute(THEME_ATTRIBUTE)).toBe("dark")
+
+    unmount()
+    expect(target.hasAttribute(THEME_ATTRIBUTE)).toBe(false)
+  })
 })
diff --git a/packages/extension/src/hooks/useTheme.ts b/packages/extension/src/hooks/useTheme.ts
index 5bfb50688..61a20ce33 100644
--- a/packages/extension/src/hooks/useTheme.ts
+++ b/packages/extension/src/hooks/useTheme.ts
@@ -10,6 +10,8 @@ export type ResolvedTheme = "light" | "dark"
  * The resolved theme, provided by the root that calls useTheme. Lets deeply
  * nested components (e.g. every menu icon) read it without each one loading
  * the settings.
+ * Outside a provider it silently falls back to "light", so every new entry
+ * point (e.g. a side panel) must provide it from its own useTheme call.
  */
 export const themeContext = createContext<ResolvedTheme>("light")
 
@@ -60,6 +62,7 @@ export function useTheme(target: Element | null | undefined): ResolvedTheme {
   useEffect(() => {
     if (target == null) return
     target.setAttribute(THEME_ATTRIBUTE, resolved)
+    return () => target.removeAttribute(THEME_ATTRIBUTE)
   }, [target, resolved])
 
   return resolved
diff --git a/packages/extension/src/services/option/__tests__/userStyles.test.ts b/packages/extension/src/services/option/__tests__/userStyles.test.ts
index 907224458..977f5cb2b 100644
--- a/packages/extension/src/services/option/__tests__/userStyles.test.ts
+++ b/packages/extension/src/services/option/__tests__/userStyles.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest"
 import { STYLE_VARIABLE } from "@/const"
-import { hasUserColors } from "../userStyles"
+import { hasUserColors, usesIconColor } from "../userStyles"
 
 describe("hasUserColors", () => {
   it("US-01: 正常系: 色のスタイルが1つでも設定されていれば true を返す", () => {
@@ -31,3 +31,27 @@ describe("hasUserColors", () => {
     ).toBe(false)
   })
 })
+
+describe("usesIconColor", () => {
+  const iconColor = { name: STYLE_VARIABLE.ICON_COLOR, value: "#123456" }
+  const bgColor = { name: STYLE_VARIABLE.BACKGROUND_COLOR, value: "#123456" }
+
+  it("US-04: 正常系: ダークテーマで色の設定がなければ true を返す", () => {
+    expect(usesIconColor(undefined, true)).toBe(true)
+    expect(usesIconColor([], true)).toBe(true)
+  })
+
+  it("US-05: 正常系: ダークテーマでもアイコン色以外の色が設定されていれば false を返す", () => {
+    expect(usesIconColor([bgColor], true)).toBe(false)
+  })
+
+  it("US-06: 正常系: アイコン色が設定されていればテーマに関係なく true を返す", () => {
+    expect(usesIconColor([iconColor], false)).toBe(true)
+    expect(usesIconColor([iconColor, bgColor], true)).toBe(true)
+  })
+
+  it("US-07: 正常系: ライトテーマでアイコン色の設定がなければ false を返す", () => {
+    expect(usesIconColor(undefined, false)).toBe(false)
+    expect(usesIconColor([bgColor], false)).toBe(false)
+  })
+})
diff --git a/packages/extension/src/services/option/userStyles.ts b/packages/extension/src/services/option/userStyles.ts
index f7da5e140..25003a586 100644
--- a/packages/extension/src/services/option/userStyles.ts
+++ b/packages/extension/src/services/option/userStyles.ts
@@ -105,6 +105,21 @@ export function hasUserColors(
   return COLOR_VARIABLES.some((name) => hasUserStyle(userStyles, name))
 }
 
+/**
+ * Checks whether the popup paints recolorable icons in an icon color: either
+ * the user's icon color, or the dark theme's own one. The dark theme's icon
+ * color applies only without custom colors, like the other dark defaults;
+ * otherwise the icons keep their own colors on the user's (or the light
+ * default) background.
+ */
+export function usesIconColor(
+  userStyles: StyleVariable[] | undefined,
+  isDark: boolean,
+): boolean {
+  if (hasUserStyle(userStyles, STYLE_VARIABLE.ICON_COLOR)) return true
+  return isDark && !hasUserColors(userStyles)
+}
+
 /** Builds the `--sc-*` custom properties the popup and the menu are styled with. */
 export function toCssVariables(
   userStyles: StyleVariable[] | undefined,