Changing theme dynamically

1417
7
Jump to solution
02-27-2023 01:26 AM
JonathanAttard
New Contributor II

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!

1 Solution

Accepted Solutions
aa_GIS
by
New Contributor II

hello, 

I found a solution,

in ur widget.tsx use:

appConfig.theme = [the new theme]

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

View solution in original post

7 Replies
aa_GIS
by
New Contributor II

Hi, 

did you find a solution?

thanks!

0 Kudos
WeiYing1
Esri Contributor

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

 

0 Kudos
aa_GIS
by
New Contributor II

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
by
New Contributor II

hello, 

I found a solution,

in ur widget.tsx use:

appConfig.theme = [the new theme]

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

JonathanAttard
New Contributor II

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 🙂

0 Kudos
MicahWilliamson
Occasional Contributor II

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.

0 Kudos
JonathanAttard
New Contributor II

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))

 

0 Kudos