> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/system-ui/theme-ui/llms.txt
> Use this file to discover all available pages before exploring further.
# InitializeColorMode
> Component to prevent flash of unstyled content during SSR
## Overview
`InitializeColorMode` is a component that prevents a flash of unstyled content (FOUC) when using server-side rendering (SSR). It injects a small script that runs before React hydration to apply the correct color mode class immediately.
## Import
```tsx theme={null}
import { InitializeColorMode } from 'theme-ui'
```
## Usage
### In a Custom Document (Next.js)
For Next.js applications, add `InitializeColorMode` to your custom `_document.js` or `_document.tsx` file:
```tsx pages/_document.tsx theme={null}
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { InitializeColorMode } from 'theme-ui'
export default class MyDocument extends Document {
render() {
return (
)
}
}
```
### In a Custom HTML Template (Gatsby)
For Gatsby applications, add it to your `html.js` file:
```tsx html.js theme={null}
import React from 'react'
import { InitializeColorMode } from 'theme-ui'
export default function HTML(props) {
return (
{props.headComponents}
{props.preBodyComponents}
{props.postBodyComponents}
)
}
```
### In a Custom HTML File
For other frameworks, you can manually add the script to your HTML:
```html index.html theme={null}
```
## How It Works
`InitializeColorMode` renders a `