Skip to content

feat: Arduino Agent colors (Arduino's teal moved to the icon's indigo) - #44

Merged
mixelpixx merged 2 commits into
mainfrom
agent-theme
Oct 2, 2026
Merged

mixelpixx merged 2 commits into
mainfrom
agent-theme

Conversation

@mixelpixx

Copy link
Copy Markdown
Owner

Summary

The name, icon and title already set Arduino Agent apart, but inside it still used Arduino's teal everywhere. This PR moves both built-in themes to the indigo of the app icon.

How the colors are derived (agent-palette.ts, pure OKLCH math): instead of hand-picking a palette, Arduino's own theme JSON is transformed when the themes are registered.

  • Accents: teal (hue 160–240, chroma ≥ 0.05) moves to the icon's hue, 277°, at the same lightness, with a little more chroma. For example #008184 → #5d64c6, #0ca1a6 → #757ff4, and the status bar #006d70 → #4e54a8.
  • Neutrals: Arduino's slightly teal-tinted slates keep their lightness and their tiny chroma, but lean indigo instead. For example the dark editor background #1f272a → #24252c.
  • Everything else: whites, greys and the yellow/red highlights are untouched. Keeping lightness preserves the contrast Arduino tuned.

Wiring (agent-theme.ts)

  • Theme IDs kept: the converted themes are registered under Arduino's IDs (arduino-theme, arduino-theme-dark). The vendored settings dialog lists exactly those as the built-in Light/Dark, and users' saved workbench.colorTheme keeps working. Since the conversion runs on Arduino's JSON at registration, upstream theme updates carry over.
  • Upstream bug fixed: arduino.branding.primary/secondary are now registered. Arduino's themes set them, and its CSS uses var(--theia-arduino-branding-primary) in the boards dialog, the library and board lists, the serial monitor scrollbar and the progress bar. But upstream never registers them, so the variable was undefined in every build and those accents never rendered.
  • Hardcoded CSS overrides: the few rules in arduino-ide-extension's CSS that hardcode teal are overridden in terms of the branding color: the board/port status-bar items, the dialog border, list separators and the focus shadow.

Test plan

  • yarn test:palette (new) passes 4/4:
    • teal accents land on hue 277 at the same lightness
    • neutrals stay below chroma 0.03
    • non-teal colors and alpha suffixes are untouched
    • both Arduino themes convert with no teal accents left, and the input is not mutated
  • A swatch page of every before→after mapping in both themes, reviewed.
  • A local Windows build, with screenshots of both themes. The light theme was forced by emulating prefers-color-scheme and reloading, so nothing was persisted.
    • Light: indigo toolbar and status bar, periwinkle Verify/Upload buttons, indigo keywords.
    • Dark: neutral charcoal backgrounds with no purple cast, indigo buttons and keywords, and the board status item tinted.
  • --theia-arduino-branding-primary is now defined (#5d64c6 light, #757ff4 dark). It was empty before.
  • CI.

🤖 Generated with Claude Code

mixelpixx and others added 2 commits October 2, 2026 02:09
The new name and icon set Arduino Agent apart, but inside it still wore
Arduino's teal everywhere. Its light and dark themes now use the indigo of
the app icon.

- agent-palette.ts: pure OKLCH color math. Teal accents (hue 160-240,
  chroma >= 0.05) take the icon's hue at their original lightness, with a
  bit more chroma; teal-tinted neutrals keep lightness and their tiny
  chroma but lean indigo; everything else is untouched. Same lightness
  keeps the contrast Arduino tuned.
- agent-theme.ts: registers the converted themes under Arduino's ids
  (arduino-theme / arduino-theme-dark), which the settings dialog lists as
  the built-in Light/Dark and users' saved preference keeps pointing at.
  Computed from Arduino's JSON at registration, so upstream theme updates
  carry over.
- Registers arduino.branding.primary/secondary. Arduino's themes set them
  and its CSS uses var(--theia-arduino-branding-primary) (boards dialog,
  library/board lists, serial monitor scrollbar, progress bar), but
  upstream never registered them, so the variable was undefined and those
  accents never rendered.
- Overrides the few rules in arduino-ide-extension's CSS that hardcode
  teal (board/port status bar items, dialog border, list separators, focus
  shadow) in terms of the branding color.
- Unit tests for the palette (yarn test:palette).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@mixelpixx
mixelpixx merged commit f72fa75 into main Oct 2, 2026
1 check passed
@mixelpixx
mixelpixx deleted the agent-theme branch October 2, 2026 10:57
@mixelpixx mixelpixx mentioned this pull request Oct 2, 2026
2 of 4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant