Theming, Caching & DOM Injection

The SDK provides powerful utilities to instantly theme your frontend application and optimize performance using built-in caching.

1. In-Memory Caching

Content configurations rarely change minute-to-minute. To prevent unnecessary network requests, the SDK automatically caches all configurations and content blobs in memory.

• The first call to getConfig('theme') makes an HTTP request.
• All subsequent calls to getConfig('theme') return instantly (0ms) from memory.

If you ever need to force a refresh (e.g., an operator just published a new layout), you can manually clear the cache:

sdk.content.clearCache();

2. Instant DOM Theming

A common use case for dynamic configuration is applying brand colors and CSS variables. Instead of manually iterating through a config object and setting styles, the SDK provides a applyThemeToDom() helper.

How it Works

1. Fetch the theme namespace from the backend.
2. Pass the config object to applyThemeToDom().
3. The SDK automatically converts camelCase keys (e.g., primaryColor) into CSS variables (e.g., --primary-color) and injects them into the browser's :root element.

Supported Types

The helper automatically handles string, number, and boolean values.

// 1. Fetch theme config (e.g., { primaryColor: '#ff0000', darkMode: false, borderRadius: '8px' })
const theme = await sdk.content.getConfig('theme');

// 2. Inject into DOM
sdk.content.applyThemeToDom(theme);

Using the CSS Variables in your App

Once injected, your standard CSS can use these variables dynamically:

.btn-primary {
  background-color: var(--primary-color, #cccccc); /* Fallback to #ccc */
  border-radius: var(--border-radius, 4px);
}

body.dark-theme {
  display: var(--dark-mode, block); /* Hidden if dark-mode is false */
}