diff --git a/packages/extension/src/components/App.tsx b/packages/extension/src/components/App.tsx
index a86907b2..1f2803e0 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 43c8932a..05ae2b32 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 59724e2b..40d46117 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: var(--sc-font-color);
 
       --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 516d9e63..659dda5c 100644
--- a/packages/extension/src/components/Popup.tsx
+++ b/packages/extension/src/components/Popup.tsx
@@ -8,11 +8,12 @@ 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,
-  hasUserStyle,
   hasUserColors,
+  usesIconColor,
   toCssVariables,
 } from "@/services/option/userStyles"
 import { t } from "@/services/i18n"
@@ -102,9 +103,13 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(
       setDetectSelectionEnabled(!hover)
     }
 
-    const hasIconColor = hasUserStyle(
+    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 hasIconColor = usesIconColor(
       userSettings?.userStyles,
-      STYLE_VARIABLE.ICON_COLOR,
+      useThemeContext() === "dark",
     )
 
     return (
@@ -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 1f4059e7..191c9f1f 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 b8d4c600..32556033 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 55b05559..5a081138 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 f6e703e1..8aa22fed 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 4856eba4..8363023b 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 788ae063..835fbfb9 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 8e89f5fc..0fc2bb7e 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 46e8a6e5..27df4d6f 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 e7c630ea..28fb7a05 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 cf19ce98..da2a9a57 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 a2637b76..195cb7e0 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 b893d6e0..24287bbc 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 1eb478a9..cbf11cea 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 14610f90..bf0b4a95 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 44a925c7..583f73da 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 00000000..937248d2
--- /dev/null
+++ b/packages/extension/src/components/option/OptionMenuImage.tsx
@@ -0,0 +1,30 @@
+import { MenuImage, type MenuImageProps } from "@/components/menu/MenuImage"
+import { useThemeContext } from "@/hooks/useTheme"
+import { shouldPreserveIconColor } from "@/lib/favicon"
+import type { Command } from "@/types"
+
+// 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
+}
+
+/**
+ * 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 797b72a2..53486244 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 9fe931f9..f007900d 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 64860dda..fa0fe9ed 100644
--- a/packages/extension/src/components/option/SettingForm.tsx
+++ b/packages/extension/src/components/option/SettingForm.tsx
@@ -430,13 +430,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>
@@ -518,7 +521,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>
@@ -533,7 +539,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>
@@ -646,7 +655,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>
@@ -682,7 +694,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>
@@ -694,7 +709,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 65f9cecd..6b59cfe7 100644
--- a/packages/extension/src/components/option/ShareButton.tsx
+++ b/packages/extension/src/components/option/ShareButton.tsx
@@ -114,7 +114,7 @@ export const ShareButton = ({
   }
 
   const iconClassName = cn(
-    "stroke-gray-500",
+    "stroke-gray-500 dark:stroke-gray-400",
     shareState === "modified"
       ? "group-hover/share-btn:stroke-orange-600"
       : "group-hover/share-btn:stroke-green-600",
@@ -142,7 +142,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",
           shareState === "modified" && "bg-orange-50 hover:bg-orange-100",
         )}
diff --git a/packages/extension/src/components/option/SortableItem.tsx b/packages/extension/src/components/option/SortableItem.tsx
index 3e4f42e4..f5ee1465 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 b6bc99ec..7b0881f5 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"
 
+// Colors of the bars and their legend swatches, applied inline.
+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,32 @@ 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 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 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">
@@ -128,30 +157,42 @@ 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 rounded-sm mr-1"
+              style={{ backgroundColor: colors.free }}
+            ></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 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 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">
@@ -161,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 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/components/option/TableOfContents.module.css b/packages/extension/src/components/option/TableOfContents.module.css
index e2e888fa..602a7e69 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 8d5be705..bd0d8b97 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 5bb70512..4a038ae1 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 00000000..45167a86
--- /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 b8536c5b..3e499346 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"
@@ -595,7 +595,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"
@@ -744,7 +744,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>
@@ -792,7 +792,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 7c83b5fe..96d4a514 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 0fa81c8e..26163bbd 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 {
@@ -52,13 +52,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">
@@ -67,7 +71,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 b9d99d08..a68cffb8 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 6e6378ef..a82cf259 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 d4925285..493edb0d 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 9c0dfb8e..4bce73b0 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" />
   )
 }
 
@@ -263,7 +269,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}
@@ -284,18 +290,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}>
@@ -317,7 +323,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>
@@ -346,7 +352,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>
@@ -498,7 +504,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 92bc025b..64fe461d 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 ffe2d031..56c9f4dc 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 c18913d9..62a07654 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 e1335440..46506be3 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 acfc7794..b8347a95 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 7ea5369d..5b297a8c 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 e8a7db44..60262a5b 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 7d2ae03d..a7d8ffdf 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 776c3ec9..78908757 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 cca68957..c30af262 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 aa786948..6a1c964b 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 3066ef8c..cd802b4c 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 f4a76459..1762ae26 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 2be014eb..855cf0f9 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 66190da5..140e8545 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/__tests__/useTheme.test.ts b/packages/extension/src/hooks/__tests__/useTheme.test.ts
index 1d7ee27d..4441b369 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 8fb4bb06..61a20ce3 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,17 @@ 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.
+ * 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")
+
+export const useThemeContext = (): ResolvedTheme => useContext(themeContext)
+
 // Tracks the OS / browser level color scheme preference.
 export function usePrefersDarkScheme(): boolean {
   const [prefersDark, setPrefersDark] = useState(
@@ -51,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 90722445..977f5cb2 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 f7da5e14..25003a58 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,