diff --git a/.changeset/brand-color-view-icon.md b/.changeset/brand-color-view-icon.md new file mode 100644 index 00000000000..c16fa618966 --- /dev/null +++ b/.changeset/brand-color-view-icon.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +Use brand-colored Kilo Code icons throughout the extension for better visibility diff --git a/src/assets/icons/kilo-dark.svg b/src/assets/icons/kilo-dark.svg index 7a640ff23ee..7239bf80a80 100644 --- a/src/assets/icons/kilo-dark.svg +++ b/src/assets/icons/kilo-dark.svg @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/src/assets/icons/kilo-light.svg b/src/assets/icons/kilo-light.svg index 31f2b31ddf1..3daa5626073 100644 --- a/src/assets/icons/kilo-light.svg +++ b/src/assets/icons/kilo-light.svg @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx index 041a0901ff7..249ba43a689 100644 --- a/webview-ui/src/components/chat/ChatView.tsx +++ b/webview-ui/src/components/chat/ChatView.tsx @@ -76,10 +76,14 @@ const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0 // kilocode_change start: KiloLogo component const KiloLogo = () => { const iconsBaseUri = (window as any).ICONS_BASE_URI || "" + const isLightTheme = + document.body.classList.contains("vscode-light") || + document.body.classList.contains("vscode-high-contrast-light") + const iconFile = isLightTheme ? "kilo-light.svg" : "kilo-dark.svg" return (
Kilo Code + document.body.classList.contains("vscode-light") || document.body.classList.contains("vscode-high-contrast-light") export const KiloLogo = () => { + const [isLightTheme, setIsLightTheme] = useState(getIsLightThemeFromEditor) + + useEffect(() => { + const observer = new MutationObserver(() => { + setIsLightTheme(getIsLightThemeFromEditor()) + }) + observer.observe(document.body, { attributes: true, attributeFilter: ["class"] }) + return () => observer.disconnect() + }, []) + + const fillColor = isLightTheme ? "#1a1a18" : "#f8f674" + return ( {