
The theme object is made up of the following data types:

- **Scales**: plain objects or arrays of values for related CSS properties
- **Styles**: global styles that are injected via the `GlobalStyles` component.
- **Variants**: composable variants for your components.
- **Icons**: The svg icon library used by the `Icon` component.

You can read more about the Theme UI theme specification [here](https://theme-ui.com/theme-spec).

## Configuration Flags

The following configuration flags can be enabled in your theme.

| Flag                       | Default     | Description                                                                                                                                 |
| -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `useCustomProperties`      | `true`      | Enables CSS custom properties to help mitigate a flash of unstyled content during rehydration                                               |
| `useRootStyles`            | `false`     | Adds styles defined in `theme.styles.root` to the `<html>` element along with `color` and `background-color`                                |
| `useBodyStyles`            | `true`      | (Will be deprecated in future) Adds styles defined in `theme.styles.root` to the `<body>` element along with `color` and `background-color` |
| `initialColorModeName`     | `'default'` | The key used for the top-level color palette in `theme.colors`                                                                              |
| `useColorSchemeMediaQuery` | `false`     | Initializes the color mode based on the `prefers-color-scheme` media query                                                                  |
| `useBorderBox`             | `true`      | Adds a global `box-sizing: border-box` style                                                                                                |
| `useLocalStorage`          | `true`      | Persists the color mode in `localStorage`                                                                                                   |

<Callout>

These flags are from the Theme UI specs. You can read more about it [here](https://theme-ui.com/theming#configuration-flags).

</Callout>

## Example theme

```js title=theme.ts
import { Theme } from "reflexjs"

const theme: Theme = {
  breakpoints: ["640px", "768px", "1024px", "1280px"],
  colors: {
    text: "#111",
    background: "#fff",
    primary: "#06f",
    modes: {
      dark: {
        text: "#ededee",
        background: "#1a202c",
        primary: "#fb3640",
      },
    },
  },
  fonts: {
    body: "system-ui, sans-serif",
    heading: "system-ui, sans-serif",
    monospace: "Menlo, monospace",
  },
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },

  styles: {
    // Global styles.
    root: {
      "*": {
        m: 0,
        p: 0,
      },
    },
  },

  // Variants
  // <p variant="text.lead" />
  text: {
    color: "text",
    fontFamily: "body",

    lead: {
      fontSize: "2xl",
      lineHeight: "normal",
      fontWeight: "normal",
    },
  },

  // Icons.
  // <Icon name="arrow-right" />
  icons: {
    "arrow-right": `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" ...></path></svg>`,
  },
}
```


标志	默认	描述
`useCustomProperties`	`true`	启用 CSS 自有属性以帮助缓解再水化期间无样式的内容闪动
`useRootStyles`	`false`	在 `<html>` 元素中添加在 `theme.styles.root` 中定义的样式以及 `color` 和 `background-color`
`useBodyStyles`	`true`	（将来会被废弃）在 `<body>` 元素中添加在 `theme.styles.root` 中定义的样式以及 `color` 和 `background-color`
`initialColorModeName`	`'default'`	用于 `theme.colors` 中顶级调色板的 key
`useColorSchemeMediaQuery`	`false`	根据 `prefers-color-scheme` 媒体查询初始化颜色模式
`useBorderBox`	`true`	添加全局样式 `box-sizing: border-box`
`useLocalStorage`	`true`	在 `localStorage` 中持久保存颜色模式

主题规范

配置标志

示例主题