Function: getThemeStylesContent()

getThemeStylesContent(bundle, themeId?): string

Defined in: css.ts:52

Returns the full CSS string for a theme bundle — all --tt-* custom properties, coarse-pointer overrides, reduced-motion overrides, and container query progressive enhancement — ready to inject into a <style> tag or serve as a static .css file.

Symmetric counterpart to getThemeScriptContent() for CSS. Use <ThemeStyles> from @ttoss/theme2/react for React apps.

When themeId is omitted (canonical 1-theme model), CSS targets :root and the alternate mode selector becomes :root[data-tt-mode="dark"]. Pass themeId only for multi-theme scenarios (Storybook, micro-frontends).

Parameters

Parameter	Type
bundle	ThemeBundle
themeId?	string

Returns

string

Example

// Canonical: no themeId needed (CSS goes to :root)
import { createTheme } from '@ttoss/theme2';
import { getThemeStylesContent } from '@ttoss/theme2/css';

const myBundle = createTheme();

app.get('/theme.css', (_, res) => {
  res.type('text/css').send(getThemeStylesContent(myBundle));
});

// Multi-theme: explicit themeId for scoping
res.type('text/css').send(getThemeStylesContent(myBundle, 'myTheme'));