diff --git a/src/components/IconPicker.tsx b/src/components/IconPicker.tsx
index 360ac419851..db8a310f367 100644
--- a/src/components/IconPicker.tsx
+++ b/src/components/IconPicker.tsx
@@ -241,30 +241,28 @@ export const IconPicker: React.FC<IconPickerProps> = ({
           {t("iconPicker.myIcons")}
         </h3>
         <div className={GRID_CLASS}>
-          <HoverTip content={t("iconPicker.uploadHint")}>
-            <button
-              type="button"
-              disabled={uploading}
-              onClick={() => fileInputRef.current?.click()}
-              className={cn(
-                "flex w-full flex-col items-center gap-1 p-3 rounded-lg",
-                "border-2 border-dashed border-border text-fg-2 transition-colors",
-                "hover:border-primary/50 hover:bg-subtle hover:text-fg-1",
-                "disabled:cursor-wait disabled:opacity-60",
+          <button
+            type="button"
+            disabled={uploading}
+            onClick={() => fileInputRef.current?.click()}
+            className={cn(
+              "flex w-full flex-col items-center gap-1 p-3 rounded-lg",
+              "border-2 border-dashed border-border text-fg-2 transition-colors",
+              "hover:border-primary/50 hover:bg-subtle hover:text-fg-1",
+              "disabled:cursor-wait disabled:opacity-60",
+            )}
+          >
+            <span className="flex h-8 w-8 items-center justify-center">
+              {uploading ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
+              ) : (
+                <Plus className="h-5 w-5" />
               )}
-            >
-              <span className="flex h-8 w-8 items-center justify-center">
-                {uploading ? (
-                  <Loader2 className="h-5 w-5 animate-spin" />
-                ) : (
-                  <Plus className="h-5 w-5" />
-                )}
-              </span>
-              <span className="text-xs truncate w-full text-center">
-                {t("iconPicker.upload")}
-              </span>
-            </button>
-          </HoverTip>
+            </span>
+            <span className="text-xs truncate w-full text-center">
+              {t("iconPicker.upload")}
+            </span>
+          </button>
           <input
             ref={fileInputRef}
             type="file"
@@ -335,11 +333,12 @@ export const IconPicker: React.FC<IconPickerProps> = ({
             </div>
           ))}
         </div>
-        {library.length === 0 && !currentUnsaved && (
-          <p className="mt-2 text-xs text-fg-3">
-            {t("iconPicker.myIconsEmpty")}
-          </p>
-        )}
+        <p className="mt-2 text-xs text-fg-3">
+          {library.length === 0 && !currentUnsaved
+            ? `${t("iconPicker.myIconsEmpty")} `
+            : ""}
+          {t("iconPicker.uploadHint")}
+        </p>
       </section>
 
       <section>
diff --git a/src/components/ProviderIcon.tsx b/src/components/ProviderIcon.tsx
index 60ba3b2ca4c..faa2858a7cb 100644
--- a/src/components/ProviderIcon.tsx
+++ b/src/components/ProviderIcon.tsx
@@ -5,6 +5,9 @@ import {
   getIconMetadata,
   getIconUrl,
   isUrlIcon,
+  isDarkInk,
+  adaptSvgToTheme,
+  isTileIcon,
 } from "@/icons/extracted";
 import { cn } from "@/lib/utils";
 import { isCustomIcon } from "@/utils/customIcon";
@@ -29,11 +32,14 @@ export const ProviderIcon: React.FC<ProviderIconProps> = ({
   fallbackClassName,
 }) => {
   // 获取内联 SVG 字符串
-  const iconSvg = useMemo(() => {
+  const { svg: iconSvg, adapted } = useMemo(() => {
     if (icon && !isCustomIcon(icon) && !isUrlIcon(icon) && hasIcon(icon)) {
-      return getIcon(icon);
+      const raw = getIcon(icon);
+      // tile 图标自带底色，里面的深色是底，不能换成文字色
+      const themed = isTileIcon(icon) ? raw : adaptSvgToTheme(raw);
+      return { svg: themed, adapted: themed !== raw };
     }
-    return "";
+    return { svg: "", adapted: false };
   }, [icon]);
 
   // 获取图标 URL：内置的大图（URL_ICONS 列表中的 SVG / 光栅图片），或用户上传的 PNG。
@@ -62,19 +68,23 @@ export const ProviderIcon: React.FC<ProviderIconProps> = ({
     };
   }, [size]);
 
-  // 获取有效颜色：优先使用传入的有效 color，否则从元数据获取 defaultColor
+  // 获取有效颜色：优先使用传入的有效 color，否则从元数据获取 defaultColor。
+  // 近黑色（#000 / #111 这类）的颜色不写死，交给外层文字色，
+  // 否则深色模式下是黑底上的黑图标。已经把近黑笔画换成 currentColor 的图标
+  // 也不能再套品牌色，否则眼睛、嘴这些细节会和脸同色
   const effectiveColor = useMemo(() => {
+    if (adapted) return undefined;
+    let resolved: string | undefined;
     if (color && typeof color === "string" && color.trim() !== "") {
-      return color;
-    }
-    if (icon) {
+      resolved = color;
+    } else if (icon) {
       const metadata = getIconMetadata(icon);
       if (metadata?.defaultColor && metadata.defaultColor !== "currentColor") {
-        return metadata.defaultColor;
+        resolved = metadata.defaultColor;
       }
     }
-    return undefined;
-  }, [color, icon]);
+    return isDarkInk(resolved) ? undefined : resolved;
+  }, [color, icon, adapted]);
 
   // 内联 SVG 渲染（支持 CSS currentColor 着色）
   if (iconSvg) {
diff --git a/src/components/ProviderIconBox.tsx b/src/components/ProviderIconBox.tsx
index 34ba2567650..f30b90f9374 100644
--- a/src/components/ProviderIconBox.tsx
+++ b/src/components/ProviderIconBox.tsx
@@ -1,5 +1,5 @@
 import { ProviderIcon } from "@/components/ProviderIcon";
-import { isTileIcon } from "@/icons/extracted";
+import { isTileIcon, needsLightBacking } from "@/icons/extracted";
 import { cn } from "@/lib/utils";
 import { isCustomIcon } from "@/utils/customIcon";
 
@@ -31,6 +31,8 @@ export function ProviderIconBox({
 }: ProviderIconBoxProps) {
   // 用户上传的图标在编码时已经按 tile / 透明 logo 留好了白，统一铺满整框
   const tile = isCustomIcon(icon) || isTileIcon(icon);
+  // 透明底的位图 / 上传图标、适配后仍带近黑笔画的图标：深色下垫浅色衬底，否则看不见
+  const lightBacking = isCustomIcon(icon) || needsLightBacking(icon);
   return (
     <span
       aria-hidden="true"
@@ -41,6 +43,7 @@ export function ProviderIconBox({
             "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/10"
           : "border border-border",
         className,
+        lightBacking && "dark:bg-white dark:text-neutral-900",
       )}
     >
       <ProviderIcon
diff --git a/src/components/common/FullScreenPanel.tsx b/src/components/common/FullScreenPanel.tsx
index 4f498a16780..e3f95c725a7 100644
--- a/src/components/common/FullScreenPanel.tsx
+++ b/src/components/common/FullScreenPanel.tsx
@@ -39,6 +39,9 @@ interface FullScreenPanelProps {
 /** 外壳里的内容区（App 的 <main id="content-area">）：二级页只盖住它，侧栏留着 */
 const CONTENT_AREA_ID = "content-area";
 
+/** 已打开的面板，后开的在后；Esc 只交给最上面那个（嵌套面板里不能连带关掉外层） */
+const openPanelStack: symbol[] = [];
+
 let bodyScrollLockCount = 0;
 let bodyOverflowBeforeFirstLock: string | null = null;
 
@@ -93,6 +96,18 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
     return unlockBodyScroll;
   }, [isOpen]);
 
+  const panelIdRef = React.useRef<symbol>(Symbol("full-screen-panel"));
+
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const id = panelIdRef.current;
+    openPanelStack.push(id);
+    return () => {
+      const index = openPanelStack.lastIndexOf(id);
+      if (index !== -1) openPanelStack.splice(index, 1);
+    };
+  }, [isOpen]);
+
   // ESC 键关闭面板
   const onCloseRef = React.useRef(onClose);
 
@@ -105,6 +120,10 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
 
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
+        // 上面还有别的面板：交给它
+        if (openPanelStack[openPanelStack.length - 1] !== panelIdRef.current) {
+          return;
+        }
         // 子组件（例如 Radix 的 Select/Dialog/Dropdown）如果已经消费了 ESC，就不要再关闭整个面板
         if (event.defaultPrevented) {
           return;
diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index 162441cb69d..30eed757d88 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -324,12 +324,12 @@ export function ProviderCard({
           name={provider.name}
           color={provider.iconColor}
           className={cn(
-            // 底色固定为白，图标颜色也要固定：单色（currentColor）图标和首字母
-            // fallback 不能继承深色模式下的浅色文字
-            "bg-white text-neutral-900",
+            // 不再垫白底：单色 / 近黑笔画的图标跟随文字色（ProviderIcon 里换成 currentColor），
+            // 自带底色的 tile 图标铺满整框
+            "bg-transparent text-fg-1",
             presentation.dim && "opacity-60",
           )}
-          fallbackClassName="bg-transparent text-neutral-600"
+          fallbackClassName="bg-transparent text-fg-2"
         />
 
         <div className="min-w-0 flex-1">
diff --git a/src/components/providers/forms/BasicFormFields.tsx b/src/components/providers/forms/BasicFormFields.tsx
index 10f574228f8..ab211139980 100644
--- a/src/components/providers/forms/BasicFormFields.tsx
+++ b/src/components/providers/forms/BasicFormFields.tsx
@@ -9,17 +9,10 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { ImeSafeInput } from "@/components/ui/ime-safe-input";
-import { Button } from "@/components/ui/button";
 import { HoverTip } from "@/components/ui/hover-tip";
-import { ArrowLeft } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-  DialogClose,
-} from "@/components/ui/dialog";
 import { ProviderIconBox } from "@/components/ProviderIconBox";
 import { IconPicker } from "@/components/IconPicker";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import { getIconMetadata } from "@/icons/extracted/metadata";
 import type { UseFormReturn } from "react-hook-form";
 import type { ProviderFormData } from "@/lib/schemas/provider";
@@ -59,7 +52,7 @@ export function BasicFormFields({
   };
 
   const iconButton = (
-    <Dialog open={iconDialogOpen} onOpenChange={setIconDialogOpen}>
+    <>
       <HoverTip
         content={
           currentIcon
@@ -71,60 +64,34 @@ export function BasicFormFields({
               })
         }
       >
-        <DialogTrigger asChild>
-          <button
-            type="button"
-            aria-label={t("providerIcon.change", { defaultValue: "更换图标" })}
-            className="group shrink-0 rounded-[8px]"
-          >
-            <ProviderIconBox
-              icon={currentIcon}
-              name={providerName}
-              color={effectiveIconColor}
-              className="bg-surface transition-colors group-hover:bg-subtle"
-            />
-          </button>
-        </DialogTrigger>
+        <button
+          type="button"
+          aria-label={t("providerIcon.change", { defaultValue: "更换图标" })}
+          className="group shrink-0 rounded-[8px]"
+          onClick={() => setIconDialogOpen(true)}
+        >
+          <ProviderIconBox
+            icon={currentIcon}
+            name={providerName}
+            color={effectiveIconColor}
+            className="bg-surface transition-colors group-hover:bg-subtle"
+          />
+        </button>
       </HoverTip>
-      <DialogContent
-        variant="fullscreen"
-        zIndex="top"
-        overlayClassName="bg-[hsl(var(--background))] backdrop-blur-0"
-        className="p-0 sm:rounded-none"
+      {/* 只盖住右侧内容区，侧栏和窗口按钮保持原位，和其他二级页一致 */}
+      <FullScreenPanel
+        isOpen={iconDialogOpen}
+        title={t("providerIcon.selectIcon", { defaultValue: "选择图标" })}
+        onClose={() => setIconDialogOpen(false)}
       >
-        <div className="flex h-full flex-col">
-          <div className="flex-shrink-0 py-4 border-b border-border bg-subtle">
-            <div className="px-6 flex items-center gap-4">
-              <DialogClose asChild>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="icon"
-                  aria-label={t("common.back")}
-                >
-                  <ArrowLeft className="h-4 w-4" />
-                </Button>
-              </DialogClose>
-              <p className="text-lg font-semibold leading-tight">
-                {t("providerIcon.selectIcon", {
-                  defaultValue: "选择图标",
-                })}
-              </p>
-            </div>
-          </div>
-          <div className="flex-1 overflow-y-auto">
-            <div className="space-y-2 px-6 py-6 w-full">
-              <IconPicker
-                value={currentIcon}
-                onValueChange={handleIconSelect}
-                color={effectiveIconColor}
-                defaultName={form.watch("name") ?? ""}
-              />
-            </div>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
+        <IconPicker
+          value={currentIcon}
+          onValueChange={handleIconSelect}
+          color={effectiveIconColor}
+          defaultName={form.watch("name") ?? ""}
+        />
+      </FullScreenPanel>
+    </>
   );
 
   return (
diff --git a/src/icons/extracted/index.ts b/src/icons/extracted/index.ts
index 0c5083051d4..1c597b03a5e 100644
--- a/src/icons/extracted/index.ts
+++ b/src/icons/extracted/index.ts
@@ -1,6 +1,7 @@
 // Hand-curated icon index with optimized SVG content and custom name mappings.
 // Update entries deliberately; automatic regeneration is intentionally unsupported.
 
+import { getIconMetadata, isTileIcon } from "./metadata";
 import _88api from "./88api.png";
 import _a6api from "./a6-icon.png";
 import _apikeyfun from "./apikeyfun.png";
@@ -213,8 +214,75 @@ export function hasIcon(name: string): boolean {
   return key in icons || key in iconUrls;
 }
 
+function hexChannels(hex: string): [number, number, number] | null {
+  let h = hex.slice(1);
+  if (h.length === 3 || h.length === 4) {
+    h = [...h.slice(0, 3)].map((c) => c + c).join("");
+  }
+  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/.test(h)) return null;
+  const n = parseInt(h.slice(0, 6), 16);
+  return [n >> 16, (n >> 8) & 255, n & 255];
+}
+
+/** 近黑色：三个通道都很低（深红、深蓝这类有色的深色不算）。 */
+export function isDarkInk(color?: string): boolean {
+  const c = color?.trim().toLowerCase();
+  if (!c) return false;
+  if (c === "black") return true;
+  if (!c.startsWith("#")) return false;
+  const rgb = hexChannels(c);
+  return rgb !== null && Math.max(...rgb) <= 0x50;
+}
+
+// <defs> / <clipPath> / <mask> 里的颜色是遮罩语义，不是画出来的墨色
+const MASK_BLOCK = /(<(defs|clipPath|mask)\b[\s\S]*?<\/\2>)/g;
+const PAINT_ATTR = /\b(fill|stroke)="([^"]+)"/g;
+
+function paintedColors(svg: string): string[] {
+  return [...svg.replace(MASK_BLOCK, "").matchAll(PAINT_ATTR)].map((m) => m[2]);
+}
+
+const adaptedSvgCache = new Map<string, string>();
+
+/**
+ * 深色模式适配：只处理单墨色图标——画出来的颜色全是近黑色时，换成 currentColor 跟随文字色。
+ * 多色图标里的近黑细节（Hugging Face 的眼睛、LionCC 的线稿）画在彩色形状上，
+ * 换成浅色文字色反而糊掉，保持原样。遮罩里的颜色不参与判断。
+ */
+export function adaptSvgToTheme(svg: string): string {
+  const cached = adaptedSvgCache.get(svg);
+  if (cached !== undefined) return cached;
+  const paints = paintedColors(svg).filter((c) => c.trim() !== "none");
+  const singleInk = paints.length > 0 && paints.every(isDarkInk);
+  const result = !singleInk
+    ? svg
+    : svg
+        .split(MASK_BLOCK)
+        // split 带捕获组：[正文, 整块, 标签名, 正文, ...]，只改正文
+        .map((part, i) =>
+          i % 3 === 0
+            ? part.replace(PAINT_ATTR, (whole, attr, color) =>
+                isDarkInk(color) ? `${attr}="currentColor"` : whole,
+              )
+            : part,
+        )
+        .join("");
+  adaptedSvgCache.set(svg, result);
+  return result;
+}
+
+/**
+ * 深色卡片上需要浅色衬底的图标：非 tile 的位图 / 外链图标（可能是透明底深色墨）。
+ * 内联 SVG 要么跟随文字色，要么自带彩色形状，不需要。
+ */
+export function needsLightBacking(name?: string): boolean {
+  if (!name) return false;
+  const key = name.toLowerCase();
+  return key in iconUrls && !isTileIcon(key);
+}
+
 export function isUrlIcon(name: string): boolean {
   return name.toLowerCase() in iconUrls;
 }
 
-export { getIconMetadata, isTileIcon } from "./metadata";
+export { getIconMetadata, isTileIcon };
diff --git a/tests/components/FullScreenPanel.escNested.test.tsx b/tests/components/FullScreenPanel.escNested.test.tsx
new file mode 100644
index 00000000000..65e877b179d
--- /dev/null
+++ b/tests/components/FullScreenPanel.escNested.test.tsx
@@ -0,0 +1,22 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
+
+describe("FullScreenPanel nesting", () => {
+  it("lets Esc close only the panel opened last", () => {
+    const outer = vi.fn();
+    const inner = vi.fn();
+    const ui = (innerOpen: boolean) => (
+      <FullScreenPanel isOpen title="outer" onClose={outer}>
+        <FullScreenPanel isOpen={innerOpen} title="inner" onClose={inner}>
+          x
+        </FullScreenPanel>
+      </FullScreenPanel>
+    );
+    const { rerender } = render(ui(false));
+    rerender(ui(true));
+    fireEvent.keyDown(window, { key: "Escape" });
+    expect(inner).toHaveBeenCalledTimes(1);
+    expect(outer).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/icons/themeAdapt.test.ts b/tests/icons/themeAdapt.test.ts
new file mode 100644
index 00000000000..4103a0d64e9
--- /dev/null
+++ b/tests/icons/themeAdapt.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import {
+  adaptSvgToTheme,
+  getIcon,
+  isDarkInk,
+  needsLightBacking,
+} from "@/icons/extracted";
+
+describe("isDarkInk", () => {
+  it("treats only near-black as dark, not saturated dark colors", () => {
+    expect(isDarkInk("#000000")).toBe(true);
+    expect(isDarkInk("#111")).toBe(true);
+    expect(isDarkInk("#3A3B45")).toBe(true);
+    expect(isDarkInk("#C7000B")).toBe(false);
+    expect(isDarkInk("#FF0000")).toBe(false);
+    expect(isDarkInk("#FFD21E")).toBe(false);
+  });
+});
+
+describe("adaptSvgToTheme", () => {
+  it("keeps near-black details on multi-color icons", () => {
+    const hf = getIcon("huggingface");
+    expect(adaptSvgToTheme(hf)).toBe(hf);
+    const lion = getIcon("lioncc");
+    expect(adaptSvgToTheme(lion)).toBe(lion);
+  });
+
+  it("recolors single-ink near-black icons", () => {
+    const svg = '<svg><path fill="#000000"/><path stroke="#111"/></svg>';
+    expect(adaptSvgToTheme(svg)).toBe(
+      '<svg><path fill="currentColor"/><path stroke="currentColor"/></svg>',
+    );
+  });
+
+  it("leaves saturated reds alone", () => {
+    expect(adaptSvgToTheme(getIcon("huawei"))).toContain("#C7000B");
+  });
+
+  it("ignores paints inside masks and clip paths", () => {
+    const svg =
+      '<svg><defs><clipPath id="a"><rect fill="white"/></clipPath></defs><path fill="#000000" d="M0 0"/></svg>';
+    const out = adaptSvgToTheme(svg);
+    expect(out).toContain('<rect fill="white"/>');
+    expect(out).toContain('<path fill="currentColor"');
+  });
+
+  it("leaves icons that also paint near-white untouched", () => {
+    const svg = '<svg><path fill="#111111"/><path fill="#ffffff"/></svg>';
+    expect(adaptSvgToTheme(svg)).toBe(svg);
+  });
+});
+
+describe("needsLightBacking", () => {
+  it("is false for tile and themable icons, true for raster icons", () => {
+    expect(needsLightBacking("sssaicode")).toBe(false);
+    expect(needsLightBacking("huggingface")).toBe(false);
+    expect(needsLightBacking("openai")).toBe(false);
+    expect(needsLightBacking("atlascloud")).toBe(true);
+  });
+});