Colors

Colors live in the design system: change one in one place, it changes across the whole app (web + native).

Implementation

1. Run it (or have your assistant run it):

   kasy color --primary "#6750A4"

   Sets the primary color for both modes at once. For different light/dark values:

   kasy color --primary-light "#0485F7" --primary-dark "#2563EB"

   The primary color shows up on buttons, links, selected icons, and the bottom bar. The foreground (text on top of the button) is calculated automatically. The command already updates lib/core/theme/colors.dart in both modes.

   Avoid Color(0xFF...) directly on screens. Use context.colors.primary to inherit the token. That way, the color changes across the whole app with the swap above.

2. To force a specific theme instead of following the system, edit main.dart:

   ThemeMode.system   // default, follows the OS
   ThemeMode.light    // always light
   ThemeMode.dark     // always dark

   The user can also switch it in the app's Settings (if the toggle is on in the template).

For a full rebrand with Figma (colors, font, light/dark), see Figma (rebrand and screens) or the offline guide docs/figma-guia.md in the project.

Information

Quick token reference

The brand color is the only choice that's yours

colors.dart stores only primary. The text that sits on top of it, the hover state and the soft fills are all derived from it automatically, picking light or dark by contrast. That's why rebranding is a one-value change.

Don't hardcode those derived values. We've seen a fixed dark foreground over a mid-luminance color turn a button unreadable. You pick the color; the rest derives.

Editing the code directly

kasy color covers the primary color. To tweak another design-system token (not just the primary), edit lib/core/theme/colors.dart directly, or ask your assistant, with the MCP on, since it already knows where each token lives.

Last updated on 08/23/2026