question-mark
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.

How do I set the global text color

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

106reactions
777akotcommented, May 3, 2019

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


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


color=“textPrimary” color=“textSecondary”

Thank you, Sleazer!

82reactions
lazeecommented, Apr 10, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to change text color globally? - CSS-Tricks
The 'global' text color is in your bootstrap.css file. body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; ...
Read more >
Change the default text color (font color) in Word
Go to Format > Font > Font. + D to open the Font dialog box. Select the arrow next to Font color, and...
Read more >
How to change default text color for entire site - Stack Overflow
In this, if you specify a rule like: body { color:red } , and then #id { color:blue } then the color will...
Read more >
How to Change Text and Background Color in CSS
To change the background color of the inline text, go to the <head> section. Simply add the appropriate CSS selector and define the...
Read more >
How to Change the HTML Font Color - Kinsta
Before HTML5 was introduced and set as the coding standard, you could change the font color using font tags. More specifically, you'd use...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found