@dloizides/theme-web

Shared, redux-free RN-web theme system for the dloizides.com portfolio, promoted from the palette + provider that erevna-web and katalogos-web duplicated (src/theme): a ThemeProvider + useTheme, the HSL palette generator, the resolveTheme builder, and the theme types.

The packaged default palette is the exact midnight-green both apps shipped, so migrating an app is a zero visual change. Seed a custom palette from a single @dloizides/design-tokens preset via fromDesignTokens. Any app (including kefi, which had no theme system) can mount ThemeProvider and feed the resolved theme straight into a @dloizides/ui-feedback UiProvider for the shared UI kit.

Install

npm install @dloizides/theme-web
# optional, only if you use fromDesignTokens():
npm install @dloizides/design-tokens

Peer deps: react >= 18 (+ optional @dloizides/design-tokens >= 1.0.0). No react-native dependency — the theme is pure logic + React context; it works in RN-web and DOM-React alike.

Usage

import { ThemeProvider, useTheme, fromDesignTokens } from '@dloizides/theme-web';
import { UiProvider } from '@dloizides/ui-feedback';
import { EREVNA_TOKENS } from '@dloizides/design-tokens';

function Root() {
  return (
    <ThemeProvider tenantThemeConfig={tenantConfig} defaultThemeConfig={fromDesignTokens(EREVNA_TOKENS)}>
      <UiBridge>{children}</UiBridge>
    </ThemeProvider>
  );
}

// Bridge the theme into the shared UI kit's context:
function UiBridge({ children }: { children: React.ReactNode }) {
  const { theme } = useTheme();
  return <UiProvider theme={theme} t={FM}>{children}</UiProvider>;
}

useTheme() returns { theme, mode, toggleMode, setMode, setTenantConfig, setBrandingUrls, darkModePreference, setDarkModePreference }. theme is a fully-resolved ResolvedTheme (colors, palette, semantic, typography, mode, branding).

Dark mode persists to localStorage (DARK_MODE_PREFERENCE, matching the apps) and follows prefers-color-scheme when set to system.

License

MIT