[theme] Improve default theme dark colors

[yursha]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The primary and secondary colors are identical between the light and dark theme.

Expected Behavior 🤔

The color should becomes less saturated as in the demos of the documentation and as specified by the Material Design specification.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-ui-dark-theme-41nm4

Your Environment 🌎

Tech	Version
Material-UI	v4.7.2
React	16.12.0
Browser	Chrome Version 78.0.3904.108 (Official Build) (64-bit)

[yursha]

@oliviertassinari If you take care to follow the link I put in Steps to Reproduce, you will see that using CssBaseline doesn't help. I put a bare minimum example at that link, that uses just ThemeProvider, CssBaseline and Link. Therefore I don't have any parents which may interfere with the default styling. Aren't dark theme style supposed to apply to Link as well?

[oliviertassinari]

Oh, I see, then it's about picking a color with enough contrast :)

[oliviertassinari]

What do you think of the following?

https://material.io/design/color/dark-theme.html

diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js
index 4df6b5efc..b89dd0c19 100644
--- a/packages/material-ui/src/styles/createPalette.js
+++ b/packages/material-ui/src/styles/createPalette.js
@@ -79,16 +79,8 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {

 export default function createPalette(palette) {
   const {
-    primary = {
-      light: indigo[300],
-      main: indigo[500],
-      dark: indigo[700],
-    },
-    secondary = {
-      light: pink.A200,
-      main: pink.A400,
-      dark: pink.A700,
-    },
+    primary: primaryOption,
+    secondary: secondaryOption,
     error = {
       light: red[300],
       main: red[500],
@@ -100,6 +92,32 @@ export default function createPalette(palette) {
     ...other
   } = palette;

+  const primary =
+    primaryOption || type === 'light'
+      ? {
+          light: indigo[300],
+          main: indigo[500],
+          dark: indigo[700],
+        }
+      : {
+          light: indigo[100],
+          main: indigo[200],
+          dark: indigo[300],
+        };
+
+  const secondary =
+    secondaryOption || type === 'light'
+      ? {
+          light: pink.A200,
+          main: pink.A400,
+          dark: pink.A700,
+        }
+      : {
+          light: pink[100],
+          main: pink[200],
+          dark: pink[300],
+        };
+
   // Use the same logic as
   // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
   // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54

[Davst]

Ran into the above stated issue of the Link object not respecting light and dark variants defined in the theme. Started on a PR for a possible fix.

[oliviertassinari]

@Davst what do you think of #19105 (comment)