ujiro99 · Oct 23, 2026 · Oct 22, 2026 · Oct 23, 2026 · Oct 23, 2026
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -29,15 +29,15 @@ 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}
         data-testid={dataTestId}
       >
         <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
@@ -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;
 }