MUI V5: Themes (custom colors + fonts, dark mode, spacings, CSSbaseline)

In this video we go over Material UI V5's Theming! This is a big one, and probably the most important thing to know when using MUI V5. We go over how to override primary, secondary, and font variants from the default MUI Theme. Also how to create your own palette and colors and fonts! Also how to use CSSBaseline, make your app by default into dark mode, and so much more! You'll be using Material UI's createTheme and themeProvider components.
Join our coding Discord:
/ discord
LINKS
Code Sandbox: codesandbox.io/s/theming-in1w...
Material UI Getting Started Guide: mui.com/getting-started/insta...
MUI Theme Creator by Brian Reynolds: bareynol.github.io/mui-theme-...
MUI V5 Theme documentation: mui.com/material-ui/customiza...
MUI V5 default theme object: mui.com/material-ui/customiza...
SX Prop: • MUI V5: The SX Prop
MUI V5 Typography: • MUI V5: Typography
TIMESTAMPS
0:00 Intro
1:00 Default theme object & intro to themes
7:00 Colors (palette) overriding theme defaults
9:00 Dark mode & CSSBaseline
12:00 MUI Theme Creator tool by Brian Reynolds
13:45 Creating a custom color in the palette and using it with the SX Prop
17:30 Overriding Typography theme defaults
19:00 Custom typography variants & using it with the variant prop
19:45 Custom spacing & paddings
Follow me on Social Media:
/ sistillianthony
/ anthonysistilli

[@pim8268]

Wow, what a fantastic video / tutorial. I love the chill vibe the whole thing has going on. Thank you!

[@ricardourbieta]

Dude, I have never seen videos from you before, the way you explain things is so clear!! Thank you very much!! Congrats!!!

[@rick3741]

Thanks for taking the time to make this. Helps a lot in understanding official MUI documentation.

[@tomasburian6550]

Great video, brother. Helped me out a lot. I've been tasked with restyling nearly all components to suit the client's needs and it's good to see someone providing concise information.

[@HeinHtetAung-vh3uu]

Your presentation is very clear and effective. I've been struggling with toggling light and dark mode but you just solve my problem. Thank you so much. Please make more videos

[@jagpreetsingh8514]

Very well balanced and clear explanation. Thanks for creating this guide!

[@andyazma4198]

Awesome video 🙂 you are explaining the key concepts of MU that is very helpful for the beginners

[@Pain6944_]

Been looking for this kinda video for quite sometime now. Absolutely amazing 🔥

[@cpc4466]

Thanks for taking the time to explain it eloquently

[@roniaxelrad9493]

Thanks !! Awesome video. You are explaining so clear.

[@Rachel-db4kn]

This was great! Love how you explained things - thank you!

[@lararlante4399]

very helpful, saved me a lot of time looking for plug and play.. awesome video.. keep up!!

[@FelixvonLooz]

I'm a UX/UI designer creating a design system that is translated into MUI right now. Your video was very helpful for understanding what themes are about! Thanx a lot! The dynamic cropping around your head made me a bit nervous though :D

[@nicholasroman8071]

Than you Mr. Sistilli. Your tutorial is exactly what I need.

[@Brocollipy]

Thanks really helpful info and nicely presented 👌

[@alirezak5870]

your courses are amzing bro

[@yigitruzgaruzun7289]

Thank you for the value you add to us.

[@AnthonySistilli]

Glad it helped!!

[@alexcostal3749]

Amazing Video Man!

[@Anne-cv4ms]

Thank you for this video!!

[@moshedoytsh]

thanks a lot. like the way you explain things

[@user-il5lx4nd5e]

Perfect! Thanks mate!

[@ronpb3943]

Thanks for sharing material ui creator

[@yigitruzgaruzun7289]

We are eagerly awaiting your lesson on the use of Next/Image and Next/Link components with MUI.

[@AnthonySistilli]

[@paulinha-19]

thank you, your video helped me.

[@leenardlacay3422]

with that Krusty Krab background you have my sub and a like

[@caseyspaulding]

Great stuff thanks

[@jetmartin9501]

Good stuff. Thanks.

[@bhushanwagh7231]

Good explanation

[@rishabhsrivastav2842]

Thanks, Nice video

[@victorhouston]

saving my butt every single day 🙌

[@teewhy3828]

great stuff

[@elsayedrapaa4529]

Wow, Amazing We Needed Storybook Course, please

[@cmac2cmac]

Thank you a lot!

[@geoafrikana]

Thank you!

[@luisangelnaranjogiraldo4525]

Hello Friend! - Thanks for this tutorials, I'm learning from zero! and I have a question... Why in 21:18 when you used SX-PROP to chance margin, only aplies to left margin, what about top and bottom margin? I noted that if I removed the custom variant it works ok for all margin sides. It is missing some configuration in the custom variant?? Regards....

[@ahmedmusawir]

Awesome! How about making a nice full-blown Mui 5 project that we can code alongside to actually get a hands-on exp ... thanx in advance!

[@seanyoyoboy]

your a hero

[@mastercrusty79]

Hey mate, Love the videos. I would really like to know how to get CSS variables, output from a design system file into my theme. Can it be done?! I heard something about MUI CSSVars… Thanks again for the content. I am hooked.

[@mounzrulislamsobuj3327]

great video. Love from Bangladesh. 😍😍😍😍😍😍😍😍😍

[@whonayem01]

Thanks a lot.

[@sc06mad]

how does the dark mode work? does it change primary, secondary, etc colors automatically or I should also supply it with another theme properties for the dark mode?

[@FreeSudani]

cant wait for the 'theme creator' video

[@AnthonySistilli]

:D

[@brianrobinson2702]

Great video, fantastic info. Please, Sir, take a breath sometimes when speaking so we can keep up with you..sometimes it goes a little too fast and your words get lost in your breathing in. But great videos with well presented thorough explanations. Thanks

[@arda7506]

thank you a lot

[@Kapthos]

One thing that I don't understand...what if I don't want to customize a theme? What if I just want to use it out of the box? I saw some videos of the v4 where people used the "makeStyles((theme))" and then imported something like..."theme.palette. background.dark". Without having to create a new theme and importing a ThemeProvider, is there a way to do the same thing in the v5?

[@arcenme]

I just followed your video about dark mode. I want to ask, I created a custom palette with a new name and when I changed it to dark mode the color didn't change according to the mode. how do i fix it? Thank you sir

[@StoriesWithGR]

Such wonderful info! Just one thing's missing. How to import MUI theme into your own components to add / use your own properties inside it

[@Getentertainedp]

I think you can create the theme in a separate file and export it and then you can import it where ever you want and modify it.

[@saurabrakshit405]

Can you tell how to style a MUI Dialog Component in React Class Component ?

[@muhammad-sohail-ab]

Hey Anthony can you please showcase us the project or provide the project link that you built for your client with custom theme

[@adithyakiransekar]

Can you make a video on how to style MUI components?

[@BikoJeremyBiteete]

Thanks great video just one thing missing that I'm looking for, how to use custom fonts and not Google fonts or CDN links...

[@saddiqasafdar9462]

If You found that: pl share the link

[@FreeSudani]

would recommend using MUI for Figma design conversion or is it easier to use styling methods such as style components ?

[@AnthonySistilli]

It largely depends on who's creating the Figma designs! A lot of times, if the UX designer knows you'll be using MUI, they can download the MUI Figma components and build the UI with it. Then it's just a matter of creating the components correctly, and adding any additional stylings using the SX prop, makeStyles, or styled components, depending on what your preferred way of styling is :)

[@elyasmehraein7324]

😍

[@saddiqasafdar9462]

Where Did you explained FontFamily?🤔

[@user-yk4fh1fs1k]

Can you add a custom mode? E.g Grayscale mode?

[@kikevanegazz325]

Brilliant!

[@govinda399]

can you give short notes pdf of all thies?

[@waleedsharif618]

I dont get it, you are using here createTheme but i have seen some using also makeStyles, could you make video explaining differences, createTheme vs makeStyles vs useStyles vs createStyles vs withStyles … which one to use

[@AnthonySistilli]

createTheme creates the global theme for your entire react app + mui components. Example: make the default color of all text and buttons green. makeStyles / useStyles (the same thing essentially) is for styling individual components further. Example: style one specific button orange, and give it some extra width. :)

[@waleedsharif618]

@@AnthonySistilli does mui v5 have makeStyles ?

[@simplyizustic6122]

this doesn't work in typescript. i mean the creating custom colors bit

[@deathrace-bx5ne]

Good thing. Only bad thing was the code sandbox being slowww. try to use vscode next time

[@negarnasiri5378]

everything was fine but your talking speed is like light..too fast

[@Itanda]

could you plz used practical examples in you explanations, like use real code rather then explaining with words

[@tipfertilizer4595]

Too annoying to see that green screen video edit

[@ikik790]

Nice coding but learn editing as well 😂