Theming

If you want to share values across multiple files, you can create a theme file and import it in your components.

Rules for theme files

For static-analysis reasons, theme files must follow these rules:

• They must end in .styles.ts (or .styles.js, or .styles.mjs, etc.)
• They must only use named exports
• They must not import any other files.

Example

export const colors = {
  primary: 'blue',
  secondary: 'green',
};

export const spacing = {
  small: '8px',
  medium: '16px',
  large: '32px',
};

import { colors, spacing } from '../theme.styles';

export function MyComponent() {
  return (
    <div css={{ color: colors.primary, padding: spacing.medium }}>
      Hello, world!
    </div>
  )
};