Changing theme dynamically

[JonathanAttard]

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,Dynamic theme change, 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!

[aa_GIS]

Hi, 

did you find a solution?

thanks!

[WeiYing1]

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

[aa_GIS]

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

[aa_GIS · Accepted solution]

hello, 

I found a solution,

in ur widget.tsx use:

appConfig.theme = [the new theme]

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

[JonathanAttard]

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 🙂

[MicahWilliamson]

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.

[JonathanAttard]

Hi, hopefully it's not too late.

All you need is:

1. Copy one of the themes from 'client\dist\themes' to 'client\your-extensions\themes'.
2. Modify the manifest.json 'name' to match the new folder name within your-extensions.
3. Modify the theme from the files.
4. 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))