Material-ui: How do I set the global text color

[afridley]

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 | |

[lazee]

It's all documented here : https://material-ui-next.com/style/color/

[oliviertassinari]

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",
  },
});

https://codesandbox.io/s/vvpnpy6jql

[afridley]

@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-

[Sleazer]

@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/

[777akot]

))) Spend a couple of hours trying to figure it out... SO:

palette:  { 
      text: {
          primary: "#ffffff",
          secondary: "#00000"
    } 
}

color="textPrimary"
color="textSecondary"

Thank you, Sleazer!

[oliviertassinari]

The situation should have improved in v4. The CssBasline component applies theme.palette.text.primary to the body element.