# Themes

Source: https://docs.interop.io/browser/capabilities/windows/themes/index.html

## Overview

**io.Connect Browser** has two built-in themes - dark and light. You can control the themes programmatically by using the Themes API.

The Themes API is accessible via the [`io.themes`](https://docs.interop.io/browser/reference/javascript/themes/api/index.md) object.

> ℹ️ *For details on how to customize the **io.Connect Browser** themes via CSS, see the [Developers > Platform Styles](https://docs.interop.io/browser/developers/platform-styles/index.md) section.*

## Configuration

Use the `themes` property of the configuration object for initializing the [`@interopio/browser-platform`](https://www.npmjs.com/package/@interopio/browser-platform) library in the [Main app](https://docs.interop.io/browser/developers/browser-platform/overview/index.md) to specify custom settings for the Themes library:

```javascript
import IOBrowserPlatform from "@interopio/browser-platform";

const config = {
    licenseKey: "my-license-key",
    themes: {
        defaultTheme: "os"
    }
};

const { io } = await IOBrowserPlatform(config);
```

Configuring the Themes library is optional. The configuration object for the `themes` property has the following properties:

| Property | Type | Description |
|----------|------|-------------|
| `defaultTheme` | `"os"` \| `"light"` \| `"dark"` | Specifies the default theme for **io.Connect Browser**. Set to `"os"` to use the default theme as set in the OS. |

## Listing All Themes

To get a list of all available themes, use the [`list()`](https://docs.interop.io/browser/reference/javascript/themes/api/index.md#API-list) method:

```javascript
const allThemes = await io.themes.list();
```

## Current Theme

To get the currently selected theme, use the [`getCurrent()`](https://docs.interop.io/browser/reference/javascript/themes/api/index.md#API-getCurrent) method:

```javascript
const currentTheme = await io.themes.getCurrent();
```

## Selecting Themes

To select a theme, use the [`select()`](https://docs.interop.io/browser/reference/javascript/themes/api/index.md#API-select) method:

```javascript
const themeName = "dark";

await io.themes.select(themeName);
```

## Theme Events

To get notified when the theme changes, use the [`onChanged()`](https://docs.interop.io/browser/reference/javascript/themes/api/index.md#API-onChanged) method:

```javascript
const handler = newTheme => console.log(newTheme.name);

io.themes.onChanged(handler);
```

## API Reference

For a complete list of the available Themes API methods and properties, see the [Themes API Reference Documentation](https://docs.interop.io/browser/reference/javascript/themes/api/index.md).