From 03f3029dc697f520a0e154c31f8188743113deb4 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Mon, 9 Feb 2026 07:19:17 -0600
Subject: feat(app): polish Open in icon treatment
Bring in the Open in button-group and transparent icon updates from #12641 while keeping locale strings unchanged. Replace CSS inversion with dedicated light/dark Zed icon assets for cleaner theme handling.
Co-authored-by: Edin <86423329+edoedac0@users.noreply.github.com>
---
packages/ui/src/assets/icons/app/cursor.svg | 2 +-
packages/ui/src/assets/icons/app/finder.png | Bin 525196 -> 279917 bytes
packages/ui/src/assets/icons/app/zed-dark.svg | 15 +++++++++++++
packages/ui/src/assets/icons/app/zed.svg | 16 ++++++++++++-
packages/ui/src/components/app-icon.css | 4 ----
packages/ui/src/components/app-icon.tsx | 31 ++++++++++++++++++++++++--
6 files changed, 60 insertions(+), 8 deletions(-)
create mode 100644 packages/ui/src/assets/icons/app/zed-dark.svg
(limited to 'packages/ui/src')
diff --git a/packages/ui/src/assets/icons/app/cursor.svg b/packages/ui/src/assets/icons/app/cursor.svg
index c2c8c1819..5aa26e8e7 100644
--- a/packages/ui/src/assets/icons/app/cursor.svg
+++ b/packages/ui/src/assets/icons/app/cursor.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/packages/ui/src/assets/icons/app/finder.png b/packages/ui/src/assets/icons/app/finder.png
index 4edf53bca..2cff579e6 100644
Binary files a/packages/ui/src/assets/icons/app/finder.png and b/packages/ui/src/assets/icons/app/finder.png differ
diff --git a/packages/ui/src/assets/icons/app/zed-dark.svg b/packages/ui/src/assets/icons/app/zed-dark.svg
new file mode 100644
index 000000000..67a99ae4a
--- /dev/null
+++ b/packages/ui/src/assets/icons/app/zed-dark.svg
@@ -0,0 +1,15 @@
+
diff --git a/packages/ui/src/assets/icons/app/zed.svg b/packages/ui/src/assets/icons/app/zed.svg
index 7c9a0e591..a845bf181 100644
--- a/packages/ui/src/assets/icons/app/zed.svg
+++ b/packages/ui/src/assets/icons/app/zed.svg
@@ -1 +1,15 @@
-
\ No newline at end of file
+
diff --git a/packages/ui/src/components/app-icon.css b/packages/ui/src/components/app-icon.css
index edcdbcceb..16cb0dcc1 100644
--- a/packages/ui/src/components/app-icon.css
+++ b/packages/ui/src/components/app-icon.css
@@ -1,9 +1,5 @@
img[data-component="app-icon"] {
display: block;
box-sizing: border-box;
- padding: 2px;
- border-radius: 0.125rem;
- background: var(--smoke-light-2);
- border: 1px solid var(--smoke-light-alpha-4);
object-fit: contain;
}
diff --git a/packages/ui/src/components/app-icon.tsx b/packages/ui/src/components/app-icon.tsx
index e3f2a0fb2..e91638b98 100644
--- a/packages/ui/src/components/app-icon.tsx
+++ b/packages/ui/src/components/app-icon.tsx
@@ -1,5 +1,5 @@
import type { Component, ComponentProps } from "solid-js"
-import { splitProps } from "solid-js"
+import { createSignal, onCleanup, onMount, splitProps } from "solid-js"
import type { IconName } from "./app-icons/types"
import androidStudio from "../assets/icons/app/android-studio.svg"
@@ -15,6 +15,7 @@ import textmate from "../assets/icons/app/textmate.png"
import vscode from "../assets/icons/app/vscode.svg"
import xcode from "../assets/icons/app/xcode.png"
import zed from "../assets/icons/app/zed.svg"
+import zedDark from "../assets/icons/app/zed-dark.svg"
import sublimetext from "../assets/icons/app/sublimetext.svg"
const icons = {
@@ -34,17 +35,43 @@ const icons = {
"sublime-text": sublimetext,
} satisfies Record
+const themed: Partial> = {
+ zed: {
+ light: zed,
+ dark: zedDark,
+ },
+}
+
+const scheme = () => {
+ if (typeof document !== "object") return "light" as const
+ if (document.documentElement.dataset.colorScheme === "dark") return "dark" as const
+ return "light" as const
+}
+
export type AppIconProps = Omit, "src"> & {
id: IconName
}
export const AppIcon: Component = (props) => {
const [local, rest] = splitProps(props, ["id", "class", "classList", "alt", "draggable"])
+ const [mode, setMode] = createSignal(scheme())
+
+ onMount(() => {
+ const sync = () => setMode(scheme())
+ const observer = new MutationObserver(sync)
+ observer.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["data-color-scheme"],
+ })
+ sync()
+ onCleanup(() => observer.disconnect())
+ })
+
return (