Skip to content

Commit

Permalink
[docs] Explain how Paper changes shade in dark mode (#30003)
Browse files Browse the repository at this point in the history
Co-authored-by: Benny Joo <sldisek783@gmail.com>
  • Loading branch information
michaldudak and hbjORbj authored Dec 2, 2021
1 parent ff5459c commit 77b10d2
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions docs/src/pages/components/paper/paper.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,7 @@ If you need an outlined surface, use the `variant` prop.
The elevation can be used to establish a hierachy between other content. In practical terms, the elevation controls the size of the shadow applied to the surface. In dark mode, raising the elevation also makes the surface lighter.

{{"demo": "pages/components/paper/Elevation.js", "bg": "inline"}}

The change of shade in dark mode is done by applying a semi-transparent gradient to the `background-image` property.
This can lead to confusion when overriding the styles of `Paper`, as setting just the `background-color` property will not affect the elevation-related shading.
To ignore the shading and set the background color that is not affected by elevation in dark mode, override the `background` property (or both `background-color` and `background-image`).

0 comments on commit 77b10d2

Please sign in to comment.