Material-ui: How do I set the global text color
I have a dark theme that is currently rendering all the text in all the components as black on a black background. The only one that is white is the menu which has been set through an override
I have tried several different things as you can see below. I am not sure but the docs reference a palette.text but that does not seem to work.
How do I set the global font color
import { createMuiTheme } from "material-ui/styles";
const dark = createMuiTheme({
shadows: ["none"],
type: 'dark',
typography: {
color: 'white',
},
palette: {
background: {
paper: '#000',
default: '#000',
},
text: {
default: '#fff',
},
textColor: '#fff',
primary: {
main: '#ff0000',
},
},
root: {
textDecoration: 'none',
},
overrides: {
MuiPaper: {
root: {
boxShadow: 'none',
},
},
MuiBackdrop: {
root: {
backgroundColor: 'rgba(255, 0, 0, 0.75)',
},
},
MuiAppBar: {
root: {
background: 'white',
boxShadow: 'none',
},
colorPrimary: {
backgroundColor: 'transparent'
}
},
MuiIconButton: {
root: {
marginLeft: -12,
marginRight: 20,
color: 'white',
}
}
}
});
export default dark;
- [ x] I have searched the issues of this repository and believe that this is not a duplicate.
Context
https://codesandbox.io/s/kk6zp8jw07
Your Environment
| Tech | Version |
|--------------|---------|
| Material-UI | 1.00beta.40 |
| React | 16.3.0 |
| browser | chrome |
| etc | |
afridley
All 6 comments
It's all documented here : https://material-ui-next.com/style/color/
lazee
on 10 Apr 2018
How do I set the global font color
@afridley There is no global font color. Most of the color you are looking for comes from the typography part. You need to read the documentation more closely:
const theme = createMuiTheme({
- type: "dark",
palette: {
+ type: "dark",
},
});
oliviertassinari
on 10 Apr 2018
@oliviertassinari Ahh thanks for the quick reply I cant believe I missed that. I was thinking the note about how
palette: {
+ type: "dark",
},
changes palette.text meant I would be able to manually change the default font color with that if I knew what to put in it.
like how palette.background has paper and default in it. I thought maybe palette.text may have similar values. But I couldn't find documentation on where paper and default came from to be included in palette.background
So I'm wondering if there is documentation on these values because I can only seem to find it on issue tickets.
palette.text
palette.divider
palette.background
palette.action
ex This works
palette: {
background: {
paper: '#000',
default: '#000',
},
},
But what values can I change in
palette: {
text: {
?: '#000',
?: '#000',
},
},
Based on the documentation here https://material-ui-next.com/customization/themes/#type-light-dark-theme-
afridley
on 10 Apr 2018
@afridley The values you can change are primary, secondary, disabled and hint. Looking through the default theme objects might help you grasp what can be changed and how.
Here is a link https://material-ui.com/customization/default-theme/
Sleazer
on 27 Aug 2018
))) Spend a couple of hours trying to figure it out... SO:
palette: {
text: {
primary: "#ffffff",
secondary: "#00000"
}
}
color="textPrimary"
color="textSecondary"
Thank you, Sleazer!
777akot
on 3 May 2019
The situation should have improved in v4. The CssBasline component applies theme.palette.text.primary to the body element.
oliviertassinari
on 4 May 2019
Related issues
activatedgeek
·
3Comments
ghost
·
3Comments
revskill10
·
3Comments
mb-copart
·
3Comments
iamzhouyi
·
3Comments
Most helpful comment
))) Spend a couple of hours trying to figure it out... SO:
color="textPrimary"
color="textSecondary"
Thank you, Sleazer!