smartsell-theme

smartsell-theme is a reusable React theme library for SmartSell applications and any React runtime built with Vite, Next.js, CRA, or similar tooling.

It ships with:

• ThemeProvider to scope a theme to part of the tree or the whole app.
• useTheme() and useThemeValue() hooks for reactive theme access.
• theme as a live runtime snapshot for utilities and simple reads.
• Built-in LIGHT and DARK presets based on the current SmartSell palettes.
• Runtime helpers to switch, toggle, and patch themes.

Installation

npm install smartsell-theme

yarn add smartsell-theme

Basic usage

import { ThemeProvider } from 'smartsell-theme';

import { AppShell } from './AppShell';

export function App() {
  return (
    <ThemeProvider initialTheme="LIGHT">
      <AppShell />
    </ThemeProvider>
  );
}

Reactive access inside components

import { useTheme } from 'smartsell-theme';

export function ThemeButton() {
  const { theme, themeName, toggleTheme } = useTheme();

  return (
    <button
      type="button"
      onClick={toggleTheme}
      style={{
        backgroundColor: theme.color.primary,
        color: theme.color.onPrimary,
      }}
    >
      Current theme: {themeName}
    </button>
  );
}

Static access with theme

import { theme } from 'smartsell-theme';

export const cardStyle = {
  backgroundColor: theme.color.surface,
  color: theme.color.onSurface,
};

Use theme when you want the current runtime snapshot in helpers, factories, or simple component renders. For guaranteed React updates in nested or memoized components, prefer useTheme() or useThemeValue().

Custom themes

import { ThemeProvider, createTheme } from 'smartsell-theme';

const oceanTheme = createTheme({
  title: 'OCEAN',
  colors: {
    primary: '#005f73',
    primaryLight: '#0a9396',
    primaryDark: '#003845',
    secondary: '#94d2bd',
    background: '#e9f5f2',
    backgroundLight: '#d6ece7',
    surface: '#ffffff',
    text: '#1b2a2f',
    textLight: '#51656b',
    positive: '#2a9d8f',
    negative: '#ae2012',
    warning: '#ee9b00',
    onPrimary: '#ffffff',
    onWarning: '#1b2a2f',
    onSecondary: '#1b2a2f',
    onBackground: '#1b2a2f',
    onSurface: '#1b2a2f',
    onSurfaceLight: '#d7e3e0',
  },
});

export function App() {
  return (
    <ThemeProvider
      initialTheme="OCEAN"
      themes={{
        OCEAN: oceanTheme,
      }}
    >
      <AppShell />
    </ThemeProvider>
  );
}

Runtime theme updates

import { useTheme } from 'smartsell-theme';

export function ThemeControls() {
  const { setTheme, updateTheme } = useTheme();

  return (
    <div>
      <button type="button" onClick={() => setTheme('LIGHT')}>
        Light
      </button>

      <button type="button" onClick={() => setTheme('DARK')}>
        Dark
      </button>

      <button
        type="button"
        onClick={() =>
          updateTheme({
            colors: {
              primary: '#0047AB',
              secondary: '#00A6FB',
            },
          })
        }
      >
        Patch primary colors
      </button>
    </div>
  );
}

Next.js usage

In Next.js App Router, place the provider inside a client component:

'use client';

import { ThemeProvider } from 'smartsell-theme';

export function Providers({ children }: { children: React.ReactNode }) {
  return <ThemeProvider>{children}</ThemeProvider>;
}

Local development

npm install
npm run build

Test in another repository before publishing

Option 1: tarball test

This is the closest flow to a real npm installation.

cd smartsell-theme
npm pack

Then install the generated file in another project:

npm install ../smartsell-theme/smartsell-theme-0.0.1.tgz

Option 2: local file dependency

In another React project:

{
  "dependencies": {
    "smartsell-theme": "file:../smartsell-theme"
  }
}

Then run:

npm install

Option 3: npm link

cd smartsell-theme
npm link

cd ../your-react-app
npm link smartsell-theme

When using npm link, rebuild the library after source changes:

cd smartsell-theme
npm run build

Publish to npm

1. Make sure the package name is available. If smartsell-theme is already taken, prefer a scoped name like @smartsell/theme.
2. Confirm the version in package.json is the one you want to release.
3. Build and validate the package with npm run typecheck and npm run build.
4. Login with npm login.
5. Publish with npm publish.

If you use a scoped package such as @smartsell/theme, publish it with:

npm publish --access public

For the first release of this package, the current version is 0.0.1.