Function: getThemeStylesContent()

getThemeStylesContent(bundle, themeId?, options?): string

Defined in: css.ts:53

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/fsl-theme/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	Description
bundle	ThemeBundle	-
themeId?	string	-
options?	{ systemModeFallback?: boolean; }	-
options.systemModeFallback?	boolean	Emit the @media (prefers-color-scheme) fallback block (themeId-less bundles only). Default true. Pass false for apps whose defaultMode is a fixed 'light'/'dark' rather than 'system'.

Returns

string

Example

// Canonical: no themeId needed (CSS goes to :root)
import { createTheme } from '@ttoss/fsl-theme';
import { getThemeStylesContent } from '@ttoss/fsl-theme/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'));