Skip to content

Restyle Home and Chat after OmniTavern's classic light/dark theme - #1

Open
Cassiur wants to merge 3 commits into
mainfrom
ui/classic-theme
Open

Cassiur wants to merge 3 commits into
mainfrom
ui/classic-theme

Conversation

@Cassiur

@Cassiur Cassiur commented Sep 17, 2026

Copy link
Copy Markdown
Owner

User problem

The app looked like an untouched Material Components template: default purple accent, lavender-tinted background, floating rounded cards, round letter avatars in muddy hash-derived colors, and a 34sp ‹ text glyph as the back button. It didn't read as a current, polished chat app.

This restyles the two most-used screens (Home and Chat) after OmniTavern's built-in "经典白 / 经典黑" (classic light / classic dark) themes. Color values come from its theme-store.js presets rather than being eyeballed.

Changes

  • Palette (values/colors.xml, values-night/colors.xml): cool-gray #F4F5F6 page, white surfaces, slate text (#0F172A / #64748B), #199AFF accent; GitHub-dark-style night palette (#171B20 page, #2F81F7 accent). Adds a divider token.
  • Home
    • Character cards → flat list rows with a hairline divider inset past the avatar (bg_character_card.xml is now a layer-list; elevation and card margins removed).
    • Avatars: circles → 48dp rounded squares (12dp). CharacterAdapter maps the stored, muted hash-derived accent_color onto a saturated palette at render time; database values are unchanged.
    • Header title 28sp bold → 22sp medium; search box is a bordered white pill.
  • Chat
    • Assistant bubble drops its 1dp stroke in favor of elevation="1dp"; the message container gets 2dp padding so the shadow isn't clipped.
    • Back button: TextView with ‹ → ImageButton with the existing chevron vector (the Java side only calls setOnClickListener, so the type change is safe). Adds a navigate_back content description.
    • Hairline dividers under the header and above the composer; send button corner radius 22dp.
  • Bug fix (themes.xml): colorSecondary was never set, so the create-character FAB rendered in Material's default teal #03DAC6. It now follows the accent.
  • bg_agent_card.xml no longer hardcodes a #F0EAF8 lavender gradient; badge/tag radii tightened to 8dp.
  • CHANGELOG.md: Unreleased entry.

Other screens pick up the new palette through the shared color tokens but keep their existing layouts. Rolling the structural changes (e.g. the vector back button) out to them is left for a follow-up.

Verification

  • testDebugUnitTest
  • lintDebug
  • assembleDebug
  • Tested on an emulator or device when UI/data behavior changed — not done: the emulator can't start on the dev machine (missing Windows hypervisor driver). Please install the debug APK and check shadows, divider insets, and dark mode on a device before merging.
  • No keys, chats, cards, databases, or user media are included
  • CHANGELOG.md and relevant docs are updated

Screenshots

No device screenshots yet (see above). The before/after was reviewed with an HTML mockup built from the real layout XML and hex values; device screenshots should be added here after an on-device check. docs/images/home.png and chat.png in the README still show the old look and will need refreshing too.

🤖 Generated with Claude Code

Cassiur and others added 3 commits September 17, 2026 17:08
Replace the Material-default purple look with the neutral, modern style of
OmniTavern's built-in "经典白 / 经典黑" presets (values taken from its
theme-store.js): cool-gray page, white surfaces, slate text, #199AFF accent,
and a GitHub-dark-style night palette.

Structural changes, not just color:
- Home: character cards become flat list rows with a hairline divider inset
  past the avatar; avatars go from circles to 48dp rounded squares, and the
  muted hash-derived initial colors are mapped onto a saturated palette at
  render time (stored accent_color values are untouched).
- Chat: assistant bubbles drop the 1dp stroke for a light elevation shadow;
  the "‹" text back button becomes a vector chevron; header and composer get
  hairline dividers; search/message inputs become bordered white pills.
- Typography: header 28sp bold -> 22sp medium, names 16sp medium.
- Fix: the theme never set colorSecondary, so the create-character FAB was
  rendering in Material's default teal (#03DAC6). It now follows the accent.

Other screens pick up the new palette through the shared color tokens but
keep their existing layouts for now.

Verified: ./gradlew testDebugUnitTest lintDebug assembleDebug passes. No
on-device screenshot this session (emulator lacks hypervisor support here).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
android:maxWidth on the bubble LinearLayout was silently ignored (only
TextView/ImageView honor it), so long messages stretched edge to edge.
Move the limit onto the text views inside the bubble via a shared
message_bubble_max_width dimen (280dp).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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