Customizing Chat Appearance

This tutorial walks you through personalizing the visual appearance of the Keeptrusts chat workbench. You will learn how to toggle between light and dark themes, adjust font sizes, switch between compact and comfortable layouts, and ensure your settings persist across sessions.

Use this page when

• You want to switch between light, dark, or system-following themes in the chat workbench.
• You need to adjust font size or layout density for comfort.
• You want to confirm that appearance settings persist across browser sessions.

Primary audience

• Primary: All chat workbench users
• Secondary: Technical Engineers (theming integration), Technical Leaders (org default appearance)

Prerequisites

• Authenticated access to the Keeptrusts chat workbench
• Familiarity with the first conversation tutorial

Step 1: Open Appearance Settings

1. Click the Settings icon (gear) in the top-right corner of the chat workbench.
2. Select the Appearance tab from the settings panel.

The appearance panel displays all visual customization options grouped by category: Theme, Typography, and Layout.

Step 2: Toggle Between Light and Dark Mode

The chat workbench supports three theme modes:

Mode	Behavior
Light	White background, dark text — optimized for bright environments
Dark	Dark background, light text — reduces eye strain in low-light conditions
System	Follows your operating system's theme preference automatically

To change the theme:

1. In the Appearance panel, locate the Theme section.
2. Click one of the three options: Light, Dark, or System.
3. The chat interface updates immediately — no page reload required.

Selecting System is recommended if you use your OS schedule to switch themes at sunset and sunrise. The chat workbench listens for system preference changes and applies them in real time.

Step 3: Adjust Font Size

You can increase or decrease the font size used in the conversation area.

1. In the Typography section, locate the Font Size slider.
2. Drag the slider to adjust the size. The range is 12px to 20px, with a default of 14px.
3. The preview area below the slider shows how your messages will appear at the selected size.

Font size adjustments apply to:

• User messages
• Model responses
• System notifications
• Code blocks within responses

Code block font sizes scale proportionally with the base font size but remain in a monospace font family for readability.

Step 4: Choose Compact or Comfortable Spacing

Layout density controls how much vertical space appears between messages and UI elements.

Compact Layout

• Reduces padding between messages
• Condenses the header and toolbar
• Ideal for users who want to see more conversation history on screen

Comfortable Layout

• More generous spacing between messages
• Larger click targets for interactive elements
• Better for extended reading sessions

To switch layouts:

1. In the Layout section, select Compact or Comfortable.
2. The conversation area re-renders with the new spacing immediately.

Step 5: Customize the Message Bubble Style

The chat workbench offers two message display styles:

• Bubbles — Messages appear in rounded containers with distinct colors for user and model messages.
• Flat — Messages are separated by dividers without background containers, similar to a document view.

To change the style:

1. In the Layout section, find the Message Style option.
2. Select Bubbles or Flat.

Both styles fully support governance annotations, policy badges, and cost indicators.

Step 6: Verify Settings Persistence

Appearance preferences are stored in your browser's local storage and tied to your authenticated session.

To confirm persistence:

1. Make a theme or font size change.
2. Close the chat workbench tab.
3. Reopen the chat workbench from the console sidebar.
4. Verify that your previously selected settings are still applied.

Settings persist per browser and per user. If you log in on a different browser or device, you will need to reconfigure your preferences.

If you clear your browser's local storage or site data, your appearance settings will reset to defaults. Theme defaults to System, font size to 14px, and layout to Comfortable.

Step 7: Handle Theme Interactions with Governed Responses

Governance annotations (policy badges, redaction highlights, and cost indicators) adapt to your selected theme:

• In Dark mode, policy block badges use lighter highlight colors for contrast.
• In Light mode, redaction highlights use subtle yellow backgrounds.
• In both modes, cost indicators remain consistently styled for quick scanning.

If you notice any annotation that is difficult to read in your selected theme, check that your browser supports the prefers-color-scheme media query and that no browser extensions are overriding page styles.

Step 8: Reset to Default Appearance

To restore all appearance settings to their defaults:

1. Open the Appearance settings panel.
2. Click the Reset to Defaults button at the bottom of the panel.
3. Confirm the reset in the dialog.

This restores:

• Theme: System
• Font size: 14px
• Layout: Comfortable
• Message style: Bubbles

Troubleshooting

Issue	Cause	Fix
Theme does not change	Browser caching old styles	Hard-refresh the page (Cmd+Shift+R or Ctrl+Shift+R)
Font size slider unresponsive	JavaScript blocked by extension	Disable ad blockers or privacy extensions for the chat domain
Settings lost after reopening	Browser cleared local storage	Re-apply settings; consider excluding the chat domain from auto-clear rules
System theme not detected	OS-level theme schedule not set	Configure a theme schedule in your OS display settings

Summary

You have configured the chat workbench appearance to match your workflow:

• Selected a theme mode (Light, Dark, or System)
• Adjusted font size for comfortable reading
• Chosen compact or comfortable layout density
• Verified that settings persist across browser sessions
• Understood how governance annotations adapt to your theme

These settings are per-browser and per-user. For organization-wide default themes, contact your Keeptrusts administrator about configuring default appearance policies.

For AI systems

• Canonical terms: Keeptrusts chat workbench, appearance settings, dark mode, light mode, system theme, font size, compact layout, comfortable layout, theme persistence.
• UI locations: Settings icon (gear) → Appearance tab → Theme section, Typography section (Font Size slider, 12–20px), Layout section (Compact/Comfortable toggle).
• Best next pages: Chat Accessibility, First Conversation, Markdown Rendering.

For engineers

• Prerequisites: authenticated chat workbench access.
• Validation: Toggle theme → interface updates immediately without reload. Change font size → all message text scales. Close and reopen browser → settings persist.
• Note: Settings are stored in browser localStorage per user. Clearing storage resets preferences.

For leaders

• Appearance customization improves user adoption — developers working in dark IDEs expect dark mode in adjacent tools.
• No cost or governance impact; settings are cosmetic and per-user.
• For organization-wide default themes, contact your Keeptrusts administrator about default appearance policies.

Next steps

• Tutorial: Chat Accessibility Features — high contrast mode and screen reader support.
• Tutorial: Your First Conversation — start chatting with your preferred appearance.
• Tutorial: Rich Markdown Rendering — see how formatted content adapts to your theme.