I understand that in MaterialUI, it is possible to customize the theme to use different colors.
The colors exposed by MaterialUI, have different shades. For instance:
import purple from '#material-ui/core/colors/purple';
const theme = createMuiTheme({
palette: {
primary: {
main: purple,
},
secondary: {
main: "#22B469",
light: "rgb(78, 195, 135)",
dark: "rgb(23, 125, 73)",
contrastText: "#ffffff"
},
},
});
Looking at the console.log(theme), we see that the primary color is filled with shades, but not for the secondary color, where the color has been overridden by a hex color code.
In MaterialUI documentation, it's only mentioned to use light, main, dark, and contrastText when using a custom hex color.
Sure, I can add those shades one by one under the secondary key, but this solution doesn't look elegant.
What are the best practices when overriding a theme color with hex code and is there a way to auto-generate the shades from a custom hex color?
You can make a custom color generated here in a module and import it.
const amber = {
50: '#fff8e1',
100: '#ffecb3',
200: '#ffe082',
300: '#ffd54f',
400: '#ffca28',
500: '#ffc107',
600: '#ffb300',
700: '#ffa000',
800: '#ff8f00',
900: '#ff6f00',
A100: '#ffe57f',
A200: '#ffd740',
A400: '#ffc400',
A700: '#ffab00'
};
const _default = amber;
exports.default = _default;
import purple from '#material-ui/core/colors/purple';
import indigo from '#material-ui/core/colors/indigo';
const theme = createMuiTheme({
palette: {
primary: {
main: purple,
},
secondary: {
main: purple,
light: "rgb(78, 195, 135)",
dark: "rgb(23, 125, 73)",
contrastText: "#ffffff",
indigo: indigo //<---------- do what you want
},
},
});
then in your style definition:
{...
root: {
color: theme.palete.secondary.indigo[700],
},
...}
Related
I'm using MUI & REACT for my web application but was wondering how could you fill a SVG with the color value defined in my MUI palette.
My palette looks like this:
const theme = createTheme(
{
palette: {
mode: "light",
primary: {
main: "rgba(33, 150, 243, 1)",
dark: "rgb(31,141,229)",
light: "rgb(35,157,253)"
},
secondary: {
main: "rgba(255, 82, 82, 1)",
dark: "rgb(232,74,74)",
light: "rgb(253,92,92)"
},
background: {
main: "hsl(0, 0%, 87%)",
default: "hsl(0,0%,95%)"
},
common: {
main: "hsl(0, 0%, 96%)",
white: "hsl(0,0%,100%)"
},
text: {
primary: "#232323",
secondary: "#444444"
}
}
},
localsMui[lang]
)
And the SVG which I try to apply the color:
<LogoutIcon fill="primary.main"/>
Does anyone have an idea?
I tried to use useTheme() but it doesn't work either.
I am making use of both of the primary and secondary buttons on my app.
It seems that by default the primary button's color is white, which is fine. But I need my secondary button color to also be white, which it is not.
Here is what my code currently looks like:
const theme = createMuiTheme({
palette: {
primary: {
main: '#FF0000'
},
secondary: {
main: '#00FF00'
},
// Probably unrelated? But tried anyway...
text: {
primary: '#FFFFFF',
secondary: '#FFFFFF'
}
},
// Can override primary's text color from here, but no clue how to
// do so with the secondary
MuiButton: {
text: {
color: '#FFFFFF'
}
}
});
// ...
// In my component:
// Expected both buttons to have white text color, however secondary has black text. Need to override this so that both buttons have the same text color.
function MyComponent () {
return (
<ThemeProvider theme={theme}>
<Button color='primary'>Primary</Button>
<Button color='secondary'>Secondary</Button>
</ThemeProvider>
)
}
Edit: I did notice that it seems that the the button's text color is tied to it's background color. So if I put both primary and secondary buttons the same color, both their background color will default to the same. Nevertheless, my question still stands, how can I control this? Mainly for the secondary button?
You can set a contrast text as per the below
const theme = createMuiTheme({
palette: {
primary: {
main: "#FF0000",
contrastText: "#ffffff",
},
secondary: {
main: "#00FF00",
contrastText: "#ffffff",
},
},
});
I am creating a theme using createMuiTheme():
import { createMuiTheme, responsiveFontSizes } from '#material-ui/core/styles';
const theme = responsiveFontSizes(
createMuiTheme({
palette: {
type: 'dark',
primary: {
main: '#c5cae9',
light: '#f8fdff',
dark: '#9499b7',
contrastText: '#212121',
},
secondary: {
main: '#5c6bc0',
light: '#8e99f3',
dark: '#26418f',
contrastText: '#ffffff',
},
},
typography: {
fontFamily: [
'Roboto',
'Arial',
'"Helvetica"',
'sans-serif',
].join(','),
},
}),
);
export default theme;
When looking at the default theme, I'm missing a lot of properties like breakpoints, direction, shadows, spacing, and etc.
Even when those properties are omitted, does createMuiTheme() provide default values that populate those fields? Or do I have to provide those values myself.
Take a look at createMuiTheme options signature
(Object): Takes an incomplete theme object and adds the missing parts.
So yes, your custom theme will be merged with MUI's default theme. See the docs here
const options = {palette:{/*such empty*/}}
export const theme = createMuiTheme(options)
I have this button on my page that changes the theme on the page from dark to light.
Text changes to white and background changes to black then I click again vice-versa. I did not specifically gave a color prop or background prop to any element but everything works. The problem is with the below buttons
As you see they are red and coming from primary.light, though when the dark theme active it needs to be primary.dark but it doesn't...
const theme = createMuiTheme({
palette: {
type: mode,
primary: {
light: "#FF0000",
main: "#3f50b5",
dark: "#002884",
contrastText: "#FF0000"
},
secondary: {
light: "#ff7961",
main: "#f44336",
dark: "#ba000d",
contrastText: "#000"
}
},
typography: {
useNextVariants: true
}
});
I have a theme with two text colors: #211806 and #010F1B.
const theme = {
palette: {
...
text: {
primary: '#211806',
secondary: '#010F1B'
},
...
}
};
However, I need to modify each text color in accordance with the state of the text (header, body, disabled and so on). Looking at the default theme, the palette is supposed to be:
const theme = {
palette: {
...
text: {
primary: "rgba(0, 0, 0, 0.87)",
secondary: "rgba(0, 0, 0, 0.54)"
},
...
}
};
so that it does not expect that one has more than one symbol color for the typography.
But I want to use both of the symbol colors depending on the base color (background, button and etc). How do I implement this two-colored text schema?