theme-ops-sdk

React SDK for Theme Ops — fetch and apply themes dynamically from CDN.

Installation

npm install theme-ops-sdk
# or
pnpm add theme-ops-sdk
# or
yarn add theme-ops-sdk

Peer dependencies (must be installed in your project):

npm install react react-dom

Usage

import { useEffect, useMemo, useState } from 'react';

import { ConfigProvider, theme } from 'antd';

import { useThemeOps } from 'theme-ops-sdk';

function App() {
  const [colorMode, setColorMode] = useState('light');

  const { isLoading, getTheme, insertStyles } = useThemeOps({
    organizationId: 'your-org-id',
    appId: 'your-app-id', // optional
  });

  useEffect(() => {
    if (!isLoading) {
      insertStyles();
    }
  }, [isLoading, insertStyles]);

  const antdTheme = useMemo(() => ({
    cssVar: { key: 'theme-ops' },
    ...getTheme(colorMode),
    algorithm:
      colorMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
  }), [colorMode, getTheme]);

  if (isLoading) return <div>Loading theme...</div>;

  return (
    <ConfigProvider theme={antdTheme}>
      <YourApp />
    </ConfigProvider>
  );
}

API

useThemeOps(options)

Main hook that fetches theme assets from the Theme Ops CDN.

Options

| Parameter | Type | Required | Description | | ---------------- | -------- | -------- | ------------------------------------------ | | organizationId | string | Yes | Your organization identifier | | appId | string | No | App-specific identifier within the org |

Returns

| Property | Type | Description | | -------------- | -------------------------------------------- | -------------------------------------------------------- | | isLoading | boolean | true while fetching theme assets from the CDN | | getTheme | (mode: 'light' \| 'dark') => ThemeConfig | Returns design tokens for the given color mode | | insertStyles | () => void | Inserts a <link> stylesheet into document.head |

Types

import type {
  ThemeConfig,
  ThemeTokens,
  UseThemeOpsOptions,
  UseThemeOpsResult,
} from 'theme-ops-sdk';

License

MIT