topic Re: Changing theme dynamically in ArcGIS Experience Builder Questions

Changing theme dynamically

JonathanAttard — Mon, 27 Feb 2023 09:29:24 GMT

Hi,

I've recently created a custom theme and widget that allows users to toggle between light and dark modes. However, I am facing an issue in changing themes from a button click during runtime using the ArcGIS API. I have tried using ThemeProvider, ThemeContext, ThemeManager, and jimu-for-test versions, but I'm unable to update the colors of the desired theme on the page.

I understand that a similar post was made about a year ago,, but unfortunately, there are still no responses to it.

I'm not very familiar with React and the Jimu packages, and the documentation on these functions is not very clear. So, I would appreciate any help or guidance that you can provide.

Thank you!

Re: Changing theme dynamically

aa_GIS — Mon, 13 Mar 2023 09:49:47 GMT

Hi,

did you find a solution?

thanks!

Re: Changing theme dynamically

Wei_Ying — Thu, 16 Mar 2023 21:35:18 GMT

Hi,

Based on my understanding, you have create a custom theme and want to be able to change theme at runtime right? But your problem is to change apply the theme on the fly?

I am not sure if you have follow the ExB theme development guides, but here are some tutorial and sample code that might help.
https://developers.arcgis.com/experience-builder/guide/theme-development/
https://developers.arcgis.com/experience-builder/sample-code/themes/demo-theme/

Thanks

Re: Changing theme dynamically

aa_GIS — Mon, 20 Mar 2023 05:04:31 GMT

Hello,

I used the sample and created custom themes just fine! I want to switch between themes using a button, that's my issue now.

thanks

Re: Changing theme dynamically

aa_GIS — Sat, 25 Mar 2023 07:19:20 GMT

hello,

I found a solution,

in ur widget.tsx use:

appConfig.theme = [the new theme]

props.dispatch(appActions.widgetStatePropChange("r", "r", appConfig.theme))

Re: Changing theme dynamically

JonathanAttard — Tue, 28 Mar 2023 09:17:09 GMT

Hi,

Thanks, that's exactly what I needed.

I should note that I got the 'appConfig' from:
import 'getAppStore, appActions' from 'jimu-core'
var appConfig = getAppStore().getState().appConfig;

For the 'appConfig.theme' I just entered the URI of the theme, for example: 'themes/default/'

Again, thank you so much 🙂

Re: Changing theme dynamically

MicahWilliamson — Wed, 10 Jan 2024 21:00:41 GMT

I have users asking for this. Any Chance you could share the custom theme?

Otherwise I am just going to recreate everything in another page and have a link at the top.

Re: Changing theme dynamically

JonathanAttard — Thu, 08 Feb 2024 08:53:03 GMT

Hi, hopefully it's not too late.

All you need is:

Copy one of the themes from 'client\dist\themes' to 'client\your-extensions\themes'.
Modify the manifest.json 'name' to match the new folder name within your-extensions.
Modify the theme from the files.
Use the code by @aa_GIS to then switch between themes.

Hope this helps.

import { getAppStore } from 'jimu-core' var newTheme = "themes/DarkMine/" // 'DarkMine' is the new folder name in your-packages/themes const appConfig = getAppStore().getState().appConfig; appConfig.theme = newTheme dispatch(appActions.widgetStatePropChange("r", "r", appConfig.theme))