Theme

Udixio’s theme starts with one shared theme.config.ts file. React, Angular and Svelte 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, @udixio/ui-angular and @udixio/ui-svelte provide the framework components and runtime ThemeProvider adapters.

Install the shared theme packages in either application:

bash

npm install @udixio/theme @udixio/tailwind

Then install the component package for your framework:

bash

# React
npm install @udixio/ui-react

# Angular
npm install @udixio/ui-angular

# Svelte
npm install @udixio/ui-svelte

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

The shared `theme.config.ts`

Create this file at the root of the project. The content is the same for all three frameworks:

ts

// 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:

ts

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

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

Each framework consumes the same generated stylesheet:

Framework	Build integration	Runtime provider
React	`vitePlugin` or another bundler plugin	`ThemeProvider` for live web changes
Angular	`udixio-theme` CLI or a compatible build plugin	`ThemeProvider` for live web changes
Svelte	`vitePlugin` or another bundler plugin	`ThemeProvider` for live web changes

Dynamic themes on the web

For a static light/dark theme, the generated CSS is enough. On the web, a React, Angular or Svelte application can use ThemeProvider to regenerate the dynamic layer after the theme configuration changes at runtime. The provider is exported from the matching UI package and accepts the same configuration:

All three adapters use the same Web Worker implementation. If the browser cannot create a worker, generation falls back to the main thread.

import { defineConfig } from '@udixio/tailwind';
import { ThemeProvider } from '@udixio/ui-react';

const themeConfig = defineConfig({
  sourceColor: '#6750A4',
  dynamicSelector: '.dynamic',
});

export default function ThemeProviderReactExample() {
  return (
    <ThemeProvider config={themeConfig}>
      <main className="dynamic">Application content</main>
    </ThemeProvider>
  );
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { defineConfig } from '@udixio/tailwind';
import { Button, ThemeProvider } from '@udixio/ui-angular';

@Component({
  selector: 'theme-provider-angular-example',
  standalone: true,
  imports: [ThemeProvider, Button],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <udx-theme-provider [config]="themeConfig">
      <div class="dynamic">
        <udx-button label="Themed action" />
      </div>
    </udx-theme-provider>
  `,
})
export class ThemeProviderAngularExample {
  protected readonly themeConfig = defineConfig({
    sourceColor: '#6750A4',
    dynamicSelector: '.dynamic',
  });
}

<script lang="ts">
  import { defineConfig } from '@udixio/tailwind';
  import { Button, ThemeProvider } from '@udixio/ui-svelte';

  const themeConfig = defineConfig({
    sourceColor: '#6750A4',
    dynamicSelector: '.dynamic',
  });
</script>

<ThemeProvider config={themeConfig}>
  <div class="dynamic">
    <Button label="Themed action" />
  </div>
</ThemeProvider>

ThemeProvider itself does not toggle the .dark selector — your application still controls that class or uses darkMode: 'media'. Angular uses <udx-theme-provider [config]="themeConfig">…</udx-theme-provider>; Svelte uses <ThemeProvider config={themeConfig}>…</ThemeProvider>. For server rendering, each UI package also exports generateThemeCss(config); pass its result to initialCss to render the stylesheet immediately.

Next steps