Theming

The SDK ships with a default theme that controls the visual appearance of all components. You can customise any part of the theme by passing overrides to createTheme().

How It Works

1. Call createTheme() with no arguments to get the default theme.
2. Call createTheme(overrides) to selectively replace any values — everything you don't override keeps its default.
3. Pass the resulting theme to ThemeProvider.

import { ThemeProvider, createTheme } from "@yourmd/yourmd-react-native";

const theme = createTheme({
  colors: {
    "neutral/neutral-white": "#F5F5F5",
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app */}
    </ThemeProvider>
  );
}

Customisable Properties

The createTheme() function accepts a CreateThemeProps object with the following optional fields:

All properties are partial — you only need to provide the values you want to change.

Colours

The default colour palette includes neutrals, blues, and brand colours. Override any colour by key:

const theme = createTheme({
  colors: {
    "neutral/neutral-white": "#FAFAFA",
    "neutral/neutral-black": "#1A1A2E",
    "azure-blue-500": "#4A90D9",
  },
});

Available Colour Tokens

Neutrals:
neutral/neutral-white, neutral/neutral-50, neutral/neutral-100, neutral/neutral-200, neutral/neutral-300, neutral/neutral-400, neutral/neutral-500, neutral/neutral-600, neutral/neutral-700, neutral/neutral-800, neutral/neutral-900, neutral/neutral-950, neutral/neutral-black

Azure Blue:
azure-blue-50 through azure-blue-950

Sky Blue:
sky-blue-50 through sky-blue-950

Brand:
red-100, brand-red-700, brand-spruce-200, brand-spruce-700

Spacing

Override spacing values used for padding, margins, and gaps:

const theme = createTheme({
  spacing: {
    "spacing-16": 20,
    "spacing-24": 28,
  },
});

Available Spacing Tokens

spacing-2, spacing-4, spacing-8, spacing-12, spacing-16, spacing-20, spacing-24, spacing-28, spacing-32, spacing-36, spacing-40

Border Radius

Override border radius values:

const theme = createTheme({
  radius: {
    "radius-8": 12,
    "radius-44": 50,
  },
});

Available Radius Tokens

radius-4, radius-8, radius-10, radius-12, radius-16, radius-20, radius-24, radius-28, radius-32, radius-36, radius-40, radius-44, radius-48, radius-full

Fonts

Override the font family used for each typographic role. You must ensure the font files are loaded in your application before rendering SDK components.

const theme = createTheme({
  fonts: {
    titleLarge: "MyCustomFont-Bold",
    bodyLarge: "MyCustomFont-Regular",
    buttonLarge: "MyCustomFont-SemiBold",
  },
});

Available Font Tokens

Component Variants

For deeper customisation, you can override individual component variant styles. This allows you to change the appearance of specific components in specific states.

Overriding Button Variants

To override component variants, start with the base theme to preserve defaults for the states and variants you don't want to change, then replace only the specific styles you need.

import { createTheme } from "@yourmd/yourmd-react-native";

// First, get the base theme to spread its defaults
const baseTheme = createTheme();

const theme = createTheme({
  buttons: {
    variants: {
      ...baseTheme.buttons.variants,
      primary: {
        ...baseTheme.buttons.variants.primary,
        default: {
          container: {
            backgroundColor: "red",
            borderRadius: 0,
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "row",
          },
          icon: {
            color: "#FFFFFF",
          },
          text: {
            color: "#FFFFFF",
          },
        },
      },
    },
  },
});

This pattern applies to all component variants:

1. Call createTheme() with no arguments to get the base theme.
2. Spread the base theme's variants so you only replace what you need.
3. Pass the overrides as a new call to createTheme().

Button Variants

Buttons have three variants (primary, secondary, tertiary) and two states (default, disabled). Each state defines styles for container, icon, and text.

Buttons also have two sizes (large, small) controlling padding and typography.

Text Input Variants

Text inputs have one variant (default) with three states: default, selected, and complete. Each state defines styles for container, icon, input, and inputPlaceholder.

Checkbox Variants

Checkboxes have one variant (default) with two states: default and selected. Each state defines styles for container, icon, and text.

Radio Option Variants

Radio options have one variant (default) with two states: default and selected. Each state defines styles for container and text.

Bullet Point Variants

Bullet points have one variant (default) with three positions: left, right, and center. Each position defines styles for container.

Full Example

Here is a complete example creating a custom dark-style theme:

import {
  ThemeProvider,
  AssessmentProvider,
  createTheme,
  Assessment,
} from "@yourmd/yourmd-react-native";

const baseTheme = createTheme();

const darkTheme = createTheme({
  colors: {
    "neutral/neutral-white": "#FFFFFF",
  },
  buttons: {
    variants: {
      ...baseTheme.buttons.variants,
      primary: {
        ...baseTheme.buttons.variants.primary,
        default: {
          container: {
            backgroundColor: "red",
            borderRadius: 0,
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "row",
          },
          icon: {
            color: "#FFFFFF",
          },
          text: {
            color: "#FFFFFF",
          },
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <AssessmentProvider config={config}>
        <Assessment onExit={() => { /* handle exit */ }} />
      </AssessmentProvider>
    </ThemeProvider>
  );
}