While I don’t suggest mixing hex and RGB values, the theme object will take either color value. We have a state variable, darkTheme, that lets us know which mode (light or dark) the user has chosen. When creating the custom theme object, I created variables for primary, secondary, error, info, warning, and success. If you want more guidance on creating a Material-UI palette, check it out straight from the source! Implementation So, we created one palette for light mode, and a separate palette for dark mode. We found it too difficult to create a color palette that was pleasing to our client, and that provided enough contrast in both light and dark modes. Since our users often use the dark theme mode, we have to make it seamless to switch back and forth from light to dark mode. If the tonalOffset is raised to 0.4, then the main color is still, but light would be, and dark. If you’re referencing the previous way to create a color palette, the main color would be a shade, light, and dark. The tonalOffset value is a decimal value that determines how much difference there is between the light and main and main and dark variations, if the light and dark are not provided manually. The awesome part is that if you only provide a main hex or RGB value, Material-UI will calculate the light and dark variations for you! However, we found that the contrast wasn’t enough and we needed to raise the tonalOffset value. Each color has a light, main, and dark variation. The guidance from Material-UI is to create a color palette for multiple different background colors, including a light and dark theme mode, primary, secondary (with variants for both), error, info, warning, and success. We ended up not using them to categorize filters, and just used one color for the chips and used icons to categorize. It also seemed unorganized and a bit confusing. We found that by using more than two colors one the screen in one place was distracting to the user, and pulling all of their focus on those customized chips. At one point, I created customized chips for all of the 13 hues for use when we’re categorizing filters. Making that huge color palette about made my eyes cross, and I noticed that when wireframing, we really only used a handful of colors.
Thankfully, there’s no longer the need to create a massive color palette with 14 shades of 13 hues.
MATERIAL UI DARK MODE SWITCH HOW TO
While many parts of that blog are still relevant, such as how to customize different components, Material-UI (user interface) has streamlined the process to create a custom theme.
MATERIAL UI DARK MODE SWITCH SERIES
Last year, I created a series of blogs regarding creating a custom Material-UI theme ( Part 1, Part 2, Part 3).
0 kommentar(er)
