diff --git a/packages/console/app/src/asset/lander/opencode-logo-dark.svg b/packages/console/app/src/asset/lander/opencode-logo-dark.svg
new file mode 100644
index 00000000..154000aa
--- /dev/null
+++ b/packages/console/app/src/asset/lander/opencode-logo-dark.svg
@@ -0,0 +1,11 @@
+
diff --git a/packages/console/app/src/asset/lander/opencode-logo-light.svg b/packages/console/app/src/asset/lander/opencode-logo-light.svg
new file mode 100644
index 00000000..c1259a77
--- /dev/null
+++ b/packages/console/app/src/asset/lander/opencode-logo-light.svg
@@ -0,0 +1,11 @@
+
diff --git a/packages/console/app/src/asset/lander/opencode-wordmark-dark.svg b/packages/console/app/src/asset/lander/opencode-wordmark-dark.svg
new file mode 100644
index 00000000..822d971a
--- /dev/null
+++ b/packages/console/app/src/asset/lander/opencode-wordmark-dark.svg
@@ -0,0 +1,25 @@
+
diff --git a/packages/console/app/src/asset/lander/opencode-wordmark-light.svg b/packages/console/app/src/asset/lander/opencode-wordmark-light.svg
new file mode 100644
index 00000000..6d98af70
--- /dev/null
+++ b/packages/console/app/src/asset/lander/opencode-wordmark-light.svg
@@ -0,0 +1,25 @@
+
diff --git a/packages/console/app/src/component/header.tsx b/packages/console/app/src/component/header.tsx
index 05195f20..e089e40e 100644
--- a/packages/console/app/src/component/header.tsx
+++ b/packages/console/app/src/component/header.tsx
@@ -6,6 +6,13 @@ import copyWordmarkLight from "../asset/lander/wordmark-light.svg"
import copyWordmarkDark from "../asset/lander/wordmark-dark.svg"
import copyBrandAssetsLight from "../asset/lander/brand-assets-light.svg"
import copyBrandAssetsDark from "../asset/lander/brand-assets-dark.svg"
+
+// SVG files for copying (separate from button icons)
+// Replace these with your actual SVG files for copying
+import copyLogoSvgLight from "../asset/lander/opencode-logo-light.svg"
+import copyLogoSvgDark from "../asset/lander/opencode-logo-dark.svg"
+import copyWordmarkSvgLight from "../asset/lander/opencode-wordmark-light.svg"
+import copyWordmarkSvgDark from "../asset/lander/opencode-wordmark-dark.svg"
import { A, createAsync } from "@solidjs/router"
import { createMemo, Match, Show, Switch } from "solid-js"
import { createStore } from "solid-js/store"
@@ -13,6 +20,19 @@ import { github } from "~/lib/github"
import { createEffect, onCleanup } from "solid-js"
import "./header-context-menu.css"
+const isDarkMode = () => window.matchMedia("(prefers-color-scheme: dark)").matches
+
+const fetchSvgContent = async (svgPath: string): Promise => {
+ try {
+ const response = await fetch(svgPath)
+ const svgText = await response.text()
+ return svgText
+ } catch (err) {
+ console.error("Failed to fetch SVG content:", err)
+ throw err
+ }
+}
+
export function Header(props: { zen?: boolean }) {
const githubData = createAsync(() => github())
const starCount = createMemo(() =>
@@ -66,32 +86,9 @@ export function Header(props: { zen?: boolean }) {
const copyWordmarkToClipboard = async () => {
try {
- const wordmarkSvg = `
-`
+ const isDark = isDarkMode()
+ const wordmarkSvgPath = isDark ? copyWordmarkSvgDark : copyWordmarkSvgLight
+ const wordmarkSvg = await fetchSvgContent(wordmarkSvgPath)
await navigator.clipboard.writeText(wordmarkSvg)
} catch (err) {
console.error("Failed to copy wordmark to clipboard:", err)
@@ -100,11 +97,9 @@ export function Header(props: { zen?: boolean }) {
const copyLogoToClipboard = async () => {
try {
- const logoSvg = `
-`
+ const isDark = isDarkMode()
+ const logoSvgPath = isDark ? copyLogoSvgDark : copyLogoSvgLight
+ const logoSvg = await fetchSvgContent(logoSvgPath)
await navigator.clipboard.writeText(logoSvg)
} catch (err) {
console.error("Failed to copy logo to clipboard:", err)