Octopus
Theming and Branding
The chat widget uses CSS custom properties (CSS variables) to control its visual appearance. Override any variable to match your brand — no widget source code changes required.
CSS Custom Properties Reference
/* Add to your host page CSS or :root to override widget defaults */
:root {
/* Brand colors */
--octopus-primary: #4f46e5; /* Bubble icon, send button, user message bubble */
--octopus-primary-hover: #4338ca; /* Hover state for primary elements */
--octopus-primary-text: #ffffff; /* Text on primary-colored backgrounds */
/* Chat window */
--octopus-bg: #ffffff; /* Widget background */
--octopus-header-bg: #4f46e5; /* Chat header background */
--octopus-header-text: #ffffff; /* Chat header text color */
--octopus-border-radius: 16px; /* Widget corner radius */
--octopus-shadow: 0 8px 32px rgba(0,0,0,0.15);
/* Messages */
--octopus-user-bubble-bg: #4f46e5; /* User message background */
--octopus-user-bubble-text: #ffffff; /* User message text */
--octopus-agent-bubble-bg: #f1f5f9; /* Agent message background */
--octopus-agent-bubble-text: #1e293b; /* Agent message text */
/* Typography */
--octopus-font-family: 'Inter', system-ui, sans-serif;
--octopus-font-size-base: 14px;
--octopus-font-size-sm: 12px;
/* Input area */
--octopus-input-bg: #f8fafc;
--octopus-input-border: #e2e8f0;
--octopus-input-focus: #4f46e5;
/* Tool call cards */
--octopus-tool-bg: #f0f9ff;
--octopus-tool-border: #bae6fd;
--octopus-tool-text: #0369a1;
}Via JavaScript Init
OctopusChat.init({
agentId: 'hr-assistant',
serverUrl: 'https://api.company.com',
theme: {
primaryColor: '#1d4ed8',
primaryTextColor: '#ffffff',
backgroundColor: '#ffffff',
headerBg: '#1d4ed8',
fontFamily: "'Roboto', sans-serif",
borderRadius: '12px',
agentBubbleBg: '#f0f4f8',
userBubbleBg: '#1d4ed8'
}
});Dark Mode
/* Automatic dark mode based on prefers-color-scheme */
@media (prefers-color-scheme: dark) {
:root {
--octopus-bg: #1e2736;
--octopus-header-bg: #2d3a4a;
--octopus-agent-bubble-bg: #2d3a4a;
--octopus-agent-bubble-text: #e2e8f0;
--octopus-input-bg: #2d3a4a;
--octopus-input-border: #3d4f63;
--octopus-tool-bg: #1a2a3a;
--octopus-tool-border: #2d4a5a;
}
}Custom Header Logo
OctopusChat.init({
agentId: 'hr-assistant',
serverUrl: 'https://api.company.com',
headerTitle: 'HR Assistant',
headerLogo: 'https://cdn.company.com/logo-white.svg', // Displayed in chat header
bubbleIcon: 'https://cdn.company.com/chat-icon.svg', // Custom bubble icon
});