feat(desktop): add theme import and backdrop accessibility controls by grepmykeys · Pull Request #54276 · NousResearch/hermes-agent

grepmykeys · 2026-06-28T13:47:13Z

What does this PR do?

Adds a small desktop Appearance customization/accessibility pass:

Adds two calmer built-in desktop themes: Graphite and Paper
Adds an Appearance → Accessibility control for the decorative backdrop:
- Off
- Subtle
- Full
Keeps the existing backdrop appearance unchanged by default via Full
Adds a Hermes-native JSON theme import card to the Appearance theme grid
Supports importing either a single Hermes theme JSON object or a theme pack: { "themes": [...] }
Adds a small Cmd/Ctrl+K command palette discovery hint in Appearance

The backdrop control is intended as a readability/accessibility option for users who find the decorative background visually noisy behind translucent chat surfaces, while preserving the current branded default.

The native JSON import path gives users a cleaner customization option than relying only on best-effort VS Code Marketplace theme conversion.

Related Issue

No linked issue.

Type of Change

🐛 Bug fix (non-breaking change that fixes an issue)
✨ New feature (non-breaking change that adds functionality)
🔒 Security fix
📝 Documentation update
✅ Tests (adding or improving test coverage)
♻️ Refactor (no behavior change)
🎯 New skill (bundled or hub)

Changes Made

apps/desktop/src/themes/presets.ts
- Added Graphite and Paper built-in themes.
apps/desktop/src/store/backdrop.ts
- Added persisted decorative backdrop preference with Off/Subtle/Full opacity values.
apps/desktop/src/components/Backdrop.tsx
- Reads the persisted decorative backdrop preference instead of hardcoding the visual opacity.
apps/desktop/src/app/settings/appearance-settings.tsx
- Added an Appearance → Accessibility section.
- Added decorative backdrop segmented control.
- Added Hermes theme JSON import card.
- Added a Cmd/Ctrl+K command palette hint.
apps/desktop/src/themes/install.ts
- Added Hermes-native theme JSON import support for single themes and theme packs.
apps/desktop/src/themes/install.test.ts
- Added coverage for native Hermes theme JSON import.
apps/desktop/src/store/backdrop.test.ts
- Added coverage for backdrop preference defaults, persistence, and invalid stored values.

How to Test

From apps/desktop, run:

npm run test:ui -- src/themes/install.test.ts src/store/backdrop.test.ts src/themes/presets.test.ts

Run:
```
npm run typecheck
```

Run targeted eslint:

npx eslint src/app/settings/appearance-settings.tsx src/components/Backdrop.tsx src/themes/install.ts src/themes/install.test.ts src/store/backdrop.ts src/store/backdrop.test.ts src/themes/presets.ts

Launch the desktop app and verify:
- Graphite and Paper appear in Appearance themes.
- Import theme card accepts a valid Hermes theme JSON file and activates the imported theme.
- Decorative backdrop setting switches between Off, Subtle, and Full.
- Full preserves the existing default backdrop intensity.
- Appearance shows the Cmd/Ctrl+K command palette hint.

Checklist

Code

I've read the Contributing Guide
My commit messages follow Conventional Commits (fix(scope):, feat(scope):, etc.)
I searched for existing PRs to make sure this isn't a duplicate
My PR contains only changes related to this fix/feature (no unrelated commits)
I've run pytest tests/ -q and all tests pass
I've added tests for my changes (required for bug fixes, strongly encouraged for features)
I've tested on my platform: Windows 10

Documentation & Housekeeping

I've updated relevant documentation (README, docs/, docstrings) — N/A
I've updated cli-config.yaml.example if I added/changed config keys — N/A
I've updated CONTRIBUTING.md or AGENTS.md if I changed architecture or workflows — N/A
I've considered cross-platform impact (Windows, macOS) per the compatibility guide
I've updated tool descriptions/schemas if I changed tool behavior — N/A

Screenshots / Logs

Dark mode Appearance settings with Graphite/Paper themes, theme import card, and decorative backdrop accessibility control.

Light mode Appearance settings with Paper selected, Graphite available, theme import card, and decorative backdrop accessibility control.

Validation run locally:

npm run test:ui -- src/themes/install.test.ts src/store/backdrop.test.ts src/themes/presets.test.ts
✓ 27 tests passed

npm run typecheck
✓ passed

npx eslint src/app/settings/appearance-settings.tsx src/components/Backdrop.tsx src/themes/install.ts src/themes/install.test.ts src/store/backdrop.ts src/store/backdrop.test.ts src/themes/presets.ts
✓ passed

git diff --check
✓ passed

Copilot

Pull request overview

Adds desktop Appearance customization and accessibility controls by introducing calmer built-in themes, a persisted decorative-backdrop intensity preference, and a Hermes-native JSON theme import path (with tests).

Changes:

Added two new built-in desktop themes (Graphite, Paper) to the presets registry.
Introduced a persisted decorative backdrop mode (Off/Subtle/Full) and wired it into the Backdrop rendering and Appearance settings UI.
Added Hermes-native theme JSON import support (single theme or { themes: [...] } pack) with new unit tests.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
apps/desktop/src/themes/presets.ts	Adds Graphite/Paper themes and registers them as built-ins.
apps/desktop/src/themes/install.ts	Adds Hermes-native theme JSON parsing/installation entry point.
apps/desktop/src/themes/install.test.ts	Adds tests covering Hermes-native theme JSON import.
apps/desktop/src/store/backdrop.ts	Adds persisted decorative backdrop mode and opacity mapping.
apps/desktop/src/store/backdrop.test.ts	Adds tests for backdrop preference behavior and persistence.
apps/desktop/src/components/Backdrop.tsx	Uses the persisted backdrop setting to control artwork rendering.
apps/desktop/src/app/settings/appearance-settings.tsx	Adds Accessibility section, backdrop control, theme import card, and palette hint.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

tonydwb

Code Review Summary

Verdict: LGTM

Desktop theme import and backdrop accessibility controls. Well-structured changes: new backdrop store with nanostores atom, Hermes-native theme parser with validation, two new preset themes (Graphite, Paper), and theme import UI. Good test coverage across all new modules.

Reviewed by Hermes Agent

- add Graphite and Paper built-in desktop themes - add decorative backdrop Off/Subtle/Full setting under Appearance accessibility - support importing Hermes-native theme JSON files and theme packs - add an Appearance hint for the command palette shortcut - cover backdrop preferences and native theme import with tests

- keep the dev-only backdrop opacity control effective - validate Hermes theme imports before installing packs - make backdrop preference tests exercise module initialization

teknium1

Thanks for the focused desktop customization work. The theme-import and three-level backdrop ideas remain unimplemented on current main, but the backdrop portion now overlaps merged PR #64598.

Problems

apps/desktop/src/store/backdrop.ts:18-21 reads only the new hermes.desktop.decorative-backdrop.v1 key. Current main persists its merged on/off setting at apps/desktop/src/store/backdrop.ts:5-13 under hermes.desktop.backdrop.v1; a user who chose Off has stored false, which this code ignores and replaces with full.
New visible copy is hard-coded in apps/desktop/src/app/settings/appearance-settings.tsx:285-288, :324-326, :418-421, and :464-482. Current main routes appearance copy through apps/desktop/src/i18n/types.ts:303-330 and locale catalogs.

Suggested changes

Salvage onto the merged backdrop store with a legacy false → off / true → full migration and test it.
Add the new Appearance strings to the i18n schema and supported locale files.

This is an automated hermes-sweeper review.

teknium1 · 2026-07-15T06:58:32Z

+  value === 'off' || value === 'subtle' || value === 'full'
+
+const read = (): DecorativeBackdropMode => {
+  const value = storedString(KEY)


Current main now persists the merged on/off setting under hermes.desktop.backdrop.v1. Reading only this new key means an existing stored false is ignored and becomes full; please migrate the legacy value (false → off, true → full) before defaulting.

teknium1 · 2026-07-15T06:58:32Z

    { id: 'off', label: a.embedsOff }
  ] as const satisfies readonly { id: EmbedMode; label: string }[]

+  const backdropOptions = [


Please source these labels and the other new visible strings in this component from the existing Appearance i18n schema and add them to every locale catalog. Current main localizes the existing backdrop row rather than embedding English text here.

…me-changes # Conflicts: # apps/desktop/src/app/settings/appearance-settings.tsx # apps/desktop/src/components/Backdrop.tsx # apps/desktop/src/store/backdrop.ts

grepmykeys · 2026-07-17T05:16:47Z

Addressed Teknium1's review feedback in 94f4f31:

rebased/salvaged the decorative backdrop work onto the merged hermes.desktop.backdrop.v1 storage key with legacy false -> off / true -> full migration coverage
moved the new Appearance copy into the i18n schema and locale catalogs
kept theme import tests green after syncing the branch with current upstream/main

Local verification:

npm run typecheck --workspace apps/desktop
npm run test --workspace apps/desktop -- --run src/store/backdrop.test.ts src/themes/install.test.ts
npx prettier --check apps/desktop/src/app/settings/appearance-settings.tsx apps/desktop/src/components/Backdrop.tsx apps/desktop/src/store/backdrop.ts apps/desktop/src/store/backdrop.test.ts apps/desktop/src/i18n/types.ts apps/desktop/src/i18n/en.ts apps/desktop/src/i18n/ja.ts apps/desktop/src/i18n/zh.ts apps/desktop/src/i18n/zh-hant.ts

Copilot AI review requested due to automatic review settings June 28, 2026 13:47

Copilot started reviewing on behalf of grepmykeys June 28, 2026 13:47 View session

Copilot AI reviewed Jun 28, 2026

View reviewed changes

Comment thread apps/desktop/src/components/Backdrop.tsx Outdated

Comment thread apps/desktop/src/store/backdrop.test.ts Outdated

Comment thread apps/desktop/src/store/backdrop.test.ts

Comment thread apps/desktop/src/themes/install.ts Outdated

alt-glitch added type/feature New feature or request comp/desktop Electron desktop app (apps/desktop/*) P3 Low — cosmetic, nice to have labels Jun 28, 2026

tonydwb reviewed Jun 28, 2026

View reviewed changes

grepmykeys force-pushed the feature/desktop-theme-changes branch from 95c6600 to eece94e Compare June 29, 2026 10:54

grepmykeys added 2 commits June 30, 2026 13:26

fix(desktop): address theme import review feedback

1febcba

- keep the dev-only backdrop opacity control effective - validate Hermes theme imports before installing packs - make backdrop preference tests exercise module initialization

grepmykeys force-pushed the feature/desktop-theme-changes branch from eece94e to 1febcba Compare June 30, 2026 17:30

alt-glitch mentioned this pull request Jul 14, 2026

feat(desktop): add a chat backdrop on/off toggle #64598

Merged

2 tasks

teknium1 reviewed Jul 15, 2026

View reviewed changes

teknium1 added sweeper:risk-compatibility Sweeper risk: may break existing users, config, migrations, defaults, or upgrades sweeper:blast-moderate Sweeper blast radius: moderate — a subsystem or single platform labels Jul 15, 2026

Merge remote-tracking branch 'upstream/main' into feature/desktop-the…

94f4f31

…me-changes # Conflicts: # apps/desktop/src/app/settings/appearance-settings.tsx # apps/desktop/src/components/Backdrop.tsx # apps/desktop/src/store/backdrop.ts

Navigation Menu

Uh oh!

feat(desktop): add theme import and backdrop accessibility controls - #54276

feat(desktop): add theme import and backdrop accessibility controls#54276
grepmykeys wants to merge 3 commits into
NousResearch:mainfrom
grepmykeys:feature/desktop-theme-changes

grepmykeys commented Jun 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tonydwb left a comment

Uh oh!

teknium1 left a comment

Uh oh!

teknium1 Jul 15, 2026

Uh oh!

teknium1 Jul 15, 2026

Uh oh!

grepmykeys commented Jul 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

grepmykeys commented Jun 28, 2026

What does this PR do?

Related Issue

Type of Change

Changes Made

How to Test

Checklist

Code

Documentation & Housekeeping

Screenshots / Logs

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tonydwb left a comment

Choose a reason for hiding this comment

Code Review Summary

Uh oh!

teknium1 left a comment

Choose a reason for hiding this comment

Problems

Suggested changes

Uh oh!

teknium1 Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

teknium1 Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

grepmykeys commented Jul 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants