From 539fbf3d024a439e82d416ef78eb145b7030e540 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Thu, 2 Dec 2021 11:11:49 +0100 Subject: [PATCH 1/2] [docs] Explain how Paper changes shade in dark mode --- docs/src/pages/components/paper/paper.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/pages/components/paper/paper.md b/docs/src/pages/components/paper/paper.md index fb7629c35c523b..1d3efc20dbabe4 100644 --- a/docs/src/pages/components/paper/paper.md +++ b/docs/src/pages/components/paper/paper.md @@ -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. +It may be confusing when overriding the Paper's styles, as setting just the `background-color` 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`). From 3ff05114538a28bfd4db061facdf7eb9c24e912d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Thu, 2 Dec 2021 11:20:01 +0100 Subject: [PATCH 2/2] Update docs/src/pages/components/paper/paper.md Co-authored-by: Benny Joo --- docs/src/pages/components/paper/paper.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/paper/paper.md b/docs/src/pages/components/paper/paper.md index 1d3efc20dbabe4..4d0cfa43838fd2 100644 --- a/docs/src/pages/components/paper/paper.md +++ b/docs/src/pages/components/paper/paper.md @@ -29,5 +29,5 @@ The elevation can be used to establish a hierachy between other content. In prac {{"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. -It may be confusing when overriding the Paper's styles, as setting just the `background-color` will not affect the elevation-related shading. +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`).