Primeng Theme change - primeng

Can I use primeNg 5 omega theme with in my project (which I upgraded from angular 5 to 10) by storing the theme folder inside my assets(my primeng version will remain 10)?

Omega theme has been deprecated since primeng 6 at that version primeng interduce new theme set called nova and luna.
primeng version 10 the team interduce a new design sets bootstrap , material design , material design compact , fluent and primeone ,this update was a complete theme changes like a new guide and internal class changes so any custom theme you just did will not work until you make some changes(most of the time just class change ).
all primeng free themes are css files so changing the theme will required overwrite the main component classes.
in one of our project we almost change most main classes, otherwise you will have to buy a premium primeng theme or get a primeng designer license this will provide some benefit to the primeng teem and you will get a theme base of scss files the will give you a lot of variable so you can tweak the design as you wish.

Related

How to handle design system in micro-frontends?

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.

Material UI theme not being picked up by third party component

I have been working on this Material UI Rich Text Editor over here
https://www.npmjs.com/package/material-ui-rte
I'm trying to follow best practices for both React and Material-UI so that anyone can pick it up and drop it in their project and it just works with Material
I'm having an issue where after running my build script and trying to actually import the editor into a project, I'm not getting any theme passed into the components in the editor, so palette colors or font families are not being represented in the editor at all which I thought they would be
When actually cloning the repo and running the start script, playing with the demo works with the theme when pulling the Editor from the src component but pulling it in from the lib directory like a normal use case would does not work with the theme.
Here is a codesandbox to illustrate this, I've set the theme to have a text color of lime green and the editor is not rendering this color at all. But if you clone and run the actual repo, the editor does use the lime color
https://codesandbox.io/embed/create-react-app-dw7gh
I would love some direction on this. Am I doing something wrong or missing something that material expects? Did I set up my build script wrong?
The theme propagation relies on a singleton to work. I would encourage the usage of #material-ui/styles as a peer dependency. Right now, it seems that you publish it: https://unpkg.com/material-ui-rte#1.1.3/lib/index.js. You should change that.

React Material UI: How to use material-ui platinum themes?

I am trying to use one of the platinum themes from React Material-UI, link below:
https://material-ui.com/premium-themes/
but I can't find instructions for how to use them in my application. Can someone explain how can I use a platinum theme in my React application?
To use one of the free premium themes, just click the link to go to the "Source Code" and then you can look at the code for the example. For instance, for the Paperbase theme you can find the source code for the theme here: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/premium-themes/paperbase/Paperbase.js.
Just copy the parts you want to leverage into your own project and then you can modify it as desired.

Apply theme dynamically on Onsen UI

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.

Custom Theme in Drupal Omega

I am new in drual custom theme designing. I am using Omega theme as bae theme and i created sub theme. I know how to add region and zone. But i am not getting any tutorial how change layout. I enabled custom theme and its showing grid system as front page. I want my custom front page. Any solution or tutorial for creating theme using subtheme.
I am also learning about Omega theme and I have found several free tutorials on this topic.
I recommend http://www.youtube.com/watch?v=9Iob6XLRBdQ&feature=share&list=PL15BE2E8313A4E809
to get going :)
enjoy!

Resources