History

…
..
apps
how-to
admin-user-views.md
console-mode.md
css.md
dev-chat.md
htmx-architecture.md
monitoring.md
README.md
single-gbui.md
structure.md
suite-manual.md
ui-structure.md

README.md

Chapter 7: User Interface

Customize your bot's appearance and build complete productivity suites.

Overview

Themes control colors, fonts, logos, and overall visual presentation of your bot interface.

Quick Start

# In config.csv
name,value
theme-color1,#0d2b55
theme-color2,#fff9c2
theme-title,My Bot
theme-logo,https://example.com/logo.svg

Theme Structure

mybot.gbai/
└── mybot.gbtheme/
    └── style.css

Configuration Options

Setting	Description	Example
`theme-color1`	Primary color	`#0d2b55`
`theme-color2`	Secondary color	`#fff9c2`
`theme-title`	Bot name in header	`My Assistant`
`theme-logo`	Logo URL	`https://...`

CSS Customization

Create style.css in your .gbtheme folder:

:root {
  --primary: #0d2b55;
  --secondary: #fff9c2;
}

.chat-header {
  background: var(--primary);
}

.user-message {
  background: var(--secondary);
}

Chapter Contents

Theme Structure - File organization
CSS Customization - Styling reference