Theming the Player

Built-In Themes

Applying a Built-In Theme

import { themes }     from '@atlas-forms/themes-js';
import { FormRenderer } from '@atlas-forms/player-components-react';

// Apply the dark theme to a specific FormRenderer instance
<FormRenderer
  schema={schema}
  theme={themes.dark}
  onSubmit={handleSubmit}
/>

// Apply globally via ThemeProvider (affects all forms in the subtree)
import { ThemeProvider } from '@atlas-forms/themes-js';

<ThemeProvider theme={themes.dark}>
  <App />
</ThemeProvider>

ThemeConfig Interface

// packages/themes-js/src/types.ts

interface ThemeConfig {
  id:       string;
  name:     string;
  tokens:   ThemeTokens;
}

interface ThemeTokens {
  // Colors
  colorPrimary:       string;  // e.g. "#3b82f6"
  colorError:         string;  // e.g. "#ef4444"
  colorSuccess:       string;  // e.g. "#22c55e"
  colorWarning:       string;  // e.g. "#f59e0b"
  colorBackground:    string;  // Page/form background
  colorSurface:       string;  // Input/card background
  colorBorder:        string;  // Input borders
  colorText:          string;  // Primary text
  colorTextMuted:     string;  // Labels, placeholders
  colorTextOnPrimary: string;  // Text on coloured buttons

  // Typography
  fontFamily:         string;
  fontSizeBase:       string;  // e.g. "14px"
  fontSizeSmall:      string;  // e.g. "12px"
  fontWeightLabel:    string;  // e.g. "500"

  // Shape
  borderRadius:       string;  // e.g. "6px"
  borderWidth:        string;  // e.g. "1px"

  // Spacing
  spacingXs:          string;  // e.g. "4px"
  spacingSm:          string;  // e.g. "8px"
  spacingMd:          string;  // e.g. "16px"
  spacingLg:          string;  // e.g. "24px"
}

Creating a Custom Theme

import { createTheme, themes } from '@atlas-forms/themes-js';

// Extend the light theme with brand colours
const brandTheme = createTheme({
  ...themes.light,
  id:   'brand',
  name: 'Brand Theme',
  tokens: {
    ...themes.light.tokens,
    colorPrimary:       '#7c3aed',  // Purple brand colour
    colorTextOnPrimary: '#ffffff',
    borderRadius:       '8px',
    fontFamily:         '"Inter", system-ui, sans-serif'
  }
});

<FormRenderer schema={schema} theme={brandTheme} onSubmit={handleSubmit} />

CSS Custom Properties

The ThemeResolver writes theme tokens as CSS custom properties on the :root element (or on the form container when using per-instance themes). You can read these properties in your own CSS:

/* All atlas-forms CSS custom properties follow the af- prefix */
:root {
  --af-color-primary:   #3b82f6;
  --af-color-error:     #ef4444;
  --af-border-radius:   6px;
  --af-font-family:     system-ui, sans-serif;
  /* ... */
}

/* Override in your shared.css or component styles */
.my-custom-form {
  --af-color-primary:   #7c3aed;
  --af-border-radius:   12px;
}