Material UI Dark Mode primary button invisible on appbar

Question

I am trying to use material-ui's dark mode for a react app. I browsed through the doc and managed to activate it but i have an issue: when using a basic AppBar and a primary button on it, the primary button is "invisible" - i am guessing its the same color as the AppBar background.

Is this normal behaviour or am I doing something wrong?

Here's a sandbox with a quick example:

https://codesandbox.io/s/material-demo-8o3kx

Thanks !

Answer 1

The below code works to set up the default dark theme from Material-UI, although it looks like the <AppBar> component is not adapted to the default material-UI dark theme: the text primary color has the same color as the background of AppBar, so as you noticed you can not see the button.

import React from "react";
import Typography from "@material-ui/core/Typography";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import {
  useTheme,
  createMuiTheme,
  MuiThemeProvider
} from "@material-ui/core/styles";

function WithTheme() {
  const theme = useTheme();

  return (
    <AppBar position="static">
      <Toolbar>
        <Button color="secondary">Primary</Button>
        <Button color="primary">Login</Button>
      </Toolbar>
    </AppBar>
  );
}

const theme = createMuiTheme({
  palette: {
    type: 'dark', // Switching the dark mode on is a single property value change.
  }
});

export default function DarkTheme() {
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <WithTheme />
    </MuiThemeProvider>
  );
}