I have to make interface suitable with two different color themes - light and dark. Color theme is being selected by user via button/switch/whatever.
The problem (as I think) is that my React application is being bundled via Webpack, so all my SASS-compiled styles is being embedded into the main HTML template as <style>...</style> (each style tag references to its SASS-file). I know, that I can assign some class name to app wrapper and then write nested style for every selector that needs to be recolorized. But it is not such productive as, for example, import necessary SASS file depending on what color theme was selected by user.
Is there any way to solve this problem in a better way?
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.
Currently we are trying to setup our React Applications with NX. Our application has a common layer which ships the native components like input, dropdows, cards, grids etc etc.
That common layer is shipping 3 files in their package for all components
Layout.min.css --- contains layouting css properties. for example width, padding, margin
white.min.css---contains colors properties for white theme
dark.min.css---contains color properties for dark theme
Along with that--package has all the scss variables which are declared and their values for each theme.
As nx has default support for SCSS, how should we approach to generate our app css files as follows
app.layout.min.css
app.white.min.css
app.dark.min.css
Ultimatly, theme switch will be handled programatically where we unload few files and load theme specific files.
We tried multiple native configurations of NX but we couldnt generate multiple css files as output.
There is another problem observed that as soon as we import the css file in any library componet it gets added on app.
fabricjs can change the font of a text in a canvas to a font family. For that the font needs to exist in the browser, either CSS or emb link.
I now want to add dynamically a font from a resource (google, self hosted ect) to the css populating it in the document via #font-face. I don't want to just list all fonts in the css beforehand because it can be a huge list. Is it possible to modify the running css in reactjs to add a font face to it?
Use CSS-in-JS solutions like emotion, styled component or radium
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.
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.