Popper arrow doesn't respect theme

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

When configuring the Popper component to display a pointer arrow, I expect the arrow will respond to theme changes, e.g. If my application is using a light theme I expect the Popper body and arrow to be white (in my case), however in dark mode the arrow remains white, despite the body of the Popper updating to black/grey.

Current Behavior 😯

Changing from light to dark theme does not update the Popper arrow, it remains white as in the light theme.

Steps to Reproduce 🕹

The issue can be reproduced via the live example in the MUI docs

1. Using the scroll playground example, configure the popper to display a pointer arrow
2. Switch the site to use the dark theme
3. Open the popper in the scroll playground example
4. Note the colour of the pointer arrow

Your Environment 🌎

Tech	Version
Material-UI	v4.1.3
React	v16.8.6
Browser	Chrome
TypeScript	Not used

[fraser-mcmillan]

Absolutely, will do @oliviertassinari !

[oliviertassinari]

@fraser-mcmillan Thanks for the report. The arrow color is hard-coded. What do you think of?

diff --git a/docs/src/pages/components/popper/ScrollPlayground.js b/docs/src/pages/components/popper/ScrollPlayground.js
index b3d522cf4..8a5ca75f4 100644
--- a/docs/src/pages/components/popper/ScrollPlayground.js
+++ b/docs/src/pages/components/popper/ScrollPlayground.js
@@ -51,7 +51,7 @@ const styles = theme => ({
       height: '1em',
       '&::before': {
         borderWidth: '0 1em 1em 1em',
-        borderColor: `transparent transparent ${theme.palette.common.white} transparent`,
+        borderColor: `transparent transparent ${theme.palette.background.paper} transparent`,
       },
     },
     '&[x-placement*="top"] $arrow': {
@@ -62,7 +62,7 @@ const styles = theme => ({
       height: '1em',
       '&::before': {
         borderWidth: '1em 1em 0 1em',
-        borderColor: `${theme.palette.common.white} transparent transparent transparent`,
+        borderColor: `${theme.palette.background.paper} transparent transparent transparent`,
       },
     },
     '&[x-placement*="right"] $arrow': {
@@ -72,7 +72,7 @@ const styles = theme => ({
       width: '1em',
       '&::before': {
         borderWidth: '1em 1em 1em 0',
-        borderColor: `transparent ${theme.palette.common.white} transparent transparent`,
+        borderColor: `transparent ${theme.palette.background.paper} transparent transparent`,
       },
     },
     '&[x-placement*="left"] $arrow': {
@@ -82,7 +82,7 @@ const styles = theme => ({
       width: '1em',
       '&::before': {
         borderWidth: '1em 0 1em 1em',
-        borderColor: `transparent transparent transparent ${theme.palette.common.white}`,
+        borderColor: `transparent transparent transparent ${theme.palette.background.paper}`,
       },
     },
   },