> ## Documentation Index > Fetch the complete documentation index at: https://stytch.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Theming > How to configure styling for Stytch's pre-built UI components export const StytchCode = ({subPackage, imports, children, ...codeBlockProps}) => { const {pathname} = location; let packageName; if (pathname.includes('/nextjs')) packageName = 'nextjs'; if (pathname.includes('/react')) packageName = 'react'; if (pathname.includes('/vanilla-js')) packageName = 'vanilla-js'; if (!subPackage && pathname.includes('/b2b/')) subPackage = 'b2b'; const importPath = "@stytch/" + packageName + (subPackage ? '/' + subPackage : ''); let code = children; const lines = children.trim().split('\n'); if (lines[lines.length - 1].startsWith(' ')) { code = lines.map(l => l.replace(/^\s{0,4}/, '')).join('\n'); } else if (lines[lines.length - 1].startsWith(' ')) { code = lines.map(l => l.replace(/^\s{0,2}/, '')).join('\n'); } return {` import { ${imports} } from '${importPath}'; ${code}`}; }; The following applies to @stytch/vanilla-js v6, @stytch/react v20, or @stytch/nextjs v22. If you are on an older version, see [documentation here](../../vanilla-js/resources/v5-config#styles). To theme Stytch UI components, use the `presentation` property. You can use one of our pre-built themes, override specific tokens, or create an entirely new theme to match your app's look and feel. ```js theme={null} const presentation = { theme: { ... }, options: { ... }, icons: { ... }, }; ``` ## Pre-built themes You can use our default themes as a basis for your own theme. ### Light theme The light theme is the default and can be imported as `defaultTheme`. {` const presentation = { theme: defaultTheme, };`} ### Dark theme The default dark theme can be imported as `defaultDarkTheme`. {` const presentation = { theme: defaultDarkTheme, };`} ### shadcn theme If you use shadcn/ui, you can use `shadcnTheme` to automatically match Stytch UI to your theme. Here are some examples of how Stytch UI appears with different shadcn/ui themes. [From tweakcn](https://tweakcn.com/editor/theme?theme=neo-brutalism) [From tweakcn](https://tweakcn.com/editor/theme?theme=bubblegum) [From tweakcn](https://tweakcn.com/editor/theme?theme=amethyst-haze) {` const presentation = { theme: shadcnTheme, };`} You will also need to add these lines to your CSS: ```css theme={null} @import 'tailwindcss'; /* Or @stytch/nextjs, @stytch/vanilla-js */ @import '@stytch/react/theme/shadcn.css'; /* [!code ++] */ ``` For dark mode to work, add these lines to your `.dark` class. ```css theme={null} .dark { color-scheme: dark; /* [!code ++] */ --st-dark-mode: 1; /* [!code ++] */ } ``` ### Customization You can override any property in these theme objects. See the [reference below for all available properties](#presentation-theme). {` const presentation = { theme: { ...defaultDarkTheme, primary: '#ef223a', }, };`} ## Automatic light/dark themes You can also provide an array of two themes, and Stytch UI will automatically switch between them based on the user's OS color scheme. {` // Stytch UI's default theme is a light theme const presentation = { theme: [defaultTheme, defaultDarkTheme], };`} ## Creating your own theme You can create your own theme using this template. The template contains the default value for each property. Feel free to delete any properties where you want to use the default. ```js theme={null} const myTheme = { 'color-scheme': 'light', // Fonts 'font-family': 'system-ui, sans-serif', 'font-family-mono': "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace", // Sizes spacing: '4px', 'text-base': '1rem', 'container-width': '400px', 'mobile-breakpoint': '768px', 'rounded-base': '4px', // Durations 'transition-duration': '0.15s', // Shadows - no shadow is used by default shadow: '', // Colors background: 'oklch(1 0 0)', foreground: 'oklch(0.14 0 0)', primary: 'oklch(0.2 0 0)', 'primary-foreground': 'oklch(0.99 0 0)', secondary: 'oklch(0.97 0 0)', 'secondary-foreground': 'oklch(0.2 0 0)', muted: 'oklch(0.97 0 0)', 'muted-foreground': 'oklch(0.56 0 0)', accent: 'oklch(0.97 0 0)', 'accent-foreground': 'oklch(0.2 0 0)', border: 'oklch(0.92 0 0)', input: 'oklch(0.92 0 0)', ring: 'oklch(0.72 0 0)', destructive: 'oklch(0.577 0.245 27.325)', 'destructive-foreground': '#fff', warning: 'oklch(0.67 0.16 58)', success: 'oklch(0.6 0.13 163)', }; ``` ### Additional properties These properties are usually derived from base tokens but can be overridden if your theme needs different values. ```js theme={null} const additionalThemeProperties = { // Defaults to font-family 'header-font': '', // Container defaults to 6x base radius 'container-radius': '', // Defaults to border 'container-border': '', // Button and input defaults to 2x base radius 'button-radius': '', 'input-radius': '', // Default to shadow 'shadow-button': '', 'shadow-input': '', }; ``` ### CSS variables You can also use CSS custom properties (a.k.a. CSS variables) as values. This is useful if you are using Tailwind or another framework that provides them. ```js theme={null} const theme = { primary: 'var(--color-primary)', }; ``` ### TypeScript Themes are typed as `Theme`. This object has every non-derived property marked as required. If you only intend to override a few properties from default, you can use `Partial` instead. {` const overrideTheme: Partial = { // Only overriding font 'font-family': 'Arial, sans-serif', }; const fullTheme: Theme = { // All values need to be filled };`} ## Playground [ You can preview theme and config changes in the playground](https://stytch.com/dashboard/sdk-playground) ## Additional options ### Logo and header customization Use `options.logo` to configure the logo displayed at the top of the components. The logo will be resized to a maximum of 100×50px, but we recommend using an image at least 200×100px to support users with hi-dpi displays. ```js theme={null} const presentation = { options: { url: 'https://example.com/logo.png', alt: 'Your company name', }, }; ``` Use `options.hideHeaderText` to hide the heading and instruction text on some screens. This can be useful to avoid duplicating existing headings on the page and can be combined with setting `theme['container-border']` to 0 to blend the components into the page. ```js theme={null} const presentation = { options: { hideHeaderText: true, }, }; ``` ### Icon customization Icons can be customized by passing an object to `presentation.icons` where the keys are icon IDs and the value is a React component (not element) rendering the icon. A monochrome black and white logo set is available as an alternative to the default color one. {` // Override specific icons const presentation = { icons: { google: iconsWhite.google, }, }; // Using the full set // Not recommended in production since this will include icons that are unused, // but this is useful in development to preview how the two icon sets will look. const presentation = { icons: iconsBlack, };`} Currently, we only allow customizing logos used in OAuth, SSO, email, or crypto products. These logos can be customized: * amazon * apple * bitbucket * coinbase * discord * facebook * figma * github * gitlab * google * linkedin * microsoft * salesforce * slack * snapchat * tiktok * twitch * xTwitter * yahoo * phantom * metamask * binance * gmail * outlook You can also pass in a React component to replace the logo completely. The component should take a `size` prop and spread the rest of the props onto the root element. ```jsx theme={null} const OutlookLogo = ({ size, ...props }) => ( ... ); const presentation = { icons: { outlook: OutlookLogo, }, }; ``` ### Shadow DOM style isolation Use `options.enableShadowDOM` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) to isolate outer page styles. Use this option if you find Stytch UI's styling are being overrode by the page's stylesheet. In `@stytch/react` and `@stytch/nextjs`, this will also create an additional wrapper `
` to act as the shadow root for the component. ## Compatibility Our themes use the [`color-mix` CSS function](https://caniuse.com/wf-color-mix) and the oklch color space to generate variant colors. If you need to support older browsers that do not support either of these, use `addColorFallback()` imported from `/compat` to generate the colors in JavaScript instead. {` const myTheme = { primary: '#ef223a' }; const theme = addColorFallback(myTheme); // We recommend saving the output from addColorFallback and adding it to // your theme to avoid including the function in your production bundle console.log(theme); const config = { presentation: { theme }, };`} ## TypeScript Types are available for all parts of `presentation`. {` const theme: Partial = { primary: '#ef223a' }; const options: PresentationOptions = { ... }; const icons: IconRegistry = { ... }; const presentation: PresentationConfig = { theme, options, icons, };`} ## Reference ### `presentation.theme` The color scheme for the theme. Duration for transitions. #### Fonts Base font for all text. Font for monospace code, such as TOTP setup and recovery code. Header font override. Defaults to base font-family. #### Sizes Base sizing variable. Changing this makes most spacing between elements larger or smaller. Max width for outer container. UI components are larger to accommodate touch screens below this size. Base border radius. Base font size. Override for button border radius. Defaults to 2× rounded-base or 8px. Override for input border radius. Defaults to 2× rounded-base or 8px. Override for outer container border radius. Defaults to 6× rounded-base or 24px. #### Shadows Base box shadow, used for both buttons and inputs. Defaults to none. Box shadow override for buttons. Box shadow override for inputs. #### Colors Background color of the SDK container. Default font color for text in the SDK container. Your primary brand color. This will be applied to primary action buttons such as form submit buttons. Text color contrasting with primary. Your secondary brand color. Text color contrasting with secondary. A neutral, subtle color for areas such as the unfilled part of a progress bar. Text color contrasting with muted, and also the color used for helper and other secondary text. Your accent brand color. This will be applied to backgrounds to draw the user's attention, such as the backup code for TOTP registration. Text color contrasting with accent. Border color for the outer container and dividers. Border color for inputs. Input and button focus ring color. Background and font color for destructive actions and error states. Defaults to red. Text color contrasting with destructive. Background and font color for warning states. Defaults to dark yellow. Background and font color for successful states. Defaults to green. Border color only for the outer container. Defaults to the value of border. ### `presentation.options` The `presentation.options` object customizes non-style-related aspects of the SDK's appearance. You can specify some of them or none at all. We'll use our defaults for the ones you don't specify. When this value is true, the title and description text will not show in the SDK. The configuration object for your custom logo. The URL of your custom logo. The alt text for the logo for non-visual users. This is required for accessibility. When true, the UI components will mount itself in a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). In `@stytch/vanilla-js`, use the `shadow` attribute on the custom elements or the `{ shadow: true }` option on the component constructor instead of this option. This defaults to false. ### `presentation.icons` See [icon customization](#icon-customization).