mirror of
https://github.com/lobehub/lobehub.git
synced 2026-03-27 13:29:15 +07:00
3f9c23e7b4
* feat: support lark and feishu * chore: change integration to channel * chore: rename from integration to channel * fix: channel router * feat: add topic list channel provider icon * chore: update webhook url * chore: channel form refact * chore: update i18n keys to channel * chore: update form item description * style: hide required mark * feat: add lark chat adapter * chore: clean speaker tag & add username api adapter * chore: adjust topic channel icon * chore: move developer mode to advanced setting * chore: add lark icon * fix: detail style * fix: token check logic * fix: encrpted risk * fix: vercel function appId * chore: remove webhook mode for discord * chore: add doc link * chore: add channel docs * chore: remove unused import * fix: create bot with wrong platform * chore: update intergration to channel * fix: udpate variable import * fix: tsgo error * chore: optimize webhook url trim * chore: update copy text * fix: telegram webhook not set * chore: add persist logic * docs: update feishu doc * chore: update feishu and lark tenant * chore: update docs * chore: make verfication code required * chore: update feishu docs * chore: update verfication comment * chore: update docs permission list * chore: verificationToken optional * chore: update feishu and lark color * chore: use test id
72 lines
3.5 KiB
Plaintext
72 lines
3.5 KiB
Plaintext
---
|
|
title: Interface Appearance
|
|
description: >-
|
|
Customize LobeHub's look — theme, colors, language, code highlighting, and
|
|
Mermaid diagrams. Make it yours.
|
|
tags:
|
|
- LobeHub
|
|
- Appearance
|
|
- Theme
|
|
- Language
|
|
- Customization
|
|
---
|
|
|
|
# Interface Appearance
|
|
|
|
Appearance settings let you customize how LobeHub looks and feels. Switch themes, pick accent colors, set the default language for Agent responses, and tune code and diagram styling. All visual-related options are grouped here.
|
|
|
|
**How to access:** Click your user avatar in the top-right corner → **App Settings** → **Appearance**.
|
|
|
|
## Language
|
|
|
|
Switch the interface language. LobeHub supports multiple locales — choose the one that fits your workflow.
|
|
|
|
## Theme Mode
|
|
|
|
Three options:
|
|
|
|
| Mode | Best For |
|
|
| ----------------- | ------------------------------------------ |
|
|
| **Light** | Bright environments, daytime use |
|
|
| **Dark** | Low-light environments, reduced eye strain |
|
|
| **Follow System** | Match your OS preference (default) |
|
|
|
|
**Follow System** automatically switches between light and dark based on your operating system setting. Useful if you use LobeHub across different times of day or environments.
|
|
|
|
## Theme Colors
|
|
|
|
Beyond light and dark, you can set an **accent color** — the color used for buttons, highlights, links, and other interactive elements. LobeHub offers preset theme and neutral colors. Click a swatch to apply it; the interface updates immediately.
|
|
|
|
**Use cases:** Match your brand, reduce visual clutter with a neutral palette, or pick a color that helps you focus.
|
|
|
|
## Agent Language
|
|
|
|
Set the **default language for Agent responses**. Once selected, Agents will prioritize replying in that language unless you explicitly request another in the conversation.
|
|
|
|
**Example:** If you set "Chinese," the Agent will reply in Chinese by default. You can still say "Reply in English" for a specific message.
|
|
|
|
## Code Highlighting
|
|
|
|
When your conversation or document includes code blocks, you can choose a **syntax highlighting theme**. Choose one that complements your overall theme — light themes pair well with light code themes, dark with dark.
|
|
|
|
**Use cases:** Improve readability during code reviews, match your IDE's color scheme for consistency, or reduce eye strain in long coding sessions.
|
|
|
|
## Mermaid Theme
|
|
|
|
Mermaid is a text-based diagram tool. When your conversation or document includes Mermaid diagrams (flowcharts, sequence diagrams, etc.), you can choose a **Mermaid theme** for them. Align it with your overall theme so diagrams look consistent with the rest of the interface.
|
|
|
|
## Mode Selection
|
|
|
|
| Mode | Description |
|
|
| --------------------- | ------------------------------------------------------------------------------------ |
|
|
| **Professional Mode** | Full interface with all panels and options — best for power users |
|
|
| **Simplified Mode** | Streamlined interface with fewer elements — best for focused work or smaller screens |
|
|
|
|
**Tip:** Use Simplified Mode when you want less visual noise and more space for the conversation. Switch to Professional Mode when you need quick access to panels, settings, or multiple views.
|
|
|
|
<Cards>
|
|
<Card href={'/docs/usage/user-interface/shortcuts'} title={'Keyboard Shortcuts'} />
|
|
|
|
<Card href={'/docs/usage/agent/translate'} title={'Conversation Translation'} />
|
|
</Cards>
|