add themed ClickHouse fixture logo

apps/studio/components/interfaces/Database/Replication/DestinationLogo.tsx

@@ -1,16 +1,18 @@
+import { useTheme } from 'next-themes'
 import { cn, StatusIcon } from 'ui'
 
 import { DestinationIcon } from './DestinationIcon'
 import type { DestinationType } from './DestinationPanel/DestinationPanel.types'
-import { BASE_PATH } from '@/lib/constants'
+import { BRAND_ICONS, resolveThemedIconSrc, type ThemedIconSrc } from '@/lib/brand-icons'
+import { resolveThemeOverrideMode } from '@/lib/theme-overrides'
 
 // Destinations with a brand mark. Anything absent falls back to the line icon in the same frame,
 // so a new destination type never renders an empty square.
-const BRAND_MARK_BY_TYPE: Partial<Record<DestinationType, string>> = {
-  BigQuery: `${BASE_PATH}/img/icons/bigquery-icon.svg`,
-  ClickHouse: `${BASE_PATH}/img/icons/clickhouse-icon.svg`,
-  DuckLake: `${BASE_PATH}/img/icons/ducklake-icon.svg`,
-  Snowflake: `${BASE_PATH}/img/icons/snowflake-icon.svg`,
+const BRAND_MARK_BY_TYPE: Partial<Record<DestinationType, ThemedIconSrc>> = {
+  BigQuery: BRAND_ICONS.bigquery,
+  ClickHouse: BRAND_ICONS.clickhouse,
+  DuckLake: BRAND_ICONS.ducklake,
+  Snowflake: BRAND_ICONS.snowflake,
 }
 
 const SIZE_CLASS_NAME = {
@@ -36,16 +38,19 @@ export const DestinationLogo = ({
   className,
   hasErrors = false,
 }: DestinationLogoProps) => {
+  const { resolvedTheme } = useTheme()
+  const isDark = resolveThemeOverrideMode(resolvedTheme) === 'dark'
   const sizing = SIZE_CLASS_NAME[size]
   const brandMark = BRAND_MARK_BY_TYPE[type]
+  const brandMarkSrc = brandMark === undefined ? undefined : resolveThemedIconSrc(brandMark, isDark)
 
   return (
     <span className={cn('relative inline-flex shrink-0', className)}>
       <span className={cn('flex items-center justify-center border bg-surface-100', sizing.frame)}>
-        {brandMark === undefined ? (
+        {brandMarkSrc === undefined ? (
           <DestinationIcon type={type} size={sizing.icon} className="text-foreground-light" />
         ) : (
-          <img src={brandMark} alt="" aria-hidden className={sizing.mark} />
+          <img src={brandMarkSrc} alt="" aria-hidden className={sizing.mark} />
         )}
       </span>
       {hasErrors && (

apps/studio/lib/brand-icons.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+
+import { resolveThemedIconSrc } from './brand-icons'
+
+describe('resolveThemedIconSrc', () => {
+  it('returns a single asset for either theme', () => {
+    expect(resolveThemedIconSrc('/icon.svg', false)).toBe('/icon.svg')
+    expect(resolveThemedIconSrc('/icon.svg', true)).toBe('/icon.svg')
+  })
+
+  it('selects the matching themed asset', () => {
+    const src = { light: '/light.svg', dark: '/dark.svg' }
+    expect(resolveThemedIconSrc(src, false)).toBe('/light.svg')
+    expect(resolveThemedIconSrc(src, true)).toBe('/dark.svg')
+  })
+})

apps/studio/lib/brand-icons.ts

@@ -0,0 +1,18 @@
+import { BASE_PATH } from '@/lib/constants'
+
+export type ThemedIconSrc = string | { light: string; dark: string }
+
+export const BRAND_ICONS = {
+  bigquery: `${BASE_PATH}/img/icons/bigquery-icon.svg`,
+  clickhouse: {
+    light: `${BASE_PATH}/img/icons/clickhouse-icon-light.svg`,
+    dark: `${BASE_PATH}/img/icons/clickhouse-icon.svg`,
+  },
+  ducklake: `${BASE_PATH}/img/icons/ducklake-icon.svg`,
+  snowflake: `${BASE_PATH}/img/icons/snowflake-icon.svg`,
+} as const satisfies Record<string, ThemedIconSrc>
+
+export function resolveThemedIconSrc(src: ThemedIconSrc, isDark: boolean): string {
+  if (typeof src === 'string') return src
+  return isDark ? src.dark : src.light
+}

apps/studio/public/img/icons/clickhouse-icon-light.svg

@@ -0,0 +1,4 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" rx="36" fill="#141600"/>
+<path d="M90 89.9612C90 87.6505 91.6505 86 93.9612 86H123.67C125.981 86 127.631 87.6505 127.631 89.9612V422.369C127.631 424.68 125.981 426.33 123.67 426.33H93.9612C91.6505 426.33 90 424.68 90 422.369V89.9612ZM165.592 89.9612C165.592 87.6505 167.243 86 169.553 86H199.262C201.573 86 203.223 87.6505 203.223 89.9612V422.369C203.223 424.68 201.573 426.33 199.262 426.33H169.553C167.243 426.33 165.592 424.68 165.592 422.369V89.9612ZM241.184 89.9612C241.184 87.6505 242.835 86 245.146 86H274.854C277.165 86 278.816 87.6505 278.816 89.9612V422.369C278.816 424.68 277.165 426.33 274.854 426.33H245.146C242.835 426.33 241.184 424.68 241.184 422.369V89.9612ZM316.777 89.9612C316.777 87.6505 318.427 86 320.738 86H350.447C352.757 86 354.408 87.6505 354.408 89.9612V422.369C354.408 424.68 352.757 426.33 350.447 426.33H320.738C318.427 426.33 316.777 424.68 316.777 422.369V89.9612ZM392.369 222.33C392.369 220.019 394.019 218.369 396.33 218.369H426.039C428.35 218.369 430 220.019 430 222.33V290C430 292.311 428.35 293.961 426.039 293.961H396.33C394.019 293.961 392.369 292.311 392.369 290V222.33Z" fill="#FCFF74"/>
+</svg>