Material-ui: iOS 14 / UIKit Design/Theme switch inside theme.tsx

[PeerRich]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

In my current app I use Material-UI for the amazing collection of components, however I've adopted some iOS design guidelines, such as the stained glass "Paper":

to achieve this, I've overwritten some styles in theme.tsx:

const theme = createMuiTheme({
  overrides: {   
    MuiPaper: {
      rounded: {
        backgroundColor: "rgba(33,33,33,.6)",
        backdropFilter: "blur(10px)",
      },
    },
  }
});

Examples 🌈

some videos by me: https://twitter.com/Peer_Rich/status/1285667031069741056, https://twitter.com/Peer_Rich/status/1285683687598755840

SwiftUI transparency demo: https://twitter.com/MengTo/status/1279889859558195200

or framework7: https://framework7.io/

I think it could be done inside palette by:

palette: {
    type: 'dark',
    style: 'iOS',
  },

Motivation 🔦

This got me thinking: It would be amazing to have an option in theme.tsx that would apply some (or all) iOS guidelines on top of Material-UI.

I think it would be a huge relief if engineers could switch between "Google" Material UI and iOS Design. (like framework7, but with Material-UI Syntax, components etc.)

If this will not make it to Material-UI Core since it's not Material Desgin (which I understand, I mean it's in the name) I'm happy to collaborate and build a custom theme with plenty of overrides as an Addon or Material-UI Lab. Hit me up on Github or [email protected]

Cheers,
Peer

[oliviertassinari]

We are experimenting with this on https://github.com/mbrookes/material-uios

@mbrookes What blockers did you identify?

[PeerRich]

Error 404, possibly no access rights?

[oliviertassinari]

Yeah, it's private

[PeerRich]

Would love to collaborate. Btw. Sick response time Olivier!

[mbrookes]

What blockers did you identify?

• The need for custom variants in order to move as much styling as possible to the theme
• The need for a specific component structure in order to achieve a layout that matches iOS (not just style and go)

Where I got stuck and set this aside was in the title-bar transition for nested pages.

@PeerRich I'll see what the state of the repo is vs my local copy and invite you. It was only ever intended as an experiment, but if you have some ideas to share, I'd be glad to hear them.

[mbrookes]

@PeerRich I've updated the repo with local commits and invited you. I have some uncommitted local changes changes, mostly from experimenting with the title-bar transition, but not worth sharing.

[mbrookes]

[PeerRich]

Thank you for the invite. Will take a look at it and see if I can come up with some new ideas

Edit: Wow this looks really good! I didn't expect such an advanced repo when you first told me