feat: Add font aliasing support and update initial settings in ClineProvider

Author: DonDawsy

src/core/webview/ClineProvider.ts

@@ -443,15 +443,25 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 		// Listen for when color changes
 		vscode.workspace.onDidChangeConfiguration(
 			async (e) => {
-				if (e && e.affectsConfiguration("workbench.colorTheme")) {
+				if (e.affectsConfiguration("workbench.colorTheme")) {
 					// Sends latest theme name to webview
 					await this.postMessageToWebview({ type: "theme", text: JSON.stringify(await getTheme()) })
 				}
+				if (e.affectsConfiguration("workbench.fontAliasing")) {
+					const fontAliasingSetting = vscode.workspace.getConfiguration("workbench").get("fontAliasing")
+					const fontAliasing = typeof fontAliasingSetting === "string" ? fontAliasingSetting : undefined
+					await this.postMessageToWebview({ type: "fontAliasing", value: fontAliasing })
+				}
 			},
 			null,
 			this.disposables,
 		)
 
+		const initialFontAliasingSetting = vscode.workspace.getConfiguration("workbench").get("fontAliasing")
+		const initialFontAliasing =
+			typeof initialFontAliasingSetting === "string" ? initialFontAliasingSetting : undefined
+		await this.postMessageToWebview({ type: "fontAliasing", value: initialFontAliasing })
+
 		// If the extension is starting a new session, clear previous task state.
 		await this.removeClineFromStack()
 

src/shared/ExtensionMessage.ts

@@ -69,7 +69,9 @@ export interface ExtensionMessage {
 		| "maxReadFileLine"
 		| "fileSearchResults"
 		| "toggleApiConfigPin"
+		| "fontAliasing"
 	text?: string
+	value?: string
 	action?:
 		| "chatButtonClicked"
 		| "mcpButtonClicked"

webview-ui/src/App.tsx

@@ -75,6 +75,17 @@ const App = () => {
 				const { requestId, promptText } = message
 				setHumanRelayDialogState({ isOpen: true, requestId, promptText })
 			}
+
+			if (message.type === "fontAliasing") {
+				const value = message.value as string | undefined
+				let smoothingValue = "unset" // Default to letting the browser decide
+
+				if (value === "antialiased" || value === "subpixel-antialiased" || value === "none") {
+					smoothingValue = value
+				}
+
+				;(document.documentElement.style as any)["webkitFontSmoothing"] = smoothingValue
+			}
 		},
 		[switchTab],
 	)

webview-ui/src/index.css

@@ -190,8 +190,7 @@ textarea:focus {
 
 html {
 	height: 100%;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: inherit;
 }
 
 body {