# Dark Mode

The gospace Floorplan SDK ([@gospace-ai/floorplan](https://www.npmjs.com/package/@gospace-ai/floorplan)) supports a Dark Mode feature, allowing developers to enable a dark-themed user interface for the embedded floorplan. This enhances accessibility, improves visibility in low-light environments, and aligns with modern design preferences.

{% columns %}
{% column %}

<figure><img src="https://2927481958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxnjAXMBvJYG62hlTa1Lk%2Fuploads%2FwsgUQRc3Q5ud4clbSjcy%2FScreenshot%202025-07-22%20at%2010.28.28.png?alt=media&#x26;token=2f52d13a-913e-4863-8851-8ca3efadab20" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://2927481958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxnjAXMBvJYG62hlTa1Lk%2Fuploads%2FchyYnNvZ2T9pyB4UnEow%2FScreenshot%202025-07-22%20at%2010.27.52.png?alt=media&#x26;token=b663e21d-2300-4b0d-8044-703a4fa67177" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### Key Features

* Optional Dark Mode: Toggle a dark-themed UI for the floorplan to match your application’s aesthetic or user preferences.
* Seamless Integration: Applied via a single configuration parameter, with no additional setup required.
* Consistent Experience: Works in both 2D Mode and 3D Mode, ensuring a cohesive look across rendering modes.
* User-Friendly: Enhances readability and reduces eye strain for users in dark environments.

### Configuration

To enable Dark Mode, set the dark\_mode parameter to true when initialising the SDK:

### Example

```javascript
const sdk = new gospaceFloorplan.FloorplanSDK({
  key: 'floorplan-container',
  access_token: 'client-specific-access-token',
  location_id: '12345',
  layer_id: 'abc123', // Optional: Triggers 2D Mode
  dark_mode: true // Enables Dark Mode
});
sdk.init();
```

### Parameter Details

<table data-header-hidden><thead><tr><th width="111.26171875"></th><th width="86.5703125"></th><th width="328.84765625"></th><th width="93.046875"></th><th></th></tr></thead><tbody><tr><td>Parameter</td><td>Type</td><td>Description</td><td>Required</td><td>Default</td></tr><tr><td>dark_mode</td><td>boolean</td><td>Enables dark-themed UI for the floorplan</td><td>No</td><td>false</td></tr></tbody></table>

### Behavior

* When dark\_mode: true, the floorplan iframe (hosted at <https://floorplan.gospace.app>) renders with a dark color scheme, including darker backgrounds and adjusted text/icon colors.
* When dark\_mode: false (or omitted), the default light-themed UI is used.
* Dark Mode applies consistently in both 2D Mode (with layer\_id) and 3D Mode (without layer\_id).

### Use Case

* Aesthetic Alignment: Match the floorplan’s appearance to a dark-themed application.
* Accessibility: Improve usability for users in low-light settings or with visual preferences for darker interfaces.
* Branding: Create a cohesive look for applications targeting modern, dark-mode-friendly designs.

### Best Practices

* Dynamic Toggling: Allow users to toggle Dark Mode by reinitialising the SDK with updated dark\_mode values based on user preferences.
* Testing: Preview the floorplan in both light and dark modes to ensure visual clarity for all space allocations (e.g., desks, offices, meeting rooms).
* CSS Integration: Use the class\_name parameter to apply custom styles that complement Dark Mode.