My team and I are working on a social media application built with React that we'd like to add a dark mode and light mode to. I've demo'd it so that I can write ternary in one class at a time and change state on, and change the css style. I was wondering if there was a better way to implement a dark or light mode or if there is a way to switch all class names at once, i.e. with a switch in the nav bar. I've looked up several tutorials but I haven't found a way to implement it optimally.
Related
I'm creating a very big project and have a huge amount of styles there. I created a mix-in and implemented dark properties for all styles. Approximately so.
footer{
background: $white;
#include darkScheme{
background: $dark;
}
}
It was a lot of work for more than one day. long story short: I wanted to make a switch because I know that people like different interface colors and it would be convenient for users. I saw how easy dark mode switcher work in the mozilla developer tools and decided to make my own switcher in a couple of minutes. I slowed down a bit until realized that I can't just toggle system theme settings with js, I had a question that answered by Federico Moretti. I don't understand why make such restriction just for color modes.
what is my philosophical paradigm? It turns out that the only way to solve my problem is to write an additionally code to switch on another color theme, which, in fact, is neither dark nor light, but completely repeats them. Which seems like a terrible practice to me because it creates a lot of redundant code everywhere.
I write in laravel and use mix, it generates automatic code in the header and everything works fine there, I don't want to change anything. I already have styles that system sees and I just want to switch it for user natively, but I can't.
<link rel="stylesheet" href="/css/app.css">
despite the fact, that i use <picture> tag with media="(prefers-color-scheme: dark)" inside html.
I have a few questions:
Am I complicating development for myself or is there a rational grain in the way I described it above?
What is the best way to organize a very large number of styles and maybe not use Code like this for simple switching?
How does theme switchig in Firefox dev. panel work and can it be emulated like a function in chrome for exmple with js or css?
Thank you for your replies.
I am trying to understand the theming of MUI. There is a section dedicated to theming. I understand that I can change the theme.
My question is:
There are three colors I can define inside primary color, namely: main, dark and light. I could not figure out what light color property inside of primary does.
This link shows the color used by MUI
https://mui.com/material-ui/customization/default-theme/. If you expand palette > primary. There is light color property but I could not see how or where it is used. I tried on button but that color does not appear on any state(hover, active) of button
NOTE: I don't believe its related to dark and light theme.
Yes, it's not related to the light/dark theme, the mode property is responsible for this.
pallete -> mode: 'light'/'dark' - switching between the modes.
The pallete -> main -> light is just a color which you can configure and use through ypur app. But it's not only the main property, in pallete you can see from the docs that there are a lot of different theming use cases like success, secondary, info, etc., and all of them have the light property. So you can use the light and dark variants of a certain color. The use cases are many and differ.
Ref to mui pallete docs: https://mui.com/material-ui/customization/palette/
#Dobromir Kirov, Thanks for the answer. I believe all the colors(main, light, dark) are not used on the every component. The link below demonstrates the example of usage:
https://codesandbox.io/s/confident-pine-3wpr8p?file=/demo.js
In the example I can see:
The main and dark color of success is used on the Button.
The light color is of the success is used on the Alert.
Even though I have defined all three colors (main, dark, light). It depends on the component.
I want to build the simplest dark/light toggler button in react, there is. So far I have made a toggler component and gave it a state with
this.state = {style: './App.css'}
and 2 functions one is setting the this.state.style to ./darkmode.css the other one is back to ./App.css I binded them to 2 buttons. My question is, is there any way for using something like this: import 'this.state.style' instead of the import ./App.css in the App.js file? At least my way of thinking got me here, as this looked to be the easiest to do in order to change the stylesheet of the page. There is no big deal in the css files only smooth camera and bg color.
I don't think you can do that, but on the JS side you can change the class of the body element when pressing the button with .TogggleClass(). On the CSS side you just change the css.
the most suitable solution for making simple dark / light mode is by using Context API and useContext Hook it is easier, simpler and more readable than using any other solutions, you can make a whole new themes with this solution. so give it a try and you will definitely enjoy with the result and the experiment.
I'm looking to find best practices for providing developers the ability to style elements that exist within my React shared component.
For instance, I have a drop down and I wanted the developers to be able to select a predefined theme that would enable then to select a highlight color, font size, font family for the list element that exists within my drop down component. I created enums for the each of the default themes and provided a way to allow devs to define the theme object and add css to the properties that sat behind that enum. I then injected the style into the functional component.
However, I quickly realized that if I didn't provide a way for the developer to lets say adjust a facet of an element outside of the scope of the theme interface such as the font weight, the developer would not be able to style it and i'd have to go in and add it in and test that it works with all the other style combinations which became tedious and a lot of overhead.
I was wondering if there is an implementation whereby I provide refs to the elements in the component and provide and open-ended CSSProperties style prop that would allow the dev to style to their hearts content? Is there a best practice to do this? Please provide a short example if possible?
One caveat is that frameworks such as Next JS will encode the css modules and make it difficult to allow the user to provide css that'll manipulate the component due to the css element encoding or appended id's. This is why I thought the refs approach might work.
The best solution for you would be using :part . This allows styling through the shadow dom boundary of the parts of your component that you want.
See:
mozilla documentation
an explanation by the person who proposed this: explainer
and some other documentation
I am new to React but have not found a suitable solution to my first problem on the job.
The specific context is of a navigation component that composes several other components and together they are a redistributable unit, independently testable as a whole module.
The use case of the component is to sometimes render it in desktop mode using React media queries, and other times in mobile - in which case it needs decorated with flyout behaviour.
So I want to decouple the navigation component from having to know about flyout. In respect of the 'tell don't ask' principle or event driven I want to be able to notify a parent that navigation has changed and depending on how this component is implemented respond accordingly (in mobile, the flyout needs to get hidden, in desktop there is no flyout decorator).
I looked at redux-ui which is a nice syntactic sugar using annotations but falls down when a property it is trying to set in the state hierarchy doesn't exist. And besides, this breaks the decoupling model.
I am a little abstract here I realise but does anyone have a recommendation on how I might approach this? I suspect that a possible solution might involve not having a hierarchy (is-a) imposed by the decorating wrapper and rather has-a flyout capability but would welcome industry experience on this.
Thanks
There are a few ways to handle this. The simplest would be to do it purely in CSS. Have all the HTML for the component always in the component and only the CSS would know about mobile or not.
Alternatively, you could have a piece of global state that gets set when the app loads and tells the app whether it's on mobile or desktop, and then pass that down to any relevant components. This method would be a bit of a pain because 'mobile' and 'desktop' are really just 'small screen' and 'larger screen' and as a result, this may change while the user is in the middle of using the app (like changing screen size, for example). So you'd have to keep track of all that with a bunch of listeners that are constantly listening for window resize events.
The simplest solution does seem to be pure CSS here.