Theming

Theming changes the visual system shared by your app: colors, typography, corner radius, shadows, charts, and the light and dark color modes. Because ADT projects use Tailwind and shadcn/ui, these choices live in normal CSS and project configuration. ADT does not add a separate theming system.

What a shadcn/ui theme controls

shadcn/ui components use semantic tokens instead of hard-coded colors. A button uses tokens such as primary and primary-foreground; a page uses background and foreground; form controls use tokens such as border, input, and ring.

Changing the token values changes every component that uses them without changing the component's JSX. The official shadcn/ui theming guide documents the token names, light and dark values, chart colors, and the radius scale.

A theme commonly includes:

  • Light and dark color tokens for surfaces, text, borders, controls, and status states.

  • Chart colors.

  • Body and heading fonts.

  • Corner radius.

  • Shadows and other visual details added by the theme editor.

Choose a visual theme editor

shadcn/ui Create

shadcn/ui Create is the official visual builder. It lets you preview colors, fonts, radius, icons, and component styles together before applying the result to a project.

Create gives you a short code it calls a preset. For this workflow, treat that code simply as the handoff format for your theme choices.

TweakCN

TweakCN is an open-source visual theme editor for Tailwind CSS and shadcn/ui. You can start from an existing or community-created theme, adjust it visually, and copy the resulting theme into your app.

TweakCN is useful when you want to fine-tune theme values visually or start from a community-created theme.

Note  Icon libraries need extra care Create can include an icon-library choice with the theme settings it packages. Unlike colors, fonts, and radius, changing the icon library can require updates to imports inside existing components. Keep the current icon library unless you want the agent to review and apply those component changes too.

Apply a theme with your agent

Copy the code from shadcn/ui Create or the CSS from TweakCN, then give it to your coding agent.

For a shadcn/ui Create code:

Copy 
Apply the theme from this shadcn/ui Create code to the existing project: <code>

Apply its colors, typography, radius, and other theme values.
Keep the current icon library unless I explicitly ask to change it.
Preserve the app's routes, FileMaker integration, and ADT configuration.
Run the project checks and inspect the result in light and dark mode.

For exported theme CSS:

Copy 
Apply these shadcn/ui theme values to the project: <theme-css>

Merge the light values into :root and the dark values into .dark.
Preserve non-theme CSS and the app's existing behavior.
Run the project checks and inspect the result in light and dark mode.

Warning  Commit before changing the theme Make a commit first so you can inspect the theme diff or return to the previous design without undoing unrelated work.

Check the result

Preview the screens that contain the most UI states, not only the home screen. Check:

  • Light and dark mode.

  • Normal, hover, focus, disabled, selected, and destructive states.

  • Text and icon contrast on every surface.

  • Form controls, dialogs, menus, tables, and charts.

  • The final layout inside FileMaker's Web Viewer, where the available space may differ from the browser preview.