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.accent 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

Editing the code directly

kasy color covers the primary color. To tweak another design-system token (not just accent), 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/02/2026