# theme-tokens.ts **[Source](https://github.com/ubugeeei-prod/ox-content/blob/main/npm/vite-plugin-ox-content/src/theme-tokens.ts)** > 2 documented symbols. Read the signatures first, then expand each item for parameters, return types, and examples.
2 symbols 1 functions 1 types 2 parameters 1 returns
## Reference
typeThemeTokens = Record<string, string>Free-form --octc-* custom properties for themes that need more than the typed c…

Free-form --octc-* custom properties for themes that need more than the typed colors / fonts / layout fields.

Keys are written without the --octc- prefix, so "surface-glass" becomes --octc-surface-glass. This is the seam that keeps the two theme axes independent: a color package can restyle code-block line markers, brand accents, and surface textures purely through tokens, while a skin package lays out geometry against those same tokens without knowing any color.

Signature

export type ThemeTokens = Record<string, string>

View source

fntokensToCss(light: ThemeTokens, dark: ThemeTokens): stringRenders light and dark token records as the three selectors the SSG runtime swi…2 paramsreturns string

Renders light and dark token records as the three selectors the SSG runtime switches between: an explicit [data-theme="dark"] opt-in, the OS prefers-color-scheme fallback, and the :root base.

Emitted after the typed color variables and before the theme's own css, so a token can override a typed color and raw css can override a token.

Signature

export function tokensToCss(light: ThemeTokens, dark: ThemeTokens): string

View source

Parameters

Returns

string