Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[theme] Expose the theme.palette.augmentColor function

See original GitHub issue

Random idea from a user:

material-ui removed recently the palette.palette.background.* colors. Maybe I got it wrong, but I find these colors quite useful when creating panels and stuff for an app, having a selection of colors I can pick from.

I would be nice to have material-ui generate a decent selection of colors, based on the type of palette (light or dark). This could be done different ways:

provide a fixed set of shade of grey
in addition to palette.primary and palette.secondary, have palette.background behave the same way. When palette.background.primary is set, compute dark, light and contrastText colors. For example, providing grey[800] would generate decent dark background shades, grey[300] would generate light background shades.
expose the colors functions that compute dark, light and contrastText so users are free to setup background values easily instead of harcoding colors.

In particular, this would avoid doing things like theme.palette.grey[theme.palette.type === 'light' ? 300 : 900] in each components.

Issue Analytics

State:
Created 6 years ago
Comments:7 (7 by maintainers)

Top GitHub Comments

1reaction

oliviertassinaricommented, Mar 4, 2018

@MichaelMure Thanks for the feedback. So, I believe we can move forward with the issue by exposing the augmentColor() function to the public API. It can be useful when dealing with a wider set of colors. I have renamed the issue accordingly.

0reactions

AiusDacommented, Apr 10, 2018

Hi, I have a PR for this: https://github.com/mui-org/material-ui/pull/10985, it’s useful for me.

Top Results From Across the Web

[theme] Expose the theme.palette.augmentColor function

expose the colors functions that compute dark , light and contrastText so users are free to setup background values easily instead of harcoding ......

Palette - Material UI - MUI

The theme exposes the following palette colors (accessible under theme.palette. ): primary - used to represent primary interface elements for a user.

Using additional palettes beyond primary, secondary and error

Worked this one out. This is added on to the end of the code in the question above: theme.palette.augmentColor(theme.palette.extra, 500, ...

Top 5 @material-ui/utils Code Examples - Snyk

primary: augmentColor(primary), // The colors used to represent secondary interface elements for a user. secondary: augmentColor(secondary, 'A400', 'A200', ' ...

Using Theme Palettes - Developer Training

Theme palettes allow themes to expose sets of configuration options to ... some functional) that are consolidated behind simpler selectable named options.