[Paper] Support dark mode brightening based on elevation by m4theushw · Pull Request #25522 · mui/material-ui

m4theushw · 2021-03-27T02:40:29Z

Breaking changes

[Paper] Change the background opacity based on the elevation in dark mode. This change was done to follow the Material Design guidelines. You can revert it in the theme:

const theme = createTheme({
  components: {
    MuiPaper: {
      styleOverrides: { root: { backgroundImage: 'unset' } },
    },
  },
});

I have followed (at least) the PR section of the contributing guide.

Closes #18309
Based on #21748
Preview: https://deploy-preview-25522--material-ui.netlify.app/components/paper/
Reference: https://material.io/design/color/dark-theme.html#properties

mui-pr-bot · 2021-03-27T02:42:41Z

Details of bundle changes

@material-ui/lab: parsed: +0.05% , gzip: +0.09%

Generated by 🚫 dangerJS against fbfd6be

packages/material-ui/src/Paper/Paper.js

oliviertassinari

Looks almost good

packages/material-ui/src/Paper/Paper.js

oliviertassinari · 2021-03-31T18:08:56Z

Josh is probably busy. @m4theushw Do you want move forward? :)

joshwooding

LGTM

packages/material-ui/src/Paper/Paper.js

itsUndefined · 2021-04-23T16:18:45Z

packages/material-ui/src/styles/createPalette.js

-    paper: grey[800],
-    default: '#303030',
+    paper: '#121212',
+    default: '#121212',


Sorry for the question but is it expected to have such a dark background color as the default on the default dark theme? It doesn't look right.

Yes, this color comes from the Material Design specification: https://material.io/design/color/dark-theme.html#properties

I do agree with this general comment, it does look a bit strange. I'm saving this feedback. We have a designer joining the team full-time in the new few weeks.

Material Design: #121212 brightness 7%

YouTube Music: #040404 brightness 1%

YouTube: #131313 brightness 9%

Facebook: #131314 brightness 10%

Chakra: #141821 brightness 17%

HeadlessUI: #0E131D brightness 15%

linear.app product: #17181B brightness 14%, linear.app homepage #070707 brightness 2%

Twitter: #000000 brightness 0%, Dimmed #111820 16%

GitHub: #0C0E12 brightness 9%, Dimmed #1A1D22 18%

StackOverflow #222222brightness 18%

It also seems that the documentation should use the default values of the palette.

wow this is dark..

I was also initially shocked at the difference, but I've actually come to quite like the new Material defaults. I assume it also makes extra sense for newer fancy screens which can optimize energy usage for dark pixels.

I imagine it would be useful though (if it doesn't already exist) to be able to specify a base brightness and have the rest of the elevation levels automatically scale, similar to how color palettes can automatically infer dark/light based on tonalOffset.

I imagine it would be useful though (if it doesn't already exist) to be able to specify a base brightness and have the rest of the elevation levels automatically scale, similar to how color palettes can automatically infer dark/light based on tonalOffset.

Done in #25522

Ahh I guess I should have looked at the actual code :P, I see the backgroundImage alphaOverlay now. Awesome stuff!

Jack-Works · 2021-04-30T07:57:46Z

hello, this is a breaking change visually, it should be documented

Jack-Works · 2021-04-30T08:07:43Z

I found this new behavior does not look good in our product. Use the following code in the theme to disable it temporally.

    components: {
        MuiPaper: {
            styleOverrides: { root: { backgroundImage: 'unset' } },
        },
    },

oliviertassinari · 2021-04-30T09:29:49Z

@m4theushw Do you want to update the migration to the v4 docs page with the proposed workaround? I have updated the PR's description to make it easier for developers.

Jack-Works · 2021-04-30T09:36:04Z

I think my workaround is not the correct way to recommended to all developers, there should be a new prop to control this behavior so developers can set this prop default to false in the theme to get the old behavior.

oliviertassinari · 2021-04-30T09:38:10Z

@Jack-Works This behavior is disabled when the variant is outlined or the elevation is zero. Is this enough?

Jack-Works · 2021-04-30T09:39:59Z

@Jack-Works This behavior is disabled when the variant is outlined or the elevation is zero. Is this enough?

But what if I want elevation or variant? 🤔

oliviertassinari · 2021-04-30T09:53:38Z

@Jack-Works If you want a variant elevation with an elevation and not the background change in dark mode. Do you really want to use the concept of Paper from Material Design? You could do:

<Box sx={{ boxShadow: 3, p: 2, borderRadius: 1 }}>Hello</Box>

@m4theushw What do you think?

bneigher · 2021-04-30T19:25:15Z

I ended up getting dark mode looking as it did before just by changing the default palette base:

import React, { useMemo } from 'react'
import { createMuiTheme, ThemeProvider } from '@material-ui/core'
import { deepPurple, pink, red } from '@material-ui/core/colors'
import useDarkMode from 'use-dark-mode'
import CssBaseline from '@material-ui/core/CssBaseline'

function Theme({ path, children }) {
    const darkMode = useDarkMode()
    const isDark = darkMode.value
    const theme = React.useMemo(() => {
    return createMuiTheme({
      palette: {
        mode: isDark ? 'dark' : 'light',
        primary: PRIMARY,
        secondary: SECONDARY,
        error: red,
        background: {
          paper: isDark ? '#424242' : '#fff',
          default: isDark ? '#303030' : '#fafafa',
        },
      },
    })
  }, [darkMode.value])
  return (
    <ThemeProvider theme={theme}>
      <>
         <CssBaseline />
         {children}
      </>
    </ThemeProvider>
  )
}

export default Theme;

[Paper] Support dark mode brightening based on elevation

f6d8593

oliviertassinari added scope: paper Changes related to the <Paper>. design: material This is about Material Design, please involve a visual or UX designer in the process labels Mar 27, 2021

oliviertassinari reviewed Mar 27, 2021

View reviewed changes

packages/material-ui/src/Paper/Paper.js Outdated Show resolved Hide resolved

packages/material-ui/src/Paper/Paper.js Outdated Show resolved Hide resolved

packages/material-ui/src/Paper/Paper.js Show resolved Hide resolved

m4theushw added 2 commits March 28, 2021 15:25

Add overlay only when variant=elevation

dc345f2

Add demo to docs

046adfb

m4theushw marked this pull request as ready for review March 29, 2021 21:53

oliviertassinari approved these changes Mar 30, 2021

View reviewed changes

packages/material-ui/src/Paper/Paper.js Outdated Show resolved Hide resolved

oliviertassinari added the breaking change Introduces changes that are not backward compatible. label Mar 30, 2021

Move getOverlayAlpha to parent scope

52d55f7

oliviertassinari requested a review from joshwooding March 30, 2021 12:41

m4theushw added 2 commits March 30, 2021 09:45

Show two columns above the 'md' breakpoint

384eede

Update TS demo

fbfd6be

oliviertassinari approved these changes Mar 31, 2021

View reviewed changes

m4theushw merged commit 1f267fa into mui:next Mar 31, 2021

m4theushw deleted the dark-mode-brightening branch March 31, 2021 18:10

joshwooding reviewed Apr 1, 2021

View reviewed changes

packages/material-ui/src/Paper/Paper.js Show resolved Hide resolved

itsUndefined reviewed Apr 23, 2021

View reviewed changes

oliviertassinari mentioned this pull request Apr 27, 2021

Default dark mode paper/default are now the same and aggressively dark #25629

Closed

m4theushw mentioned this pull request Apr 28, 2021

[RFC] Material-UI v5 🚀 #20012

Closed

oliviertassinari mentioned this pull request May 1, 2021

[internal] Batch small changes #26083

Merged

This was referenced Jun 13, 2021

[docs] Sync default theme with the theme used by the documentation #22112

Closed

[docs] Move custom theme to frame #26744

Merged

eps1lon mentioned this pull request Aug 27, 2021

Custom components can no longer be styled the same way as Paper #27980

Open

1 task

mnajdova mentioned this pull request Oct 12, 2021

[AppBar] Transparent backgroundColor doesn't work in V5 #28997

Closed

2 tasks

m4theushw mentioned this pull request Nov 16, 2021

[DataGridPro] Add column pinning mui/mui-x#2946

Merged

sjdemartini mentioned this pull request Jan 2, 2022

ListSubheader can no longer be styled to match the background color of dark-mode Paper components #30468

Open

2 tasks

Uh oh!

Conversation

m4theushw commented Mar 27, 2021 • edited by oliviertassinari Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Breaking changes

Uh oh!

mui-pr-bot commented Mar 27, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

oliviertassinari left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

oliviertassinari commented Mar 31, 2021

Uh oh!

joshwooding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

itsUndefined Apr 23, 2021

Choose a reason for hiding this comment

Uh oh!

m4theushw Apr 23, 2021

Choose a reason for hiding this comment

Uh oh!

oliviertassinari Apr 23, 2021

Choose a reason for hiding this comment

Uh oh!

bneigher Apr 26, 2021

Choose a reason for hiding this comment

Uh oh!

jqrun Apr 27, 2021

Choose a reason for hiding this comment

Uh oh!

oliviertassinari Apr 27, 2021

Choose a reason for hiding this comment

Uh oh!

jqrun Apr 28, 2021

Choose a reason for hiding this comment

Uh oh!

Jack-Works commented Apr 30, 2021

Uh oh!

Jack-Works commented Apr 30, 2021

Uh oh!

oliviertassinari commented Apr 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Jack-Works commented Apr 30, 2021

Uh oh!

oliviertassinari commented Apr 30, 2021

Uh oh!

Jack-Works commented Apr 30, 2021

Uh oh!

oliviertassinari commented Apr 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bneigher commented Apr 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

m4theushw commented Mar 27, 2021 •

edited by oliviertassinari

Loading

mui-pr-bot commented Mar 27, 2021 •

edited

Loading

oliviertassinari commented Apr 30, 2021 •

edited

Loading

oliviertassinari commented Apr 30, 2021 •

edited

Loading

bneigher commented Apr 30, 2021 •

edited

Loading