iOS 14 / UIKit Design/Theme switch inside theme.tsx

• 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 [e-mail]

Cheers, Peer

[mbrookes]

[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.