smith89k

Claude Code Style: your own fonts, sizes and colours in the Claude Code chat

4 min read

Claude Code's chat panel has no style settings of its own. Claude Code Style is an extension I made to change that: pick your own English and Khmer fonts and sizes, and style every kind of text in the chat, from headings and links to code blocks and the tool box.

Claude Code chat with custom English and Khmer fonts and coloured headings

Install it#

You can also search for "Claude Code Style" in the Extensions view, or install it from a terminal:

code --install-extension smith89k.claude-code-style

For the chat styles you also need the Claude Code extension. Claude Code Style is an unofficial community extension, not made by or affiliated with Anthropic.

Why Khmer gets its own size#

Khmer text often looks too small next to English at the same size. This extension gives Khmer its own font and size, so both languages read comfortably side by side, in the chat and in the terminal. English text is never affected.

What you can style#

  • Fonts and sizes for English and Khmer, separately. Pick any font installed on your computer.
  • Every item in a reply: normal text, headings 1 to 6, bold, italic, crossed-out text, links, inline code, code blocks, lists, quotes, tables and divider lines.
  • The tool box: the tool name (for example Bash), its description, the box itself, and the IN and OUT labels and their content.
  • For each item: font, size, colour, background, border, weight, italic and underline.

Use it#

  1. Open the Command Palette (Ctrl+Shift+P) and run Claude Style: Open Settings.
  2. Pick your English and Khmer fonts and sizes, then style any items you want. A live preview of the chat updates as you type.
  3. Click Apply, then Reload Window when asked.

If you changed the Khmer size, close and reopen the editor the first time to see it in the terminal too.

The Claude Style settings page with font pickers and the text style table

Theme presets#

One click fills every colour from a theme: Dracula, Catppuccin (Latte, Frappé, Macchiato and Mocha), Nord, Gruvbox, One Dark or Tokyo Night. Presets only change colours, so your fonts and sizes stay as they are. The chat background follows your editor theme, so pick a light preset for a light theme and a dark one for a dark theme.

Catppuccin Mocha on a dark theme next to Catppuccin Latte on a light theme

What it changes on your computer#

  • Editor settings: the chat and terminal font settings. Your old values are saved first.
  • Claude Code's stylesheet: Claude Code has no style settings, so the extension adds a clearly marked block to its webview/index.css and keeps a backup next to it. When Claude Code updates, your styles are added back automatically at startup.
  • A user font, for the terminal only: if the Khmer and English sizes differ, a resized copy of your Khmer font is installed for your Windows user account.

To undo everything, run Claude Style: Remove My Styles. It removes the styles and restores your previous font settings.

Requirements#

  • VS Code 1.80 or later, or an editor built on VS Code, such as Antigravity.
  • Windows. Listing your fonts and installing the resized terminal font only work on Windows for now, so macOS and Linux aren't supported yet.

Get it#

Claude Code Style is free and MIT-licensed. Install it from the VS Code Marketplace or Open VSX, and find the code on GitHub.