# useDarkMode

*Category:* Utilities
*Section:* Browser & device hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useDarkMode
*Captured:* 2026-04-27T14:59:40.173Z

The useDarkMode hook enables you to listen for the color scheme change and react accordingly.

## useDarkMode

### Example: Example 1

isDarkMode: false

#### React (tsx)

```tsx
import useDarkMode from '@rio-cloud/rio-uikit/useDarkMode';

export default () => {
    const isDarkMode = useDarkMode();

    return (
        <div className='display-flex flex-column justify-content-center align-items-center'>
            <label>isDarkMode:</label>
            <div className='margin-15'>{`${isDarkMode}`}</div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-column justify-content-center align-items-center">
    <label>isDarkMode:</label>
    <div class="margin-15">false</div>
</div>
```

#### Props (json)

```json
isDarkMode
```