Dark Mode

Ledger UI includes complete dark mode support at the token, theme, and component levels.

Enabling Dark Mode

import { GtcxConfigProvider } from '@gtcx/theme';
 
function App() {
  return (
    <GtcxConfigProvider mode="dark">
      {/* All components render in dark mode */}
    </GtcxConfigProvider>
  );
}

How It Works

When mode="dark" is set:

1. Token layer: darkSemanticColors overrides are merged into the base semantic colors
2. Theme layer: Ant Design's darkAlgorithm is applied to the theme config
3. Component layer: All Ant Design components automatically use dark variants

Dark Token Values

Dark + Compact

Combine dark mode with compact density:

<GtcxConfigProvider mode="dark" density="compact" />

MetronicLayout Dark Sidebar

The MetronicLayout component has its own dark sidebar variant:

<MetronicLayout
  variant="dark-sidebar"
  sidebarTheme="dark"
  // ... other props
/>

This renders a zinc-950 dark sidebar regardless of the global theme mode. The content area follows the global theme.

Custom Dark Theme

Override dark mode tokens:

import { createAntdTheme } from '@gtcx/theme';
 
const darkTheme = createAntdTheme({
  mode: 'dark',
  colorPrimary: '#38bdf8',       // Lighter blue for dark backgrounds
  colorBgBase: '#0a0a0a',        // Near-black base
});