# Experience page dashboard dynamic theme

**URL:** <https://forums.losant.com/t/experience-page-dashboard-dynamic-theme/3639>\
**Category:** Help\
**Tags:** experience, dashboard\
**Created:** [March 3, 2021, 11:08am UTC](https://forums.losant.com/t/experience-page-dashboard-dynamic-theme/3639 "2021-03-03T11:08:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![steen\_cummings1](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@steen\_cummings1](https://forums.losant.com/u/steen_cummings1)\
**Post date:** [March 3, 2021, 11:08am UTC](https://forums.losant.com/t/experience-page-dashboard-dynamic-theme/3639/1 "2021-03-03T11:08:57Z")

</div>

Hello,

For the Experience page dashboard, I can only see a toggle button for light and dark theme. Is there an option to be able to set this when making a request to the experience endpoint?  
Hoping there is something similar to the way embedding dashboards work.

---

<div class="post-metadata">

**Author:** ![Dylan\_Schuster](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/dylan_schuster/32/2850_2.png) [@Dylan\_Schuster](https://forums.losant.com/u/Dylan_Schuster)\
**Post date:** [March 3, 2021, 3:34pm UTC](https://forums.losant.com/t/experience-page-dashboard-dynamic-theme/3639/3 "2021-03-03T15:34:42Z")

</div>

Using the UI to create a [dashboard page](https://docs.losant.com/experiences/views/#dashboard-pages), no, you can only select “light” or “dark” directly.

However, when creating a dashboard page, what is really happening behind the scenes is a regular [experience page](https://docs.losant.com/experiences/views/#pages) being created with a body that uses the [element helper](https://docs.losant.com/experiences/views/#element-helpers) to insert a dashboard.

So, as a workaround, you can do the following:

1. In the UI, create a [custom experience page](https://docs.losant.com/experiences/views/#custom-pages).
2. For the body of the page, use the `{{element}}` helper directly.
3. Insert your variable for the theme as passed to the page through the [`pageData` argument](https://docs.losant.com/workflows/outputs/endpoint-reply/#experience-page-response) when rendering the page with an [Endpoint Reply Node](https://docs.losant.com/workflows/outputs/endpoint-reply/).

So, assuming the `pageData` argument includes the following (throwing a context variable in here for further demonstration) …

```json
{
  "theme": "dark"
  "deviceId": "aaaabbbbccccddddeeeeffff"
}

```

… you could pass both to your experience page and render the dashboard with those variables as follows:

```handlebars
{{element
  'dashboard'
  dashboardId='11112222333344445555666'
  theme=pageData.theme
  ctx=(obj deviceId-0=pageData.deviceId)
}}

```

All that said, I’m going to file a feature request to allow for controlling the dashboard theme programmatically to the UI, but until we have that out, you can use the workaround described above.

---

<div class="post-metadata">

**Author:** ![steen\_cummings1](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@steen\_cummings1](https://forums.losant.com/u/steen_cummings1)\
**Post date:** [March 4, 2021, 2:52am UTC](https://forums.losant.com/t/experience-page-dashboard-dynamic-theme/3639/4 "2021-03-04T02:52:41Z")

</div>

Excellent, this is working for me. I also noticed body didn’t have a margin style to overwrite the user agent stylesheet. If anyone else comes across this just append the style before the element:

```
<style>
body {
  margin: 0px;
}
</style>

{{element
  'dashboard'
  dashboardId=request.params.id
  theme=request.query.theme
}}
```