Theming and CSS Configuration

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/ChatArea.tsx
• src/components/Sidebar.tsx
• src/screens/MainScreen.tsx
• src/components/TitleBar.tsx
• src/data.ts
• vite.config.ts
• package.json
• index.html

Theming and CSS Configuration in Agent Studio define the visual identity and structural layout of the AI command-center. The project uses a high-contrast, dark-mode aesthetic built primarily with Tailwind CSS and React-based styled components. The configuration ensures consistent visual feedback across different platform builds, including desktop via Tauri and mobile via Capacitor.

The system relies on a central palette of zinc and cyan, accented by indigo and emerald to indicate system states and active processes. The build pipeline integrates Tailwind CSS as a Vite plugin to provide utility-first styling with high performance and minimal runtime overhead.

Core CSS Architecture

Agent Studio utilizes Tailwind CSS for nearly all styling requirements. The configuration applies a base background color of bg-zinc-950 and a default text color of text-white to the entire application body.

The application maintains a fixed, non-scrollable viewport (overflow-hidden) to simulate a native terminal environment.
Sources: index.html:14, src/screens/MainScreen.tsx:28

Build Integration

The CSS processing is handled by Vite. The vite.config.ts file includes @tailwindcss/vite as a primary plugin. The package.json lists tailwindcss, autoprefixer, and tailwind-merge as critical dependencies for managing class conflicts and browser compatibility.
Sources: vite.config.ts:9, package.json:44-59

Theming Profiles and Color Palettes

The application implements a "nebula-dark" theme by default, as specified in the initial workspace configuration. Colors serve as semantic indicators for different components and system statuses.

Color Category	Tailwind Base	Application Use Case
Primary Background	zinc-950	Main application containers, body background.
Surface/Borders	zinc-900, zinc-800	Sidebars, message bubbles, dividers, and panel borders.
Primary Action	cyan-400, cyan-600	Active links, primary buttons, system status "Live" indicators.
Accent/Secondary	indigo-400, violet-600	System overlay labels, "Thinking" states, branding gradients.
Success/Connected	emerald-400	Active service indicators, successful sync, file save confirmations.
Alert/Error	rose-400	Delete actions, offline statuses, system warnings.

Sources: src/data.ts:251, src/components/ChatArea.tsx:162, src/components/TitleBar.tsx:32, src/components/PluginMCP.tsx:142

Component-Specific Styling

Sidebar and Navigation Index

The Sidebar utilizes bg-zinc-950 for the container and bg-zinc-900 for active items. It includes resource monitors (CPU, RAM, VRAM) that use dynamic width percentages and color-coded bars:

• CPU: Cyan (bg-cyan-500)
• RAM: Emerald (bg-emerald-500)
• VRAM: Purple (bg-purple-500)

Sources: src/components/Sidebar.tsx:191-210

Chat Timeline and Messages

The ChatArea distinguishes between User and Assistant messages using distinct backgrounds and border colors.

• User Messages: bg-zinc-900 with border-zinc-800.
• Assistant Messages: bg-zinc-950/40 with border-zinc-900 and subtle shadows.
• Embedded Tool Logs: Use a bg-gradient-to-b from zinc-950 to zinc-900 to denote machine-level output.

Sources: src/components/ChatArea.tsx:273-305

Interactive Sandbox Renders

The Sandbox panel on the right side of the interface uses specific theme overlays based on the content type being rendered.

Responsive and Layout Configuration

The application uses a flexbox-based layout to manage the multi-panel environment.

1. Main Screen: Uses h-screen and w-full with overflow-hidden to ensure the application fills the browser or native window without internal scrolling of the base container.
2. Backdrop Blurs: Headers and floating panels use backdrop-blur-md and semi-transparent backgrounds (e.g., bg-zinc-950/70) to create depth.
3. Scrollbars: Custom styling is applied via the scrollbar-thin utility class to maintain the dark aesthetic in scrollable areas like message lists and code buffers.

Sources: src/screens/MainScreen.tsx:28-56, src/components/ChatArea.tsx:162-175

Native Platform Considerations

CSS and theme metadata are optimized for different environments as defined in index.html and platform-specific configs.

• Mobile PWA: meta theme-color is set to #09090b to match the zinc-950 background.
• Tauri Desktop: The tauri.conf.json defines a standard window size (1280x800) but relies on the CSS to handle window decorations and transparency if configured.
• Capacitor Mobile: Splash screens and icons are generated with a black background to maintain theme consistency during app boot.

Sources: index.html:7, src-tauri/tauri.conf.json:15, package.json:17

Conclusion

Theming and CSS Configuration in Agent Studio provide a unified "Developer Terminal" experience. By strictly adhering to a Zinc-based dark theme with high-visibility Cyan and Emerald accents, the system maintains clarity during complex operations such as MCP tool calls and sandbox rendering. The integration of Tailwind CSS within the Vite build process ensures that these styles are delivered efficiently across web, desktop, and mobile platforms.