# 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="/files/MeHqM9dJo7A8SqLNEi4O" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/0pwonDI0OTCf9AfQL8Ps" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.gospace.com/floorplan-sdk/dark-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.