← All Docs

Building Apps

Themes & Design Systems

Webase gives you control over your app's visual identity through themes, Tailwind CSS configuration, and built-in dark mode support. You can set a design direction during generation and refine it anytime through chat or direct code editing.

Theme Selection During Generation

When you create a new app, you can specify a visual style as part of your description. The AI uses this to choose colors, typography, spacing, and overall design language. For example:

  • "Build a task manager with a clean, minimal design using lots of white space."
  • "Create a dashboard with a dark professional theme and blue accent colors."
  • "Make a fun, colorful kids' education app with rounded corners and playful fonts."

The more specific you are about the visual style, the closer the generated app will match your vision.

Tailwind CSS Configuration

Your app uses Tailwind CSS loaded from the CDN. Custom configuration goes in the public/index.html file using an inline script tag:

<script>tailwind.config = { theme: { extend: { colors: { brand: '#4F46E5' } } } }</script>

This lets you define custom colors, fonts, spacing, breakpoints, and any other Tailwind theme extensions. The AI manages this configuration automatically when you request design changes through chat.

Important: Do not create a tailwind.config.js file. Tailwind is loaded via CDN, so all configuration must be inline in public/index.html. The AI follows this rule automatically.

Dark Mode

Webase apps support dark mode using Tailwind's class-based strategy. Here's how it works:

1

Tailwind Config Sets the Mode

The public/index.html file includes darkMode: 'class' in the Tailwind config. This tells Tailwind to activate dark styles when a dark class is present on the root element.

2

Toggle Script Manages the Class

A small script in public/index.html checks the user's preference (from localStorage or the system setting) and adds or removes the dark class on the <html> element.

3

Components Use Dark Variants

Your React components use Tailwind's dark: prefix to define dark mode styles. For example, bg-white dark:bg-gray-900 makes a background white in light mode and dark gray in dark mode.

Design System Management

As your app grows, maintaining a consistent design becomes important. Here are some tips:

  • Ask the AI to establish a design system. Say something like "Use a consistent color palette with primary, secondary, and accent colors throughout the app."
  • Create reusable components. Ask the AI to extract common UI patterns into shared components like buttons, cards, modals, and form inputs.
  • Use custom Tailwind colors. Define brand colors in the Tailwind config so you can use them everywhere with classes like text-brand or bg-brand.
  • Request a style overhaul. If the design needs a refresh, ask the AI: "Redesign the app with a modern, minimalist look using a blue and white color scheme." The AI will update all components consistently.

Tip: You can change your app's entire visual direction at any time through chat. Say "switch to a dark theme with purple accents" and the AI will update the Tailwind config, component styles, and dark mode setup in one pass.