Skip to main content
Solved

Styling of custom components in Light and Dark mode

A
Warrior
Forum|alt.badge.img+3

Hi everyone,

In our application (using Universal GUI), we have some custom components. We experience some problems when we want to style the custom components depending on choosen mode (dark / light) in the user preferences by the user.

The custom component is presented in an <iframe> in the browser, however, within the <iframe> the css class ‘dark’ is not applied, causing the custom components not to be adjusted to the selected mode (dark/light). This makes UI/UX of application not as good as we want to.

Any ideas how to solve this?

Best answer by Sebastiaan Meijerink

@André Romijn Hi Andre. We have some ideas about improving your ability to create seamless custom components. Recently we made it possible to call a process flow from within your component via postMessages, but that does take some code in the custom component. And for your css issue we cannot access your component with css nor can you access the Universal css. This is due to security limits in the browser. 

We could however add these as parameter string strings to the url of the previewer. E.G. mycustomcomponent.html?mode=dark

And you could then do something like

const urlParams = new URLSearchParams(window.location.search);
const themeMode= urlParams.get('mode');
document.body.className+= ' ' + themeMode;

With this idea we could also give stuff like the current subject and variant. Would this be valid solution for you? 

View original
Did this topic help you find an answer to your question?
This topic has been closed for comments

A
Warrior
Forum|alt.badge.img+3

@Bart Metselaar any thoughts on this?

S
Moderator
Forum|alt.badge.img

@André Romijn Hi Andre. We have some ideas about improving your ability to create seamless custom components. Recently we made it possible to call a process flow from within your component via postMessages, but that does take some code in the custom component. And for your css issue we cannot access your component with css nor can you access the Universal css. This is due to security limits in the browser. 

We could however add these as parameter string strings to the url of the previewer. E.G. mycustomcomponent.html?mode=dark

And you could then do something like

const urlParams = new URLSearchParams(window.location.search);
const themeMode= urlParams.get('mode');
document.body.className+= ' ' + themeMode;

With this idea we could also give stuff like the current subject and variant. Would this be valid solution for you? 

Bart Metselaar
1 person likes this
  • Bart Metselaar
    Bart Metselaar
A
Warrior
Forum|alt.badge.img+3

Hi @Sebastiaan Meijerink 

Thx for the reply.

Yes, passing parameters could really help, as we already use the same technique to pass parameters to our components ourselves (eg. tsf_appl_id for doing calls to indicium in a multi tenant enviroment or variables for selected record to display the right content)

However, we build our url's to our custom components in the code and i don't see how you can add the parameters to our url's or will you append them to our url? 

​​​​​​​Perhaps am i missing something ;-)

S
Moderator
Forum|alt.badge.img

@André Romijn Yes we could append them. We would obviously need to check that we don't overwrite params with same name etc..And make the choice if we could use the hashroute.

Like; our_custom_component.html?tsf_appl_id=5#?mode=dark&subject=table1

 

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings