Theming

BetterTUI uses a typed theme system defined in @bettertui/react and the Rust engine. The React Provider accepts Partial<Theme> to customize colors, spacing, and borders.

Default Theme

The default dark theme matches the engine’s Theme::dark() preset:

import { Provider, useTheme } from '@bettertui/react';

function App() {
  return (
    <Provider>
      <MyApp />
    </Provider>
  );
}

Provider is optional — omitting it uses the default dark theme.

Custom Theme

Pass partial overrides to Provider:

import { Provider } from '@bettertui/react';
import type { Theme } from '@bettertui/react';

const dracula: Partial<Theme> = {
  colors: {
    background: '#282a36',
    surface: '#44475a',
    primary: '#bd93f9',
    text: '#f8f8f2',
    border: '#6272a4',
  },
};

function App() {
  return (
    <Provider theme={dracula}>
      <MyApp />
    </Provider>
  );
}

Dynamic Themes

Use setTheme from useTheme() to apply partial overrides:

import { Provider, useTheme } from '@bettertui/react';

function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <Button onPress={() => setTheme({ colors: { primary: '#ff0000' } })}>
      Red Mode
    </Button>
  );
}

setTheme(partial) deep-merges only the provided fields into the current theme.

Customizing Components

Component styling is driven by the semantic color tokens. Customize any token to affect all components that use it:

const myTheme: Partial<Theme> = {
  colors: {
    primary: '#6366f1',
    accent: '#06b6d4',
    success: '#10b981',
    warning: '#f59e0b',
    error: '#ef4444',
  },
};