Add configurable code font size override (#301)

* Add configurable code font size override

- Persist a code font size override in custom theme state
- Apply it to CodeMirror and the terminal
- Surface the setting in the theme summary and reset flow

* Add font size override for code views

- Wire code block styling to a configurable font-size token
- Add a settings slider to adjust and reset code editor and terminal font size

Author: BunsDev

apps/web/src/components/CodeMirrorViewer.tsx

@@ -36,7 +36,7 @@ const baseExtensions: Extension[] = [
   EditorView.theme({
     "&": {
       height: "100%",
-      fontSize: "12px",
+      fontSize: "var(--font-size-code, 12px)",
       backgroundColor: "var(--background)",
     },
     ".cm-scroller": {

apps/web/src/components/ThreadTerminalDrawer.tsx

@@ -39,6 +39,7 @@ import {
   type ThreadTerminalGroup,
 } from "../types";
 import { readNativeApi } from "~/nativeApi";
+import { getStoredFontSizeOverride } from "~/lib/customTheme";
 
 const MIN_DRAWER_HEIGHT = 180;
 const MAX_DRAWER_HEIGHT_RATIO = 0.75;
@@ -285,7 +286,7 @@ function TerminalViewport({
     const terminal = new Terminal({
       cursorBlink: true,
       lineHeight: 1.2,
-      fontSize: 12,
+      fontSize: getStoredFontSizeOverride() ?? 12,
       scrollback: 5_000,
       fontFamily: '"SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace',
       theme: terminalThemeFromApp(),

apps/web/src/index.css

@@ -325,7 +325,7 @@ label:has(> select#reasoning-effort) select {
   background: var(--muted);
   padding: 0.1rem 0.35rem;
   color: var(--foreground);
-  font-size: 0.75rem;
+  font-size: var(--font-size-code, 0.75rem);
 }
 
 .chat-markdown pre {
@@ -342,7 +342,7 @@ label:has(> select#reasoning-effort) select {
   background: transparent;
   padding: 0;
   line-height: 1.5;
-  font-size: 0.875rem;
+  font-size: var(--font-size-code, 0.875rem);
 }
 
 .chat-markdown .chat-markdown-codeblock {

apps/web/src/lib/customTheme.ts

@@ -71,6 +71,7 @@ const CUSTOM_THEME_STYLE_ID = "okcode-custom-theme-style";
 const CUSTOM_THEME_FONT_LINK_ID = "okcode-custom-theme-fonts";
 const RADIUS_OVERRIDE_KEY = "okcode:radius-override";
 const FONT_OVERRIDE_KEY = "okcode:font-override";
+const FONT_SIZE_OVERRIDE_KEY = "okcode:font-size-override";
 const LEGACY_BACKGROUND_STYLE_ID = "okcode-background-image-style";
 
 /** System-bundled fonts that don't need to be loaded from Google Fonts. */
@@ -568,6 +569,39 @@ export function applyFontOverride(): void {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Font Size Override (applies to code editors and terminal)
+// ---------------------------------------------------------------------------
+
+export function getStoredFontSizeOverride(): number | null {
+  const raw = localStorage.getItem(FONT_SIZE_OVERRIDE_KEY);
+  if (raw === null) return null;
+  const num = Number.parseFloat(raw);
+  return Number.isFinite(num) ? num : null;
+}
+
+export function setStoredFontSizeOverride(px: number): void {
+  localStorage.setItem(FONT_SIZE_OVERRIDE_KEY, String(px));
+  if (hasDom()) {
+    document.documentElement.style.setProperty("--font-size-code", `${px}px`);
+  }
+}
+
+export function clearFontSizeOverride(): void {
+  localStorage.removeItem(FONT_SIZE_OVERRIDE_KEY);
+  if (hasDom()) {
+    document.documentElement.style.removeProperty("--font-size-code");
+  }
+}
+
+export function applyFontSizeOverride(): void {
+  if (!hasDom()) return;
+  const val = getStoredFontSizeOverride();
+  if (val !== null) {
+    document.documentElement.style.setProperty("--font-size-code", `${val}px`);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Initialization (called on module load)
 // ---------------------------------------------------------------------------
@@ -590,4 +624,7 @@ export function initCustomTheme(): void {
 
   // Always apply font override if set
   applyFontOverride();
+
+  // Always apply font size override if set
+  applyFontSizeOverride();
 }

apps/web/src/routes/_chat.settings.tsx

@@ -51,13 +51,16 @@ import {
 import {
   applyCustomTheme,
   clearFontOverride,
+  clearFontSizeOverride,
   clearRadiusOverride,
   clearStoredCustomTheme,
   getStoredCustomTheme,
   getStoredFontOverride,
+  getStoredFontSizeOverride,
   getStoredRadiusOverride,
   removeCustomTheme,
   setStoredFontOverride,
+  setStoredFontSizeOverride,
   setStoredRadiusOverride,
   type CustomThemeData,
 } from "../lib/customTheme";
@@ -351,6 +354,9 @@ function SettingsRouteView() {
   const [fontOverride, setFontOverrideState] = useState<string>(
     () => getStoredFontOverride() ?? "",
   );
+  const [fontSizeOverride, setFontSizeOverrideState] = useState<number | null>(() =>
+    getStoredFontSizeOverride(),
+  );
   const globalEnvironmentVariablesQuery = useQuery(globalEnvironmentVariablesQueryOptions());
   const activeProjectId = selectedProjectId ?? projects[0]?.id ?? null;
   const selectedProject = projects.find((project) => project.id === activeProjectId) ?? null;
@@ -462,6 +468,7 @@ function SettingsRouteView() {
       : []),
     ...(radiusOverride !== null ? ["Border radius"] : []),
     ...(fontOverride ? ["Font family"] : []),
+    ...(fontSizeOverride !== null ? ["Font size"] : []),
   ];
 
   const openKeybindingsFile = useCallback(() => {
@@ -610,6 +617,8 @@ function SettingsRouteView() {
     setRadiusOverrideState(null);
     clearFontOverride();
     setFontOverrideState("");
+    clearFontSizeOverride();
+    setFontSizeOverrideState(null);
   }
 
   return (
@@ -793,6 +802,43 @@ function SettingsRouteView() {
                 }
               />
 
+              <SettingsRow
+                title="Font size"
+                description="Adjust the font size for code editors and terminal."
+                resetAction={
+                  fontSizeOverride !== null ? (
+                    <SettingResetButton
+                      label="font size"
+                      onClick={() => {
+                        clearFontSizeOverride();
+                        setFontSizeOverrideState(null);
+                      }}
+                    />
+                  ) : null
+                }
+                control={
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="range"
+                      min={10}
+                      max={20}
+                      step={1}
+                      value={fontSizeOverride ?? 12}
+                      onChange={(e) => {
+                        const value = Number.parseFloat(e.target.value);
+                        setFontSizeOverrideState(value);
+                        setStoredFontSizeOverride(value);
+                      }}
+                      className="h-1.5 w-24 cursor-pointer appearance-none rounded-full bg-muted accent-foreground sm:w-28"
+                      aria-label="Font size"
+                    />
+                    <span className="w-12 text-right text-xs tabular-nums text-muted-foreground">
+                      {fontSizeOverride ?? 12}px
+                    </span>
+                  </div>
+                }
+              />
+
               <SettingsRow
                 title="Font family"
                 description="Override the UI font. Use any Google Font name."