I am currently working on two applications. The first is intended for registered users only; anyone with a link can access the second one. The role of the first application is to construct the user interface of the second application. Moreover, the first application depends on the second one.
I’m designing a feature where users of the first application can alter the color theme of the second application from within the first one but without changing the first application’s color theme.
I’ve created a sophisticated color scheme builder for the Material 3 and Material 2 color systems that can change all the colors within an app using the user’s primary, secondary, and tertiary color input. This builder can modify my CSS root colors to change all colors in the application dynamically.
The issue I’m facing is that when I modify the CSS root of the second app, it unintentionally changes the colors of the first app due to the dependency relationship. Any ideas on how I can resolve this?
You could change the theme programatically as described in the topic below. Then you could set up the correct color theme during initialization of your app.
I use it in my ‘settings’ menu to switch between different color schemes, and it works well.
The process is more intricate than merely altering the color scheme of the parent application. When I adjust the color scheme of the dependent child application, it triggers changes in the parent’s color scheme. I’ve attempted to resolve this issue by updating all the inline styles within the child application when it operates within the parent application. However, not all components, such as Buttons and Links, include every style inline.
In an effort to address this, I’ve created a dictionary programmatically to catalog every class from the CSS style sheets. I then add it to the component’s inline style if it’s absent before I update the inline styles. Unfortunately, this strategy hasn’t produced the expected outcomes.
If it’s the dependent relationship that’s causing the issue, can you not have the first app dependent on the second? Instead, have them share data tables, and have the second app update its styles based on data table contents?
There’s obviously a lot of context missing, so that may not work for your situation.