> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-caio-pizzol-docs-ai-core-preset.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Theming overview
Set your brand colors in JavaScript and every SuperDoc component updates: toolbar, comments, dropdowns, everything. For a five-minute walkthrough, see [Getting Started > Theming](/getting-started/theming).
```javascript theme={null}
import { createTheme } from 'superdoc';
const theme = createTheme({
colors: { action: '#6366f1', bg: '#ffffff', text: '#1e293b', border: '#e2e8f0' },
font: 'Inter, sans-serif',
});
document.documentElement.classList.add(theme);
```
Five properties theme the entire UI.
## Optional layered stylesheet
Default usage remains:
```javascript theme={null}
import 'superdoc/style.css';
```
If your application uses CSS cascade layers and you want explicit layer ordering, use:
```css theme={null}
@layer reset, superdoc, app;
@import 'superdoc/style.layered.css';
@import 'your-app.css' layer(app);
```
## `createTheme()`
Pass a config object, get back a CSS class name. Apply it to ``.
```javascript theme={null}
import { createTheme } from 'superdoc';
const theme = createTheme({
name: 'my-brand', // optional: generates sd-theme-my-brand
font: 'Inter, sans-serif',
radius: '8px',
colors: {
action: '#6366f1', // buttons, links, active states
actionHover: '#4f46e5',
bg: '#ffffff', // panels, cards, dropdowns
text: '#1e293b', // primary text
textMuted: '#64748b', // secondary text
border: '#e2e8f0', // all borders
},
// Escape hatch: any CSS variable
vars: {
'--sd-ui-toolbar-bg': '#f8fafc',
'--sd-ui-comments-card-bg': '#f0f0ff',
},
});
document.documentElement.classList.add(theme);
```
`colors` controls the semantic tier: every component inherits from it. The `vars` escape hatch lets you set any `--sd-*` CSS variable directly for fine-grained control.
## SSR support
Use `buildTheme()` to get the raw CSS string for server-side rendering:
```javascript theme={null}
import { buildTheme } from 'superdoc';
const { className, css } = buildTheme({
colors: { action: '#6366f1', bg: '#ffffff', text: '#1e293b' },
});
const html = `
`;
```
## Preset themes
Three presets ship out of the box. Add the class to ``: some SuperDoc elements (popovers, dropdowns) are appended to ``, so they need to inherit from ``.
Google Docs aesthetic. Clean blues, compact toolbar, subtle shadows.
```html theme={null}
```
Microsoft Word aesthetic. Fluent-style borders and surfaces.
```html theme={null}
```
High-contrast technical preset. Teal accents, structured layout.
```html theme={null}
```
## CSS variables (advanced)
`createTheme()` generates CSS variables under the hood. You can also set them directly:
```css theme={null}
:root {
--sd-ui-action: #6366f1;
--sd-ui-bg: #ffffff;
--sd-ui-text: #1e293b;
--sd-ui-border: #e2e8f0;
--sd-ui-font-family: Inter, sans-serif;
}
```
See the [full variable reference](/editor/theming/custom-themes#variable-reference) for every token.
## Next steps
Full API reference, dark theme starter, all CSS variables by component.
Old-to-new variable name mapping. Backward compatibility details.