Theme

Udixio’s theme starts with one shared theme.config.ts file. React and Angular use the same configuration contract: a source color is converted into color, typography and state tokens, then emitted as a stylesheet for Tailwind CSS.

Packages

The responsibilities are deliberately separated:

• @udixio/tailwind exposes defineConfig and TailwindPlugin.
• @udixio/theme contains the color engine, palettes, variants, loader and build integrations.
• @udixio/ui-react and @udixio/ui-angular provide the framework components.

Install the shared theme packages in either application:

npm install @udixio/theme @udixio/tailwind

Then install the component package for your framework:

# React
npm install @udixio/ui-react

# Angular
npm install @udixio/ui-angular

See Get started — React or Get started — Angular for the build integration.

The shared theme.config.ts

Create this file at the root of the project. The content is the same for React and Angular:

// theme.config.ts
import { defineConfig } from '@udixio/tailwind';
import { Variants } from '@udixio/theme';

export default defineConfig({
  sourceColor: '#6750A4',
  variant: Variants.Udixio,
  contrastLevel: 0,

  darkMode: 'class',
  darkSelector: '.dark',

  palettes: {
    brand: '#FF5722',
  },

  colors: {
    highlight: '#FFB300',
  },

  fontFamily: {
    expressive: ['Playfair Display', 'Georgia', 'serif'],
    neutral: ['Inter', 'system-ui', 'sans-serif'],
  },
});

defineConfig combines the core theme options with the Tailwind and typography options. It also wires TailwindPlugin and FontPlugin, so an application normally does not instantiate those plugins itself.

Build output

The Node/CLI build writes udixio.generated.css by default. Configure the path when the stylesheet belongs in a specific source directory:

// theme.config.ts
import { defineConfig } from '@udixio/tailwind';

export default defineConfig({
  sourceColor: '#6750A4',
  outFile: 'src/styles/udixio.generated.css',
});

The React and Angular guides use different build commands, but both consume this same generated stylesheet:

Dynamic themes on the web (React)

For a static light/dark theme, the generated CSS is enough. On the web, a React application can additionally use ThemeProvider when it must regenerate the dynamic layer after changing the theme configuration at runtime:

import { ThemeProvider } from '@udixio/ui-react';
import themeConfig from './theme.config';

export function App() {
  return (
    <div className="dynamic">
      <ThemeProvider config={themeConfig} />
      {/* application */}
    </div>
  );
}

ThemeProvider is a React runtime adapter; it is not part of the shared configuration contract and is not needed by Angular to consume the generated stylesheet. It does not toggle the .dark selector itself: your application still controls that class or uses darkMode: 'media'.

Next steps