> ## 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. # Theme SuperDoc SuperDoc's UI is styled with CSS variables. `createTheme()` generates a class name that sets those variables; you apply the class to `` and every SuperDoc surface picks it up: toolbar, comments, dropdowns, context menu, popovers. ## The fast path ```javascript theme={null} import { SuperDoc, createTheme } from 'superdoc'; const theme = createTheme({ colors: { action: '#1355FF', // buttons, links, active states bg: '#ffffff', text: '#1f2937', border: '#d1d5db', }, font: 'Inter, sans-serif', radius: '6px', }); document.documentElement.classList.add(theme); new SuperDoc({ selector: '#editor', document: 'contract.docx' }); ``` `theme` is a className string. Apply it to `` (not the editor container) so popovers, dropdowns, and the comments sidebar all pick up the same tokens. Some of those surfaces render outside the editor element. ## What themes affect Toolbar buttons, comments sidebar, dropdowns, context menu, search bar, dialog surfaces. Any chrome SuperDoc renders. The document content itself (paragraphs, headings, tables) renders with its own styles from the DOCX. ## Optional layered stylesheet By default, you can keep using: ```javascript theme={null} import 'superdoc/style.css'; ``` If your app uses cascade layers and you want SuperDoc styles in a named layer, use the optional layered entrypoint: ```css theme={null} @layer reset, superdoc, app; @import 'superdoc/style.layered.css'; @import 'your-app.css' layer(app); ``` ## When to drop to CSS variables `createTheme()` covers the common case. For component-level overrides, use the `vars` option or set raw `--sd-*` variables in your stylesheet: ```javascript theme={null} const theme = createTheme({ colors: { action: '#1355FF', bg: '#ffffff', text: '#1f2937', border: '#d1d5db' }, vars: { '--sd-ui-toolbar-bg': '#f8fafc', '--sd-comments-resolved-bg': '#ecfdf5', }, }); ``` ## Common pitfalls * **Theme class on the wrong element.** Add it to `document.documentElement` (the `` tag), not the editor's container. Popovers render at the body level and won't pick up the theme otherwise. * **CSP environments.** `createTheme()` injects a `