> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pylon.mortgage/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme reference

> Complete reference for Element theming

This page documents all available theme properties for customizing Pylon Elements.

## Theme structure

```typescript theme={null}
type Theme = {
  Global?: GlobalThemeV2;
  Components?: ComponentsTheme;
  Page?: CSSObject;
};
```

## GlobalThemeV2

```typescript theme={null}
type GlobalThemeV2 = {
  fonts?: Fonts;
  colors?: Colors;
};
```

### Fonts

```typescript theme={null}
type Fonts = {
  fontFamily?: string;
  fontUrls?: string[];
};
```

### Colors

```typescript theme={null}
type Colors = {
  core?: CoreColors;
  text?: TextColors;
  background?: BackgroundColors;
  loanStatus?: LoanStatusColors;
};
```

### CoreColors

```typescript theme={null}
type CoreColors = {
  primary?: string;
  neutral?: string;
  error?: string;
  warning?: string;
  success?: string;
};
```

### TextColors

```typescript theme={null}
type TextColors = {
  primary?: string;
  secondary?: string;
  disabled?: string;
  contrast?: string;
  error?: string;
  warning?: string;
  success?: string;
};
```

### BackgroundColors

```typescript theme={null}
type BackgroundColors = {
  application?: string;
  content?: string;
  contentDisabled?: string;
};
```

### LoanStatusColors

```typescript theme={null}
type LoanStatusColor = {
  backgroundColor?: string;
  color?: string;
};

type LoanStatusColors = {
  approved?: LoanStatusColor;
  inReview?: LoanStatusColor;
  preApproved?: LoanStatusColor;
  withdrawn?: LoanStatusColor;
  suspended?: LoanStatusColor;
  declined?: LoanStatusColor;
};
```

## ComponentsTheme

```typescript theme={null}
type ComponentsTheme = {
  Typography?: Typography;
  Container?: Container;
  Button?: Button;
  Form?: Form;
  Communications?: Communications;
};
```

### Typography

```typescript theme={null}
type Typography = {
  Title?: CSSObject;
  SubTitle?: CSSObject;
  CardTitle?: CSSObject;
  CardSubTitle?: CSSObject;
  LabelPrimary?: CSSObject;
  LabelSecondary?: CSSObject;
  Link?: CSSObject;
  Body?: CSSObject;
  SubText?: CSSObject;
};
```

### Container

```typescript theme={null}
type Container = {
  Card?: CSSObject;
  ApprovalStatus?: CSSObject;
  Loader?: CSSObject;
  LoanProgressDetailed?: CSSObject;
  LoanProgressSimple?: CSSObject;
};
```

### Button

```typescript theme={null}
type Button = {
  Primary?: CSSObject;
  Neutral?: CSSObject;
  Negative?: CSSObject;
  ListItem?: CSSObject;
};
```

### Form

```typescript theme={null}
type Form = {
  TextInput?: CSSObject;
  Chip?: CSSObject;
  CheckBox?: CSSObject;
  Radio?: CSSObject;
  Tags?: CSSObject;
  Select?: CSSObject;
  InlineErrorMessage?: CSSObject;
  ErrorAlert?: CSSObject;
};
```

### Communications

```typescript theme={null}
type Communications = {
  PreapprovalLetter?: PreapprovalLetter;
};
```

### PreapprovalLetter

```typescript theme={null}
type PreapprovalLetter = {
  primaryColor?: string;
  normalFontUrl?: string;
  boldFontUrl?: string;
};
```

## Page

`Page` on the `Theme` is a raw CSS map applied at the root level (`Page?: CSSObject`).

```typescript theme={null}
type Page = CSSObject;
```

## CSSObject

The `CSSObject` type uses the [CSSType](https://github.com/frenic/csstype) module and includes all properties and values available in CSS. It's an infinitely nested object that supports all CSS properties.

## Example

```tsx theme={null}
const theme: Theme = {
  Global: {
    fonts: {
      fontFamily: "Inter, sans-serif",
      fontUrls: [
        "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
      ],
    },
    colors: {
      core: {
        primary: "#0066CC",
        neutral: "#666666",
        error: "#CC0000",
        warning: "#FF9900",
        success: "#00AA00",
      },
      text: {
        primary: "#000000",
        secondary: "#666666",
      },
      background: {
        application: "#FFFFFF",
        content: "#F5F5F5",
      },
    },
  },
  Components: {
    Button: {
      Primary: {
        backgroundColor: "#0066CC",
        color: "#FFFFFF",
        borderRadius: "4px",
      },
    },
  },
};
```