🎨 Appearance
Ophel offers rich appearance customization options to create your unique AI conversation interface.
Theme Mode
Mode Selection
| Mode | Description |
|---|---|
| ☀️ Light Mode | Bright daytime theme |
| 🌙 Dark Mode | Eye-friendly night theme |
Auto Adaptation
When you haven't manually set a theme, Ophel automatically adapts to your system theme setting. After changing system light/dark mode, Ophel responds in real-time and switches accordingly.
Preset Themes
Multiple carefully crafted theme presets:
Light Themes
| Theme | Style |
|---|---|
| 🌐 Google Gradient | Default blue-green gradient |
| 💜 Violet | Elegant purple |
| 🌊 Ocean Blue | Fresh ocean |
| 🌸 Sakura | Soft pink |
| 🌿 Fresh Mint | Vibrant teal |
| ❄️ Nordic Frost | Minimal cool |
| 🍋 Lemon Soda | Bright & lively |
| 📜 Ancient Scroll | Retro paper texture |
| ⬛ Pure Mono | Pure monochrome |
| 🏺 Porcelain | Eastern classic |
| 🍪 Shortbread | Morandi healing |
Dark Themes
| Theme | Style |
|---|---|
| 🖤 Classic Dark | Default dark |
| 🌙 Midnight Blue | Deep blue |
| 🌲 Dark Forest | Deep green |
| 💗 Cyber Neon | High-contrast neon |
| ☕ Coffee | Warm eye-friendly |
| 🌅 Dream Sunset | Purple-orange gradient |
| 🧛 Dracula | Classic geek |
| 🐚 Deep Abyss | Serene teal |
| 🔴 Crimson Moon | Dark red wild |
| 💻 Hacker Terminal | Retro CRT scanlines |
| 🤖 EVA Unit-01 | Mecha contrast |
Custom CSS
Code Editor
Built-in professional code editor:
- ✨ Syntax highlighting
- 📝 Auto-completion
- 🔧 Live preview
- 💾 One-click save
Example Code
css
/* Custom user message bubble */
.user-message {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
padding: 16px;
}
/* Custom AI reply background */
.assistant-message {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
}
/* Custom code block */
pre code {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
}CSS Variables
Ophel exposes CSS variables for customization:
| Variable | Description |
|---|---|
--ophel-primary | Primary color |
--ophel-bg | Background color |
--ophel-text | Text color |
--ophel-border | Border color |
--ophel-radius | Border radius |
Save & Manage
- 📂 Save multiple custom styles
- 🔄 One-click switch between styles
- 📤 Export/import style configs
Layout
Outline Panel
- 📐 Position: Left / Right
- 📏 Width: Drag to adjust
- 🔒 Fixed/floating mode
Font Settings
| Option | Range |
|---|---|
| Body Font Size | 12px - 20px |
| Code Font Size | 10px - 18px |
| Line Height | 1.4 - 2.0 |
Shortcuts
| Shortcut | Function |
|---|---|
Alt + D | Toggle light/dark mode |
Alt + , | Open settings |
Ctrl + Alt + T | Open theme settings |