Theme Specification

Reflexjs themes are based on an extension of the Theme UI specification.

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.

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`

These flags are from the Theme UI specs. You can read more about it here.

Example theme

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>`,
  },
}

Create React App Style props