# Supporting Dark mode

The Airtable user interface can be rendered in both Light and Dark modes, including Interfaces and Interface Extensions included on Interface pages. Each Airtable user is able to switch between Light and Dark modes at their convenience and at any time. The recommended approach is to support both Light and Dark modes in your Interface Extension so that it does not frustrate users and look out of place with all users' Airtable appearance settings.

## Using `prefers-color-scheme` in CSS to support Dark mode

```
.theme-a {
  background: #dca;
  color: #731;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}
```

It is common to use a light color scheme by default and then use `prefers-color-scheme: dark` to override colors to a darker variant, as in the example above. Interface Extensions can use `prefers-color-scheme` to automatically adjust to the user's Airtable Appearance setting (Light or Dark), even if it is distinct from the user's system setting.

Using `prefers-color-scheme` in CSS is the recommended approach to implement support for both Light and Dark modes in Interface Extensions.

For more information on `prefers-color-scheme`, see the documentation provided by the Mozilla Developer Network [here](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme).

## Using [useColorScheme](https://airtable.com/developers/interface-extensions/api/ui/hooks/usecolorscheme.md) in JavaScript to support Dark mode

```
import { useColorScheme } from '@airtable/blocks/interface/ui';

function MyApp() {
  const colorScheme = useColorScheme();
  return (
    <div>
      <p style={{color: colorScheme === 'dark' ? 'white' : 'black'}}>
        Color scheme: {colorScheme === 'dark' ? 'Dark' : 'Light'}
      </p>
    </div>
  );
}
```

While CSS is the preferred way to implement support for Dark mode, some Interface Extensions may need to adjust styles dynamically. The simple example above uses the `useColorScheme` hook in JavaScript to adjust styles dynamically based on the user's Airtable Appearance setting (Light or Dark), even if it is distinct from the user's system setting.