Theming

Ledger UI uses a token-driven theming system built on Ant Design's ConfigProvider. All visual styling flows from design tokens — consuming applications customize their look by overriding tokens, not writing CSS.

How It Works

@gtcx/tokens (primitives + semantic)
    ↓
@gtcx/theme (createAntdTheme → Ant Design ConfigProvider)
    ↓
Your App (GtcxConfigProvider wraps everything)

Basic Usage

import { GtcxConfigProvider } from '@gtcx/theme';
 
function App() {
  return (
    <GtcxConfigProvider>
      {/* All components inherit the theme */}
    </GtcxConfigProvider>
  );
}

Custom Theme

Override any token to create a platform-specific visual identity:

import { GtcxConfigProvider, createAntdTheme } from '@gtcx/theme';
 
const myTheme = createAntdTheme({
  colorPrimary: '#0284c7',     // Sky blue primary
  colorBgBase: '#ffffff',       // White background
  borderRadius: 8,              // Rounded corners
});
 
function App() {
  return (
    <GtcxConfigProvider theme={myTheme}>
      {/* Components use your custom tokens */}
    </GtcxConfigProvider>
  );
}

Available Token Overrides

createAntdTheme() accepts all Ant Design seed tokens:

Token	Default	Description
`colorPrimary`	`#0ea5e9`	Primary brand color
`colorBgBase`	`#ffffff`	Base background
`colorTextBase`	`#0f172a`	Base text color
`borderRadius`	`6`	Default border radius
`fontSize`	`14`	Base font size
`fontFamily`	`Inter, sans-serif`	Font stack

Theme Modes

// Light mode (default)
<GtcxConfigProvider mode="light" />
 
// Dark mode
<GtcxConfigProvider mode="dark" />
 
// Compact density
<GtcxConfigProvider density="compact" />
 
// Dark + Compact
<GtcxConfigProvider mode="dark" density="compact" />

Component-Level Tokens

The theme maps ~80% of Ant Design's component tokens including Layout, Menu, Button, Card, Input, Table, Modal, Form, Typography, and Tag.

See Tokens for the full token reference.

Icons Dark Mode