I'm working on a customizable application based on Onsen UI. I'd like to know if Onsen UI exposes a method (or if there is some way to hack around it) to set a theme dynamically, in the same way components.onsenui.io does for previewing a generated theme.
What I'd like to accomplish is that the user can select the theme colors for his own application. So i would need some way to set the ui colors using Javascript instead of downloading a static/generated theme.
Thanks
No, Onsen UI doesn't provide APIs to change theme dynamically.
Changing or editing the stylesheet programmatically is the way to do this.
Related
In the micro-frontend every application would be running separately, in that case, each one of the applications will be having its own CSS.
Let's assume we are taking MUI as the UI library. So each application that uses MUI will be having its own theme provider.
Now the stakeholder wants to change the button's color from blue to black, in this scenario I have to manually go and change the color to each one of the applications separately.
Do we have to do like this only or any other pattern is available in Micro-Frontend to solve this Design System issue?
Please help me with your suggestions !
You can create a theming package for your micro-frontend apps. This package provides a theme object for Mui ThemeProvider. It can have some default theme properties and some additional (editable) properties which from an API.
Then you need a portal where your client or stakeholder can edit the theme, from some theme editor app. Basically, that will UPDATE your theme object (database).
Your package will GET those changes and update all your micro-frontend apps. I have seen a similar kind of implementation in a Turborepo app.
I'm using material UI 4.9.x and it doesn't seem possible to use MUI in an iframe with the global styles.
I'm trying to use a React portal to inject the content into the iframe.
THAT part works and my MUI context menu works properly, just has the wrong styles.
I'm trying to inject the styles via CssBaseline but that gets injected into the host window not the iframe window.
I've verified this by looking at the DOM and I can see the elements created there under and not in the iframe.
How would I go about injecting this, completely, into the iframe window.
One idea I had was to change the current / global document and window objects to represent the iframe but worried that might be too hacky.
I am using Braintree Drop Ui in my react application. Can anybody help me out how to customize the UI because its looking to ugly
See how to customize your UI e.g. via CSS or field overrides in the "Customize your UI" section of the official documentation.
If that doesn't fit your needs you can also edit the UI on the client side. E.g. to customize the headings use document.getElementsByClassName("braintree-heading") and set the style attributes of its items.
we use the ExtJS "gray" theme in our app, is there a way i can use the "Accessibility" theme for a specific component? a window which includes a very basic form
thanks
The extjs theme is applied using CSS style sheets on certain html element types with certain classes. Once you load a second theme css into the same page, the first theme is overwritten completely.
So it is not possible to mix them in a single app.
You would have to use two HTML pages, which load different style sheets, but same ext.js, and use two different browser windows or an iframe.
I am learning qooxdoo framework and I am going to develop web app on mobile device. However here comes a problem. I do not know how to set the background color for qx.ui.mobile.core.Widget. In terms of qx.ui.core.Widget(Another class, I think this is for desktop application), there are methods to set background color. However, for qx.ui.mobile.core.Widget which is used for developing mobile app, I can find any method in the API reference.
I am trying to do this by 'addCssClass()' method, it works for label and so on, however, it is not working for composite widget. By default, the background image of mobile app is the image used in iPhone group style tableview. However, what I am trying to do is to modify the background image to a pure background color.
I do not know how to accomplish that, can anyone give me some ideas? Thank you!
there are several ways to alter a qx.Mobile widget:
if you use the "getContainerElement()" method, you get the HTML element directly.
There you can set any attribute, you could set in plain HTML, too.
Another possibility is to add a class, as you mentioned: "addCssClass("foo")"
You just have to add your css selector statement to your projects resource folder:
.. resource/ yourproject /css/styles.css
.foo{
background-color:red;
}
or you could even set the style with brute force, through http://demo.qooxdoo.org/current/apiviewer/#qx.bom.element.Style
set()
Now choose your weapon =)