Theming

Chakra UI Theme

The base theme is defined in src/theme/. It extends Chakra UI's default theme with NHC's design tokens: color palette, typography, component variants.

Per-Organization Branding

Each Organization record can store:

• logo — displayed in the sidebar and BrandBoxLayout
• favicon — set as the browser tab icon
• custom_styles — CSS string injected via a <style> tag

At login, OrganizationContext fetches the org's branding and merges custom colors into the Chakra theme using extendTheme. This means each agency can have a distinct primary color without a separate deployment.

Extending the Theme

Edit src/theme/index.js. Key sections:

colors: {
  brand: { 500: '#your-color' }
}
components: {
  Button: { variants: { primary: { ... } } }
}

Use useToken or useColorModeValue in components to stay theme-aware.