@theme-ui/core

npm install @theme-ui/core @emotion/react

import { ThemeProvider } from '@theme-ui/core'

function App() {
  return (
    <ThemeProvider theme={{ colors: { primary: '#33e' } }}>
      <YourApp />
    </ThemeProvider>
  )
}

import { useThemeUI } from '@theme-ui/core'

function MyComponent() {
  const context = useThemeUI()
  const { theme } = context
  
  return <div>Primary color: {theme.colors.primary}</div>
}

import { merge } from '@theme-ui/core'

const baseTheme = {
  colors: { primary: 'blue' }
}

const customTheme = {
  colors: { secondary: 'red' }
}

const mergedTheme = merge(baseTheme, customTheme)
// Result: { colors: { primary: 'blue', secondary: 'red' } }

merge(a: Theme, b: Theme): Theme
merge.all<T>(...themes: Partial<T>[]): T

/** @jsxImportSource @theme-ui/core */

export function MyComponent() {
  return <div sx={{ color: 'primary', p: 3 }}>Styled with sx</div>
}

import { ThemeProvider, useThemeUI, merge, jsx } from '@theme-ui/core'

// In your tsconfig.json or jsconfig.json:
{
  "compilerOptions": {
    "jsxImportSource": "@theme-ui/core"
  }
}

// Automatically used in development mode

import type {
  CSSObject,
  CSSOthersObject,
  CSSProperties,
  CSSPseudoSelectorProps,
  ColorMode,
  ColorModesScale,
  Label,
  ResponsiveStyleValue,
  Scale,
  StylePropertyValue,
  TLengthStyledSystem,
  ThemeDerivedStyles,
  ThemeStyles,
  ThemeUICSSObject,
  ThemeUICSSProperties,
  ThemeUIExtendedCSSProperties,
  ThemeUIStyleObject,
  VariantProperty,
  ThemeUIJSX,
} from '@theme-ui/core'