From 1667ea7bacc6ce03e35eeb4a3d5a24a5be8e15c6 Mon Sep 17 00:00:00 2001 From: ashwinhegde19 Date: Thu, 19 Feb 2026 00:40:36 +0530 Subject: [PATCH] feat: add font size setting for webview UI - Add fontSize config option (range: 10-24, default: 13) - Add slider in Settings > Display tab - Apply font size via CSS variables - Persist setting in global config Closes #441 --- .../src/services/cli-backend/types.ts | 1 + packages/kilo-vscode/webview-ui/src/App.tsx | 17 +++++++++++-- .../src/components/settings/DisplayTab.tsx | 25 ++++++++++++++++++- .../kilo-vscode/webview-ui/src/i18n/en.ts | 2 ++ .../webview-ui/src/types/messages.ts | 1 + packages/opencode/src/config/config.ts | 1 + 6 files changed, 44 insertions(+), 3 deletions(-) diff --git a/packages/kilo-vscode/src/services/cli-backend/types.ts b/packages/kilo-vscode/src/services/cli-backend/types.ts index 06c3a90755..d77d011c8c 100644 --- a/packages/kilo-vscode/src/services/cli-backend/types.ts +++ b/packages/kilo-vscode/src/services/cli-backend/types.ts @@ -318,5 +318,6 @@ export interface Config { compaction?: CompactionConfig tools?: Record layout?: "auto" | "stretch" + fontSize?: number experimental?: ExperimentalConfig } diff --git a/packages/kilo-vscode/webview-ui/src/App.tsx b/packages/kilo-vscode/webview-ui/src/App.tsx index f940c36e46..14ab5584fe 100644 --- a/packages/kilo-vscode/webview-ui/src/App.tsx +++ b/packages/kilo-vscode/webview-ui/src/App.tsx @@ -1,4 +1,4 @@ -import { Component, createSignal, createMemo, Switch, Match, onMount, onCleanup } from "solid-js" +import { Component, createSignal, createMemo, Switch, Match, onMount, onCleanup, createEffect } from "solid-js" import { ThemeProvider } from "@kilocode/kilo-ui/theme" import { DialogProvider } from "@kilocode/kilo-ui/context/dialog" import { MarkedProvider } from "@kilocode/kilo-ui/context/marked" @@ -13,7 +13,7 @@ import ProfileView from "./components/ProfileView" import { VSCodeProvider } from "./context/vscode" import { ServerProvider, useServer } from "./context/server" import { ProviderProvider } from "./context/provider" -import { ConfigProvider } from "./context/config" +import { ConfigProvider, useConfig } from "./context/config" import { SessionProvider, useSession } from "./context/session" import { LanguageProvider } from "./context/language" import { ChatView } from "./components/chat" @@ -95,6 +95,19 @@ const AppContent: Component = () => { const [currentView, setCurrentView] = createSignal("newTask") const session = useSession() const server = useServer() + const { config } = useConfig() + + const fontSize = createMemo(() => config().fontSize ?? 13) + + // Apply font size on load and when it changes + createEffect(() => { + const size = fontSize() + const root = document.documentElement + root.style.setProperty("--font-size-small", `${size}px`) + root.style.setProperty("--font-size-base", `${size + 1}px`) + root.style.setProperty("--font-size-large", `${size + 3}px`) + root.style.setProperty("--font-size-x-large", `${size + 7}px`) + }) const handleViewAction = (action: string) => { switch (action) { diff --git a/packages/kilo-vscode/webview-ui/src/components/settings/DisplayTab.tsx b/packages/kilo-vscode/webview-ui/src/components/settings/DisplayTab.tsx index 9ba75d67b3..0de34ddb7b 100644 --- a/packages/kilo-vscode/webview-ui/src/components/settings/DisplayTab.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/settings/DisplayTab.tsx @@ -39,7 +39,6 @@ const DisplayTab: Component = () => { { + const value = parseInt(e.currentTarget.value, 10) + if (!isNaN(value) && value >= 10 && value <= 24) { + updateConfig({ fontSize: value }) + } + }} + style={{ flex: 1 }} + /> + {config().fontSize ?? 13}px + + ) diff --git a/packages/kilo-vscode/webview-ui/src/i18n/en.ts b/packages/kilo-vscode/webview-ui/src/i18n/en.ts index 69c1f5dc3a..a610e0a4e5 100644 --- a/packages/kilo-vscode/webview-ui/src/i18n/en.ts +++ b/packages/kilo-vscode/webview-ui/src/i18n/en.ts @@ -972,6 +972,8 @@ export const dict = { "settings.display.layout.description": "Layout mode for the chat interface", "settings.display.layout.auto": "Auto", "settings.display.layout.stretch": "Stretch", + "settings.display.fontSize.title": "Font size", + "settings.display.fontSize.description": "Adjust the font size for the webview UI (default: 13px)", "settings.providers.defaultModel.title": "Default Model", "settings.providers.defaultModel.description": "Primary model for conversations", diff --git a/packages/kilo-vscode/webview-ui/src/types/messages.ts b/packages/kilo-vscode/webview-ui/src/types/messages.ts index f0d0d47bbb..5ed47557c5 100644 --- a/packages/kilo-vscode/webview-ui/src/types/messages.ts +++ b/packages/kilo-vscode/webview-ui/src/types/messages.ts @@ -295,6 +295,7 @@ export interface Config { compaction?: CompactionConfig tools?: Record layout?: "auto" | "stretch" + fontSize?: number experimental?: ExperimentalConfig } diff --git a/packages/opencode/src/config/config.ts b/packages/opencode/src/config/config.ts index 063fa5b780..1e6c161abd 100644 --- a/packages/opencode/src/config/config.ts +++ b/packages/opencode/src/config/config.ts @@ -1242,6 +1242,7 @@ export namespace Config { ), instructions: z.array(z.string()).optional().describe("Additional instruction files or patterns to include"), layout: Layout.optional().describe("@deprecated Always uses stretch layout."), + fontSize: z.number().min(10).max(24).optional().describe("Custom font size for the webview UI (default: 13)"), // kilocode_change permission: Permission.optional(), tools: z.record(z.string(), z.boolean()).optional(), enterprise: z