Announcing: Material Design tutorial

There’s a new written tutorial - Customising the Material Design theme.

It covers the basics of customising your App’s look and feel using Colour Schemes and Roles, as well as the theming elements that are specific to the Material Design theme.

By the end we’ve built a basic Material Design app with a working navigation bar that can be shown/hidden, a tilte bar with highlighting icons, and examples of the main Material Design theme elements.

We hope this helps you get the most out of Material Design to produce beautiful apps!

3 Likes

great tutorial my only question that a user asked for is how might you setup a menu where you have say a top level menu and when you click it, it opens up more nav menus under it, this way you can organize your material UI app better without having to have links all over the side nav bar filling it up, you only then need a top level menu with sub nav links under it.

Is something like this possible in this system at all?

@p.colbert wrote a great Show And Tell post about how to create expanding/contracting tree structures:

great thanks and great article on the Material UI stuff

1 Like

Also stupid question how did you get that theme selector option under the theme? I’m using the material UI design but don’t see a theme option like you have in your tutorial? Maybe I missed something in the tutorial on that

Seems to be there if I create a new Material UI app so maybe this was something recently added I don’t remember deleting anything like this.

Thanks

From your earlier screenshots, you’re using our older theme (now euphemistically renamed “Classic”). That doesn’t have fancy features like colour switching!

It’s possible to switch the theme of an existing app, if you don’t mind getting your hands dirty: you can find the instructions in in this thread.

Great thanks yea I’m getting close to being ready for v1 launch of my app soon just a few more pages to create and I need to setup some validation stuff then I need to get some test users :slight_smile: