# How the Astryx Theme Provider Handles Runtime vs Pre‑built CSS > Discover how the Astryx Theme Provider manages runtime and pre-built CSS. Learn asset injection for dynamic themes versus attribute synchronization for CLI-compiled ones. - Repository: [Meta/astryx](https://github.com/facebook/astryx) - Tags: internals - Published: 2026-07-02 --- **The Astryx Theme component injects CSS style tags dynamically at runtime for developer‑defined themes, but skips injection entirely and only synchronizes HTML attributes when using pre‑built themes compiled via the CLI.** The `Theme` provider in the `facebook/astryx` repository serves as the entry point for applying design system tokens to React applications. It operates in two distinct modes—runtime injection for dynamic themes and static optimization for pre‑built themes—controlled by the internal `__built` flag generated by the `defineTheme` utility. ## Architecture of the Theme Provider The provider distinguishes between runtime and pre‑built CSS through a boolean flag set during theme definition. When you call `defineTheme()`, the resulting object includes metadata that tells the provider whether to inject styles dynamically or rely on existing static CSS files. In [`packages/core/src/theme/Theme.tsx`](https://github.com/facebook/astryx/blob/main/packages/core/src/theme/Theme.tsx), the component uses `useThemeStyleInjection` (lines 97‑176) to manage CSS insertion. This hook checks the `theme.__built` property (line 113) before performing any DOM operations. If the flag is present, the provider skips injection entirely and proceeds only to attribute synchronization. ## Runtime CSS Injection Mode When using a theme created directly with `defineTheme()` without the CLI build step, the provider enters runtime injection mode. This approach generates CSS during component execution and inserts it into the document head. **Style tag generation** occurs inside a `useInsertionEffect` hook to ensure styles exist before painting. The provider creates two distinct `